UI Design System
This skill generates design tokens, color palettes, typography scales, component systems, and developer handoff documentation for UI design systems. It provides workflows for token generation, component architecture, responsive design, and handoff, along with scripts and reference tables.
✨ What it does
- Generates design tokens in JSON, CSS, or SCSS formats.
- Creates color palettes with WCAG contrast validation.
- Calculates typography scales and spacing systems.
- Provides component architecture guidance and variant patterns.
- Includes responsive design calculations and breakpoints.
- Offers developer handoff integration examples for React, Tailwind, and styled-components.
🎯 When to use it
- When you need to generate design tokens from a brand color.
- When you need to create a component system or document a component library.
- When you need to calculate responsive breakpoints or fluid typography.
- When you need to prepare developer handoff files (CSS, SCSS, JSON).
🚀 How to use
Trigger by asking to 'generate design tokens', 'create color palette', 'build typography scale', 'create design system', 'prepare developer handoff', etc. Provide a brand color (hex) and optionally a style (modern, classic, playful) and output format (json, css, scss). Example prompts:
Generate design tokens for #0066CC in modern style.
Create a color palette from #8B4513 and export as CSS.
📄 Output: Design token files (JSON, CSS, SCSS), component documentation, responsive design specs, and developer handoff checklists.
📦 Add this skill to Claude Code
# 1. Get the skills repo
git clone --depth 1 https://github.com/alirezarezvani/claude-skills /tmp/claude-skills
# 2. Copy this skill into your project (or ~/.claude/skills for all projects)
mkdir -p .claude/skills
cp -r /tmp/claude-skills/product-team/skills/ui-design-system .claude/skills/ui-design-systemSkill source: product-team/skills/ui-design-system/SKILL.md
⚠️ Good to know
Requires Python to run the design_token_generator.py script; assumes a brand color is provided in hex format.
❓ FAQ
What formats can design tokens be exported in?
Design tokens can be exported as JSON, CSS custom properties, or SCSS variables.
How does the skill ensure accessibility?
It checks color contrast against WCAG AA standards (4.5:1 for normal text, 3:1 for large text) and includes semantic colors with contrast values.
What style presets are available?
The style presets are modern, classic, and playful, each with different font choices, border radii, and shadow styles.
🤖 Overview, features, install steps and FAQ were generated from the project's SKILL.md on Sep 4, 2026. Always check the original source before running commands.