Design System Skill (oh-my-product)

Use this skill when the user wants to extract, create, or synchronize design system tokens.

Capabilities

1. Token Extraction — Extract design tokens from:

   • Live URLs (color palette, typography, spacing from computed styles)
   • Existing CSS/SCSS/Tailwind config files
   • Figma exports or design specs
   • Screenshot images (via multimodal analysis)

2. DESIGN.md Sync — Update DESIGN.md sections:

   • Color Palette & Roles (Section 2)
   • Typography Rules (Section 3)
   • Layout Principles (Section 5)
   • Depth & Elevation (Section 6)

3. Token Format Generation — Output tokens as:

   • CSS custom properties (--color-primary: #hex)
   • Tailwind config extensions
   • SCSS variables
   • JSON token files (Style Dictionary compatible)

Workflow

1. Source — Identify where tokens come from (URL, file, image, manual spec)
2. Extract — Parse and normalize token values
3. Map — Assign semantic roles (primary, secondary, accent, surface, etc.)
4. Write — Update DESIGN.md and/or generate token config files
5. Verify — Check contrast ratios, validate completeness

Token Categories

Category	Required Tokens
Colors	primary, secondary, accent, background, surface, text, border, error, success, warning
Typography	heading (h1-h6), body, caption, overline font specs
Spacing	scale from 4px base (4, 8, 12, 16, 24, 32, 48, 64, 96)
Elevation	shadow-sm, shadow-md, shadow-lg, shadow-xl
Radius	sm (4px), md (8px), lg (16px), full (9999px)

Rules

• Always output tokens with semantic names, never raw values only
• Validate color contrast ratios (WCAG AA: 4.5:1 for text, 3:1 for large text)
• Preserve existing DESIGN.md sections when updating — only modify relevant sections
• Generate both human-readable (DESIGN.md) and machine-readable (CSS/JSON) outputs