Work With Design Systems

work-with-design-systems

A Claude skill for working with Figma design systems — two modes in one place: **inspect** (read-only audits with WCAG checks, component scoring, handoff docs) and **build** (creating components, fixing foundations, adding slots, writing descriptions). Build mode optionally extends to **Phase 6 (sync to code)** — generates `tokens.css`, an audit script, and AI rules file for your codebase.

Works with Claude Code, Cursor, and Codex.

What's new in v2.0

This is a major release. The skill was previously called `generate-design-system` and only handled building. Now it covers the full lifecycle: inspect existing files, decide what to build or fix, optionally export to code. Between inspect and build, the skill always pauses for your decision. Phase 6 is OFF by default and only triggers on explicit request.

**Migration from v1.x:** see CHANGELOG for the migration note. Repo URL has changed but old links redirect automatically.

Highlights:

• Two modes — inspect (read-only) and build (write), with mandatory pause between
• Phase 6 — sync to code (optional, off by default) — generates tokens.css with three-layer indirection, AI rules file (Claude Code / Cursor / Codex), and CI-ready audit script. Closes the design-to-code loop.
• Slots support for compound components (Card, Modal, Dialog) — replaces detach patterns
• Mandatory structured component descriptions — Figma MCP passes them to agents as context
• Six audit modules — token compliance (with severity tiers), interactive states, WCAG accessibility, detached instances, naming quality, component descriptions
• Weighted readiness scoring — score each component 0–100 (errors weighted 1.0, warnings 0.3)
• Three export formats — markdown, JSON, AI prompt for code generation
• Patterns guide — how to document composition patterns in Figma (and optionally export them as spec files to repo)
• Story-to-variant parity check when codebase has Storybook
• **A