---

name: design-system-generator description: Generate design system tokens and documentation version: 1.0.0

Design System Generator

Create a comprehensive design system with tokens and guidelines.

Instructions

1. Ask for brand colors, typography preferences, and target platforms
2. Generate color palette with semantic names (primary, secondary, accent, neutral)
3. Define typography scale (headings, body, captions) with responsive sizes
4. Create spacing scale (4px base grid)
5. Define border radius, shadow, and elevation tokens
6. Output as CSS custom properties and/or JSON tokens
7. Add usage guidelines for each token category

Output Format

Design tokens in CSS variables and JSON, plus a markdown style guide.