Design System Skill v3.0

Manage DESIGN.md files that frontend agents read to generate consistent UI.

Actions

/design-system init

Create a new DESIGN.md from the template:

1. Copy docs/templates/DESIGN.md.template to project root as DESIGN.md
2. Ask user for: project name, visual theme, primary color
3. Fill in template variables
4. Output: DESIGN.md ready for customization

/design-system init
# Creates DESIGN.md with 9 sections from template

/design-system load

Load DESIGN.md into current context for frontend work:

1. Read DESIGN.md from project root (or specified path)
2. Extract design tokens as structured data
3. Inject into agent context as reference
4. Used automatically by orchestrator Step 3 (PLAN) for frontend tasks

/design-system load
# Loads DESIGN.md tokens into context

/design-system validate

Check generated components against DESIGN.md:

1. Read DESIGN.md
2. Scan specified files for design token usage
3. Report violations: hardcoded colors, wrong spacing, missing states
4. Output: compliance report with fix suggestions

/design-system validate src/components/
# Checks all components against design system

Integration Points

Skill/Agent	How It Uses DESIGN.md
Orchestrator Step 3	If task is frontend and DESIGN.md exists, include as context
ralph-frontend	Loads DESIGN.md before generating any component
/create-task-batch	Phase 1 asks about design system for frontend tasks
/gates Stage 5	BROWSER validation checks design compliance (future)

Validation Checklist

The 9 required sections in every DESIGN.md:

1. Visual Theme
2. Color Palette (with CSS custom property tokens)
3. Typography (with font stack and scale)
4. Components (buttons, inputs, cards minimum)
5. Layout (grid, spacing scale, breakpoints)
6. Depth and Elevation
7. Do's and Don'ts
8. Responsive Behavior
9. Agent Prompt Guide

Template

Source: docs/templates/DESIGN.md.template

Inspired by VoltAgent/awesome-design-md — 55+ real-world DESIGN.md files.