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

# Overview

> Bring an existing design system into Magic Patterns

If you already have a design system, you don't have to rebuild it from scratch. Magic Patterns can pull your existing components, tokens, and styles from the sources you already use, so generated designs match your product from day one.

You can start a Design System empty and build it up in the dashboard (see [Getting Started](/documentation/design-systems/overview)), or seed it by linking one or more of the sources below.

## Ways to import

<CardGroup cols={2}>
  <Card title="GitHub" icon="github" href="/documentation/design-systems/importing/github">
    Link a repository and pull components and styles straight from your code.
  </Card>

  <Card title="Local Code Folder" icon="folder-open" href="/documentation/design-systems/importing/local-code-folder">
    Upload a zipped export of your component library from your machine.
  </Card>

  <Card title="NPM Package" icon="npm" href="/documentation/design-systems/importing/npm-package">
    Connect a published React component library so the AI uses your real code.
  </Card>

  <Card title="Figma" icon="figma" href="/documentation/design-systems/importing/figma">
    Import frames and components from a Figma file.
  </Card>

  <Card title="Your website" icon="globe" href="/documentation/design-systems/importing/overview">
    Match colors, fonts, and styles from a live website.
  </Card>
</CardGroup>

## How linking works

When you create a Design System, you can link sources during onboarding (or later, from **Access & Settings**). After you link a source, Magic Patterns scans it and proposes the components, colors, typography, and tokens it finds. You review what gets imported before it lands in your Design System.

<Tip>
  You can link more than one source. For higher-quality results, pair a visual
  source like your website or a Figma file with a code source like GitHub so the
  AI has both the look and the real implementation.
</Tip>

## Connecting your real engineering design system

Enterprise teams often want generated UI to match a real engineering handoff: the same React components and import paths your product ships with, not only visual parity. That flow is **not fully self-serve** because every codebase has nuances (build configs, token formats, export conventions) that benefit from a guided setup.

<Card title="Schedule a call" icon="envelope" href="https://cal.com/mp-daniel/30min">
  Book time to plan connecting your real component library with your team.
</Card>

See [customer case studies](https://www.magicpatterns.com/customers) for examples of teams that ship from their real design system.