Back to the index
11Design-firstProvisional score
Subframe
subframe.com
A design tool where code is the output, not an export.

The read
Subframe is built so that what you draw is real components and what you leave with is code a front-end engineer would accept. It sits closer to engineering than to Figma.
Where it shines
- Generated code is unusually close to hand-written quality
- Real components rather than absolutely positioned boxes
- Connects to an existing design system
Worth knowing first
- Assumes React and Tailwind rather than being agnostic
- Less useful if you never touch the code
Index score
81.6
Provisional. This score is read from the product's public capability, not from the one-prompt rebuild the fully reviewed entries went through, so treat it as a placing rather than a verdict.
Craft86
Speed82
Control82
Value74
- Rank
- 11 of 52
- Category
- Design-first
- Output
- React and Tailwind code
- Pricing
- Free tier
- Best for
- Engineers who want to design without leaving the code model
Scores are our own editorial judgement, weighted craft 30, speed 25, control 25 and value 20.
Also worth a look
Full index- 04Framerframer.comA designer's canvas with AI doing the tedious parts.Design-firstFree tier86.3
- 10Webstudiowebstudio.isProvisionalOpen source, and it does not hold your site hostage.Design-firstFree tier82.6
- 13Relumerelume.ioSitemap and wireframes first, pretty pixels second.Design-firstFree trial80.7