natdexterra

Work With Design Systems — Design skill for Claude Code

Design community

Inspect, build, or extend Figma design systems from Claude Code.

How to install Work With Design Systems

This entry records only its repository, not the path inside it, so there is no exact command to give. Open natdexterra/work-with-design-systems and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Work With Design Systems does

Inspect, build, or extend Figma design systems from Claude Code. Read-only audits with WCAG checks and component scoring, build mode with variable bindings and slots, optional Phase 6 sync to tokens.css + AI rules.

Alternatives in Design

Studio — Launch the local design Studio — a live token editor over the latest extraction 3.6k ★
Platform Design Skills — 300+ design rules from Apple HIG, Material Design 3, and WCAG 2.2 for cross-platform apps 261 ★
Forge Skill Builder — Author a valid Forge SKILL.md (frontmatter + body + optional scripts) end-to-end 227 ★

README

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