Jobs · 10

Design to code

From a picture to components

Use this when the work starts in a design file or a screenshot and needs to land in a frontend. Includes the design source of truth and generators that emit code.

Initial editorial estimate. Not a measured benchmark. Edit scores in data/tools.json.

1. 01

   Google Stitch

   Best for A first UI from a sentence, inside Google's labs

   Google Labs tool that turns a prompt into a UI and frontend code.

   • + Prompt to a visible UI is a short loop
   • + Useful when you have no designer and no design file

   • − Labs products move, get renamed, or stay rough
   • − Access and limits: check site

   7.3

   Check site

2. 02

   Figma

   Best for The picture the code has to match

   The design tool. Dev Mode is how engineering reads the file.

   • + The file format other tools assume
   • + Free starter plan for small files

   • − It is a design tool, so the code still has to be written or generated
   • − Full seats and Dev Mode pricing: check site

   7.2

   Freemium

3. 03

   Builder.io

   Best for Visual editing that still outputs code

   Visual CMS and design-to-code that emits framework components.

   • + The output can be code in your repo, not only a hosted page
   • + Visual editing is the feature stakeholders actually want

   • − Another editor in the stack once the app is mostly custom
   • − Pricing: check site

   6.9

   Check site