> ## Documentation Index
> Fetch the complete documentation index at: https://subframe-59800133-claude-lucid-mccarthy-fexm3d.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-claude-lucid-mccarthy-fexm3d/zXt0lnDHdUjMT5yo/images/concepts/concept-projects.png?fit=max&auto=format&n=zXt0lnDHdUjMT5yo&q=85&s=a7891f3a7b4cbaa96a4751719ba21d13" 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-claude-lucid-mccarthy-fexm3d/zXt0lnDHdUjMT5yo/images/concepts/concept-components.png?fit=max&auto=format&n=zXt0lnDHdUjMT5yo&q=85&s=1654c40be860d4ea05c4260948f64d73" 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-claude-lucid-mccarthy-fexm3d/zXt0lnDHdUjMT5yo/images/concepts/concept-pages.png?fit=max&auto=format&n=zXt0lnDHdUjMT5yo&q=85&s=9eeb2a73883b9fce3a65e77d6cb36f29" 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-claude-lucid-mccarthy-fexm3d/zXt0lnDHdUjMT5yo/images/concepts/concept-theme.png?fit=max&auto=format&n=zXt0lnDHdUjMT5yo&q=85&s=7016e5f1cdd5499e6fdf314c530d0376" 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-claude-lucid-mccarthy-fexm3d/zXt0lnDHdUjMT5yo/images/concepts/concept-ask-ai.png?fit=max&auto=format&n=zXt0lnDHdUjMT5yo&q=85&s=13b884d8347249d7e7bfe964a2d24a2d" 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-claude-lucid-mccarthy-fexm3d/zXt0lnDHdUjMT5yo/images/concepts/concept-prototype.png?fit=max&auto=format&n=zXt0lnDHdUjMT5yo&q=85&s=c4dd58ee75e5c396d7faea1e1e8f085a" 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-claude-lucid-mccarthy-fexm3d/zXt0lnDHdUjMT5yo/images/concepts/concept-cli.png?fit=max&auto=format&n=zXt0lnDHdUjMT5yo&q=85&s=35a4b807f10e1af7e36bff7bf4f0f7bb" 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-claude-lucid-mccarthy-fexm3d/zXt0lnDHdUjMT5yo/images/concepts/concept-mcp.png?fit=max&auto=format&n=zXt0lnDHdUjMT5yo&q=85&s=5b275108f8adf975b0ae4fccd5164e11" 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>