generate_design_system
Create a complete design system with tokens from a brand color and style preset. Export as HTML documentation, CSS variables, or Figma JSON.
Instructions
Generate a complete, custom design system with full token set. Provide a brand color to auto-generate a harmonious palette, pick a style preset, and export as visual HTML documentation, CSS variables, W3C DTCG JSON, Figma Variables, or SVG palette card. The HTML export is a beautiful, self-contained page suitable for sharing with stakeholders.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| name | Yes | Name for the design system (e.g. 'Acme Corp', 'NightOwl') | |
| style | No | Aesthetic direction — influences spacing, radii, shadows, motion, and typography. Default: minimal | |
| format | No | Export format: html (visual doc page), css (custom properties), dtcg (W3C JSON), figma (Figma Variables JSON), svg (color palette card), all. Default: html | |
| dark_mode | No | Generate dark mode tokens alongside light. Default: true | |
| base_system | No | Start from an existing system as foundation (e.g. 'stripe', 'linear'). Colors will be replaced by brand_color if provided. | |
| brand_color | No | Primary brand hex color (e.g. '#FF6B35'). Auto-generates a full harmonious palette using color theory. |