Generate HTML, CSS straight from Sketch using Protoship

Protoship is a code generator for designers and front-end programmers that creates HTML, SASS, and React components from a Sketch design. You will be able to go from a design to a working application in a matter of hours instead of having to go through the tedium of writing HTML and CSS manually.

This claim is typically met with skepticism. Isn’t generated code unusable? Are the elements going to be absolutely positioned? Would the CSS classes be named correctly, and how reusable would they be?

We’ll answer all those questions, but first, please watch this short preview!

Unlike the output from typical code generation tools, Protoship will produce good code indistinguishable from what a developer would painstakingly craft themselves. It eliminates mundane work like exporting and assembling assets, measuring margins and paddings, tweaking positions to achieve pixel-perfection, DRY-ing up the CSS using mixins, and similar tediums of front-end programming.

We also extract reusable React components from your design, figure out their props, and even build you a JSON schema with pre-populated content.

With Protoship, we want to bring the good old days of rapid application development pioneered by xBase, Visual Basic, Delphi, and their ilk, back to the web. A first step is to eliminate the waterfall nature of the design-development handoff process. Instead of treating the output of the visual design step as artifacts disconnected from the underlying code, we want an integrated workflow where we can freely move from design to code and vice versa. This is but a long journey, and we’re doing this one tool at a time.

Protoship Teleport is another tool in this direction that we recently released to our early beta users. Teleport lets you convert any existing website into a Sketch design and use it as a template to build something new out of. You can read more in our post introducing Teleport. We have also written in detail about our motivations and why we’re building Protoship in our story.

Sign up and become an early beta user

As you can see, the product is still in its early phase, and needs a ton of work. However, it already delivers value — we cannot imagine having to write HTML and CSS manually anymore, and after you try Protoship, we hope neither would you.

Join the beta waitlist at https://protoship.io/tools/uipad.html.

UPDATE: See UIPad’s latest demo and learn how it works in our latest post Design to Code with Protoship UIPad.