Subframe

What is Subframe?

Subframe is a browser-based visual UI editor whose output is React and Tailwind CSS rather than a picture of an interface. The defining choice is that code generation is deterministic: when you drag an element or change a text size on the canvas, you are editing the underlying code directly, and if something cannot be expressed as code you cannot do it in the editor. That inverts the usual arrangement in AI design tools, where a model interprets a mockup and produces an approximation. Here the same design always yields the same components, with no extra wrappers, one-off classes, or redundant styles to unwind. Interactive elements are built on @subframe/core, an open-source thin wrapper around Radix UI primitives, so dropdowns, modals, and accordions arrive with ARIA support and keyboard navigation already handled.

AI shows up in two places rather than in the code path. Inside the editor, prompts and uploaded images generate page designs, make scoped edits to specific elements, and update the theme. Outside it, a hosted MCP server gives coding agents direct access to a project — reading, creating, and deleting pages, components, and snippets, screenshotting pages, writing design documents, and editing theme tokens — alongside published agent skills and a Claude Code plugin that installs the server and skills together. Components reach your repository through the CLI, which also runs non-interactively in CI. Pages are deliberately not synced; they are copied out once, because they normally need refactoring and business logic added. The practical consequence is that cancelling does not strip your codebase: the synced code is yours and the component dependency stays open source.

Who is it for?

Subframe fits teams already committed to React and Tailwind who are tired of the translation step between a design file and a pull request, and who want the design system to be a real package in their repository instead of a library that lives only in a design tool. It is a poor fit if you need Vue, Svelte, or native output, if your work is brand and illustration rather than product UI, or if you expect to import an existing Figma file wholesale — the documented path there is screenshots, not a real importer. Teams wanting an agent to build and deploy a whole application should look at Lovable instead, and for the production coding that follows a design, Claude ranks above what the export gives you.

• Front-end teams shipping React and Tailwind products who want designers editing the same components engineers deploy, with sync handled by a CLI rather than by manual reimplementation.
• Designers who think in systems and want tokens, variants, interaction states, and responsive breakpoints defined once and reflected directly in generated code.
• Engineers driving design through coding agents who would rather connect Claude Code or Cursor to a project over MCP than describe a layout in prose.
• Freelancers and small agencies who benefit from unlimited AI usage on a flat per-editor seat, avoiding the credit ceilings that metered rivals like v0 and Magic Patterns impose.
• Teams evaluating Figma alternatives for product UI who have already ruled out mockup-first tools such as Uizard and Visily because those do not produce a codebase you can sync.