Generate the perfect HTML & CSS for your Sketch designs
Convert your designs to simple and precise code that your developers can instantly understand, change, and integrate into their codebase.
Codegen for Developers
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 create pixel-perfect front-ends, then Codegen is for you.
There are no absolutely positioned elements nor swathes of unreadable CSS. Codegen's ambition is to generate code that is better than what skilled front-end programmers would write themselves. We use it to build our own software projects, and this means code that we can adapt into our codebase and maintain for a long time.
Design Tokens using Tailwind CSS
Inheritance, cascades, and inconsistency — the bane of any large front-end codebase. Codegen eliminates all of these with the help of the Tailwind CSS framework. It generates design tokens like colors, fonts, spacings and re-uses them across the codebase.
Box Model, Flexbox, and CSS Grids
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 in the interface.
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.
Codegen for Designers
Codegen executes your design, live on the browser. It eliminates the hand-over process itself, as well as the frustrations of imperfectly implemented front-ends. And it saves you weeks from every development cycle by removing the need to manually write the code for your designs.
Faster Designer-Developer handoff
In a workflow without Codegen, a developer spends weeks trying to get your designs into HTML and CSS before they can program interactivity and make it function. With Codegen, you can provide them the best HTML & CSS that could possibly be written for your designs, and help them start working on the functionality rather than tediously and imperfectly recreating your design as HTML and CSS.
Truly incremental design workflow
With Codegen you can preview your work live on the browser as you design, allowing you to improve your designs continuously
Become an early adopter
Codegen is opening to a limited number of early adopter customers soon!JOIN