Skip to main content
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

Create a Design System and configure Rules, Typography, Colors, and components.

Colors

Visually manage your brand color tokens with dark mode and references.

Rules

Write effective styling rules with examples and naming tips.

Using Components

Create, 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.
RequirementDescription
Hosted component library on NPMYour React components are available as an installable package (including private registries with access you provide).
StorybookDocumentation for your components (for example Storybook) so the AI knows APIs, variants, and when to use each piece.
Read about using your real components Schedule a call to discuss setup