work-with-design-systems — скилл

---
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.