Subframe
Visual editor that exports React, Tailwind, TypeScript and Radix. Components sync into your repo through a CLI, and the export is deterministic rather than model-generated.
Overview
Aimed squarely at design engineers rather than at people who want an app from one sentence. You build in a visual editor with real alignment and spacing controls, define components once, and pull the result into your repository with a CLI command. The generated stack is React, Tailwind, TypeScript and Radix.
The design decision that separates it from the rest of this category is that the export step contains no model. AI is available for first drafts and for turning a prompt into a layout, but turning the design into code is deterministic. That means running the sync twice gives you the same file twice, which matters enormously once a team is reviewing pull requests rather than admiring demos. Auto-generated component docs and an MCP server extend the same idea to coding agents, so Cursor or Claude Code work from actual component definitions.
The costs are narrowness and vendor size. Nothing here helps a Vue shop, and there is no illustration or brand work, only product UI. The company was around eight people as of April 2026 with backing from Haystack, and the free plan at one project, five pages and 24-hour version history is really only a look rather than a trial. For a team standing up a React and Tailwind design system and tired of AI output that never matches it twice, $29 per editor per month is easy to justify. For anyone else the fit questions arrive quickly.
Key Features
- ✓ Deterministic code export with no model in the export path, so the same design produces the same React every time
- ✓ Design system defined once in the editor and reused across pages, with auto-generated component documentation
- ✓ CLI sync into your repository with npx @subframe/cli sync
- ✓ MCP server and an agent skill so Cursor or Claude Code can read the real component definitions and generate pages against them
- ✓ AI generation from a prompt for first drafts, kept separate from the export step
- ✓ Figma import for teams that still design upstream
Where it holds
- • Export being deterministic rather than AI-generated is the whole argument, and it holds. Diffs stay readable across repeated syncs instead of churning on every regeneration
- • Actual visual editing with drag, align and spacing controls, rather than describing a layout change in prose and hoping
- • Radix underneath means accessible primitives come free, which is more than most generators can claim
- • MCP integration gives coding agents the component contract instead of letting them guess at class names
Where it breaks
- • React, Tailwind, TypeScript and Radix only. No Vue, no Svelte, no native mobile
- • Around eight employees as of April 2026 and one disclosed investor. Building a company design system on a small vendor is a real bus-factor decision
- • $29 per editor per month sits on top of the Figma seats most teams already pay for, and the free tier at 1 project and 5 pages is too thin for a genuine trial
- • Not a general design tool. No illustration, brand or marketing-site work, only product UI
My Take
Export is not a model call. That one decision is why the React it produces is predictable and why diffs stay readable across a repeated npx @subframe/cli sync, which is the failure mode that makes v0 output tiring to maintain. Radix underneath, Tailwind on top, TypeScript throughout, and an MCP server that hands Cursor or Claude Code the real component definitions instead of guesses. Two honest worries: the stack is React only with no Vue or Svelte path, and the company was around eight people as of April 2026, which is a question you should answer before you commit a design system to it.
Quick Info
- Pricing:
- freemium
- Openness:
- Proprietary
- Starting at:
- Free plan covers 1 project, 5 pages, 1 prototype and 24 hours of version history, with limited AI and no custom fonts or component import. Pro is $29 per editor per month with unlimited projects, unlimited page designs and unlimited AI. Viewers are free on every plan and only admins can change billing. Seat additions and removals adjust the next invoice rather than charging immediately. Custom tier for larger teams, plus student and educator discounts.
- Added:
- Aug 2026
- Updated:
- Aug 2026
Use Cases
Judge it on your own work
The notes above say where Subframe holds and where it breaks. The fastest check is your own workload.
Visit website ↗Alternatives to Subframe
v0 by Vercel
freemiumPrompt-to-UI agent from Vercel. Outputs React, Next.js and Tailwind on shadcn/ui, pushes to a GitHub branch, and Design Mode edits styling without spending credits.
Onlook
open-sourceApache 2.0 visual editor for Next.js and Tailwind repos. Maps DOM elements back to source lines, so canvas edits become real code changes instead of a fresh generation.
Figma Make
paidPrompt to working prototype inside Figma, with Make Kits that sync your npm packages and library styles so generated screens follow the real design system.