Ramp

Design System Subagents

Automated quality checks and Figma sync for your design system.

What are Subagents?

Subagents are specialized AI assistants that automate specific tasks in your design system workflow. Each subagent has a focused purpose and can be invoked via Claude Code CLI.

All subagent specifications are stored in .claude/subagents/ as markdown files. They use Claude Code's built-in tools and require no special Skills or plugins.

Available Subagents

Component Screenshot Generator
Ready
Generates screenshots of all component variants for visual regression testing

Usage:

claude --subagent component-screenshot-generator --all

What it does:

  • Scans all components in components/ui/
  • Extracts all variants (primary, secondary, disabled, etc.)
  • Generates standalone HTML for each variant
  • Captures screenshots at 1200x800px
  • Saves to public/screenshots/code/
  • Creates manifest file with metadata

Requirements:

npm install -D playwright
Figma Drift Detection
Needs Figma
Compares Figma designs against React implementations (visual + structural)

Usage:

claude --subagent figma-drift-check --all

What it does:

  • Exports component images from Figma at same size
  • Exports Figma component JSON with variables
  • Runs pixel-by-pixel visual comparison
  • Compares structural properties (spacing, colors, etc.)
  • Validates token usage consistency
  • Generates diff images and comprehensive report

Requirements:

  • Figma API token
  • Figma MCP configured
  • npm install -D pixelmatch pngjs
Token Sync & Diff
Needs Figma
Extracts and compares design tokens between Figma and code

Usage:

claude --subagent token-sync --compare

What it does:

  • Extracts all Figma variables/collections
  • Parses code tokens (Tailwind config, CSS variables)
  • Compares with smart unit matching (px vs rem)
  • Checks for @code-value annotations in Figma
  • Generates detailed diff report
  • Optional auto-sync to update code

Token Categories:

Colors
Spacing
Typography
Border Radius
Dashboard Generator
Ready
Creates interactive health dashboard from all reports

Usage:

claude --subagent dashboard-generator

What it does:

  • Reads all report JSON files
  • Calculates overall health score (0-100%)
  • Generates single-file HTML dashboard
  • Shows token sync, component drift, doc status
  • Provides prioritized recommendations
  • Includes trend analysis if historical data exists

Output:

public/design-system-dashboard.html
Documentation Validator
Ready
Validates component docs against code and Figma

Usage:

claude --subagent doc-validator --all

What it does:

  • Scans existing component documentation
  • Extracts props, variants from TypeScript
  • Compares docs against actual code
  • Detects missing props, variants, examples
  • Generates update suggestions
  • Optional auto-update mode (preserves human content)

Great for CI:

claude --subagent doc-validator --strict

Fails if docs are out of date

Recommended Workflows

Daily Development

Run before committing changes to maintain visual history and doc quality:

claude --subagent component-screenshot-generator --allclaude --subagent doc-validator --all --auto-update

Weekly Figma Sync

Full health check to catch any drift from designs:

claude --subagent token-sync --compareclaude --subagent figma-drift-check --all --update-figmaclaude --subagent dashboard-generator# Then open: public/design-system-dashboard.html

CI/CD Pipeline

Prevent regressions by validating on every pull request:

claude --subagent doc-validator --strictclaude --subagent token-sync --compare

Three Levels of Verification

1. Token Level

Are base design tokens aligned between Figma and code? Colors, spacing, typography, radius.

2. Component Structure

Are properties and tokens used correctly? Proper spacing, correct color variables, matching layouts.

3. Visual Level

Does it actually look right? Pixel-perfect comparison between Figma exports and rendered components.

Getting Started

1. Install Dependencies

npm install -D playwright pixelmatch pngjsnpx playwright install

2. Configure Figma Access (Optional)

Only needed if you want Figma integration:

export FIGMA_ACCESS_TOKEN="your-token-here"export FIGMA_FILE_ID="your-file-id"

3. Try Your First Subagent

Start with doc-validator (easiest, no external dependencies):

claude --subagent doc-validator --component Button

Resources

Subagent Specifications
Detailed specs for each subagent
.claude/subagents/
Quick Start Guide
Setup instructions and workflows
.claude/SETUP_COMPLETE.md
← Back to Claude Code Setup