From Design to Precise HTML + CSS

Convert your Sketch designs to minimal, elegant code that you can easily understand, change, and use to build ambitious web applications

Codegen is in beta and is free to use during the beta period

Get started

High quality, developer friendly HTML & CSS

There are no absolutely positioned elements nor swathes of unreadable CSS. Codegen places every element on your artboard using the box model, and applies flexbox if there are multiple elements in the same row. You can also choose to render elements using CSS Grid and customize the properties right inside the interface.

Achieve true responsiveness

You can switch between different breakpoints of your design and customize the same HTML with different CSS on each breakpoint. Any change you make in a larger screen width will flow down to the smaller screen, and Codegen will map it cleanly to the appropriate responsive CSS class during code generation.

Eliminate redundant work

When you export to Codegen, you only have to send it artboards designed for the largest screen sizes. You can then use the Codegen interface to make it work for smaller screen sizes. For example, you can use CSS Grids to turn a 4-column grid to a single-column grid so that it stacks vertically in smaller devices.

Use the full power of CSS

Codegen lets you write custom CSS for every element in your design. This lets you combine free-form design in Sketch with the full power of CSS — you can use Sketch to explore and create high-fidelity mockups and give it the final polish directly using CSS.

Rapid iteration with Tailwind CSS

Design Tokens

Inheritance, cascades, and inconsistency — the bane of any large front-end codebase. Codegen eliminates all of these with the help of Tailwind CSS. It generates design tokens like colors, fonts, spacings and re-uses them across the codebase.

Snap to Scale

If the incoming design uses inconsistent spacings or fonts, you can use our "Snap to Scale" feature that'll standardize everything based on a pre-defined scale. This will free your code of magic values and get you a trim, consistent codebase.

Framework agnostic

Build content-rich websites as well as sophisticated web applications. Codegen produces plain HTML & CSS and so will fit in easily into the technology stack that your project depends on. Be it a static site generator like Gatsby, a CMS like Wordpress, a front-end application built with React or Vue, or a purely server-side web application.

Eliminate hundreds of hours of tedious work

If you've ever had to meticulously chop designs into HTML and CSS, transcribe layouts, measure margins and paddings, copy over colors and types, and thought there had to be a better way to turn your designs to working software, then Codegen is for you.

Codegen is in beta and is free to use during the beta period

Get started