r3dlex/oh-my-antigravity/design-system

Design System Skill (oh-my-antigravity)

Quick Start

• Choose a source, extract tokens, map semantic names, then update DESIGN.md.

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

Quick Start

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)

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

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

1. 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

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