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

# Concepts

> Learn the core concepts behind Subframe's design-to-code workflow.

Subframe is built for creating designs that hand off to code and managing design systems. Many concepts map to atomic design principles.

<a href="/learn/projects/overview" className="text-inherit font-normal border-b-0">
  <div className="grid grid-cols-1 md:grid-cols-2 gap-6 items-start mb-8">
    <div>
      ## Projects

      Projects contains the theme, components, and pages used design and build your product. Each team can have multiple projects.
    </div>

    <div>
      <img src="https://mintcdn.com/subframe-59800133-mintlify-annotations-ai-handoff-1775859770/UHr1GDmWOF9ZCK12/images/concepts/concept-projects.png?fit=max&auto=format&n=UHr1GDmWOF9ZCK12&q=85&s=51026d1e8a2aa20814ee5931682a740f" alt="The Project Switcher dropdown showing a list of projects with a New project button" width="1920" height="1440" data-path="images/concepts/concept-projects.png" />
    </div>
  </div>
</a>

<a href="/learn/components/overview" className="text-inherit font-normal border-b-0">
  <div className="grid grid-cols-1 md:grid-cols-2 gap-6 items-start mb-8">
    <div>
      ## Components

      Reusable React UI components synced with your codebase. Create custom components or customize the pre-built library to build your design system.
    </div>

    <div>
      <img src="https://mintcdn.com/subframe-59800133-mintlify-annotations-ai-handoff-1775859770/UHr1GDmWOF9ZCK12/images/concepts/concept-components.png?fit=max&auto=format&n=UHr1GDmWOF9ZCK12&q=85&s=751997e17f0299bced7c5482a3e9cbf9" alt="The Components tab showing a list of design system components" width="1920" height="1440" data-path="images/concepts/concept-components.png" />
    </div>
  </div>
</a>

<a href="/learn/editor/overview" className="text-inherit font-normal border-b-0">
  <div className="grid grid-cols-1 md:grid-cols-2 gap-6 items-start mb-8">
    <div>
      ## Pages

      Design individual pages in the drag-and-drop visual editor using real components and code export.
    </div>

    <div>
      <img src="https://mintcdn.com/subframe-59800133-mintlify-annotations-ai-handoff-1775859770/UHr1GDmWOF9ZCK12/images/concepts/concept-pages.png?fit=max&auto=format&n=UHr1GDmWOF9ZCK12&q=85&s=d155c210cf9399263e505412c4f766c4" alt="The editor showing a page being designed with components on the canvas" width="1920" height="1440" data-path="images/concepts/concept-pages.png" />
    </div>
  </div>
</a>

<a href="/learn/theme/customizing-theme" className="text-inherit font-normal border-b-0">
  <div className="grid grid-cols-1 md:grid-cols-2 gap-6 items-start mb-8">
    <div>
      ## Theme

      Design tokens for colors, typography, shadows, and borders used by components and pages. Syncs to code as a Tailwind configuration.
    </div>

    <div>
      <img src="https://mintcdn.com/subframe-59800133-mintlify-annotations-ai-handoff-1775859770/UHr1GDmWOF9ZCK12/images/concepts/concept-theme.png?fit=max&auto=format&n=UHr1GDmWOF9ZCK12&q=85&s=f2deb1e915fee0ad2c98ed3a135694b0" alt="The theme panel showing color tokens, typography settings, and spacing scale" width="1920" height="1440" data-path="images/concepts/concept-theme.png" />
    </div>
  </div>
</a>

<a href="/learn/ask-ai/prompt-to-design" className="text-inherit font-normal border-b-0">
  <div className="grid grid-cols-1 md:grid-cols-2 gap-6 items-start mb-8">
    <div>
      ## Ask AI

      Generate designs from prompt or image using your design system. Use inline AI to make direct edits or Ask AI to design variation of pages.
    </div>

    <div>
      <img src="https://mintcdn.com/subframe-59800133-mintlify-annotations-ai-handoff-1775859770/UHr1GDmWOF9ZCK12/images/concepts/concept-ask-ai.png?fit=max&auto=format&n=UHr1GDmWOF9ZCK12&q=85&s=db4ec4ad118a17325b66f5d6115bd887" alt="The Ask AI panel with a prompt and multiple design variations generated" width="1920" height="1440" data-path="images/concepts/concept-ask-ai.png" />
    </div>
  </div>
</a>

<a href="/learn/prototype-mode/overview" className="text-inherit font-normal border-b-0">
  <div className="grid grid-cols-1 md:grid-cols-2 gap-6 items-start mb-8">
    <div>
      ## Prototypes

      Build interactive web apps from your designs by annotating pages and chatting with AI to prompt functionality. Prototypes can be shared and downloaded as code.
    </div>

    <div>
      <img src="https://mintcdn.com/subframe-59800133-mintlify-annotations-ai-handoff-1775859770/UHr1GDmWOF9ZCK12/images/concepts/concept-prototype.png?fit=max&auto=format&n=UHr1GDmWOF9ZCK12&q=85&s=0551b8c881d73ae88b1b6e7e9d6e32c9" alt="Prototype mode showing a page with annotations and AI chat panel for adding interactions" width="1920" height="1440" data-path="images/concepts/concept-prototype.png" />
    </div>
  </div>
</a>

<a href="/installation" className="text-inherit font-normal border-b-0">
  <div className="grid grid-cols-1 md:grid-cols-2 gap-6 items-start mb-8">
    <div>
      ## CLI

      Use `init` and `sync` terminal commands to install and add components from Subframe to your codebase. All code lives locally for further development.
    </div>

    <div>
      <img src="https://mintcdn.com/subframe-59800133-mintlify-annotations-ai-handoff-1775859770/UHr1GDmWOF9ZCK12/images/concepts/concept-cli.png?fit=max&auto=format&n=UHr1GDmWOF9ZCK12&q=85&s=3388eae9ca815d1a1b2deccb4d2afed3" alt="Terminal showing the sync command running and components being updated" width="1920" height="1440" data-path="images/concepts/concept-cli.png" />
    </div>
  </div>
</a>

<a href="/guides/mcp-server" className="text-inherit font-normal border-b-0">
  <div className="grid grid-cols-1 md:grid-cols-2 gap-6 items-start mb-8">
    <div>
      ## MCP server

      Connect AI coding tools like Claude Code, Cursor, and Codex to fetch context and code from your Subframe project's components and pages.
    </div>

    <div>
      <img src="https://mintcdn.com/subframe-59800133-mintlify-annotations-ai-handoff-1775859770/UHr1GDmWOF9ZCK12/images/concepts/concept-mcp.png?fit=max&auto=format&n=UHr1GDmWOF9ZCK12&q=85&s=954787b2abed78df9d46859f6b929e50" alt="Configuration file showing MCP server setup with Subframe access token" width="1920" height="1440" data-path="images/concepts/concept-mcp.png" />
    </div>
  </div>
</a>