AI Design System Generation
The AI Design System Generator creates a complete, production-ready design token system for your project. Starting from your research data, brand assets, style preferences, and reference images, it produces a coherent set of colors, typography, spacing, shadows, border radii, transitions, and component sizing tokens. These tokens map directly to CSS custom properties that get applied across your entire canvas.
This is not a simple color palette picker. The system generates 18 semantic color tokens, a responsive type scale with clamp() values, a 4px-grid spacing system, shadow progressions, transition curves, and component-level sizing for buttons, inputs, icons, cards, and containers. Every value follows mathematical progressions and is designed to work as a cohesive system.
Prerequisites
- An active Flowmo project open in the designer.
- A Flowmo account signed in.
- Ideally, completed research. The Design System Generator works best as part of the Research to Design pipeline, where it receives audience analysis, competitor research, and design direction data. It can also run standalone with manual input.
How to Access Design System Generation
The Design System Generator runs as part of the Research to Design workflow or through the orchestrator's skill system. You can reach it in several ways:
- Through the Research to Design pipeline. When you start a full research-to-design workflow (by selecting "Research to Design" mode or prompting the AI with "research and design a website for..."), the design system is generated automatically as a milestone in the pipeline, after the research phase completes.
- Direct prompt. In the AI panel, describe your brand and ask for a design system. The Smart Router directs design-system requests to the orchestrator.
- Style picker shortcut. If you do not have reference images or brand assets, the AI presents the Design Style Picker — a grid of visual style presets. Each preset shows a mini color palette and a description. Pick one, and the AI uses it as a starting point for design system generation.
Step-by-Step: Generating a Design System
Step 1: Provide Context
The generator gathers context from multiple sources automatically:
- Research data from the Research to Design pipeline (audience, competitors, design direction, mood keywords).
- Brand logo from your project's brand settings. The AI extracts colors and style from your logo to ensure the palette harmonizes with it.
- Reference images uploaded during the brand collection phase or attached to the chat.
- Style preset if you selected one from the Design Style Picker (seed colors, vibe description).
- Brand guidelines (PDF uploads) parsed for color codes, font specifications, and spacing rules.
- Existing CSS on your canvas. If your project already has CSS custom properties or design tokens, the generator extends them rather than starting from scratch.
- Approved mockup if one was generated earlier in the workflow. The design system aligns with the mockup's palette, typography, and spacing.
You do not need to provide all of these. The generator works with whatever context is available, falling back to sensible defaults.
Step 2: AI Generates the Design System
The generation process runs in two phases when part of the orchestrator pipeline:
Phase 1: Technical Foundation. The AI establishes the systematic, rule-based parts of the design system — spacing scale (4px base grid), border radius tiers, shadow progression, transition curves, typography scale (modular ratio with clamp() for responsiveness), font weights, and component sizing. These follow mathematical progressions.
Phase 2: Creative Identity. Using the foundation constraints plus all brand context (logo colors, reference images, style preset, research data, design direction), the AI makes the creative decisions — the 18-color semantic palette, font pairing (heading, body, and mono fonts from Google Fonts), and the overall emotional feel of the system.
When running standalone (outside the orchestrator), both phases happen in a single pass.
Step 3: Review the Preview
After generation, the AI displays a Design System Proposal message with a visual preview. The preview includes:
- Color swatches for all 18 semantic colors (background, surface, text, primary, secondary, accent, borders, states, and their variants), each labeled with its CSS variable name.
- Typography samples showing the heading font, body font, and mono font with the full type scale (h1 through caption).
- Spacing scale visualization from xs (4px) through sectionPadding (80px).
- Border radius tiers from none through full (pill shape).
- Shadow samples at four intensity levels.
- Transition curves with timing values.
- Component sizing for buttons, inputs, icons, cards, and containers at small/medium/large scales.
- Coverage indicator showing how many of the expected tokens are configured (out of a total of approximately 48 tokens).
The preview is interactive — you can copy individual CSS variable names and values.
Step 4: Approve, Edit, or Continue
Below the preview, you see three action buttons:
| Button | Action |
|---|---|
| Approve design system | Accepts the design system and applies all tokens as CSS custom properties to your canvas. Saves the configuration to project settings. |
| Edit colors / fonts | Opens an edit flow. Describe what you want to change (for example, "make the primary color warmer" or "switch to a serif heading font") and the AI regenerates with your feedback applied. |
| Open logo studio | Jumps to the logo creation workflow, using the design system's palette and typography as the foundation. |
When you approve, the system:
- Converts all tokens into CSS custom properties using the canonical variable names (such as
--color-primary,--spacing-md,--font-heading). - Writes the variables to the project's root class via the engine's ClassManager.
- Saves both the extended and legacy configurations to project settings.
- Stores brand language metadata (color palette summary, typography pairing) for use by other AI assistants.
- Emits a settings refresh event so other panels update immediately.
What Gets Generated
Colors (18 Tokens)
| Token | Purpose |
|---|---|
--color-background | Page background |
--color-surface | Card and panel backgrounds |
--color-surface-alt | Alternate surface for contrast |
--color-text | Primary body text |
--color-text-secondary | Secondary/supporting text |
--color-text-muted | Placeholder and hint text |
--color-text-inverse | Text on dark/reversed backgrounds |
--color-primary | Brand primary color |
--color-primary-hover | Primary hover state |
--color-primary-subtle | Light primary tint for backgrounds |
--color-secondary | Brand secondary color |
--color-secondary-hover | Secondary hover state |
--color-accent | Accent color for highlights |
--color-accent-subtle | Light accent tint for backgrounds |
--color-border | Default border color |
--color-border-subtle | Lighter border for subtle dividers |
--color-success | Success state |
--color-warning | Warning state |
--color-error | Error state |
Typography (14 Tokens)
- Fonts:
--font-heading,--font-body,--font-mono(all valid Google Fonts names). - Type scale:
--text-h1through--text-h6,--text-body,--text-small,--text-caption(usingclamp()for responsive sizing). - Line heights: tight (1.25), default (1.5), relaxed (1.75).
- Letter spacings: tight (-0.02em), default (0).
- Font weights: normal (400), medium (500), semibold (600), bold (700).
Spacing (7 Tokens)
Built on a 4px base grid: --spacing-xs (4px), --spacing-sm (8px), --spacing-md (16px), --spacing-lg (24px), --spacing-xl (40px), --spacing-xxl (64px), --spacing-section (80px).
Border Radius (6 Tokens)
From sharp to pill: --radius-none (0px), --radius-sm (4px), --radius-md (8px), --radius-lg (16px), --radius-xl (24px), --radius-full (9999px).
Shadows (4 Tokens)
Progressive elevation: --shadow-sm, --shadow-md, --shadow-lg, --shadow-xl.
Transitions (3 Tokens)
--transition-fast (150ms), --transition-normal (300ms), --transition-slow (500ms).
Component Sizing
Button heights, button padding, input heights, icon sizes, container max widths, and card padding — each at small, medium, and large scales.
Editing an Existing Design System
After your design system is applied, you can refine it at any time:
- Prompt the AI with change instructions. Use words like "edit," "change," or "update" in your message.
- The AI loads the current design system configuration from your project settings.
- It returns an updated version with your changes applied while preserving everything else.
- You see the same preview with two action buttons: Apply to canvas and More changes.
Example edit prompts:
"Make the primary color a deeper blue and increase the border radius across the board."
"Switch the heading font to a serif typeface. Keep the body font as is."
"The shadows are too strong. Make them more subtle."
"Add more contrast between the surface and background colors."
Tips for Better Results
- Upload a brand logo before generating. The AI extracts colors from your logo and builds a palette that harmonizes with it. This produces significantly more cohesive results than generating without one.
- Attach reference images. Screenshots of websites you admire, brand mood boards, or competitor pages give the AI visual context that leads to more distinctive and intentional design choices.
- Upload brand guidelines as PDFs. If you have existing brand documentation, the AI parses it for specific color codes, font names, and spacing rules.
- Use the Design Style Picker when you do not have references. It gives the AI a clear creative direction without requiring you to describe abstract concepts like "minimal tech aesthetic" in words.
- Run research first. The Research to Design pipeline feeds audience analysis, competitor data, and design direction into the generator. This context produces design systems that are strategically aligned, not just aesthetically pleasing.
- Review the coverage indicator. The preview shows a percentage of configured tokens. Aim for 100% coverage to ensure every part of your design uses consistent tokens.
Common Issues
| Problem | Solution |
|---|---|
| Fonts do not appear on the canvas | The generator uses Google Fonts names. If a font is not loading, it may be misspelled in the AI output. Edit the design system and specify the exact Google Fonts name (for example, "Playfair Display" not "Playfair"). |
| Colors feel generic | Provide more context. Upload your logo, add reference images, or select a style preset. Without brand context, the AI falls back to safe defaults. |
| Design system conflicts with existing styles | If your canvas already has CSS custom properties, the generator tries to extend them. If you see conflicts, mention them in an edit prompt: "Keep my existing primary color but regenerate everything else." |
| "Design system generation failed" error | This usually means the AI model returned unparseable output. Try again — the system retries parsing up to three times automatically, but network issues or model overload can still cause failures. |
| Changes not visible after applying | Make sure you clicked Approve design system or Apply to canvas. The preview alone does not write tokens to your project. After applying, check that the settings panel reflects the new values. |