Ui design system
Use when creating or maintaining UI design systems, design tokens, component documentation, responsive calculations, quality checks, or design-dev handoff materials.From its SKILL.md
npx -y skills add majiayu000/spellbook --skill ui-design-systemAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
SKILL.md
1.3 KB, 211 tokens by cl100k_base, as published. Nobody here has run it
UI Design System Toolkit
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.
What ships with it: 1 file
5.3 KB alongside SKILL.md, 1 of them executable
scripts/
- design_token_generator.pyruns5.3 KB
Gives 0 of the 12 instructions most design systems skills give in 211 tokens
Counted across 501 of the 520 authors here whose files we hold, read 2026-09-06
- Extract colors, typography, spacing, radii, shadows, breakpointsin 20 of 501, across 10 files
- Create a self-contained dependency-free HTML preview pagein 20 of 501, across 10 files
- Keep touch targets at least 44x44pxin 20 of 501
- Score the UI across ten dimensionsin 18 of 501, across 8 files
- Animate exclusively via transform and opacityin 18 of 501, across 15 files
- Ensure WCAG AA color contrastin 18 of 501, across 13 files
- Generate DESIGN.md with rationale for each decisionin 17 of 501, across 7 files
- Ensure proper contrast and readabilityin 15 of 501, across 10 files
- Scan the codebase for existing style patternsin 15 of 501, across 6 files
- Give every interactive element a visible focus indicatorin 15 of 501, across 13 files
- Propose a design token setin 14 of 501, across 5 files
- Create a custom theme when none fitin 14 of 501, across 9 files
Said here and by no other author read
- Validate generated tokens before reporting completion
- Validate artifacts against the requested brand color
- Validate against output format and accessibility constraints
- Validate against the target implementation surface
- Run the token generator with representative input
- Inspect emitted JSON, CSS, or SCSS for valid syntax
Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.