| name | design-system |
| aliases | ["/design-system","extract tokens","sync design","design tokens","color palette"] |
| primaryRole | designer |
| description | Activate when the user wants to extract, sync, or manage design system tokens. Pulls color palettes, typography scales, spacing tokens from URLs or existing code and updates DESIGN.md. |
Design System Skill (oh-my-product)
Use this skill when the user wants to extract, create, or synchronize design system tokens.
Capabilities
-
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)
-
DESIGN.md Sync — Update DESIGN.md sections:
- Color Palette & Roles (Section 2)
- Typography Rules (Section 3)
- Layout Principles (Section 5)
- Depth & Elevation (Section 6)
-
Token Format Generation — Output tokens as:
- CSS custom properties (
--color-primary: #hex)
- Tailwind config extensions
- SCSS variables
- JSON token files (Style Dictionary compatible)
Workflow
- Source — Identify where tokens come from (URL, file, image, manual spec)
- Extract — Parse and normalize token values
- Map — Assign semantic roles (primary, secondary, accent, surface, etc.)
- Write — Update DESIGN.md and/or generate token config files
- 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
