> ## Documentation Index
> Fetch the complete documentation index at: https://subframe-59800133-apg-edit-updates.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

<Info>
  This is the product guide. To learn how to use Subframe as a developer, see the [developer docs](/overview).
</Info>

<Frame caption="Learn Subframe in four minutes with co-founder Filip Skrzesinski.">
  <iframe style={{ width: "100%", height: "auto", aspectRatio: "16 / 9" }} src="https://www.youtube-nocookie.com/embed/xUFxr6jpBXg?si=277O3BDq5esZLSTe" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />
</Frame>

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

<Steps>
  <Step title="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.
  </Step>

  <Step title="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.
  </Step>

  <Step title="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.
  </Step>

  <Step title="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.
  </Step>
</Steps>