UI Design System

Overview

This skill provides [TODO: Add 2-3 sentence overview].

Core Value: [TODO: Add value proposition with metrics]

Target Audience: [TODO: Define target users]

Use Cases: [TODO: List 3-5 primary use cases]

Core Capabilities

• [Capability 1] - [Description]

• [Capability 2] - [Description]

• [Capability 3] - [Description]

• [Capability 4] - [Description]

Key Workflows

Workflow 1: [Workflow Name]

Time: [Duration estimate]

Steps:

• [Step 1]

• [Step 2]

• [Step 3]

Expected Output: [What success looks like]

Workflow 2: [Workflow Name]

Time: [Duration estimate]

Steps:

• [Step 1]

• [Step 2]

• [Step 3]

Expected Output: [What success looks like]

Professional toolkit for creating and maintaining scalable design systems. This skill provides Python tools for token generation, comprehensive frameworks for design system architecture, and battle-tested templates for component documentation.

What This Skill Provides:

• Design token generator from brand colors

• Complete color, typography, and spacing systems

• Component architecture patterns

• Accessibility compliance frameworks (WCAG 2.1 AA)

• Developer handoff documentation

Best For:

• Building new design systems from scratch

• Standardizing existing design patterns

• Generating design tokens programmatically

• Ensuring accessibility compliance

• Facilitating design-development collaboration

Quick Start

Generate Design Tokens

Modern style

python scripts/design_token_generator.py --brand "#0066CC" --style modern

Export as CSS

python scripts/design_token_generator.py --brand "#0066CC" --output css

Export as JSON for Figma

python scripts/design_token_generator.py --brand "#0066CC" -o json -f tokens.json

Design Token Structure

Color System: 50-900 scale (primary, secondary, neutral) Typography: Modular scale (xs to 3xl) Spacing: 8pt grid system Shadows: 5 elevation levels Animation: Duration and easing tokens

See frameworks.md for complete token architecture.

Core Workflows

1. Design System Creation Process

Steps:

• Define brand color: #0066CC

• Choose style: modern, classic, or playful

• Generate tokens: python scripts/design_token_generator.py --brand "#0066CC" --style modern

• Export format: JSON (Figma), CSS (web), SCSS (Sass)

• Import to design tools and codebase

• Document component guidelines

Token Generation:

python scripts/design_token_generator.py --brand "#0066CC" --style modern -o json -f tokens.json

Style Presets:

• Modern: Clean, minimalist, sans-serif

• Classic: Traditional, serif, formal

• Playful: Vibrant, rounded, casual

Detailed Process: See frameworks.md for design token architecture and color system design.

Templates: See templates.md for token documentation format.

2. Component System Design

Component Hierarchy:

Primitives → Patterns → Layouts

Primitives: Button, Input, Checkbox Patterns: FormGroup, Card, Modal Layouts: Container, Grid, Stack

Component Variants:

• Size: sm, md, lg

• Style: primary, secondary, outline, ghost

• State: default, hover, active, focus, disabled

Component Props API:

interface ButtonProps { variant?: 'primary' | 'secondary' | 'outline'; size?: 'sm' | 'md' | 'lg'; disabled?: boolean; children: ReactNode; }

Detailed Framework: See frameworks.md for component architecture and API design patterns.

Templates: See templates.md for component documentation template.

3. Responsive Design Implementation

Breakpoint System:

xs: 0px (mobile) sm: 640px (large mobile) md: 768px (tablet) lg: 1024px (laptop) xl: 1280px (desktop) 2xl: 1536px (large desktop)

Mobile-First Approach:

/* Default: mobile */ padding: 16px;

/* Tablet and up */ @media (min-width: 768px) { padding: 24px; }

Grid System:

• 12-column grid

• Responsive columns (col-12 md:col-6 lg:col-4)

• Fluid containers

Detailed Framework: See frameworks.md for responsive design system and grid implementation.

Python Tools

design_token_generator.py

Generate complete design token systems from brand color.

Key Features:

• Color palette generation (50-900 scale)

• Modular typography scale

• 8pt spacing grid

• Shadow and animation tokens

• Multiple export formats (JSON, CSS, SCSS)

• Three style presets

Usage:

Modern style, JSON output

python3 scripts/design_token_generator.py --brand "#0066CC" --style modern

CSS export

python3 scripts/design_token_generator.py --brand "#0066CC" --output css -f tokens.css

SCSS export

python3 scripts/design_token_generator.py --brand "#0066CC" --output scss -f tokens.scss

JSON for Figma

python3 scripts/design_token_generator.py --brand "#0066CC" -o json -f figma-tokens.json

Verbose mode

python3 scripts/design_token_generator.py --brand "#0066CC" -v

Generated Tokens:

• Color: Primary, secondary, neutral scales (50-900)

• Typography: Font sizes (xs-3xl), line heights, weights

• Spacing: 8pt grid (0-20)

• Shadows: 5 elevation levels

• Animation: Durations and easing functions

Export Formats:

• JSON (React, Tailwind, Figma)

• CSS Custom Properties (web)

• SCSS Variables (Sass)

Complete Documentation: See tools.md for full usage guide, integration patterns, and customization options.

Reference Documentation

Frameworks (frameworks.md)

Comprehensive design system frameworks:

• Design Token Architecture: Token types, naming conventions, distribution

• Color System Design: Palette generation, semantic mapping, contrast standards

• Typography System: Type scale, hierarchy, font loading

• Spacing System: 8pt grid, responsive spacing

• Component Architecture: Component library structure, variants, API design

• Responsive Design: Breakpoints, grid system, mobile-first approach

• Accessibility Standards: WCAG 2.1 AA compliance, semantic HTML

• Design System Governance: Versioning, documentation, token distribution

Templates (templates.md)

Ready-to-use templates:

• Component Documentation: Complete component doc template with examples

• Design Token Documentation: Token reference format

• Component Checklist: Readiness checklist for design and development

Tools (tools.md)

Python tool documentation:

• design_token_generator.py: Complete usage guide

• Command-Line Options: All flags and parameters

• Generated Tokens: Full list of token types

• Export Formats: JSON, CSS, SCSS examples

• Integration Patterns: React/Tailwind, Figma, CSS frameworks

• Best Practices: DO/DON'T guidelines

Integration Points

This toolkit integrates with:

• Design Tools: Figma, Sketch, Adobe XD (via JSON tokens)

• CSS Frameworks: Tailwind CSS, Styled Components, Emotion

• Build Tools: Webpack, Vite, Rollup

• Documentation: Storybook, Docz, Styleguidist

• Testing: Chromatic, Percy (visual regression)

See tools.md for detailed integration workflows.

Quick Commands

Generate tokens (modern style)

python scripts/design_token_generator.py --brand "#0066CC" --style modern

Different styles

python scripts/design_token_generator.py --brand "#0066CC" --style classic python scripts/design_token_generator.py --brand "#8B5CF6" --style playful

Export formats

python scripts/design_token_generator.py --brand "#0066CC" -o json -f tokens.json python scripts/design_token_generator.py --brand "#0066CC" -o css -f tokens.css python scripts/design_token_generator.py --brand "#0066CC" -o scss -f tokens.scss

Verbose output

python scripts/design_token_generator.py --brand "#0066CC" -v