The AI can generate a design system — color/number/text variables and global classes — from a brief or an existing design.
Where: AI assistant → design system request — Ask for a design system
Key ideas
- Tokens + classes: Generates variables and reusable classes, not just inline styles.
- Additive: Backfills missing tokens without clobbering a confirmed/imported system.
Steps
- Open the assistant.
- Describe your brand/brief.
- Review the generated tokens and classes.
What the generated system contains
- A design system is a reusable set of color, number, and text variables plus global classes—not a collection of one-off inline styles.
- The assistant can use a brief, current design, and available brand context as inputs; review whether the proposed names and values fit the project before applying.
- Generation is additive when filling gaps in an existing system, so confirm which existing/imported values should remain authoritative.
Review before using it broadly
- Check color roles, typography hierarchy, spacing scale, and class naming before applying tokens across pages.
- Apply the system to a representative component/page first and inspect for contrast, wrapping, and responsive changes.
- Keep brand-specific values tied to the intended project Brand or design system rather than copying them into unrelated prompt fields.
Tips
- Describe the intended product, audience, and visual direction; include constraints such as existing logo colors or font choices.
- Ask for a small, coherent token set instead of generating many near-duplicate values.
Limitations and important notes
- Generated tokens and classes are proposals; verify them in the project and do not assume they were published to every page.