UI Design System Toolkit
SkillDocs & knowledgeTurn design decisions into a consistent design system that developers can build from. Once added, your AI can generate design tokens, color palettes, and typography scales, and prepare documentation and handoff materials so design and development stay aligned.
Available today. Use it from your connected AI after setup.
No other account needed.
Add the skill, then ask your AI to create a design system for a project or generate tokens and handoff docs for designs you already have.
Then ask your AI: use the UI Design System Toolkit skill
What your AI can do with it
- Generate design tokens for colors, spacing, and typography
- Create color palettes for your project
- Build typography scales for consistent text styles
- Write component documentation
- Calculate responsive values for different screen sizes
- Prepare developer handoff docs for your UI project
What this skill tells your AI
The instructions your AI receives, as published by majiayu000/spellbook in skills/ui-design-system/SKILL.md and read by ahel’s review.
Professional toolkit for creating and maintaining scalable design systems.
Core Capabilities
- Design token generation (colors, typography, spacing)
- Component system architecture
- Responsive design calculations
- Accessibility compliance
- Developer handoff documentation
Key Scripts
design_token_generator.py
Generates complete design system tokens from brand colors.
Usage: python scripts/design_token_generator.py [brand_color] [style] [format]
- Styles: modern, classic, playful
- Formats: json, css, scss
Features:
- Complete color palette generation
- Modular typography scale
- 8pt spacing grid system
- Shadow and animation tokens
- Responsive breakpoints
- Multiple export formats
Verification
Before reporting completion, validate generated tokens or handoff artifacts against the requested brand color, output format, accessibility constraints, and the target implementation surface. For script usage, run the command with representative input and inspect the emitted JSON/CSS/SCSS for valid syntax and preserved brand values.
Signals
- GitHub stars
- 278
- Forks
- 26
- Last commit
- Sep 2026
Advanced
- Catalog kind
- skill
- Gateway key
ui-design-system- Source
- github.com/majiayu000/spellbook