Generate design system skills

As the industry shifts away from traditional design tools like Figma and increasingly relies on LLMs to generate UI code, maintaining a consistent brand identity remains crucial.

Creating a standardized blueprint of your design system instructions ensures that AI coding agents consistently adhere to your specific style guidelines, establishing a new standard for AI-assisted development.

Run this command to start the process of creating the design system guideline:

npx typeui.sh generate

Provider selection behavior

At the start of the flow:

• .agents/skills is included automatically
• you can select additional optional provider targets

Design system generation

You will be prompted for:

1. Product basics
   • Product name
   • Brand summary
2. Visual style directions
   • Multi-select preset list (+ optional custom values)
3. Typography
   • Typography scale strategy (exactly one selected)
   • Primary UI font family (Google Fonts, choose one)
   • Display/heading font family (Google Fonts, choose one)
   • Monospace font family (Google Fonts, choose one)
   • Core font weights (checkbox list, all selected by default)
4. Color palette
   • Palette guidance presets (+ optional custom values)
   • Token values for primary, secondary, success, warning, danger, surface, text
5. Spacing
   • Spacing scale guidance (exactly one selected)
6. Component families
   • Multi-select list (+ optional custom values)
7. Accessibility requirements
   • Multi-select list (+ optional custom values)
8. Writing tone
   • Multi-select list (+ optional custom values)
9. Rules
   • Design DO rules (multi-select + optional custom)
   • Design DON'T rules (multi-select + optional custom)