Design to Code
Figma to Tailwind

The best of hand-coded HTML & CSS,
at the speed of automatic code generation.

Decode lets you hand-craft the perfect HTML for your design without having to toil away measuring paddings and margins, picking fonts and colors, and doing any of that grunt-work.

Front-end development turbo charged.

Write semantic HTML in a familiar online editor. Decode will give each design element a 2 digit number. When you type it in, Decode will find that element, capture it — including margins, paddings, background images, and all its CSS, and insert it right into your HTML.

What is Decode

Protoship Decode is an HTML-writing tool. The front-end developer writes the HTML best suited for the design at hand. Decode makes the process faster by letting you pick and insert elements from the design directly into your HTML structure.

Thus the final code produced is very much your own. It does not have any confusing HTML or unnecessary CSS and you can modify and integrate it into your codebase with confidence.


How does it work

There are two main panes. On the left side is the HTML code editor where you write the HTML for the design. Oh the right side, the vector design mockup is shown.

You start by writing the HTML structure for the design. When you need to insert a design element - a text or an image - you can look at the mockup pane and find its number. Type in the number inside the HTML container and the element will be placed there automatically.

By the time you're done you'll have a full-width version of your design as HTML & CSS. You can then add the necessary width, max-width and other responsive Tailwind classes to the HTML to make the layout fluid and closer to the design.

Things you don't have to do:

  • Structure the design meticulously (like grouping or auto-layouts)
  • Inspect the design to find colors and fonts
  • Manually type values into a CSS file
  • Measure the gap between elements for paddings and margins
  • Export images, and link to them as <img src> or background-image

Things you have to do:

  • Write the HTML for your design in a familiar online code editor
  • Write Tailwind classes to make the HTML responsive

Support

Trouble figuring out how to convert a design

If you are having trouble with a design, write to us with the Decode URL of your project, along with the design you're working on. We'll do our best to help you out. Write to us at now at hello@protoship.io.

Report bugs or send feedback

We'll be glad to read your reports. Please write to us at hello@protoship.io.


FAQ

Do you need to know HTML & CSS to use Decode?

Yes, Decode embraces HTML & CSS. To use it, you have to know about the box model, flexboxes, and media queries.

Can UI/UX designers use it?

Of course! If you are already not familiar with HTML & CSS, spend 10 minutes reviewing the concepts, and try converting your favourite design with Decode. You might be surprised how fast you pick it up.

Why Tailwind?

Tailwind, beyond being a CSS library, is a concise notation for styles that you can embed in the HTML itself. This lets you add styles like max-width and responsive changes like shifting to a block layout from flex when in smaller device sizes, all without editing any separate CSS file. Tailwind also comes with a standard design scale and it is especially useful for spacing scales.

What about BEM or CSS-in-JS libraries?

If you want it, we'll build it. Please write to us at hello@protoship.io immediately.

What happens when the design changes?

Just re-upload the design through the Protoship Figma/XD plugin. Any elements you've deleted will be gone from Decode. If the layout of the new design does not match with the HTML you've already written, then you'll be shown its details. You will have to fix it before you can save and proceed.

Is it pixel-perfect?

Most likely not. All the spacing values in your design (margins and paddings) are mapped to its closest equivalent in the standard Tailwind spacing scale. This means if one of your margins is 35px, it'll get mapped into 36px (m-9 in Tailwind). If the value is 33px, it'll get mapped into 32px (m-8 in Tailwind).

If this is not what you want, Tailwind is unlikely to be a good fit for you. Write and tell us so we can add support for regular BEM-like CSS that'll let you build as pixel-perfect designs as possible.