Design tools have spent a decade getting better at producing pictures of interfaces. The more useful question now is whether an AI agent can perceive a design well enough to build from it, and what it has to work with when it tries.
Three tools answer that question in three different ways. Kombai calls itself “Your AI design engineer.” Subframe calls itself “a design tool for your codebase, built on HTML and CSS.” Onlook describes itself as “a free, local-first editor where designers craft exceptional experiences in code.” Each positioning implies a different place where the design lives, and that place determines what an agent can read. Figma Dev Mode serves as the reference point throughout.
The handoff problem is now a perception problem
The classic design-to-code handoff was a translation step. A designer produced a file, an engineer reinterpreted it, and the two drifted apart. An agent that cannot inspect the design context, the component library, or the tokens will guess, and guesses show up as off-brand spacing and invented components.
Four answers to “where does the design live?”
- File-native (Figma). The design is a file on a vector canvas, and code is derived through inspection and handoff. Subframe’s comparison article describes Figma as “file-native, vector-canvas design with translation-mediated dev handoff.” That is a competitor’s framing, not Figma’s.
- Canvas-agent (Kombai). Kombai says it lets you “Explore designs on an infinite canvas, ship production-ready code in your real repo, and refine the result in an editable browser.”
- Code-native (Subframe). Subframe’s documentation says, “Subframe generates production-ready React code deterministically—no LLM involved.”
- Repo-native (Onlook). Onlook’s site says, “When you design in Onlook you design in the real product – in other words, the source of truth.”
Figma Dev Mode: the reference point
The Dev Mode page says it gives “AI agents access to structured design context so you generate accurate, design-informed code” through the Figma MCP server. It lists Code Connect (“Map design components to real production components.”), “Code syntax in variables”, dev resources, and statuses. Those are Figma’s published capabilities.
Several points are not settled by that page. It contains no pricing; its calls to action are “Get started” and “Contact sales.” Any Figma dollar figure in this guide comes from Subframe’s comparison article, which carries the disclosure “(Disclosure: published by Subframe.)” It states that “Dev Mode seats run $12 per month” and characterizes Figma’s MCP access as “seat-gated.” Read these as a competitor’s claims. The page also cites “90% of devs saw work quality improvements” and “1.5 hours of work saved per week” with no methodology, sample, or date.
Kombai: the AI design engineer
Kombai’s homepage says its taste agent “makes high-quality design decisions for each task, instead of resorting to AI defaults,” and that its context tools “find and reuse your existing design system, stack, tokens and components.” It claims “800K+ installs and counting,” which is a vendor marketing figure, not a verified number.
For agents, the relevant claim is that Kombai “understands the design and code decisions in your repo, Figma, Storybook, or websites, and carries them into new work.” Models are explicit: “Explore 50+ models in Kombai” and “Pick the model that fits each task, or let Kombai’s built-in router choose for you.” (Kombai homepage)
Kombai also publishes a benchmark: “In our benchmark evals, Kombai improves originality by up to 13 percentage points and creative range by up to 23 percentage points.” This is vendor-run, and the captured material does not include its methodology. Read the benchmark page before relying on it.
On Figma, the homepage says: “Yes. You can import Figma designs into Kombai via its native integration.” It adds “No MCP needed.” It runs as a desktop app and as an extension for VS Code, Cursor, Antigravity, Trae, and Kiro. (Kombai homepage)
Pricing: the pricing page lists Free at “$0/month” with “300 credits / month,” Pro at “$20/month” with “2,000 credits per month,” Team at “$40/month” with “seats for up to 20 members, including unbilled administrators,” and Enterprise as “Custom.” The prices are shown per month. The toggle offers quarterly and yearly billing with “Save 20%,” but the page shows no quarterly or yearly dollar figures. Pro scales from 2,000 to 110,000 credits in the comparison table; the dollar prices of those higher credit levels are not shown. Rollover matters for budgeting: “On the Free plan, up to 150 credits carry over (half the monthly limit).”
Subframe: the design artifact is the code
Subframe’s code generation docs describe output that is “Deterministic — The same design always produces the same code,” and “Presentational — No API calls, state management, or business logic for developers to unwind during handoff.” The constraint is stated plainly: “If it can’t be translated to code, you can’t do it in Subframe.” Any design that depends on behavior Subframe cannot express falls outside this tool.
The core mechanical rule is in the design-to-code docs: “components are synced, pages are exported.” Components sync through the CLI (npx @subframe/cli@latest sync Button SocialSignInButton) into a folder in your codebase. Pages are “exported as copyable React code or using the MCP server and are meant to be modified after export.” The docs say “Once the feature is live, the code is the source of truth,” with components as the exception that “stay synced.”
Two caveats from the docs matter. The default sync folder appears two ways, as ./ui/components and as ./src/ui/components, so check your project settings. And reverse sync is not yet available: “In the near future, we will add CLI commands to sync component code back to Subframe.” Recreating an existing app page is handled with “attach a screenshot in Agent chat and ask the agent to recreate the design.”
Plans: the pricing docs list “Free, Pro, and Custom plans” and say “Pro is billed for each Admin and Editor. Viewers are free on every plan.” They give no dollar amounts and link to subframe.com/pricing. The Free plan includes “1” project and “24 hours” of version history. The vendor article gives the Pro figure: “Subframe charges $20 per month per editor on Pro.” Attribute that to Subframe’s article, not to the docs.
Onlook: local-first and open source
Onlook’s GitHub repository describes its scope as “Craft websites, prototypes, and designs with AI in Next.js + TailwindCSS.” Its README explains that the editor “instrument[s] the code in order to map elements to their place in code” and that “Our AI chat also has code access and tools to understand and edit the code.” Licensing: “Distributed under the Apache 2.0 License.”
Ownership: “The code you make with Onlook is all yours. You can export it on your local machine, publish it to GitHub, or host it at a link.” (Onlook home)
The scope limits sit in the README’s own checklist, where these items are unchecked: “[ ] Support non-NextJS projects,” “[ ] Support non-Tailwind projects,” and “[ ] Setup and use MCPs in projects.” The homepage says “Use the Claude or ChatGPT plan you already have,” and its framework claims are not reconciled with the unchecked items. The README also says the hosted product “we’re building next, for AI-native designers, is in early access via the waitlist.” Treat the hosted product as early access, and treat the open-source Next.js + Tailwind editor and the homepage’s broader claims as different scopes.
Cost: “Yes, Onlook can be self-hosted for free on GitHub.” For the hosted cloud, “please contact our team or book a demo.” No price figures appear in any Onlook source. Star counts also vary: the homepage shows “26.0k” and “27,000 stars”, while the repository shows “27.2k”. They are quoted as shown, not averaged.
Side-by-side: what an agent can actually read
| Question | Kombai | Subframe | Onlook | Figma Dev Mode |
|---|---|---|---|---|
| Where the artifact lives | Own infinite canvas plus repo (homepage) | Code: React + Tailwind components (vendor article) | Running project: “design in the real product” (site) | Design file on a vector canvas (per Subframe’s comparison, published by Subframe) |
| What the agent reads | “components, tokens, and hooks” via Context Graphs | “components, theme tokens, patterns, component usages” (per vendor article) | Live code via AI chat (repo) | “structured design context” via MCP (Dev Mode) |
| Determinism | Router chooses models per task; not established | “deterministically—no LLM involved” (docs) | AI chat edits code; not established | Not established by the Dev Mode page |
| Figma import | “Yes. You can import Figma designs into Kombai via its native integration.” | Not established | “Start from text or image”; Figma import not established | Native file |
| MCP status | “MCP integrations” row; per-plan value blank in source | “MCP server allows you to grant direct access” (docs) | “[ ] Setup and use MCPs in projects” (unchecked) | Figma MCP server (Figma) |
Side-by-side: pricing, credits, and lock-in exposure
| Question | Kombai | Subframe | Onlook | Figma Dev Mode |
|---|---|---|---|---|
| Entry price | “$0/month” Free; “$20/month” Pro (pricing) | Free tier; Pro “$20 per month per editor” (vendor article) | Free to self-host (GitHub); cloud via contact | “From free; $16/mo full seat (Pro)” (vendor article) |
| Billing unit | Credits per month; prices shown per month | “Pro is billed for each Admin and Editor” (docs) | Not established for cloud | Seat (vendor article) |
| Code ownership and licensing | “production-ready code in your real repo”; licensing not established | Synced and exported files; @subframe/core is “an open-source package”; generated-code license not named |
“The code you make with Onlook is all yours.” Apache 2.0 | Not established by the Dev Mode page |
| Exit behavior | “Cancellations kick in at the end of your current cycle, so any paid credits stay yours until then.” | “its existing projects, pages, and components remain available” on Free (docs) | Export to your local machine or GitHub (site) | Not established by these sources |
Subframe and Onlook both keep output in code you can hold, which lowers lock-in. Kombai’s model is credit-metered, and its generated-code ownership is not stated in the captured pages.
Which tool fits which workflow
Figma-centric team. If your design system and review already run in Figma, Dev Mode is the reference point, and its MCP server and Code Connect let agents read structured context. Add a code-native tool only if your engineers accept a React and Tailwind constraint.
Codebase-first team wanting a deterministic design system. Subframe fits, provided your stack is React with Tailwind. Its component sync keeps the design system in your repo.
Local-first or open-source team. Onlook fits if your project is Next.js with TailwindCSS and you value Apache 2.0 and self-hosting. Check the unchecked items first.
Solo builder wanting an agent design engineer. Kombai fits if you want an agent that makes design decisions inside your IDE. Its homepage claims built-in practices for “400+ libraries,” which you should verify against your stack.
FAQ
Can these tools import Figma files? Kombai says yes via its native integration. The Subframe documentation pages reviewed here do not mention Figma import; the screenshot flow is for recreating existing app pages. Onlook’s inputs are “Start from text or image” and prebuilt templates; Figma import is not established.
Which of these expose an MCP server? Figma has one, documented at developers.figma.com. Subframe’s docs say its MCP server gives agents access to designs. Onlook lists “Setup and use MCPs in projects” as unchecked. Kombai’s per-plan MCP availability is blank in the captured source.
Do I own the generated code? For Onlook, the site says the code is yours. For Subframe, synced files land in your repo, but the docs do not state the license of exported code. For Kombai, ownership is not established by its pages. Ask before you build on it.
Can I use my own AI subscription? Subframe’s AI credits let you “use models in Agent chat without connecting a Claude Code or Codex subscription.” Onlook says “Use the Claude or ChatGPT plan you already have.” Kombai’s FAQ says “Many people start with Kombai alongside Cursor, Claude Code, or Codex,” but its pages describe no way to attach your own model subscription.
The Bottom Line
The question “which tool converts a design to code best” is harder to answer from documentation than “where does the design live, and what can an agent read from it?” The sources are clearer on the second question.
For a Figma-centric team, keep Figma as the source of truth and use Dev Mode’s MCP and Code Connect as the bridge. For a React and Tailwind team that wants the design system in the repo and deterministic output, Subframe is the most explicit, and its constraint is written down. For a Next.js and Tailwind team that wants open source and self-hosting, Onlook gives the most ownership and the narrowest scope. For a solo builder who wants an agent to make design decisions in the IDE, Kombai is the most ambitious; check its framework claims and its generated-code licensing before committing.
How This Guide Was Built
This review is based on official documentation, pricing pages, and one vendor-published comparison article — we did not run the tools hands-on. Sources include Kombai’s homepage and pricing page, Subframe’s documentation and its comparison article, Onlook’s website and GitHub repository, and Figma’s Dev Mode page. Subframe’s comparison article is published by Subframe and carries that disclosure; its claims are attributed to Subframe, not treated as independent verification. Kombai’s benchmark and install counts are vendor marketing claims. Pricing can change, and some plan details on Kombai’s page are not captured in a form we could verify.