UI design system skill
UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools.
by davila7·MIT license·★ 32,299 Stars on the repo·GitHub ↗
Use now
npx degit davila7/claude-code-templates/cli-tool/components/skills/creative-design/ui-design-system#main ~/.claude/skills/ui-design-system-davila7Checked ·commit main
Files of UI design system
SKILL.md
Show the full text33 lines
UI Design System
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
| 1 | |
| 2 | name ui-design-system |
| 3 | description UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use for creating design systems, maintaining visual consistency, and facilitating design-dev collaboration. |
| 4 | |
| 5 | |
| 6 | # UI Design System |
| 7 | |
| 8 | Professional toolkit for creating and maintaining scalable design systems. |
| 9 | |
| 10 | ## Core Capabilities |
| 11 | Design token generation (colors, typography, spacing) |
| 12 | Component system architecture |
| 13 | Responsive design calculations |
| 14 | Accessibility compliance |
| 15 | Developer handoff documentation |
| 16 | |
| 17 | ## Key Scripts |
| 18 | |
| 19 | ### design_token_generator.py |
| 20 | Generates complete design system tokens from brand colors. |
| 21 | |
| 22 | **Usage**: `python scripts/design_token_generator.py [brand_color] [style] [format]` |
| 23 | Styles: modern, classic, playful |
| 24 | Formats: json, css, scss |
| 25 | |
| 26 | **Features**: |
| 27 | Complete color palette generation |
| 28 | Modular typography scale |
| 29 | 8pt spacing grid system |
| 30 | Shadow and animation tokens |
| 31 | Responsive breakpoints |
| 32 | Multiple export formats |
| 33 |
Discussion
Alternatives
ImpeccableUse when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.
Apple designApple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading), reduced-motion, or the design foundations (feedback, spatial consistency, restraint) behind Apple-style interfaces.Building AnimationsBuild an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at all, what purpose, which tool, which properties, which curve and duration, how it interrupts, how it exits. Writes the implementation. Use when asked to animate something, add motion, make a component feel alive, or build a transition. For critiquing existing motion use review-animations; for auditing a whole codebase use improve-animations.
BreakRenders a component you choose in every state and scenario on a temporary page and stress tests it.Browse more free Claude skills or everything in Design.