Generate HTML, CSS straight from Sketch using Protoship

Jasim A Basheer
Mar 7, 2016 · 2 min read

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.

Design + Sketch

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store