Skip to main content
Designers and developers have always worked in separate tools: designers make mockups, developers translate them to code. But what ships never quite matches what was designed, and developers had wasted hours making it that way. Subframe is a design tool that eliminates the translation step. Designers use the same components you ship to production, so you spend more time building product, not translating designs.
This is the developer documentation. To learn how to use Subframe as a design tool, see the product guide.

​
Code quality matters

Unlike other AI design tools, Subframe’s code output is deterministic. There’s no LLM misinterpreting your design—what is designed is exactly what you get in clean React code, every time. Our code philosophy:
  • Consistent — All designs are created from the same consistent design system. No more custom, one-off implementations.
  • Open code — Avoid platform lock-in. Code generated by Subframe lives in your codebase, copy/pasted or synced via the CLI.
  • Headless — Subframe uses Radix under the hood, which maintains a cleaner separation of concerns between presentation and behavior.
  • AI-ready — The generated code follows best practices to be modified further by AI tools like Claude Code, Cursor, Copilot. You can even connect these tools to Subframe’s MCP server to grant direct access to your designs.

​
Workflow example

Suppose your designer designs a sign in page in Subframe: