Subframe is live · free plan, paid from $20/editor/mo · last verified 6 Nov 2026 · viability healthy
Subframe
Subframe is a React design canvas with a coding agent that turns your repo into shippable Tailwind components.
The repo-reading agent, AI-free code export and MCP support together remove a handoff step most React teams still pay for. Pick it if your design-to-build loop is the bottleneck and your stack is React plus Tailwind. Pass if you need illustration-grade visual craft or your component conventions are too loose for an agent to follow.
Verdict generatedVerified 8d ago · liveness 89/100 · cite: rightaichoice.com/tools/subframe-ai
- React and Tailwind product teams where design-to-build handoff slows shipping
- Designers who want real components and tokens instead of static mockups
- Engineers who want reviewable, AI-free React pulled into the repo
- Teams on Claude Code or Codex who want a canvas for the same agent
- Vue, Svelte or Angular teams — the Tailwind and React output is the product
- Illustration, print or complex vector work
- Heavy motion-design projects that need a dedicated animation suite
We scan live Reddit threads, YouTube comments, X posts, G2 reviews and other communities — and hand you an honest verdict in under a minute.
- Honest verdict, not marketing
- Real pros & cons from real users
- Attributed quotes with receipts
3 free scans · no card needed
Skip Subframe if your components are Vue, Svelte or Angular, or if you need illustration, print or vector drawing — the product's whole output is React plus Tailwind written from your repo.
Our "biggest gripe" note written Oct 23, 2026 quotes $29, which no longer matches the verified price table, so it is being re-reviewed and is not shown.
Our price-reality note written Oct 23, 2026 quotes $29, which no longer matches the verified price table, so it is being re-reviewed and is not shown.
In short
Subframe — Subframe is a React design canvas with a coding agent that turns your repo into shippable Tailwind components. Best for React and Tailwind product teams where design-to-build handoff slows shipping, Designers who want real components and tokens instead of static mockups, Engineers who want reviewable, AI-free React pulled into the repo. Free to start; paid plans from $20/editor/mo.
What is Subframe?
Subframe — Subframe is a React design canvas with a coding agent that turns your repo into shippable Tailwind components. Best for React and Tailwind product teams where design-to-build handoff slows shipping, Designers who want real components and tokens instead of static mockups, Engineers who want reviewable, AI-free React pulled into the repo. Free to start; paid plans from $20/editor/mo.
Subframe is a design canvas that sits on top of your React and Tailwind codebase, with a coding agent that reads your repository before it draws anything. Three surfaces do the work: Canvas for the design itself, Browser for your running localhost app, and Agent for the conversation. Product teams use it when the gap between a design file and a merged component is the slowest part of shipping. The agent researches before it designs. In the vendor walkthrough it searches for exif, gps and takenAt, reads src/lib/photos/upload.ts and src/db/schema.ts, then lays out three directions for photo geotagging. From the Browser tab it can click, fill forms and scroll through your live app, capturing each step as a design. Export designs as images straight from a chat, with pages, components or elements going out as PNG, JPG, WebP or PDF. The design surface is functional rather than decorative: components with props, slots and variants, tokens for color and type, fill and hug sizing with auto-layout, plus background, border, corner and shadow controls that write out Tailwind CSS. Code export is generated without AI, so what lands in your repo stays editable. A Motion library ships 21 animation examples and liquid WebGL shaders for agents, and MCP servers, skills and CLAUDE.md/AGENTS.md from your Claude or Codex subscription work inside Subframe. Desktop builds ship for macOS and Windows, now with multiple windows, title-bar updates, and external Subframe links opening in the project window. Against Figma, Subframe trades visual craft for code that already matches your repo. Against a bare coding agent, it gives you a canvas to compare directions side by side. Vue, Svelte and Angular teams sit outside the target; the Tailwind output is the product.
Key features
- Infinite design canvas built for React and Tailwind code
- Coding agent that researches your repository before designing
- Agent reads source files like src/db/schema.ts and src/lib/photos/upload.ts
- Browser tab rendering your running localhost app
- Agent drives the Browser tab — click, fill forms, scroll — and captures steps as designs
- Component system with props, slots and variants organized in folders
- Design tokens for color and type
- Tailwind CSS output for background, border, corner and shadow
- Fill and hug sizing with horizontal and vertical auto-layout
- Code export generated without AI so output stays editable
- Export designs as images from agent chats, plus PNG, JPG, WebP and PDF export
- Motion library with 21 animation examples and liquid WebGL shaders for agents
- MCP servers, skills, plugins and CLAUDE.md/AGENTS.md usable inside Subframe
- Subframe MCP with account-free install for the Motion library and Inspiration Library
- Desktop app for macOS and Windows with multiple windows and in-app updates
Behind the verdict
Where Subframe earns its keep is the loop it closes. The agent reads your actual schema and upload helpers before proposing anything, so the three variations it draws on the canvas already know where lat and lng live. That is a different starting point from a blank artboard. In practice, we'd reach for it on feature work inside an existing app rather than greenfield branding exercises. The Browser tab is the part people underestimate. Pointing the agent at localhost:3000 and letting it capture real pages gives it a reference that matches shipped reality, not a stale screenshot. Combined with the image export that now runs from inside the chat, you can hand a direction to a stakeholder without leaving the conversation. Code export generated without AI matters more than it sounds. AI-generated JSX often compiles and still reads like nobody owns it. Here the output is deterministic, so your engineers can review it like any other PR. The recent MCP and agent-config work is the strongest signal of direction. MCP servers, skills and CLAUDE.md/AGENTS.md carry over from your Claude or Codex subscription, and the Motion library installs account-free via MCP. Teams already running Claude Code or Codex get a visual surface for the same agent rather than a second brain to maintain. Watch the shape of your repo. If your components, tokens and folder conventions are loosely followed, the agent's output will be too. Tidy conventions are effectively a prerequisite, not a nice-to-have. Also set expectations on craft. Motion grew, but illustration, print and heavy vector work still belong elsewhere. And the Tailwind assumption is hard: Vue, Svelte or Angular teams get nothing here. Closest alternative depends on what you're missing. If the canvas is what you lack, this is more
Models under the hood
as of 2026-11-07
Limitations
- The workflow assumes an existing repository: the agent researches files like src/db/schema.ts and the Browser tab renders a running localhost app.
- Output targets React plus Tailwind code.
- Model access is partly tied to other subscriptions: the changelog says Haiku 5.5 runs via Subframe AI credits or your Claude subscription, and GPT-6.1 Sol needs your Codex subscription.
- The product is changing quickly, with MCP project creation, image upload, the Inspiration Library and the Windows app all shipping within a single changelog week in October 2026.
as of 2026-10-23
Researching Subframe? Get your full AI stack in 60 seconds.
Free, no signup — tell us your goal and get tools matched to your budget & existing stack.
Is Subframe still active?
Subframe is live · free plan, paid from $20/editor/mo · last verified 6 Nov 2026 · viability healthy.
Viability score
How well maintained and how widely used is Subframe? Built from what the vendor actually publishes (docs, changelog, tutorials, integrations, pricing), whether the site is live, and how much real users discuss it. How we calculate this
Last calculated: November 2026
How we score →What's new in Subframe
Checked 10 days agoAcross the latest 5 updates: 4 feature updates and 1 launch.
Export designs as images from Subframe agent chats
Agents can export a design as an image, previewed and downloadable from the chat. External Subframe links now open in the desktop app's project window.
Motion library adds 21 animation examples and WebGL shaders
Motion library gains 21 animation examples and liquid WebGL shaders for agents. Agents can also use project image-library images as references.
Desktop app updates from the title bar
An Update button in the tab bar restarts and installs new desktop app versions. Agent edits to component variants no longer reset other variants' styling.
Multiple windows in the Subframe desktop app
Open several projects side by side via File → New Window or ⌘⇧N. Windows reopen where you left them after a restart.
MCP connectors, skills and AGENTS.md usable inside Subframe
MCP servers, skills, plugins and CLAUDE.md/AGENTS.md from Claude or Codex subscriptions now work in Subframe. A Motion library for agents ships with an account-free MCP install.
What do users say about Subframe?
What people actually say about Subframe — is it worth it?
Our community sentiment research written Aug 15, 2026 is more than 90 days old, so it is being re-reviewed against current data and is not shown.
How we verified this
Every listed fact about Subframe — pricing, features, links, status — is re-read from the vendor's own pages by our verification pipeline and each change is logged with a date; the last pass ran on 6 Nov 2026. Analysis is drafted with AI models and checked against our editorial standards before publishing; see how we verify.
Verification history
We have re-verified Subframe 25 times since . Each pass re-reads the vendor's own pages and re-checks every listed field against that evidence; passes where nothing had changed are marked as such.
- — changed pricing page
- — changed features, who it suits, who should skip it, description, pricing tiers, our verdict, summary
- — changed who it suits, pricing tiers, features, who should skip it, summary, description, our verdict, pricing page, limitations, models
- — changed SSL certificate
- — changed link health
- — changed pricing fit, pricing tiers, use cases, our verdict, features, summary, hidden costs, integrations, limitations, switching in, who should skip it, switching out, description, setup time, models
Showing the 6 most recent of 25 verification passes.
Free to cite with attribution — this page re-verifies continuously.
How much does Subframe cost in 2026?
Subframe: Free to start; paid plans from $20/editor/mo. Pricing last verified 6 Nov 2026.
Plans compared
Every published Subframe tier, its price as the vendor publishes it, who it fits, and what it adds over the tier below. The 12-month cost projection follows.
| Plan | Price | Billing | Who it's for |
|---|---|---|---|
| Free | Free | — | A solo designer or engineer who wants to test whether the canvas plus code output fits before paying per seat.Adds: Free entry point: start for free with the design canvas, code output and Open in web access. |
| Pro | $20/editor/mo | monthly, per seat | React plus Tailwind product teams and agencies who need the full Canvas, Browser and Agent surfaces daily.Adds: Adds the full Canvas, Browser and Agent surfaces with per-editor seat pricing at $29/editor/month. |
12-month cost
Project the real annual outlay, including the implied monthly cost when only an annual tier is published.
Vendor list price only. Add-on usage, seat overages, and contract minimums are surfaced under Hidden costs & gotchas.
Our hidden-costs note written Oct 23, 2026 quotes $29, which no longer matches the verified price table, so it is being re-reviewed and is not shown.
Our price-fit note written Oct 23, 2026 quotes $29, which no longer matches the verified price table, so it is being re-reviewed and is not shown.
Has Subframe's pricing changed?
Subframe's pricing is tracked for changes; the moves we have logged since Aug 2026 are below.
| Date | Change |
|---|---|
| Pro: $29 → $20 /editor/mo | |
| Plan removed: Custom |
Who should pick Subframe?
Pick Subframe if you are React and Tailwind product teams where design-to-build handoff slows shipping, Designers who want real components and tokens instead of static mockups, Engineers who want reviewable, AI-free React pulled into the repo, Teams on Claude Code or Codex who want a canvas for the same agent.
Look elsewhere if you are Vue, Svelte or Angular teams — the Tailwind and React output is the product, Illustration, print or complex vector work, Heavy motion-design projects that need a dedicated animation suite, Repos with no clear component or token conventions, where agent output gets messy.
Skip it if Skip Subframe if your components are Vue, Svelte or Angular, or if you need illustration, print or vector drawing — the product's whole output is React plus Tailwind written from your repo.
GeneratedReal-world workflow fit
Concrete scenarios for the personas Subframe actually fits — and what changes day-one when you adopt it.
You need a photo-geotagging UI but the schema is in flux. You open the Agent, ask it to plan the feature, and it searches for exif, gps and takenAt, reads src/lib/photos/upload.ts and src/db/schema.ts, and puts three variations on the canvas.
Outcome: You pick the place-tag direction the agent recommends, export editable Tailwind components, and the engineer pulls them into the IDE with the schema already accounted for.
You copy an in-progress Claude conversation into a new Subframe agent chat, point the Browser tab at localhost:3000, and ask the agent to walk the signup flow.
Outcome: The agent clicks and fills the form, each captured step returns as a design, and you restyle them on the canvas without restarting the work in a second tool.
You build a marketing page on the canvas with design tokens and variants, then export pages and components as PNG, JPG, WebP or PDF for client review.
Outcome: The client signs off on images while the developers receive the same React plus Tailwind components, so nothing is rebuilt from a mockup.
Use cases
- Design a feature against your real schema — the agent reads upload.ts and db/schema.ts, then draws three variations on the canvas.
- Build a marketing page's UI on the canvas and keep the output as editable React + Tailwind components.
- Watch your localhost app in the Browser tab while you restyle it on the canvas in the same session.
- Ask the agent to capture an existing product flow, then explore new designs from the captured pages.
- Prototype an interactive flow, annotate it, and hand the same components to engineers without a rebuild.
- Keep a startup design system with tokens and variants in sync with the components in your repo.
- Continue a Claude, Codex, Cursor or Conductor conversation inside Subframe by pasting the transcript in.
Setup time & first value
How long it actually takes to get something useful out of Subframe — broken out by persona, not the marketing-page minute.
Download the macOS or Windows app, or use Open in web, and you can be on the canvas in minutes. A React/Tailwind designer pointing the Browser tab at localhost:3000 and asking the agent to read the repo should see a first grounded design within a session — most of the time goes into orienting the agent to your file layout, not into installing anything.
Switching to or from Subframe
How to bring data in from common predecessors and how to get it back out — written for the switcher, not the buyer.
- →From Figma: rebuild the key screens on the canvas and let the agent capture the existing product from the Browser tab so the redesign starts from real pages.
- →From a bare coding agent: copy the conversation out of Claude, Codex, Cursor or Conductor and paste it into a new Subframe agent chat, per the October 2026 changelog.
- →From Cursor-only workflows: keep Cursor for edits and use Subframe MCP so the agent can create projects and upload images into the canvas.
- ↗To plain React: use code export, which is generated without AI, so the components you take are editable Tailwind rather than generated markup.
- ↗To Figma: export pages, components, snippets or elements as PNG, JPG, WebP or PDF from the Export tab and rebuild vectors there.
Integrations
Tutorials & Learning
YouTube returned 6 videos for “Subframe”, and we withheld 6: 6 could not be judged, because “Subframe” is a single word that other videos use for other things. We are showing none, because we could not prove any of them are about Subframe.
Official links
What are the best Subframe alternatives?
The closest alternatives to Subframe we list are Figma, v0 Design Systems and Design System Automation. Ranked by direct product-type match, not category overlap.
| Alternative | Pricing | Starts at | Last verified |
|---|---|---|---|
| Figma | Freemium | Pricing not published | — |
| v0 Design Systems | Freemium | Pricing not published | — |
| Design System Automation | Freemium | Pricing not published | — |
Alternatives to Subframe
View all
Figma
Browser-based design canvas where your team and Figma's AI agent work in the same file.
v0 Design Systems
v0 Design Systems turns your Figma, GitHub, or Storybook component library into working React UI you can ship.
Design System Automation
Figma to React code generation inside VS Code that reuses your existing design system components
Tools that pair well with Subframe
Common stack mates teams adopt alongside Subframe, with the specific reason each pairing earns its keep.
Figma
Browser-based design canvas where your team and Figma's AI agent work in the same file.
v0 Design Systems
v0 Design Systems turns your Figma, GitHub, or Storybook component library into working React UI you can ship.
Design System Automation
Figma to React code generation inside VS Code that reuses your existing design system components
Subframe vs its closest rival
Subframe's closest head-to-head is with Motionsites — These aren't really competing for the same slot in your stack. Subframe is a design-to-code tool for React/Tailwind teams who want components synced into their IDE — pick it if your deliverable is a shipped front-end. MotionSites is a prompt library you paste into an AI site builder — pick it if you already have a builder and just want better starting copy for heroes, footers, and landing pages. If you're on Vue, Svelte, or Angular, Subframe is off the table; if you need actual code or a visual editor, MotionSites is off the table. Verdict generated
Frequently asked questions
Our FAQ set (2 answers) written Oct 23, 2026 quotes $29, which no longer matches the verified price table, so it is being re-reviewed and is not shown.
Categories
Best-of guides
For makers of Subframe
- Get a Verified Listing for Subframe ($39): a written decision within 1 working day.
- Free listing for another tool: Free reviews are decided in order, within 3 weeks of the review starting.
Used Subframe? Help shape our editorial sentiment research.