Please note: We no longer support Codegen and its downloads are disabled. The tool is superseded by Protoship Decode. If you are looking for a fast design to code workflow, please check out Decode.
Protoship Codegen
Codegen converts Sketch designs to precise HTML and CSS. The generated code is clean and minimal. It is meant to be used by developers to extend and integrate into their codebase.
-
No absolutely positioned elements. Instead, the box model, flexbox, and CSS grids are used to place elements in the page.
-
Achieve full responsiveness. When exporting a design, Codegen expects the largest canvas size possible. Afterwards, in the Codegen UI, you can switch breakpoints and change responsive properties for elements.
-
Design Tokens with Tailwind CSS. The generated code uses Tailwind CSS, and comes with a tailwind.config.js file customized for your design. It contains design tokens like colors, typography, and spacings, all extracted from the input design. These tokens are exclusively used in the final HTML & CSS.
-
Framework agnostic. The code is plain HTML & CSS and can be used with no extra processing. This means it can be used with any back-end or front-end framework as well as with static site generators.