> ## Documentation Index
> Fetch the complete documentation index at: https://subframe-59800133-gtmbot-restructure-dark-mode-docs-v2.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-gtmbot-restructure-dark-mode-docs-v2/GZlpuvApSd_ADHAr/images/concepts/concept-projects.png?fit=max&auto=format&n=GZlpuvApSd_ADHAr&q=85&s=cf9c42c8057cd3e3347e85e973cea2d4" 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-gtmbot-restructure-dark-mode-docs-v2/GZlpuvApSd_ADHAr/images/concepts/concept-components.png?fit=max&auto=format&n=GZlpuvApSd_ADHAr&q=85&s=49e999750dd49861dfec483cd115ed72" 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-gtmbot-restructure-dark-mode-docs-v2/GZlpuvApSd_ADHAr/images/concepts/concept-pages.png?fit=max&auto=format&n=GZlpuvApSd_ADHAr&q=85&s=205ad3b2c3447abb57ad03c060be04e2" 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-gtmbot-restructure-dark-mode-docs-v2/GZlpuvApSd_ADHAr/images/concepts/concept-theme.png?fit=max&auto=format&n=GZlpuvApSd_ADHAr&q=85&s=c6f49b21c8d5e4c0f436a292e4be90d0" 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-gtmbot-restructure-dark-mode-docs-v2/GZlpuvApSd_ADHAr/images/concepts/concept-ask-ai.png?fit=max&auto=format&n=GZlpuvApSd_ADHAr&q=85&s=247d9ac5c4038203040075b3327f73b1" 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-gtmbot-restructure-dark-mode-docs-v2/GZlpuvApSd_ADHAr/images/concepts/concept-prototype.png?fit=max&auto=format&n=GZlpuvApSd_ADHAr&q=85&s=5755d2053951ee109b0cb794aa554bd6" 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-gtmbot-restructure-dark-mode-docs-v2/GZlpuvApSd_ADHAr/images/concepts/concept-cli.png?fit=max&auto=format&n=GZlpuvApSd_ADHAr&q=85&s=82450f625069c324dc0451ba8684b6c9" 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-gtmbot-restructure-dark-mode-docs-v2/GZlpuvApSd_ADHAr/images/concepts/concept-mcp.png?fit=max&auto=format&n=GZlpuvApSd_ADHAr&q=85&s=7c18e1b0fbbcb6ce8c9823b5ec886c83" 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>