The Question Is Whether an Agent Can Read the Design
A screenshot comparison answers a narrower question than the one a design-to-code agent faces. The useful question in 2026 is whether an AI agent can read the tool’s state (the code, the tokens, the component tree) and act on it without a human translating between two formats.
An agent is only as capable as the state it can perceive. If the design lives in a format the agent cannot parse, the agent is guessing. If the design lives in HTML, React components, and design tokens the agent can open, the agent is reasoning. This guide compares Subframe, Kombai, and Onlook through four lenses: perception (what the agent can see), action (what it can change), cost (what you pay and for what unit), and exit (how hard it is to leave). The thesis: pick the tool whose state your agent can read and that you can walk away from.
The Three Tools in One Paragraph Each
Subframe describes itself as “a design tool for your codebase, and a coding agent with a canvas,” organized into three parts: Canvas, Browser, and Agent. It ships as a desktop app for macOS and Windows and also opens in the web, with downloads listed on Subframe’s site. The canvas is “built for code,” based on HTML and React, and the components, tokens, and design system come from your codebase (Subframe).
Kombai bills itself as “Your AI design engineer.” It is delivered as an IDE extension for VS Code, Cursor, Antigravity, Trae, and Kiro, plus the Open VSX Registry, alongside a desktop app. It has two modes: Design mode, for standalone canvases, and Code mode, for production code inside your repo, backed by a built-in frontend coding agent (Kombai).
Onlook calls itself “The Developer Tool for Visual Engineers,” a free, local-first editor where designers work in code. Its stated principle is “code as the source of truth” (Onlook). The site displays a GitHub badge reading 26.0k stars. That is a vendor-displayed count captured 2026-10-21, a vendor claim rather than an independent measure (Onlook on GitHub).
What the Agent Can Perceive: Code, Tokens, and Components
This section decides most of the comparison, because all three tools claim agent-readable context. The mechanics are what separate them.
Subframe is the most explicit about the reading loop. Components, tokens, and the design system are pulled from your codebase, and you can import components and design tokens directly from code. The interface exposes a Layers panel, a Tokens group, Layout and Padding inspector fields, and a Tailwind CSS output label (Subframe). The homepage also shows an agent trace (Searching code, Reading src/db/schema.ts, then Designing 3 variations). That panel is a vendor demo built around a sample app, so it shows what the product is designed to display, not independent evidence of how it performs.
Kombai’s mechanism is Context Graphs, which reuse components, hooks, utilities, and tokens from your repo, your npm packages, or your Storybook. The homepage shows the format: “Storybook 12 stories · real props” and a component cluster reading “@acme/ui DataGrid · Combobox · +46” (Kombai). The pitch is that a “taste agent” makes design decisions rather than resorting to AI defaults, a claim the vendor pages do not test independently.
Onlook takes a different route: keep the design inside the product codebase so there is no separate artifact to synchronize. It states that you design “with code using your existing design system instantly,” with code as the source of truth (Onlook FAQ).
All three claim code-grounded context. The real difference is where the design state lives, which the next section covers.
Where Your Code and Canvas Live: The Local/Cloud Split
The local-versus-cloud boundary is the lock-in fault line, and each tool draws it differently.
Subframe runs a split architecture. Its FAQ answers directly: “Does my code leave my machine? No – your codebase stays on your machine. Subframe reads and writes local files.” The design canvas, however, “lives in the cloud, accessible from both web and desktop” (Subframe). Code stays put and the canvas does not. Billing follows the same line: AI credits are consumed only in the web version or when used instead of your Claude or Codex subscription (Subframe pricing and AI credits).
Kombai works as an IDE extension inside your codebase, so Code mode produces production code in your repo. Design mode produces standalone canvases; the vendor pages describe them as standalone, and do not say where they are stored (Kombai).
Onlook is local-first and self-hostable for free from GitHub. Code is yours: export it locally, publish it to GitHub, or host it at a link (Onlook FAQ). Install instructions are at onlook.com/install.
If your code stays local but your canvas does not, part of your design state sits in someone else’s database. That is not disqualifying, but it is an exit cost to price in before you commit.
Which Agents Can You Bring?
Subframe is bring-your-own-agent. It works with Claude Code and Codex, and you can use your own Claude or Codex subscription as the internal agent. It also offers the Subframe MCP to bring design context to external agents, and can connect Cursor or Gemini via MCP (Subframe).
Kombai is built-in-agent with model choice: a frontend coding agent, 50 or more models through a built-in router or manual selection, and image and video generation tools listed as Veo, Seedance, Nano Banana, and GPT Image 2 (Kombai).
Onlook lets you bring your own AI subscription. Its homepage says to use the Claude or ChatGPT plan you already have, with OpenCode and more “coming soon” (Onlook). Because the editor is open source and self-hostable, you also control the environment it runs in.
Subframe assumes you already have an agent subscription and wants to feed it context. Kombai assumes you want the agent included and wants to route it well. Onlook assumes you want to own the stack and bring your own AI plan.
Action: What Each Agent Can Change
Here is what each tool lets an agent do once it has read the state.
Subframe lists “Manage git branches” and “Make pull requests” in its ship step, and its agent edits the canvas and the codebase in one place (Subframe). The homepage describes the loop as Connect, Explore, Build, Ship.
Kombai’s Code mode writes production code into your repo through its IDE extension, and its built-in frontend coding agent works inside the same tool. Design mode edits standalone canvases (Kombai).
Onlook hands work off through git: “To hand off, share a branch or an artifact,” with the work already stored as code your team can review (Onlook).
Pricing: What Each Tool Charges For
Subframe publishes two tiers. Free is $0 per month and includes one project, unlimited viewers and editors, your own Claude or Codex subscription, and limited AI credits. Pro is $20 per editor per month and adds unlimited projects, 6x AI credits, and multiple themes per project (Subframe). Free allows unlimited editors on one project, so the paid unit is the project count and the AI credits, with Pro charging $20 for each editor.
Kombai publishes four tiers. Free is $0 per month with 300 credits per month: 150 on sign-up, a 50-credit daily top-up, capped at 300 per month, with rollover up to 0.5x. Pro is $20 per month with 2,000 credits, rollover up to 5x, no AI training on your data, and SOC2 compliance. Team is $40 per user per month, with a shared credit pool, unlimited rollovers, centralized billing, team usage analytics, and up to 20 seats. Enterprise is custom and adds a custom context engine, SSO and SAML, audit logs, and custom SLAs. Annual billing saves 20% (Kombai pricing). One-time credit packs are available (Kombai).
Onlook self-hosts for free. Its hosted cloud pricing is not published: the FAQ routes teams to contact or book a demo, and no plan tiers were found on the pages reviewed (Onlook FAQ). You cannot budget for the hosted product from public information, which is friction for any team planning a rollout.
Lock-In and Exit: How Hard Is It to Leave?
Onlook has the strongest exit story on the pages reviewed. The project is open source, the code is yours, and export or GitHub publishing is a direct path rather than a migration project (Onlook FAQ).
Subframe sits in the middle. Code stays local, the canvas uses HTML and React, and the workflow runs through git branches and pull requests. Leaving means leaving the cloud canvas layer behind. The vendor says the tool “works best when used with React,” so a non-React stack narrows the fit (Subframe).
Kombai keeps production code in your codebase in Code mode, which is a clean exit path for shipped code. Credits are vendor-metered, and the Enterprise custom context engine is a vendor-offered feature. The vendor pages do not say where standalone canvases are stored, so their portability is unknown (Kombai).
The Comparison Table: Features by Tool
| Dimension | Subframe | Kombai | Onlook |
|---|---|---|---|
| Core model | Design tool for your codebase plus a coding agent with a canvas | AI design engineer as an IDE extension plus standalone canvases | Local-first editor for code, free and self-hostable |
| Agent reads your codebase | Yes: components, tokens, design system from code | Yes: Context Graphs from repo, npm packages, or Storybook | Yes: designs made in the real product codebase |
| Bring your own agent or models | Claude Code and Codex on your own subscription; MCP to Cursor and Gemini | Built-in agent with 50+ models, router or manual choice | Bring your Claude or ChatGPT plan; OpenCode “coming soon” |
| Code location | Local: reads and writes local files | In your codebase in Code mode | Local-first; export or publish to GitHub |
| Canvas location | Cloud, reachable from web and desktop | Standalone canvases in Design mode (storage not described) | Infinite canvas on the real codebase |
| Pricing published | Yes: $0 and $20 per editor per month | Yes: $0, $20, $40 per user, custom | Self-host free; hosted pricing not published |
| Open source | Not stated on pages reviewed | Not stated on pages reviewed | Yes |
| Figma import | Not verified on pages reviewed | Native, “No MCP needed” | Not stated on pages reviewed |
| Independent benchmark | None found | None found; vendor benchmark only | None found |
FAQ
Can I use my existing Claude or Codex subscription? With Subframe, yes: it can use your own Claude or Codex subscription as the internal agent (Subframe). Onlook says you can bring the Claude or ChatGPT plan you already have (Onlook). Kombai supplies a built-in agent with model choice across 50 or more models (Kombai).
Does my code leave my machine? For Subframe, no. The codebase stays local, though the canvas lives in the cloud. Kombai works inside your codebase through an IDE extension, with standalone canvases in Design mode. Onlook is local-first, with export, GitHub publishing, or link hosting as output options.
Is there a free option? All three, in different shapes: Subframe’s Free tier (one project, limited AI credits), Kombai’s Free tier (300 credits per month with a daily top-up), and Onlook’s free self-hosting.
What about Figma import? Kombai supports native Figma import and states “No MCP needed” (Kombai). Subframe’s Figma import is not verified on the pages reviewed, so this guide makes no claim either way.
Are any of these benchmarks trustworthy? No independent benchmark was found for any of the three tools. Kombai publishes a Design Creativity Bench that measures originality and creative range. As a vendor claim, it reports gains of up to 13 percentage points in originality and up to 23 percentage points in creative range. Its homepage chart lists per-model scores, such as Kombai with GPT-6 Astra at 0.69 originality and 0.71 creative range, versus GPT-6 Astra alone at 0.65 and 0.47 (Kombai benchmark; Kombai homepage). The benchmark is vendor-run, and no independent replication was found.
The Bottom Line
No single tool wins on all four lenses, so this is three conditional picks, each tied to the part of the stack you want to own.
If you want your agent working inside your IDE against your repo and Storybook, Kombai’s Context Graphs make the most direct design-system pitch of the three, with published pricing from $0 to custom. The trade is that credits and standalone canvases sit on the vendor side.
If you want code local, a full design canvas, and your own agent, Subframe’s local-code and cloud-canvas split is the middle path. MCP support extends it to Cursor and Gemini, git branches and pull requests are built in, and Pro at $20 per editor per month is a clear price. The exit cost is the canvas layer, and the vendor says it works best with React.
If exit and ownership are the priority, Onlook’s open-source, local-first, code-as-source-of-truth model is the strongest anti-lock-in option on the pages reviewed. The trade is that hosted pricing is undisclosed, and self-hosting means you run the infrastructure.
Pick the tool whose state your agent can read and that you can walk away from. Treat the benchmark as a vendor claim until someone independent replicates it.
How This Guide Was Built
This guide is desk research. It draws on vendor homepages, FAQ pages, and pricing pages fetched on 2026-10-21. No hands-on testing of any of these tools was performed. Vendor-reported numbers, including Kombai’s Design Creativity Bench, its “700K+ installs and counting” figure, Onlook’s 26.0k GitHub badge, and testimonials on vendor sites, are labeled as vendor claims and were not independently verified. Kombai’s customer logos appear without verified case studies, and Onlook’s homepage hero is a demo mockup rather than a real customer product, so neither is treated as capability evidence.
Three gaps are stated plainly. First, Onlook’s hosted cloud pricing is undisclosed: no plan tiers were found, and none are invented here. Second, no independent benchmark exists for any of the three tools that this research found. Third, Subframe’s Figma import is unverified on the pages reviewed, so no claim is made in either direction.
Some pages were extracted partially, and the saved page text is the primary record for this guide. Pricing and features may have changed since the 2026-10-21 capture, so check the vendor pages before you commit.