- Design visually with real UI components
- Brainstorm designs & prototypes with AI that understands your product
- Export production-ready React code
This is the product guide. To learn how to use Subframe as a developer, see the developer docs.
Learn Subframe in four minutes with co-founder Filip Skrzesinski.
How Subframe works
Design-first, code-native. Subframe replaces the traditional design-to-code hand-off process by allowing designers and developers to build with the same material: code.1
Build your design system
Subframe is the source-of-truth for your theme, components, and documentation. Start with the pre-built library or
create custom components. Everything syncs as production code.
2
Design and prototype visually
Design with real components in a drag-and-drop editor with full design control. Then, build and share interactive
prototypes that match your designs exactly.
3
AI understands your product
Generate designs from prompts or images with AI that learns from your theme, components, existing pages, and system
prompt. The more you design, the smarter Subframe gets.
4
Hand-off code, not mockups
Components sync via CLI. Pages export as copyable React code or using an MCP server. Subframe generates code
programmatically without the use of AI, and you own all the code locally.
