ui-design-system（用户界面设计系统）

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
• Workflows

- Workflow 1: Generate Design Tokens - Workflow 2: Create Component System - Workflow 3: Responsive Design - Workflow 4: Developer Handoff

• Tool Reference
• Quick Reference Tables
• 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 color and need a complete design token system.

Steps:

1. Identify brand color and style

- Brand primary color (hex format) - Style preference: modern | classic | playful

1. Generate tokens using script python scripts/design_token_generator.py "#0066CC" modern json
2. Review generated categories

- Colors: primary, secondary, neutral, semantic, surface - Typography: fontFamily, fontSize, fontWeight, lineHeight - Spacing: 8pt grid-based scale (0-64) - Borders: radius, width - Shadows: none through 2xl - Animation: duration, easing - Breakpoints: xs through 2xl

1. Export in target format # CSS custom properties python scripts/design_token_generator.py "#0066CC" modern css > design-tokens.css # SCSS variables python scripts/design_token_generator.py "#0066CC" modern scss > _design-tokens.scss # JSON for Figma/tooling python scripts/design_token_generator.py "#0066CC" modern json > design-tokens.json
2. Validate accessibility

- Check color contrast meets WCAG AA (4.5:1 normal, 3:1 large text) - Verify semantic colors have contrast colors defined

Workflow 2: Create Component System

Situation: You need to structure a component library using design tokens.

Steps:

1. Define component hierarchy

- Atoms: Button, Input, Icon, Label, Badge - Molecules: FormField, SearchBar, Card, ListItem - Organisms: Header, Footer, DataTable, Modal - Templates: DashboardLayout, AuthLayout

1. Map tokens to components Component Tokens Used Button colors, sizing, borders, shadows, typography Input colors, sizing, borders, spacing Card colors, borders, shadows, spacing Modal colors, shadows, spacing, z-index, animation
2. Define variant patterns Size variants: sm: height 32px, paddingX 12px, fontSize 14px md: height 40px, paddingX 16px, fontSize 16px lg: height 48px, paddingX 20px, fontSize 18px Color variants: primary: background primary-500, text white secondary: background neutral-100, text neutral-900 ghost: background transparent, text neutral-700
3. Document component API

- Props interface with types - Variant options - State handling (hover, active, focus, disabled) - Accessibility requirements

1. Reference: See references/component-architecture.md

Workflow 3: Responsive Design

Situation: You need breakpoints, fluid typography, or responsive spacing.

Steps:

1. Define breakpoints Name Width Target xs 0 Small phones sm 480px Large phones md 640px Tablets lg 768px Small laptops xl 1024px Desktops 2xl 1280px Large screens
2. Calculate fluid typography Formula: clamp(min, preferred, max) /* 16px to 24px between 320px and 1200px viewport */ font-size: clamp(1rem, 0.5rem + 2vw, 1.5rem); Pre-calculated scales: --fluid-h1: clamp(2rem, 1rem + 3.6vw, 4rem); --fluid-h2: clamp(1.75rem, 1rem + 2.3vw, 3rem); --fluid-h3: clamp(1.5rem, 1rem + 1.4vw, 2.25rem); --fluid-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
3. Set up responsive spacing Token Mobile Tablet Desktop --space-md 12px 16px 16px --space-lg 16px 24px 32px --space-xl 24px 32px 48px --space-section 48px 80px 120px
4. Reference: See references/responsive-calculations.md

Workflow 4: Developer Handoff

Situation: You need to hand off design tokens to development team.

Steps:

1. Export tokens in required formats # For CSS projects python scripts/design_token_generator.py "#0066CC" modern css # For SCSS projects python scripts/design_token_generator.py "#0066CC" modern scss # For JavaScript/TypeScript python scripts/design_token_generator.py "#0066CC" modern json
2. Prepare framework integration React + CSS Variables: import './design-tokens.css'; <button className="btn btn-primary">Click</button> Tailwind Config: const tokens = require('./design-tokens.json'); module.exports = {theme: {colors: tokens.colors, fontFamily: tokens.typography.fontFamily}}; styled-components: ` import tokens from './design-tokens.json'; const Button = styled.button background: ${tokens.colors.primary['500']}; padding: ${tokens.spacing['2']} ${tokens.spacing['4']}; ; `
3. Sync with Figma

- Install Tokens Studio plugin - Import design-tokens.json - Tokens sync automatically with Figma styles

1. Handoff checklist

- Token files added to project - Build pipeline configured - Theme/CSS variables imported - Component library aligned - Documentation generated

1. Reference: See references/developer-handoff.md

Tool Reference

design_token_generator.py

Generates complete design token system from brand color.

Examples:

# 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

# Playful style summary view
python scripts/design_token_generator.py "#FF6B6B" playful summary

Output Categories:

Quick Reference Tables

Color Scale Generation

Typography Scale (1.25x Ratio)

WCAG Contrast Requirements

Large text: ≥18pt regular or ≥14pt bold

Style Presets

Knowledge Base

Detailed reference guides in references/:

Validation Checklist

Token Generation

• Brand color provided in hex format
• Style matches project requirements
• All token categories generated
• Semantic colors include contrast values

Component System

• All sizes implemented (sm, md, lg)
• All variants implemented (primary, secondary, ghost)
• All states working (hover, active, focus, disabled)
• Uses only design tokens (no hardcoded values)

Accessibility

• Color contrast meets WCAG AA
• Focus indicators visible
• Touch targets ≥ 44×44px
• Semantic HTML elements used

Developer Handoff

• Tokens exported in required format
• Framework integration documented
• Design tool synced
• Component documentation complete

Troubleshooting

Success Criteria

Scope & Limitations

In scope:

• Complete design token generation from brand color
• Color palette generation (primary, secondary, neutral, semantic)
• Typography system with modular scale
• 8pt grid-based spacing system
• Component sizing, border, shadow, animation tokens
• Export to CSS custom properties, SCSS variables, and JSON
• Responsive breakpoint definitions
• WCAG contrast reference tables

Out of scope:

• Dark mode token generation (requires separate palette mapping)
• Animation/motion design library
• Icon system generation
• Runtime theme switching implementation
• Figma plugin or API integration (use Tokens Studio)
• Visual regression testing
• Design-to-code conversion (use Figma Dev Mode or Locofy)

Integration Points