ui-design-system
UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use when creating design systems, generating design tokens, maintaining visual consistency, or facilitating design-dev collaboration and developer handoff.
Profile →npx skills add alirezarezvani/claude-skills --skill ui-design-system --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# UI Design System Generate design tokens, create color palettes, calculate typography scales, build component systems, and prepare developer handoff documentation. --- ## Table of Contents - [Trigger Terms](#trigger-terms) - [Workflows](#workflows) - [Workflow 1: Generate Design Tokens](#workflow-1-generate-design-tokens) - [Workflow 2: Create Component System](#workflow-2-create-component-system) - [Workflow 3: Responsive Design](#workflow-3-responsive-design) - [Workflow 4: Developer Handoff](#workflow-4-developer-handoff) - [Tool Reference](#tool-reference) - [Quick Reference Tables](#quick-reference-tables) - [Knowledge Base](#knowledge-base) --- ## Trigger Terms Use this skill when you need to: - "generate design tokens" - "create color palette" - "build typography scale" - "calculate spacing system" - "create design system" - "generate CSS variables" - "export SCSS tokens" - "set up component architecture" - "document component library" - "calculate responsive breakpoints" - "prepare developer handoff" - "convert brand color to palette" - "check WCAG contrast" - "build 8pt grid system" --- ## Workflows ### Workflow 1: Generate Design Tokens **Situation:** You have a brand co
- Table of Contents
- Trigger Terms
- Workflows
- Workflow 1: Generate Design Tokens
- Workflow 2: Create Component System
- Workflow 3: Responsive Design
- Workflow 4: Developer Handoff
- Tool Reference
- designtokengenerator.py
- Quick Reference Tables
- Color Scale Generation
- Typography Scale (1.25x Ratio)
- WCAG Contrast Requirements
- Style Presets
python scripts/design_token_generator.py "#0066CC" modern json python scripts/design_token_generator.py "#0066CC" modern css > design-tokens.css python scripts/design_token_generator.py "#0066CC" modern scss > _design-tokens.scss python scripts/design_token_generator.py "#0066CC" modern json > design-tokens.json python scripts/design_token_generator.py "#0066CC" modern css python scripts/design_token_generator.py "#0066CC" modern scss Generate JSON tokens (default) python scripts/design_token_generator.py "#0066CC" Classic style with CSS output python scripts/design_token_generator.py "#8B4513" classic css
What does the ui-design-system skill do?
UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use when creating design systems, generating design tokens, maintaining visual consistency, or facilitating design-dev collaboration and developer handoff.
How do I install it?
Run `npx skills add alirezarezvani/claude-skills --skill ui-design-system --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From alirezarezvani/claude-skills, a repository with 23,791 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.