> ## Documentation Index
> Fetch the complete documentation index at: https://subframe-59800133-claude-lucid-mccarthy-s1p4yh.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-s1p4yh/U3K5Ab5vWkgqY6Ji/images/concepts/concept-projects.png?fit=max&auto=format&n=U3K5Ab5vWkgqY6Ji&q=85&s=bfaf63d16d92de3a00611aa1b0be1ab9" 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-s1p4yh/U3K5Ab5vWkgqY6Ji/images/concepts/concept-components.png?fit=max&auto=format&n=U3K5Ab5vWkgqY6Ji&q=85&s=2754ba0edd8947b52638e43036b2d9e1" 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-s1p4yh/U3K5Ab5vWkgqY6Ji/images/concepts/concept-pages.png?fit=max&auto=format&n=U3K5Ab5vWkgqY6Ji&q=85&s=594f6dc67888b8406b1d388541b9714b" 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-s1p4yh/U3K5Ab5vWkgqY6Ji/images/concepts/concept-theme.png?fit=max&auto=format&n=U3K5Ab5vWkgqY6Ji&q=85&s=8f6a1a540853b33a5ede8be847bbf7cd" 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-s1p4yh/U3K5Ab5vWkgqY6Ji/images/concepts/concept-ask-ai.png?fit=max&auto=format&n=U3K5Ab5vWkgqY6Ji&q=85&s=ae9b7f4a9bdcf80db29dfdd216e8c70e" 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-s1p4yh/U3K5Ab5vWkgqY6Ji/images/concepts/concept-prototype.png?fit=max&auto=format&n=U3K5Ab5vWkgqY6Ji&q=85&s=a9971178c60410a47a57dfb16595eebc" 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-s1p4yh/U3K5Ab5vWkgqY6Ji/images/concepts/concept-cli.png?fit=max&auto=format&n=U3K5Ab5vWkgqY6Ji&q=85&s=6b188dcf447bce06379195f6b6dc007f" 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-s1p4yh/U3K5Ab5vWkgqY6Ji/images/concepts/concept-mcp.png?fit=max&auto=format&n=U3K5Ab5vWkgqY6Ji&q=85&s=d9556958689c6c7b1de6f7dfc30636f9" 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>