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.

Installing Codegen

Download Codegen Sketch plugin

Once the plugin is downloaded, unzip and double-click on it to install.

Learn

Download Sketch file

Download codegen-tutorial.sketch we will use it for the onboarding tutorial

Video tutorials for new users

  1. Introduction for new users (2mins)

  2. Preparing Sketch Files (3mins)

  3. Make the design fluid across different screen sizes (4mins)

  4. Generate code, download it, and take a quick look (1mins)