Introduction

Design visually with real components and export production-ready React code.

Subframe is a design tool for building product interfaces that lets you ship what you design:

• 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.

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.