> ## Documentation Index
> Fetch the complete documentation index at: https://magicpatterns.mintlify.site/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Features

> Explore all the features Magic Patterns has to offer

For full sidebar navigation for design systems and team workflows, use the Design Systems and Team Collaboration tabs at the top of the docs.

## Features

### Design Systems

<CardGroup cols={2}>
  <Card title="Design Systems" icon="swatchbook" href="/documentation/design-systems/overview">
    Create unified styling and reusable components for consistent designs.
  </Card>

  <Card title="Components" icon="puzzle-piece" href="/documentation/design-systems/editing/components">
    Build and manage reusable UI components in your Design System.
  </Card>

  <Card title="Rules" icon="file-lines" href="/documentation/design-systems/editing/rules">
    Define default styling rules for consistent designs across your team.
  </Card>

  <Card title="Colors" icon="palette" href="/documentation/design-systems/editing/colors">
    Define your color palette for AI generation and the Visual Edit color
    picker.
  </Card>

  <Card title="Typography" icon="text" href="/documentation/design-systems/editing/typography-and-icons">
    Manage font groups: upload custom fonts, Google Fonts, or font URLs.
  </Card>

  <Card title="Icons" icon="icons" href="/documentation/design-systems/editing/typography-and-icons#icons">
    Manage icon libraries or import custom icons for your designs.
  </Card>
</CardGroup>

### Visual Edit & Agent Mode

<CardGroup cols={2}>
  <Card title="Visual Edit" icon="pen" href="/documentation/editor/how-to-prompt">
    Select any element and edit its styles, text, and layout visually.
  </Card>

  <Card title="Agent Mode" icon="wand-magic-sparkles" href="https://www.magicpatterns.com/blog/agent-mode">
    AI architecture with automatic model routing, website browsing, and
    context-aware generation.
  </Card>

  <Card title="Plan Mode" icon="list-check" href="/documentation/editor/plan-mode">
    Brainstorm and align on a plan with the agent before any code is written.
  </Card>
</CardGroup>

### Import & Export

<CardGroup cols={2}>
  <Card title="Import from Website" icon="globe" href="/documentation/get-started/chrome-extension">
    Import designs from any website, including localhost.
  </Card>

  <Card title="Import from Figma" icon="figma" href="/documentation/importing/import-from-figma">
    Bring your Figma designs into Magic Patterns.
  </Card>

  <Card title="Sync with Github" icon="github" href="/documentation/get-started/sync-to-github">
    Two-way sync between Magic Patterns and your Github repository.
  </Card>

  <Card title="Download Code" icon="download" href="/documentation/get-started/download-code">
    Download your design code as a zip file.
  </Card>

  <Card title="Forking" icon="code-fork" href="/documentation/editor/forking">
    Create a copy of your design to explore new ideas.
  </Card>

  <Card title="MCP Server" icon="server" href="/documentation/features/mcp-server/overview">
    Connect your IDE or AI assistant to Magic Patterns via the Model Context
    Protocol.
  </Card>
</CardGroup>

### Team Collaboration

<CardGroup cols={2}>
  <Card title="Team Workspaces" icon="people-group" href="/documentation/collaboration/team-workspaces">
    Manage team members, share Design Systems and components, and centralize
    billing.
  </Card>

  <Card title="Sharing Designs" icon="share-nodes" href="/documentation/editor/sharing">
    Share your designs with team members and stakeholders.
  </Card>

  <Card title="Live Multiplayer" icon="users-viewfinder" href="/documentation/collaboration/live-multiplayer">
    Work on the same design or canvas with your team in real time.
  </Card>

  <Card title="Inline Comments" icon="comment" href="/documentation/collaboration/inline-comments">
    Leave feedback directly on any element in a design.
  </Card>

  <Card title="Canvases" icon="layer-group" href="/documentation/projects/how-to-share">
    Collaborate with your team in real-time.
  </Card>
</CardGroup>

### Connectors

<CardGroup cols={2}>
  <Card title="Connectors" icon="plug" href="/documentation/connectors/connectors">
    Pull context from Notion, Linear, Granola, PostHog, and other connected
    tools into your designs.
  </Card>
</CardGroup>

### Publishing

<CardGroup cols={2}>
  <Card title="Custom Publish URL" icon="link" href="/documentation/publishing/publish-url">
    Publish instantly to a shareable Magic Patterns URL.
  </Card>

  <Card title="Host on a Custom Domain" icon="globe" href="/documentation/get-started/custom-domain">
    Host your designs on your own custom domain.
  </Card>
</CardGroup>

### Integrations

<CardGroup cols={2}>
  <Card title="OpenAI" icon="microchip-ai" href="/documentation/integrations/openai">
    Build AI-powered features using the OpenAI API.
  </Card>

  <Card title="Google Sheets" icon="table" href="/documentation/integrations/google-sheets">
    Read and write data from Google Sheets.
  </Card>

  <Card title="Google Analytics" icon="chart-line" href="/documentation/integrations/google-analytics">
    Track page views and user behavior with Google Analytics.
  </Card>

  <Card title="See All Integrations" icon="plug" href="/documentation/integrations/overview">
    Explore all supported third-party tools and services.
  </Card>
</CardGroup>