Learn Subframe in four minutes with our design 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.