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

# 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-apg-edit-updates/h3QkDAiIDKnbbMvD/images/concepts/concept-projects.png?fit=max&auto=format&n=h3QkDAiIDKnbbMvD&q=85&s=42f956d87138b4c644dd88f706704618" 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-apg-edit-updates/h3QkDAiIDKnbbMvD/images/concepts/concept-components.png?fit=max&auto=format&n=h3QkDAiIDKnbbMvD&q=85&s=fafbea8d0f7d10ab4598517dce8627b8" 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-apg-edit-updates/h3QkDAiIDKnbbMvD/images/concepts/concept-pages.png?fit=max&auto=format&n=h3QkDAiIDKnbbMvD&q=85&s=6874c5cfbd1831d15e5f760afa4e14ff" 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-apg-edit-updates/h3QkDAiIDKnbbMvD/images/concepts/concept-theme.png?fit=max&auto=format&n=h3QkDAiIDKnbbMvD&q=85&s=1f99565b9e3bcceb66c9a922ad7bd9e4" 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-apg-edit-updates/h3QkDAiIDKnbbMvD/images/concepts/concept-ask-ai.png?fit=max&auto=format&n=h3QkDAiIDKnbbMvD&q=85&s=f5c6d7dd8bdfb3eff42db29e6a7657cb" 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-apg-edit-updates/h3QkDAiIDKnbbMvD/images/concepts/concept-prototype.png?fit=max&auto=format&n=h3QkDAiIDKnbbMvD&q=85&s=78cb7b3af903728f2c3a720de30b8ff1" 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-apg-edit-updates/h3QkDAiIDKnbbMvD/images/concepts/concept-cli.png?fit=max&auto=format&n=h3QkDAiIDKnbbMvD&q=85&s=ff6548adee9aef658d8dd08f1777c060" 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-apg-edit-updates/h3QkDAiIDKnbbMvD/images/concepts/concept-mcp.png?fit=max&auto=format&n=h3QkDAiIDKnbbMvD&q=85&s=05e1bcd2ae84419b79e36186c43264fe" 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>