Overview
Most teams begin with self-serve Design Systems: Rules, Typography, Colors, and Components that you manage in Magic Patterns. You can bring components in from Figma, start from a screenshot, or extend designs you already have.
If you’re an enterprise team, you can also sync your real design system with Magic Patterns.
Self-Serve Setup
Self-serve is the default for getting consistent output quickly. You pick a Design System when you start a design, and the AI applies your components automatically.
Put your tokens, rules, and components in a design system and the AI reuses them as you iterate.
Getting Started \nCreate a Design System and configure Rules, Typography, Colors, and\ncomponents.
Colors \nVisually manage your brand color tokens with dark mode and references.
Rules \nWrite effective styling rules with examples and naming tips.
Using Components \nCreate, edit, and manage components in your Design System.
Sync with your Real Design System
This option is for enterprise teams that want generated UI to match a real engineering handoff: the same React components and import paths your product ships with, not only visual parity. Magic Patterns has already partnered with many companies to set this up. See customer case studies for more examples.
“With Magic Patterns, they’ve shortened their delivery cycle to 3 from 12 weeks, eliminated 3 days of meetings from every sprint, and started generating validated, interactive mockups 5x faster” - Ben Karnaghan, designer at Lendi
Onboarding is guided; the detailed reference is in the docs linked below.
| Requirement | Description |
|---|---|
| Hosted component library on NPM | Your React components are available as an installable package (including private registries with access you provide). |
| Storybook | Documentation for your components (for example Storybook) so the AI knows APIs, variants, and when to use each piece. |
Read about using your real componentsSchedule a call to discuss setup