work-with-design-systems skill
A skill for Figma design systems: read-only audits with WCAG checks, component building and token export to code.
- 53 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- Through Figma MCP the skill reads the file and in build mode creates and edits components.
- Phase 6 writes files into the project repository on explicit request.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/work-with-design-systemsDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- Through Figma MCP the skill reads the file and in build mode creates and edits components.
- Phase 6 writes files into the project repository on explicit request.
This is third-party code. Review the repository files before installing.
What it does
The skill has two modes. Inspect mode only reads a Figma file and runs six audits: variable binding, interactive states, WCAG accessibility, detached instances, naming quality and component descriptions. Each component gets a readiness score from 0 to 100 and the report comes as Markdown, JSON or a prompt for code generation. Build mode creates components, fixes foundations, adds slots to compound components such as Card and Modal and writes structured descriptions that Figma MCP passes to agents. The skill always pauses for your decision between modes. The optional phase 6 generates `tokens.css`, an audit script and a rules file for the codebase on explicit request.
Who it is for. Designers and frontend developers who maintain a Figma design system and connect it to code through Claude Code, Cursor or Codex.
Good fit when
- Before handoff, variable binding and component states are checked.
- An accessibility report against WCAG with a readiness score is required.
- A component with slots replaces detached instances in the file.
- `tokens.css` and rules for an AI agent are exported from the design system.
Not a fit when
- No Figma MCP server is connected.
- You need one screen designed rather than work on a system.
- The plan has few calls and auditing a large file would hit limits.
Example request
Audit the design system in this Figma file and list components with a readiness score below 70.Limitations
You need a connected Figma MCP server, the `figma-use` skill from the Figma plugin and a Full or Dev seat. Figma rate-limits reads by plan: 10 calls per minute and 200 per day on Professional, 15 and 200 on Organization, 20 and 600 on Enterprise, so split large files. In build mode the skill edits the Figma file and phase 6 writes files into the project, and both start only after your confirmation. The skill does not replace a designer review: readiness scores are a guide and the decision on edits stays with you. Duplicate the file before writing to a production one.
How to disable. Delete the `work-with-design-systems` folder from `.claude/skills/`, `.cursor/skills/` or `skills/`. Components created in Figma and `tokens.css` are removed separately.
FAQ
How do I install the skill in Claude Code?
Copy the folder to `.claude/skills/work-with-design-systems/` or clone the repository there with `git clone`. Then call `/work-with-design-systems`.
What is the difference between inspect and build?
Inspect only reads the file and builds a report, build creates and edits components. The skill waits for your decision between them.
What do the six audits check?
Variable binding, interactive states, WCAG accessibility, detached instances, layer naming and component descriptions.
What does phase 6 do?
It generates `tokens.css` with three layers of indirection, a rules file for the agent and an audit script for CI. It is off by default.
Which agents does it work with?
Claude Code, Cursor and Codex: the skill is Markdown and JavaScript files and is not tied to one environment.
Discussion
No questions or reviews yet.
Related
SkillsA Claude skill that turns sites, images and Figma files into a design system: Markdown, DTCG tokens and element rebuild prompts
A Claude Code skill pack: token and component audits, governance, docs and reports for a design system team
uSpec skills document design-system components from Figma: a component contract, color, structure and screen reader behavior.
A Codex skill that reviews UI screenshots and Figma frames, ranks findings and draws annotated images numbered like the report
design-to-code: a website from a design image
design-to-code
A skill that turns a screenshot, mockup, Figma frame or live page into a responsive site and checks it against the design
A skill that turns reference UIs into a structured design profile in JSON and generates matching UI from your content
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Authentication | Repository stars | Main difference |
|---|---|---|---|---|
| work-with-design-systems (this card) | no | 53 | ||
| extract-design-system | no | 288 | pulls tokens from a finished interface; this skill works inside Figma with audits and component building | |
| Figma MCP Server | yes | OAuth | 2,179 | the Figma MCP server itself; this skill adds a workflow on top of it |
README in short
Version 2.0 replaced the earlier `generate-design-system`, which only built systems. The skill now covers inspection, a decision step and optional export to code.
README badge
Original SKILL.md
--- name: work-with-design-systems description: > Inspect, build, or extend Figma design systems — and optionally sync them to code. Two modes in one skill: inspect mode (read-only audits with WCAG checks, component scoring, detached instance detection, handoff docs) and build mode (creating components with variable bindings, slot-based composition, structured descriptions, validation, and optional export of tokens.css + AI rules to the user's codebase). Use when the user says 'audit my design system', 'check component quality', 'create design system', 'build DS in Figma', 'generate component library', 'add slots to my components', 'sync design tokens from code', 'find detached instances', 'check WCAG compliance', 'export tokens to code', 'generate CLAUDE.md for design system', or wants to push a design system from code to Figma or back. The skill auto-detects the mode from request, or asks if unclear. After inspect, ALWAYS pauses and waits for explicit user decision before any build action. Phase 6 (sync to code) is OFF by default — only triggers on explicit user request. Does NOT implement Figma designs as code — use figma-implement-design for that. Does NOT create individual screens — use figma-generate-design for that. compatibility: > Requires the figma-use skill to be installed. Requires Figma MCP server (remote) connected. Phase 6 (sync to code) requires file write access to the user's project — available in Claude Code, Cursor, Codex, and similar MCP clients. Not available when running in Claude.ai web/mobile chat (in that case Phase 6 outputs file contents inline for the user to copy). metadata: mcp-server: figma version: 2.1.1 --- # Work with design systems in Figma Two modes in one skill: **inspect** (read-only quality audits with reports) and **build** (creating, fixing, extending components and tokens). Inspect produces structured reports. Build produces working Figma files. Build mode optionally extends to **Phase 6 (sync to code)** — generates `tokens.css`, an audit script, and AI rules file for the user's codebase. Phase 6 is off by default and only triggers on explicit user request. Between inspect and build, the skill always pauses for the user to decide what to do with the report. **Always pass `skillNames: "work-with-design-systems"` when calling `use_figma` as part of this skill.** This is a logging parameter — it does not affect execution. ## Prerequisites **You MUST invoke the `figma-use` skill (Skill tool: `skill: "figma-use"`) before every `use_figma` call.** It contains critical Plugin API rules, gotchas, and script templates. Never call `use_figma` without it. IMPORTANT: Before working with design systems in Figma, load the `working-with-design-systems/wwds.md` reference from the figma-use skill to understand key concepts and guidelines.