ui-design-system
Create and maintain design systems with tools for tokens, component documentation, and responsive calculations.
Install
mkdir -p .claude/skills/ui-design-system && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/512" && unzip -o skill.zip -d .claude/skills/ui-design-system && rm skill.zipInstalls to .claude/skills/ui-design-system
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
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.Key capabilities
- →Generate design tokens for colors, typography, and spacing
- →Create modular typography scales
- →Implement 8pt spacing grid systems
- →Calculate responsive design breakpoints
- →Export tokens in JSON, CSS, or SCSS formats
How it works
The design_token_generator.py script processes brand inputs to output standardized design tokens across multiple formats and styles.
Inputs & outputs
When to use ui-design-system
- →Generate design tokens from brand colors
- →Create a component documentation system
- →Calculate responsive layout breakpoints
- →Standardize spacing grids
About this skill
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
When not to use it
- →When working on projects without a defined brand color palette
Limitations
- →Limited to predefined styles like modern, classic, and playful
How it compares
This automates the creation of consistent design system assets instead of manually defining and updating individual CSS variables.
Compared to similar skills
ui-design-system side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| ui-design-system (this skill) | 29 | 7mo | Review | Beginner |
| penpot-uiux-design | 27 | 6mo | Review | Advanced |
| stitch-ui-design | 26 | 4mo | No flags | Beginner |
| elegant-design | 21 | 5mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by davila7
View all by davila7 →You might also like
penpot-uiux-design
github
Comprehensive guide for creating professional UI/UX designs in Penpot using MCP tools. Use this skill when: (1) Creating new UI/UX designs for web, mobile, or desktop applications, (2) Building design systems with components and tokens, (3) Designing dashboards, forms, navigation, or landing pages, (4) Applying accessibility standards and best practices, (5) Following platform guidelines (iOS, Android, Material Design), (6) Reviewing or improving existing Penpot designs for usability. Triggers: "design a UI", "create interface", "build layout", "design dashboard", "create form", "design landing page", "make it accessible", "design system", "component library".
stitch-ui-design
sickn33
Expert guide for creating effective prompts for Google Stitch AI UI design tool. Use when user wants to design UI/UX in Stitch, create app interfaces, generate mobile/web designs, or needs help crafting Stitch prompts. Covers prompt structure, specificity techniques, iteration strategies, and design-to-code workflows for Stitch by Google.
elegant-design
rand
Create world-class, accessible, responsive interfaces with sophisticated interactive elements including chat, terminals, code display, and streaming content. Use when building user interfaces that need professional polish and developer-focused features.
ui-ux-designer
sickn33
Create interface designs, wireframes, and design systems. Masters user research, accessibility standards, and modern design tools. Specializes in design tokens, component libraries, and inclusive design. Use PROACTIVELY for design systems, user flows, or interface optimization.
visual-design-foundations
wshobson
Apply typography, color theory, spacing systems, and iconography principles to create cohesive visual designs. Use when establishing design tokens, building style guides, or improving visual hierarchy and consistency.
figma-use
dannote
Control Figma via CLI — create shapes, frames, text, components, set styles, layout, variables, export images. Use when asked to create/modify Figma designs or automate design tasks.