Skip to main content
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), or seed it by linking one or more of the sources below.

​
Ways to import

GitHub

Link a repository and pull components and styles straight from your code.

Local Code Folder

Upload a zipped export of your component library from your machine.

NPM Package

Connect a published React component library so the AI uses your real code.

Figma

Import frames and components from a Figma file.

Your website

Match colors, fonts, and styles from a live website.

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

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

Schedule a call

Book time to plan connecting your real component library with your team.
See customer case studies for examples of teams that ship from their real design system.