generate-design-system

An MCP skill that creates a complete design system in Figma: tokens, variables, text styles, and components, all through a structured phased workflow. Works with Claude Code, Cursor, and Codex. Tested on a real production design system (175 variables, 50+ components).

Built on top of the Figma MCP server and the figma-use skill.

The skill walks an AI agent through building a design system in Figma from start to finish:

Phase 1 — Discovery. Analyzes your codebase (if you have one) or collects brand specs from scratch. If a Figma file already exists, runs a full audit: ALL_SCOPES violations, missing codeSyntax.WEB, duplicate variables, unbound fills, text nodes without TEXT component properties. Confirms scope before touching anything.

Phase 2 — Foundations. Creates a 3-tier variable architecture: Primitives (raw values) → Semantic (purpose layer, with Light/Dark modes) → Component tokens (optional). Sets codeSyntax.WEB on every variable for proper design-to-code handoff. Sets up Text Styles and Effect Styles.

Phase 3 — File structure. Organizes the Figma file into standard pages: Cover, Getting Started, Foundations (with rendered swatches, type specimens, spacing scale), and one page per component group. Component pages use a consistent wrapper structure with branded title headers and spec containers.

Phase 4 — Components. Suggests a default core 10 but asks you to confirm based on your actual inventory. Builds each component with full variant matrices, all interactive states, Auto Layout, variable bindings, and TEXT component properties for customizable labels. Wraps each component set in a spec frame with state/size labels for documentation.

Phase 5 — QA. Runs a validation script that checks for missing collections, ALL_SCOPES violations, hardcoded fills, missing Auto Layout, and Light/Dark mode coverage. Builds a test page from system