{"id":"4ad21dca-1484-4516-8018-5f4d8a2d8ce7","shortId":"gTm4JD","kind":"skill","title":"generate-design-system","tagline":"Build or extend design systems in Figma — create components with proper variable bindings, validate token coverage, and enforce quality patterns through a phased workflow. Use when the user says 'create design system', 'build DS in Figma', 'generate component library', 'set up to","description":"# Generate design system in Figma\n\nCreates, extends, or updates a design system in a Figma file using a structured phased workflow. Supports three paths: full build from scratch, syncing from a codebase, and extending an existing file that already has variables/styles. The skill ensures proper variable bindings, per-component validation, and consistent spec documentation regardless of the starting point.\n\nFor teams where **Figma is the canonical source of truth** for design tokens, components, and developer handoff. Complements Anthropic's [Claude Design](https://claude.ai/design), which keeps design systems inside its own prototyping environment — this skill puts the system into Figma with full Plugin API rigor (explicit scopes, `codeSyntax.WEB`, TEXT component properties, variable modes, WCAG contrast validation).\n\n**Always pass `skillNames: \"generate-design-system\"` when calling `use_figma` as part of this skill.** This is a logging parameter — it does not affect execution.\n\n## Prerequisites\n\n**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.\n\nIMPORTANT: 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.\n\n## Skill boundaries\n\n**This skill does:**\n\n- Create Variable Collections (Primitives, Semantic, Component-level) or flat domain-based collections\n- Set up Light/Dark modes (and multi-brand modes)\n- Build Text Styles and Effect Styles\n- Generate components with variants, Auto Layout, and variable bindings\n- Organize the Figma file with standard page structure\n- Validate output with screenshots, metadata checks, and a structured audit script\n- Audit existing files for quality issues (scopes, codeSyntax, bindings, TEXT properties, WCAG contrast) and fix them\n- Add components to a file where foundations (variables, text styles) already exist\n\n**This skill does NOT:**\n\n- Generate code from Figma designs → use `figma-implement-design`\n- Build full-page screens from components → use `figma-generate-design`\n- Create Code Connect mappings → use `figma-code-connect-components`\n- Write agent rule files (CLAUDE.md) → use `figma-create-design-system-rules`\n- Extract an internal design system for Claude Design → Claude Design has its own extraction flow at [claude.ai/design](https://claude.ai/design). Use this skill when Figma is the source of truth.\n\nIf the user asks for something outside these boundaries, say so and redirect to the appropriate skill.\n\n## When to use\n\n- Creating a new design system in Figma from scratch\n- Syncing tokens and components from an existing codebase into Figma\n- **Creating components in a file where variables and text styles already exist** — the skill ensures proper binding, validation, and documentation even when foundations are done\n- Auditing an existing Figma file for quality issues (ALL_SCOPES, missing codeSyntax, hardcoded values, WCAG contrast failures)\n- Rebuilding or migrating a legacy Figma library to use Variables\n- Setting up a multi-brand or multi-theme token architecture\n- Standardizing an existing Figma file's components to match code conventions\n\n## Critical rules\n\nThese apply across all phases and all workflow paths.\n\n1. **Work incrementally.** One component (or one variant set) per `use_figma` call. Validate after each step. This is the single most important practice for avoiding bugs.\n2. **Never build on unvalidated work.** After every `use_figma` call that creates or modifies something, run `get_metadata` + `get_screenshot` before the next creation step.\n3. **Bind visual properties to variables:** fills, strokes, padding, itemSpacing, corner radius. Bind spacing to variables when a value exists in the spacing scale. For component-specific dimensions that don't match any scale value (e.g., 3px internal padding on a toggle track, 1px divider offset), hardcoded values are acceptable — document these exceptions in the component's description.\n4. **lineHeight variables must store pixel values, not percentages.** Figma variables are unitless numbers. When bound to `lineHeight`, the value is always interpreted as pixels. If your design system defines line heights as percentages (e.g., 150%), convert before storing: `fontSize × (percentage / 100)`. Text styles (created via `figma.createTextStyle()`) can store `{unit: \"PERCENT\", value: 150}` — but variables cannot.\n5. **Set `codeSyntax.WEB` on every variable at creation time.** Without it, `get_design_context` returns raw Figma variable names instead of CSS tokens, breaking the design-to-code bridge.\n6. **Set explicit scopes on every variable.** Never leave ALL_SCOPES.\n7. **TEXT properties with the same name merge across variants.** If two variants both define `addComponentProperty(\"Label\", \"TEXT\", ...)`, they become ONE shared property on the component set with one default value. For different defaults per variant: (a) use different property names, (b) leave text as direct content with instance text overrides, or (c) accept the shared default.\n8. **Every customizable text node needs a TEXT component property** linked via `componentPropertyReferences = { characters: key }`. Without it, label overrides revert on component update.\n\n## Instructions\n\n### Workflow paths\n\nChoose the path that matches the starting point:\n\n**Full build** (no existing file): Phase 1 → 2 → 3 → 4 → 5\n\n**Extend** (variables/styles exist, need components): Phase 1c (audit) → fix issues → Phase 3 (if needed) → Phase 4 → Phase 5\n\n**Audit only**: Phase 1c → report → stop\n\nWhen foundations already exist, run Phase 1c to build the state ledger. Skip Phase 2 if all needed tokens exist and pass audit. Skip Phase 3 if documentation pages aren't required or already exist. Proceed to Phase 4 with mandatory per-component validation.\n\n---\n\n### Phase 1: Discovery\n\n**Goal:** Understand what exists and what needs to be built. Confirm scope with the user before creating anything.\n\n#### 1a. Determine the source\n\nAsk the user:\n\n- **From scratch:** What is the product? What brand colors, typography, and spacing values should be used? Is there a reference (Figma file, website, brand guidelines)?\n- **From codebase:** Where are the tokens defined? (e.g., `tailwind.config.js`, `tokens.css`, `theme.ts`, design-tokens JSON). Where are the components? (e.g., `src/components/ui/`)\n\nSupported inputs for from-scratch builds:\n- `.md` file with brand guidelines\n- `.json` design tokens (W3C DTCG format, Tokens Studio format)\n- Screenshots or URLs as visual references\n- Verbal description of brand, colors, typography\n\n#### 1b. If syncing from code — analyze the codebase\n\nScan for:\n\n- Token files: CSS variables, Tailwind config, JSON token files, styled-components theme\n- Component inventory: list all UI components, their props/variants, file paths\n- Naming conventions: PascalCase vs kebab-case, variant naming patterns\n- Framework: React, Vue, Svelte, Angular, or other\n\nRead `references/framework-mappings.md` for framework-specific extraction patterns.\n\n#### 1c. If a Figma file already exists — audit it\n\nRun `scripts/validate-design-system.js` via `use_figma` to get a structured report. The script (v1.3.1+) covers:\n\n- **Variables:** collections, counts, modes, ALL_SCOPES violations, `codeSyntax.WEB` coverage, duplicate primitive values grouped by name domain, mode parity\n- **Text styles:** count and variable binding coverage on `fontSize` / `lineHeight` / `fontFamily` / `fontWeight`\n- **Components:** hardcoded color fills, hardcoded strokes, missing Auto Layout, text nodes lacking TEXT component properties (overrides lost on update)\n- **Page structure:** presence of expected library pages (Cover, Foundations, Components) as informational output, not warnings\n- **Accessibility:** WCAG AA contrast for every `color/text/*` × `color/bg/*` pair in both Light and Dark modes. Inverse text tokens matching `color/text/on-{surface}` are only tested against backgrounds whose name contains `{surface}` as a segment (e.g., `on-wine` × `bg/wine`, `bg/wine-subtle`), not against unrelated surfaces. Surfaces up to 10 worst failures as warnings; full matrix returned in `contrast.worstLight` / `contrast.worstDark`.\n\n**Script invocation:** the script exposes `runAudit()` as its main function and ends with `return await runAudit()` at the top level. Under `use_figma`, which wraps the code in an async context, this returns the audit report directly. For standalone plugin usage, replace the top-level `return` with `runAudit().then((r) => figma.closePlugin(JSON.stringify(r)))`.\n\nSupplement with targeted inspection where the script output needs interpretation or the file has conventions outside the default check set:\n\n- List existing components and their naming patterns.\n- Sample a couple of component sets manually to verify the audit counts are accurate and to surface patterns the script doesn't know about (naming conventions, icon systems, composed components). Example inline pattern:\n\n```js\n// Audit a component set for variable binding coverage\nconst cs = figma.getNodeById(COMPONENT_SET_ID);\nlet bound = 0, hardcoded = 0;\n\nfor (const variant of cs.children) {\n  for (const node of [variant, ...variant.findAll(() => true)]) {\n    const bindings = node.boundVariables || {};\n\n    // Check fills\n    if (node.fills?.length > 0 && node.fills[0].type === 'SOLID' && node.fills[0].visible !== false) {\n      if (bindings.fills?.length > 0) bound++;\n      else hardcoded++;\n    }\n\n    // Check strokes\n    if (node.strokes?.length > 0 && node.strokes[0].type === 'SOLID' && node.strokes[0].visible !== false) {\n      if (bindings.strokes?.length > 0) bound++;\n      else hardcoded++;\n    }\n\n    // Check spacing\n    for (const prop of ['itemSpacing', 'paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight']) {\n      if (node[prop] > 0) {\n        if (bindings[prop]) bound++;\n        // Not all spacing needs binding — see Critical Rule #3\n      }\n    }\n\n    // Check text styles\n    if (node.type === 'TEXT' && (!node.textStyleId || node.textStyleId === '')) {\n      // Flag: text node without text style\n    }\n  }\n}\n\nreturn { bound, hardcoded, ratio: `${bound}/${bound + hardcoded}` };\n```\n\nPresent the audit report to the user with a severity summary (errors vs warnings vs info) and the contrast report.\n\n**Based on audit results, recommend a path:**\n- **Build in place** — file has solid variable structure, components need fixes but not recreation\n- **New file, old as reference** — no variables, everything hardcoded, naming chaos. Start fresh, use old file for visual reference only\n- **Hybrid** — foundations are solid, but components need rebuilding. Keep variables, recreate component pages\n\nIf Foundations are already complete, the user may skip Phase 2 and go directly to Phase 3 or 4 (see Workflow paths above).\n\n#### 1d. Confirm scope\n\nPresent the user with a summary:\n\n- Token categories to create (colors, spacing, radius, typography, shadows, etc.)\n- Number of modes (Light/Dark, brands)\n- Component list (prioritized — core first, extended later)\n- Target naming convention\n- Component numbering convention — common pattern: `C{section}.{number} {Name}` where section groups related components (1=Buttons, 2=Inputs, 3=Selection controls, etc.)\n- CSS token naming convention for `codeSyntax.WEB` (e.g., `--color-bg-primary`, `$t-color-core-red-55`, `var(--btn-hero-h)`)\n- If rebuilding an existing file: decide whether to renumber components to match new grouping or preserve original numbering for continuity. Document any mapping between plan numbers and Figma names (e.g., plan says \"C2.2 Toggle Switch\" but Figma name is \"C4.0 Toggle Switch\").\n\n**Do not proceed until the user confirms.**\n\n---\n\n### Phase 2: Foundations\n\n**Goal:** Create Variable Collections, Text Styles, and Effect Styles. This is the token layer — no components yet.\n\n**Skip this phase if the audit in Phase 1c confirmed that all needed tokens exist and pass quality checks.**\n\nRead `references/token-taxonomy.md` before starting this phase.\n\n#### 2a. Create Variable Collections\n\n**Recommended: 3-tier architecture** (Primitives → Semantic → Component). Best for multi-brand systems or new builds from scratch.\n\n**Alternative: flat domain-based collections** (Colors, Spacing, Radius, Typography). Valid for single-brand systems or rebuilds of existing files where this structure already exists.\n\nMatch whatever structure exists in the file or codebase. The key requirement is not hierarchy depth — it's that every variable has explicit scopes and `codeSyntax.WEB`.\n\nIf using the 3-tier architecture, create three collections:\n\n**Collection 1: Primitives**\n\n- Raw color values (e.g., `blue-50` through `blue-900`, `gray-50` through `gray-900`)\n- Raw spacing values (e.g., `0`, `1`, `2`, `4`, `8`, `12`, `16`, `20`, `24`, `32`, `48`, `64`)\n- Raw radius values (e.g., `none`, `sm`, `md`, `lg`, `xl`, `full`)\n- Raw font sizes, line heights (in pixels — see Critical Rule #4), font weights\n- Set explicit scopes on every variable — never leave ALL_SCOPES:\n  - Color primitives: `[\"FRAME_FILL\", \"SHAPE_FILL\", \"STROKE_COLOR\", \"TEXT_FILL\"]`\n  - Spacing primitives: `[\"GAP\", \"WIDTH_HEIGHT\"]`\n  - Radius primitives: `[\"CORNER_RADIUS\"]`\n\n**Collection 2: Semantic**\n\n- Purpose-based aliases that reference Primitives\n- Two modes minimum: `Light` and `Dark`\n- Categories: `color/background/*`, `color/text/*`, `color/border/*`, `color/interactive/*`, `color/status/*`\n- Spacing: `space/xs` through `space/3xl` → reference Primitive values\n- Radius: `radius/component`, `radius/card`, `radius/input`, `radius/button`\n- IMPORTANT: Components will bind ONLY to Semantic tokens, never directly to Primitives\n\n**Collection 3: Component (optional, for complex systems)**\n\n- Component-specific tokens that reference Semantic tokens\n- Example: `button/primary/bg` → `color/interactive/primary`, `card/padding` → `space/md`\n- Only create this collection if the design system has 15+ components\n\nValidate after creating each collection:\n\n- Call `get_metadata` to verify collection names, variable counts, and modes\n- Call `get_screenshot` to spot-check the Variables panel\n\nIMPORTANT: After creating each variable, set `codeSyntax = { WEB: \"token-name\" }` using the project's CSS token naming convention (agreed in Discovery 1d). If syncing from code, extract token names from the source (CSS custom properties, Tailwind config keys, design-tokens JSON `$value` paths). If from scratch, derive from variable name: `color/bg/primary` → `--color-bg-primary`. Without codeSyntax, agents using `get_design_context` get raw variable names instead of CSS tokens, breaking the design-to-code bridge.\n\n#### 2b. Create Text Styles\n\n- Map to the typography scale: Display, Heading 1–4, Body Large, Body, Body Small, Caption, Overline\n- Each style uses Semantic font-size and line-height variables where possible\n- IMPORTANT: If storing line-height as variables, values must be in pixels (see Critical Rule #4). If your scale uses percentages, either convert to pixels or use text style's native `{unit: \"PERCENT\", value: N}` format without variable binding for line-height.\n- Load fonts with `figma.loadFontAsync()` before any text operations\n\n#### 2c. Create Effect Styles (if applicable)\n\n- Shadow scale: `shadow/sm`, `shadow/md`, `shadow/lg`, `shadow/xl`\n- Blur effects if needed\n\n**Pause for user review. Show a summary of all tokens created.**\n\n---\n\n### Phase 3: File structure\n\n**Goal:** Set up the standard page layout for the design system file.\n\n**Skip this phase if documentation pages aren't required (e.g., portfolio projects, quick prototypes).**\n\n#### 3a. Create a reusable Page Title component\n\nBefore creating pages, set up a Page Title component on a Utilities or Master Components page. Each component page will use an instance of this — not a manual frame. This ensures visual consistency and allows global updates to the header design.\n\nStructure:\n```\nMaster Component Assets (COMPONENT_SET)\n└── Type=Page Title (COMPONENT)\n    └── Component Label (FRAME, HORIZONTAL)\n        ├── Eyebrow Label (TEXT) — \"Component\"\n        └── Component Name (TEXT) — e.g. \"C04 Toggle\"\n```\n\n#### 3b. Create pages\n\nCreate these pages in order:\n\n1. **Cover** — Title, version, last updated date, status badge\n2. **Getting Started** — Brief usage guide for consumers of the library\n3. **Foundations** — Documentation frames:\n   - Color swatches (render all Semantic color tokens as labeled rectangles)\n   - Typography specimens (render each Text Style with sample text)\n   - Spacing scale visualization\n   - Radius visualization\n   - Shadow samples\n4. **Components** — One page per component group (e.g., `→ Buttons`, `→ Inputs`, `→ Selection Controls`). Each page follows this internal structure:\n\n   ```\n   Page: → Buttons\n   └── Buttons (wrapper frame, VERTICAL auto-layout, FIXED width=996px, AUTO height)\n       ├── Page Title Instance (instance of the Page Title component)\n       └── Specs Container (VERTICAL, FILL width, AUTO height, itemSpacing=64, paddingL/R=96)\n           ├── Spec: C1.0 Button (Primary)\n           │   ├── Title row (component name, ALL CAPS)\n           │   ├── Column headers (state labels: Default, Hover, Pressed, Disabled)\n           │   ├── Row labels (size labels: Hero, Default, Small)\n           │   └── Component Set (nested inside)\n           ├── Spec: C1.1 Button (Secondary)\n           └── Spec: C1.2 Button (Tertiary)\n   ```\n\n   IMPORTANT: Set the page wrapper frame to **fixed width (996px)** so all component pages have consistent dimensions regardless of content size. This gives an 804px content area with 96px padding on each side. The wrapper height stays AUTO (grows with content).\n\n   Define the spec wrapper template in this phase so all component pages use consistent spacing, padding, and labeling.\n5. **Patterns** (optional) — Common layouts, form patterns\n6. **Utilities** (optional) — Dividers, spacers, status dots, Master Component Assets\n\nIMPORTANT: Use `await figma.setCurrentPageAsync(page)` when switching pages. The sync setter does NOT work.\n\nBuild each documentation frame using Auto Layout and bind all values to the Semantic variables — no hardcoded colors or spacing.\n\n**Pause for user review. Take a screenshot of each page.**\n\n---\n\n### Phase 4: Components\n\n**Goal:** Build each component with variants, states, Auto Layout, and variable bindings.\n\nRead `references/component-spec.md` before starting this phase.\n\n#### 4a. Determine component order\n\nIf the file already has components (discovered in Phase 1c), derive the build list from what exists. Otherwise, present the default core 10 as a starting suggestion:\n\n1. Button\n2. Input\n3. Select\n4. Checkbox\n5. Radio\n6. Badge\n7. Avatar\n8. Card\n9. Modal / Dialog\n10. Toast / Notification\n\nAsk the user to confirm, reorder, add, or remove from this list based on their actual design system. Real systems often include components not in this list (Links, Breadcrumbs, Tabs, Tag/Chips, Date Picker, Progress Stepper, Pagination) and may not need some that are (Badge, Avatar).\n\nApply the component numbering convention from Discovery (e.g., C1.0, C1.1, C2.0).\n\n#### 4b. Build each component\n\nFor EACH component, follow this sequence:\n\n**Step 1: Create the base component (private, prefixed with `.` or `_`)**\n\n- Contains the core structure and Auto Layout\n- All fills, strokes, spacing, radius, and text use Semantic (or Component) variables — see Critical Rule #3 for exceptions on component-specific dimensions\n- Create it with a single focused `use_figma` call: create the frame, set Auto Layout direction and sizing, bind padding and itemSpacing to Semantic spacing variables, add text nodes, bind fills and strokes to Semantic color variables. Never build on unvalidated work — `get_metadata` + `get_screenshot` after the call before moving on.\n\n**Step 2: Define variant properties**\n\n- Match code prop naming: `Type`, `Size`, `State` (or `variant`, `size`, `state` — align with the codebase)\n- Read `references/naming-conventions.md` for the mapping table\n- For every text node that users will customize (labels, placeholders, headings), add a TEXT component property and link it via `componentPropertyReferences = { characters: key }` (Critical Rule #8). See Critical Rule #7 for how same-named TEXT properties merge across variants.\n- Use Boolean properties for toggles: `Has Icon`, `Has Description`, `Dismissible`\n- Use Instance Swap properties for icon slots\n\n**Step 3: Build all states**\nStart with states, not just the default:\n\n- Default, Hover, Active/Pressed, Focused, Disabled\n- For inputs: Empty, Filled, Error, Success\n- For toast: Info, Warning, Error, Success\n- Loading state where applicable\n\n**Step 4: Create the Component Set**\n\n- Combine variants into a Component Set\n- Verify naming: `Type=Primary, Size=Medium, State=Default` in Figma should correspond to `<Button variant=\"primary\" size=\"md\" />` in code\n\n**Step 5: Bind variables across the component**\n\n- For each variant, systematically iterate through fills, strokes, itemSpacing, padding, and corner radius\n- Bind to Semantic tokens where a scale value exists (hardcoded exceptions per Critical Rule #3)\n- Verify binding coverage using the inline audit pattern from Phase 1c — paste it in with the specific component set ID to get a `bound / hardcoded` count\n\n**Step 6: Validate and document this component**\n\n- `get_screenshot` — check visual correctness, look for clipped text and overlapping elements\n- `get_metadata` — verify variant count, hierarchy, Auto Layout structure\n- Confirm all variants have the same child node tree (depth, types, names) — mismatches break Component Set mode swaps\n- If issues found: fix targeted parts only, don't recreate from scratch\n- Create a spec wrapper frame around the component set (using the template from Phase 3):\n  - Title: component number and name (e.g., \"C1.0 BUTTON (PRIMARY)\")\n  - Column headers: state names aligned to variant columns\n  - Row labels: size/variant group names aligned to variant rows\n  - This makes the variant matrix readable for designers reviewing the file\n\n**Step 7: Move to next component**\n\nIMPORTANT: Do NOT build all components in a single `use_figma` call. Build one component (or one variant set) per call, validate, then proceed. Never build on unvalidated work (Critical Rule #2).\n\n**Pause for user review after every 3–4 components.**\n\n---\n\n### Phase 5: Integration and QA\n\n**Goal:** Final validation, cleanup, and optional Code Connect setup.\n\n#### 5a. Full audit\n\nRun `scripts/validate-design-system.js` for a structured pass, then spot-check:\n\n- All components use Auto Layout (no absolute positioning except icons)\n- All fills/strokes reference variables (no raw hex values except documented exceptions per Critical Rule #3)\n- All text uses Text Styles\n- Spacing uses spacing variables where scale values exist\n- Naming is consistent (check `references/naming-conventions.md`)\n- Light/Dark mode toggle produces correct results for all components\n- WCAG contrast: review `contrast.worstLight` and `contrast.worstDark` from the audit output. Every pair with `ratio < 4.5` fails AA for normal text. Every pair with `ratio < 3` fails even for large text — these are almost always real bugs.\n\n#### 5b. Test a full page\n\nCreate one sample page (e.g., a Settings screen or Dashboard card) using ONLY components from the system. This validates that the components compose well together.\n\n#### 5c. Code Connect (optional)\n\nIf the user has a codebase and wants Code Connect:\n\n- Suggest switching to `figma-code-connect-components` skill\n- Provide the component-to-file mapping table from Discovery phase\n\n#### 5d. Generate design system rules (optional)\n\nIf the user wants to set up agent rules:\n\n- Suggest switching to `figma-create-design-system-rules` skill\n- Pass the token paths, component paths, and naming conventions discovered\n\n#### 5e. Final summary\n\nPresent to the user:\n\n- Total Variable Collections and variable count\n- Total Text Styles and Effect Styles\n- Total components and variant count\n- Pages created\n- WCAG contrast summary (pass rate per mode, worst offenders)\n- Any known gaps or TODO items\n- Checklist status (see below)\n\n### v1 completeness checklist\n\n- Token architecture: Primitive → Semantic minimum (or flat domain-based — see Phase 2a)\n- Core colors, spacing, radius, typography as Figma Variables\n- All variables have explicit scopes (no ALL_SCOPES)\n- All variables have `codeSyntax.WEB` set\n- lineHeight variables store pixel values (not percentages)\n- Light and Dark modes configured and tested\n- Components built with Auto Layout, bound to Semantic variables\n- All text nodes in components have TEXT component properties\n- Naming convention documented and consistent\n- Component numbering applied\n- Spec wrapper frames with state/size labels for each component (fixed width: 996px)\n- At least one full page assembled from system components only\n- All variants include all required states\n- WCAG AA contrast pass for all `color/text/*` × `color/bg/*` pairs in both Light and Dark modes (or exceptions documented)\n\n---\n\n## Examples\n\n**Example 1: From scratch**\n\nUser says: \"Create a design system for my SaaS product. Brand color is #6366F1 (indigo), secondary #10B981 (emerald). Use Inter font.\"\n\n**Actions:**\n\n1. Discovery: Confirm color palette, spacing scale (default 4px base), component list\n2. Foundations: Create Primitives (indigo scale, emerald scale, neutral scale), Semantic (light/dark), Text Styles (Inter)\n3. File Structure: Cover, Getting Started, Foundations (with swatches), Components\n4. Components: Build core 10 starting with Button\n5. QA: Audit, test page, summary\n\n**Example 2: From codebase**\n\nUser says: \"Sync our React component library to Figma. Tokens are in `tailwind.config.js`, components in `src/components/ui/`.\"\n\n**Actions:**\n\n1. Discovery: Read `tailwind.config.js` for color/spacing/radius tokens. Scan `src/components/ui/` for component inventory and props.\n2. Foundations: Map Tailwind tokens to Figma Variables (Primitives = Tailwind values, Semantic = Tailwind's semantic aliases)\n3. File Structure: Standard pages\n4. Components: Build each component matching React props → Figma variants\n5. QA: Validate naming parity, test page, suggest Code Connect\n\n**Example 3: Existing file with partial work**\n\nUser says: \"I have a Figma file with 175 variables and 23 text styles already done. Need to audit it for issues, then build the components.\"\n\n**Actions:**\n\n1. Discovery: Run audit on existing file — flag ALL_SCOPES violations, missing codeSyntax, unbound values, duplicate variables, contrast failures\n2. Foundations: Fix audit findings (add scopes, set codeSyntax WEB, remove duplicates). Skip creation since tokens already exist.\n3. File Structure: Create component pages with wrapper structure\n4. Components: Derive component list from the user's actual inventory, not the default core 10. Build with spec wrapper frames.\n5. QA: Full audit, test page, summary\n\n**Example 4: Variables exist, need components only**\n\nUser says: \"Variables and text styles are set up. I need to build 7 components with proper bindings.\"\n\n**Actions:**\n\n1. Discovery: Run Phase 1c audit to verify variable quality. Build state ledger of existing tokens.\n2. Skip Phase 2 (foundations exist and pass audit).\n3. File Structure: Create component pages if needed, or skip if not required.\n4. Components: Build each component one at a time. Bind all fills/strokes/spacing to existing variables. Validate after each component with get_metadata + get_screenshot.\n5. QA: Audit bindings, test page, summary.\n\n---\n\n## Common edge cases\n\n**Missing font:** If `figma.loadFontAsync()` fails, call `figma.listAvailableFontsAsync()` to find available alternatives. Fall back to \"Inter\" as the default.\n\n**Token conflicts:** If codebase tokens use different naming than Figma conventions (e.g., `$gray-100` vs `gray/100`), document the mapping in a comment and follow the Figma `/`-separated convention for variable names.\n\n**Existing components in the file:** If the file already has components, inspect their structure first. Update in place where possible rather than recreating — this preserves instance overrides.\n\n**Too many variants:** If a component would have 50+ variant combinations, break it into a base component and composed components (e.g., `_ButtonBase` + `IconButton`, `ButtonGroup`).\n\n**Mode mismatch:** If the codebase uses 3+ themes (e.g., Light, Dark, High Contrast), create all modes in the Semantic collection upfront. Don't add modes retroactively — it creates empty values.\n\n**Large file performance:** Keep each `use_figma` call focused on one task. If creating 100+ variables, batch them in groups of 20–30 per call.\n\n**Flat token architecture:** If the existing file uses flat domain-based collections (Colors, Spacing, Radius, Typography) instead of Primitives/Semantic/Component tiers, work with the existing structure. Don't restructure into 3 tiers unless the user explicitly requests it.\n\n**Component-specific dimensions:** Some component internals have pixel values outside the spacing scale (e.g., 3px toggle track padding when the scale has 2 and 4). These are acceptable as hardcoded values — forcing the nearest scale value would change the visual. Document in the component's description.\n\n**Component numbering divergence:** When rebuilding an existing file, Figma page/component names may follow different numbering than the organizational plan. Both are valid. Document the mapping: plan says \"C2.2 Toggle Switch\" but Figma name is \"C4.0 Toggle Switch\" → add a note in the plan entry.\n\n**Contrast failures on brand colors:** If a required brand color pair fails WCAG AA (e.g., brand primary button text on brand primary background), don't silently pass. Options: (a) darken the text or lighten the bg until it passes, (b) restrict the pair to large-text-only use cases and document the restriction, (c) escalate to the brand owner. Don't ship failing pairs without a decision.\n\n**Inverse text tokens (color/text/on-{surface}):** These are designed to sit on a filled surface of the same family (e.g., `on-wine` on `bg/wine` or `bg/wine-subtle`). The validate script automatically skips contrast checks against unrelated surfaces. If you name an inverse token outside the `on-{surface}` pattern, it will be tested against all backgrounds — rename to fit the convention or accept the broader check.\n\n---\n\n## Error recovery\n\nOn any `use_figma` error:\n\n1. **STOP.** Do not immediately retry.\n2. Read the error message carefully.\n3. Call `get_metadata` to understand current file state.\n4. Fix the root cause in your script.\n5. Retry the corrected script.\n6. After success, call `get_screenshot` to verify visual correctness.\n\nFor the full error recovery workflow, load `figma-use` (Skill tool: `skill: \"figma-use\"`) and see its validation-and-recovery reference.","tags":["generate","design","system","natdexterra","agent-skills","claude-code","design-system","figma","figma-mcp","mcp","skill"],"capabilities":["skill","source-natdexterra","skill-generate-design-system","topic-agent-skills","topic-claude-code","topic-design-system","topic-figma","topic-figma-mcp","topic-mcp","topic-skill"],"categories":["generate-design-system"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/natdexterra/generate-design-system","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add natdexterra/generate-design-system","source_repo":"https://github.com/natdexterra/generate-design-system","install_from":"skills.sh"}},"qualityScore":"0.467","qualityRationale":"deterministic score 0.47 from registry signals: · indexed on github topic:agent-skills · 34 github stars · SKILL.md body (31,019 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-22T18:58:51.234Z","embedding":null,"createdAt":"2026-04-19T00:00:18.722Z","updatedAt":"2026-04-22T18:58:51.234Z","lastSeenAt":"2026-04-22T18:58:51.234Z","tsv":"'-100':3943 '-50':1836,1841 '-900':1839,1844 '/design),':131 '/design](https://claude.ai/design).':411 '/wwds.md':241 '0':1367,1369,1390,1392,1396,1402,1411,1413,1417,1423,1441,1849 '1':547,853,928,1621,1829,1850,2106,2318,2629,2718,3554,3579,3651,3740,3840,4335 '10':1225,2624,2648,3620,3801 '100':700,4056 '10b981':3573 '12':1854 '15':1988 '150':694,711 '16':1855 '175':3721 '1a':948 '1b':1034 '1c':864,879,888,1092,1728,2611,2997,3844 '1d':1573,2038 '1px':644 '2':574,854,896,1560,1623,1701,1851,1914,2327,2631,2810,3160,3591,3631,3665,3759,3856,3859,4128,4341 '20':1856,4063 '23':3724 '24':1857 '2a':1745,3444 '2b':2095 '2c':2181 '3':600,855,869,907,1454,1566,1625,1750,1822,1960,2209,2338,2633,2749,2893,2986,3085,3167,3221,3273,3606,3681,3707,3777,3865,4018,4097,4347 '30':4064 '32':1858 '3a':2238 '3b':2310 '3px':637,4120 '4':659,856,873,920,1568,1852,1881,2107,2145,2368,2578,2635,2926,3168,3616,3686,3786,3815,3878,4130,4356 '4.5':3263 '48':1859 '4a':2598 '4b':2707 '4px':3587 '5':715,857,875,2516,2637,2953,3171,3624,3696,3807,3902,4364 '50':3996 '55':1645 '5a':3184 '5b':3285 '5c':3315 '5d':3349 '5e':3384 '6':745,2523,2639,3014,4369 '6366f1':3570 '64':1860,2417 '7':756,2641,2864,3124,3834 '8':813,1853,2643,2860 '804px':2481 '9':2645 '96':2419 '96px':2485 '996px':2397,2466,3517 'aa':1181,3265,3535,4209 'absolut':3203 'accept':650,809,4133,4324 'access':1179 'accur':1330 'across':540,764,2873,2956 'action':3578,3650,3739,3839 'active/pressed':2906 'actual':2666,3795 'add':333,2657,2783,2846,3764,4035,4189 'addcomponentproperti':771 'affect':188 'agent':382,2075,3362 'agre':2035 'alias':1919,3680 'align':2825,3099,3108 'allow':2279 'almost':3281 'alreadi':85,343,471,884,915,1097,1553,1791,2605,3727,3775,3969 'altern':1767,3922 'alway':164,680,3282 'analyz':1039 'angular':1081 'anthrop':125 'anyth':947 'api':151,214 'appli':539,2696,3505 'applic':2186,2924 'appropri':437 'architectur':524,1752,1824,3433,4069 'area':2483 'aren':911,2230 'around':3076 'ask':425,952,2651 'assembl':3523 'asset':2289,2532 'async':1265 'audit':315,317,486,865,876,904,1099,1270,1327,1351,1478,1498,1725,2993,3186,3257,3626,3731,3743,3762,3810,3845,3864,3904 'auto':293,1152,2393,2398,2414,2494,2552,2587,2732,2770,3038,3200,3483 'auto-layout':2392 'automat':4293 'avail':3921 'avatar':2642,2695 'avoid':572 'await':1250,2535 'b':797,4235 'back':3924 'background':1204,4218,4317 'badg':2326,2640,2694 'base':272,1496,1771,1918,2663,2721,3441,3588,4003,4078 'batch':4058 'becom':775 'best':1756 'bg':1638,2071,4231 'bg/wine':1216,4287 'bg/wine-subtle':1217,4289 'bind':17,93,297,325,477,601,612,1138,1357,1383,1443,1450,1950,2168,2555,2591,2775,2786,2954,2972,2988,3838,3887,3905 'bindings.fills':1400 'bindings.strokes':1421 'blue':1835,1838 'blur':2193 'bodi':2108,2110,2111 'boolean':2876 'bound':674,1366,1403,1424,1445,1470,1473,1474,3010,3485 'boundari':256,430 'brand':281,518,962,978,1011,1031,1596,1760,1781,3567,4199,4204,4211,4216,4254 'breadcrumb':2679 'break':738,2088,3054,3999 'bridg':744,2094 'brief':2330 'broader':4326 'btn':1648 'btn-hero-h':1647 'bug':573,3284 'build':5,37,72,283,359,576,848,890,1007,1503,1764,2547,2581,2614,2708,2795,2894,3132,3141,3154,3618,3688,3736,3802,3833,3850,3880 'built':939,3481 'button':1622,2376,2387,2388,2422,2451,2455,2630,3093,3623,4213 'button/primary/bg':1975 'buttonbas':4009 'buttongroup':4011 'c':808,1612,4250 'c04':2308 'c1.0':2421,2704,3092 'c1.1':2450,2705 'c1.2':2454 'c2.0':2706 'c2.2':1683,4179 'c4.0':1690,4186 'call':172,209,221,559,584,1995,2006,2765,2805,3140,3149,3917,4049,4066,4348,4372 'cannot':714 'canon':113 'cap':2429 'caption':2113 'card':2644,3300 'card/padding':1977 'care':4346 'case':1073,3911,4245 'categori':1583,1929 'caus':4360 'chang':4143 'chao':1527 'charact':826,2856 'check':311,1308,1385,1406,1427,1455,1738,2012,3022,3196,3238,4296,4327 'checkbox':2636 'checklist':3425,3431 'child':3047 'choos':839 'claud':127,399,401 'claude.ai':130,410 'claude.ai/design),':129 'claude.ai/design](https://claude.ai/design).':409 'claude.md':385 'cleanup':3178 'clip':3027 'code':350,372,378,534,743,1038,1262,2042,2093,2815,2951,3181,3316,3327,3334,3704 'codebas':78,458,981,1041,1801,2828,3324,3633,3933,4016 'codesyntax':324,497,2022,2074,3752,3767 'codesyntax.web':155,717,1122,1634,1818,3464 'collect':262,273,1116,1706,1748,1772,1827,1828,1913,1959,1982,1994,2000,3393,4031,4079 'color':963,1032,1147,1586,1637,1642,1773,1832,1894,1901,2070,2342,2347,2564,2792,3446,3568,3582,4080,4200,4205 'color-bg-primari':1636,2069 'color/background':1930 'color/bg':1186,3541 'color/bg/primary':2068 'color/border':1932 'color/interactive':1933 'color/interactive/primary':1976 'color/spacing/radius':3656 'color/status':1934 'color/text':1185,1931,3540 'color/text/on-':1198,4267 'column':2430,3095,3102 'combin':2931,3998 'comment':3951 'common':1610,2519,3909 'complement':124 'complet':1554,3430 'complex':1964 'compon':13,42,96,120,157,266,290,334,365,380,454,462,531,551,626,656,781,821,834,862,925,998,1055,1057,1062,1145,1158,1173,1312,1321,1346,1353,1362,1511,1542,1548,1597,1607,1620,1660,1718,1755,1948,1961,1967,1989,2244,2253,2259,2262,2288,2290,2295,2296,2303,2304,2369,2373,2408,2426,2445,2469,2508,2531,2579,2583,2600,2607,2673,2698,2710,2713,2722,2744,2754,2849,2929,2935,2958,3004,3019,3055,3078,3087,3128,3134,3143,3169,3198,3248,3303,3311,3336,3341,3378,3404,3480,3493,3496,3503,3514,3526,3589,3615,3617,3639,3647,3661,3687,3690,3738,3781,3787,3789,3819,3835,3869,3879,3882,3896,3962,3971,3993,4004,4007,4106,4110,4149,4152 'component-level':265 'component-specif':625,1966,2753,4105 'component-to-fil':3340 'componentpropertyrefer':825,2855 'compos':1345,3312,4006 'concept':252 'config':1049,2053 'configur':3477 'confirm':940,1574,1699,1729,2655,3041,3581 'conflict':3931 'connect':373,379,3182,3317,3328,3335,3705 'consist':99,2277,2472,2511,3237,3502 'const':1359,1371,1376,1382,1430 'consum':2334 'contain':211,1207,2410,2727 'content':802,2476,2482,2497 'context':728,1266,2079 'continu':1670 'contrast':162,329,501,1182,1494,3250,3411,3536,3757,4024,4196,4295 'contrast.worstdark':1235,3254 'contrast.worstlight':1234,3252 'control':1627,2379 'convent':535,1068,1304,1342,1606,1609,1632,2034,2700,3382,3499,3940,3957,4322 'convert':695,2152 'core':1600,1643,2623,2729,3445,3619,3800 'corner':610,1911,2970 'correct':3024,3244,4367,4378 'correspond':2948 'count':1117,1135,1328,2003,3012,3036,3396,3407 'coupl':1319 'cover':1114,1171,2319,3609 'coverag':20,1123,1139,1358,2989 'creat':12,34,52,260,371,389,442,461,586,703,946,1585,1704,1746,1825,1980,1992,2018,2096,2182,2207,2239,2246,2311,2313,2719,2757,2766,2927,3071,3290,3369,3409,3559,3593,3780,3868,4025,4039,4055 'creation':598,722,3772 'critic':212,536,1452,1879,2143,2747,2858,2862,2984,3158,3219 'cs':1360 'cs.children':1374 'css':736,1046,1629,2031,2049,2086 'current':4353 'custom':2050,2842 'customiz':815 'dark':1192,1928,3475,3547,4022 'darken':4225 'dashboard':3299 'date':2324,2682 'decid':1656 'decis':4263 'default':785,789,812,1307,2434,2443,2622,2903,2904,2944,3586,3799,3929 'defin':688,770,986,2498,2811 'depth':1808,3050 'deriv':2064,2612,3788 'descript':658,1029,2883,4151 'design':3,8,35,48,57,118,128,134,169,230,239,353,358,370,390,396,400,402,445,686,727,741,992,1014,1985,2056,2078,2091,2221,2285,2667,3119,3351,3370,3561,4271 'design-to-cod':740,2090 'design-token':991,2055 'determin':949,2599 'develop':122 'dialog':2647 'differ':788,794,3936,4165 'dimens':628,2473,2756,4108 'direct':801,1272,1563,1956,2772 'disabl':2437,2908 'discov':2608,3383 'discoveri':929,2037,2702,3347,3580,3652,3741,3841 'dismiss':2884 'display':2104 'diverg':4154 'divid':645,2526 'document':101,480,651,909,1671,2228,2340,2549,3017,3216,3500,3551,3946,4146,4174,4247 'doesn':1337 'domain':271,1130,1770,3440,4077 'domain-bas':270,1769,3439,4076 'done':485,3728 'dot':2529 'ds':38 'dtcg':1017 'duplic':1124,3755,3770 'e.g':636,693,987,999,1212,1635,1680,1834,1848,1864,2233,2307,2375,2703,3091,3294,3941,4008,4020,4119,4210,4282 'edg':3910 'effect':287,1710,2183,2194,3401 'either':2151 'element':3031 'els':1404,1425 'emerald':3574,3597 'empti':2911,4040 'end':1247 'enforc':22 'ensur':90,475,2275 'entri':4195 'environ':140 'error':1487,2913,2919,4328,4334,4344,4382 'escal':4251 'etc':1591,1628 'even':481,3275 'everi':206,581,719,750,814,1184,1812,1888,2836,3166,3259,3269 'everyth':1524 'exampl':1347,1974,3552,3553,3630,3706,3814 'except':653,2751,2982,3205,3215,3217,3550 'execut':189 'exist':82,318,344,457,472,488,527,619,850,860,885,901,916,933,1098,1311,1654,1734,1786,1792,1796,2618,2980,3234,3708,3745,3776,3817,3854,3861,3891,3961,4072,4091,4158 'expect':1168 'explicit':153,747,1815,1885,3456,4102 'expos':1240 'extend':7,53,80,858,1602 'extract':393,406,1090,2043 'eyebrow':2300 'fail':3264,3274,3916,4207,4259 'failur':502,1227,3758,4197 'fall':3923 'fals':1398,1419 'famili':4281 'figma':11,40,51,61,110,147,174,196,203,208,223,233,246,300,352,356,368,377,388,416,448,460,489,508,528,558,583,668,731,975,1095,1105,1258,1678,1687,2764,2946,3139,3333,3368,3451,3642,3671,3694,3718,3939,3955,4048,4160,4183,4333,4387,4393 'figma-code-connect-compon':376,3332 'figma-create-design-system-rul':387,3367 'figma-generate-design':367 'figma-implement-design':355 'figma-us':195,202,245,4386,4392 'figma.closeplugin':1287 'figma.createtextstyle':705 'figma.getnodebyid':1361 'figma.listavailablefontsasync':3918 'figma.loadfontasync':2176,3915 'figma.setcurrentpageasync':2536 'file':62,83,301,319,337,384,465,490,529,851,976,1009,1045,1052,1065,1096,1302,1506,1518,1532,1655,1787,1799,2210,2223,2604,3122,3343,3607,3682,3709,3719,3746,3778,3866,3965,3968,4043,4073,4159,4354 'fill':606,1148,1386,1897,1899,1903,2412,2735,2787,2912,2965,4276 'fills/strokes':3208 'fills/strokes/spacing':3889 'final':3176,3385 'find':3763,3920 'first':1601,3975 'fit':4320 'fix':331,866,1513,2395,2464,3062,3515,3761,4357 'flag':1463,3747 'flat':269,1768,3438,4067,4075 'flow':407 'focus':2762,2907,4050 'follow':2382,2714,3953,4164 'font':1872,1882,2120,2174,3577,3913 'font-siz':2119 'fontfamili':1143 'fontsiz':698,1141 'fontweight':1144 'forc':4137 'form':2521 'format':1018,1021,2165 'found':3061 'foundat':339,483,883,1172,1538,1551,1702,2339,3592,3612,3666,3760,3860 'frame':1896,2273,2298,2341,2390,2462,2550,2768,3075,3508,3806 'framework':1077,1088 'framework-specif':1087 'fresh':1529 'from-scratch':1004 'full':71,149,361,847,1230,1870,3185,3288,3521,3809,4381 'full-pag':360 'function':1245 'gap':1906,3421 'generat':2,41,47,168,289,349,369,3350 'generate-design-system':1,167 'get':591,593,726,1107,1996,2007,2077,2080,2328,2799,2801,3008,3020,3032,3610,3898,3900,4349,4373 'give':2479 'global':2280 'go':1562 'goal':930,1703,2212,2580,3175 'gotcha':216 'gray':1840,1843,3942 'gray/100':3945 'group':1127,1618,1664,2374,3106,4061 'grow':2495 'guid':2332 'guidelin':254,979,1012 'h':1650 'handoff':123 'hardcod':498,647,1146,1149,1368,1405,1426,1471,1475,1525,2563,2981,3011,4135 'head':2105,2845 'header':2284,2431,3096 'height':690,1875,1908,2125,2134,2172,2399,2415,2492 'hero':1649,2442 'hex':3213 'hierarchi':1807,3037 'high':4023 'horizont':2299 'hover':2435,2905 'hybrid':1537 'icon':1343,2881,2890,3206 'iconbutton':4010 'id':1364,3006 'immedi':4339 'implement':357 'import':226,569,1947,2016,2129,2457,2533,3129 'includ':2672,3530 'increment':549 'indigo':3571,3595 'info':1491,2917 'inform':1175 'inlin':1348,2992 'input':1002,1624,2377,2632,2910 'insid':136,2448 'inspect':1293,3972 'instanc':804,2267,2402,2403,2886,3986 'instead':734,2084,4084 'instruct':836 'integr':3172 'inter':3576,3605,3926 'intern':395,638,2384,4111 'interpret':681,1299 'inventori':1058,3662,3796 'invers':1194,4264,4304 'invoc':1237 'invok':193 'issu':322,493,867,3060,3734 'item':3424 'itemspac':609,1433,2416,2778,2967 'iter':2963 'js':1350 'json':994,1013,1050,2058 'json.stringify':1288 'kebab':1072 'kebab-cas':1071 'keep':133,1545,4045 'key':251,827,1803,2054,2857 'know':1339 'known':3420 'label':772,830,2297,2301,2350,2433,2439,2441,2515,2843,3104,3511 'lack':1156 'larg':2109,3277,4042,4241 'large-text-on':4240 'last':2322 'later':1603 'layer':1716 'layout':294,1153,2218,2394,2520,2553,2588,2733,2771,3039,3201,3484 'least':3519 'leav':753,798,1891 'ledger':893,3852 'legaci':507 'length':1389,1401,1410,1422 'let':1365 'level':267,1255,1281 'lg':1868 'librari':43,509,1169,2337,3640 'light':1190,1926,3473,3545,4021 'light/dark':276,1595,3240,3602 'lighten':4229 'line':689,1874,2124,2133,2171 'line-height':2123,2132,2170 'lineheight':660,676,1142,3466 'link':823,2678,2852 'list':1059,1310,1598,2615,2662,2677,3590,3790 'load':234,2173,2921,4385 'log':183 'look':3025 'lost':1161 'main':1244 'make':3113 'mandatori':922 'mani':3989 'manual':1323,2272 'map':374,1673,2099,2833,3344,3667,3948,4176 'master':2258,2287,2530 'match':533,632,843,1197,1662,1793,2814,3691 'matrix':1231,3116 'may':1557,2688,4163 'md':1008,1867 'medium':2942 'merg':763,2872 'messag':4345 'metadata':310,592,1997,2800,3033,3899,4350 'migrat':505 'minimum':1925,3436 'mismatch':3053,4013 'miss':496,1151,3751,3912 'modal':2646 'mode':160,277,282,1118,1131,1193,1594,1924,2005,3057,3241,3416,3476,3548,4012,4027,4036 'modifi':588 'move':2807,3125 'multi':280,517,521,1759 'multi-brand':279,516,1758 'multi-them':520 'must':192,662,2138 'n':2164 'name':733,762,796,1067,1075,1129,1206,1315,1341,1526,1605,1615,1631,1679,1688,2001,2026,2033,2045,2067,2083,2305,2427,2817,2869,2938,3052,3090,3098,3107,3235,3381,3498,3699,3937,3960,4162,4184,4302 'nativ':2160 'nearest':4139 'need':818,861,871,899,936,1298,1449,1512,1543,1732,2196,2690,3729,3818,3831,3872 'nest':2447 'neutral':3599 'never':220,575,752,1890,1955,2794,3153 'new':444,1517,1663,1763 'next':597,3127 'node':817,1155,1377,1439,1465,2785,2838,3048,3491 'node.boundvariables':1384 'node.fills':1388,1391,1395 'node.strokes':1409,1412,1416 'node.textstyleid':1461,1462 'node.type':1459 'none':1865 'normal':3267 'note':4191 'notif':2650 'number':672,1592,1608,1614,1668,1676,2699,3088,3504,4153,4166 'offend':3418 'offset':646 'often':2671 'old':1519,1531 'on-win':1213,4283 'one':550,553,776,784,2370,3142,3145,3291,3520,3883,4052 'oper':2180 'option':1962,2518,2525,3180,3318,3354,4223 'order':2317,2601 'organ':298 'organiz':4169 'origin':1667 'otherwis':2619 'output':307,1176,1297,3258 'outsid':428,1305,4115,4306 'overlap':3030 'overlin':2114 'overrid':806,831,1160,3987 'owner':4255 'pad':608,639,2486,2513,2776,2968,4123 'paddingbottom':1435 'paddingl/r':2418 'paddingleft':1436 'paddingright':1437 'paddingtop':1434 'page':304,362,910,1164,1170,1549,2217,2229,2242,2247,2251,2260,2263,2293,2312,2315,2371,2381,2386,2400,2406,2460,2470,2509,2537,2540,2576,3289,3293,3408,3522,3628,3685,3702,3782,3812,3870,3907 'page/component':4161 'pagin':2686 'pair':1187,3260,3270,3542,4206,4238,4260 'palett':3583 'panel':2015 'paramet':184 'pariti':1132,3700 'part':176,3064 'partial':3711 'pascalcas':1069 'pass':165,903,1736,3192,3374,3413,3537,3863,4222,4234 'past':2998 'path':70,546,838,841,1066,1502,1571,2060,3377,3379 'pattern':24,1076,1091,1316,1334,1349,1611,2517,2522,2994,4310 'paus':2197,2567,3161 'per':95,556,790,924,2372,2983,3148,3218,3415,4065 'per-compon':94,923 'percent':709,2162 'percentag':667,692,699,2150,3472 'perform':4044 'phase':27,66,542,852,863,868,872,874,878,887,895,906,919,927,1559,1565,1700,1722,1727,1744,2208,2226,2505,2577,2597,2610,2996,3084,3170,3348,3443,3843,3858 'picker':2683 'pixel':664,683,1877,2141,2154,3469,4113 'place':1505,3978 'placehold':2844 'plan':1675,1681,4170,4177,4194 'plugin':150,213,1275 'point':106,846 'portfolio':2234 'posit':3204 'possibl':2128,3980 'practic':570 'prefix':2724 'prerequisit':190 'presenc':1166 'present':1476,1576,2620,3387 'preserv':1666,3985 'press':2436 'primari':1639,2072,2423,2940,3094,4212,4217 'primit':263,1125,1753,1830,1895,1905,1910,1922,1940,1958,3434,3594,3673 'primitives/semantic/component':4086 'priorit':1599 'privat':2723 'proceed':917,1695,3152 'produc':3243 'product':960,3566 'progress':2684 'project':2029,2235 'prop':1431,1440,1444,2816,3664,3693 'proper':15,91,476,3837 'properti':158,327,603,758,778,795,822,1159,2051,2813,2850,2871,2877,2888,3497 'props/variants':1064 'prototyp':139,2237 'provid':3338 'purpos':1917 'purpose-bas':1916 'put':143 'qa':3174,3625,3697,3808,3903 'qualiti':23,321,492,1737,3849 'quick':2236 'r':1286,1289 'radio':2638 'radius':611,1588,1775,1862,1909,1912,1942,2364,2738,2971,3448,4082 'radius/button':1946 'radius/card':1944 'radius/component':1943 'radius/input':1945 'rate':3414 'rather':3981 'ratio':1472,3262,3272 'raw':730,1831,1845,1861,1871,2081,3212 'react':1078,3638,3692 'read':1084,1739,2592,2829,3653,4342 'readabl':3117 'real':2669,3283 'rebuild':503,1544,1652,1784,4156 'recommend':1500,1749 'recoveri':4329,4383,4401 'recreat':1516,1547,3068,3983 'rectangl':2351 'red':1644 'redirect':434 'refer':242,974,1027,1521,1535,1921,1939,1971,3209,4402 'references/component-spec.md':2593 'references/framework-mappings.md':1085 'references/naming-conventions.md':2830,3239 'references/token-taxonomy.md':1740 'regardless':102,2474 'relat':1619 'remov':2659,3769 'renam':4318 'render':2344,2354 'renumb':1659 'reorder':2656 'replac':1277 'report':880,1110,1271,1479,1495 'request':4103 'requir':913,1804,2232,3532,3877,4203 'restrict':4236,4249 'restructur':4095 'result':1499,3245 'retri':4340,4365 'retroact':4037 'return':729,1232,1249,1268,1282,1469 'reusabl':2241 'revert':832 'review':2200,2570,3120,3164,3251 'rigor':152 'root':4359 'row':2425,2438,3103,3111 'rule':215,383,392,537,1453,1880,2144,2748,2859,2863,2985,3159,3220,3353,3363,3372 'run':590,886,1101,3187,3742,3842 'runaudit':1241,1251,1284 'saa':3565 'same-nam':2867 'sampl':1317,2359,2367,3292 'say':33,431,1682,3558,3635,3714,3822,4178 'scale':623,634,2103,2148,2188,2362,2978,3232,3585,3596,3598,3600,4118,4126,4140 'scan':1042,3658 'scope':154,323,495,748,755,941,1120,1575,1816,1886,1893,3457,3460,3749,3765 'scratch':74,450,956,1006,1766,2063,3070,3556 'screen':363,3297 'screenshot':309,594,1022,2008,2573,2802,3021,3901,4374 'script':218,316,1112,1236,1239,1296,1336,4292,4363,4368 'scripts/validate-design-system.js':1102,3188 'secondari':2452,3572 'section':1613,1617 'see':1451,1569,1878,2142,2746,2861,3427,3442,4396 'segment':1211 'select':1626,2378,2634 'semant':264,1754,1915,1953,1972,2118,2346,2560,2742,2780,2791,2974,3435,3487,3601,3676,3679,4030 'separ':3956 'sequenc':2716 'set':44,274,513,555,716,746,782,1309,1322,1354,1363,1884,2021,2213,2248,2291,2446,2458,2769,2930,2936,3005,3056,3079,3147,3296,3360,3465,3766,3828 'setter':2543 'setup':3183 'sever':1485 'shadow':1590,2187,2366 'shadow/lg':2191 'shadow/md':2190 'shadow/sm':2189 'shadow/xl':2192 'shape':1898 'share':777,811 'ship':4258 'show':2201 'side':2489 'silent':4221 'sinc':3773 'singl':567,1780,2761,3137 'single-brand':1779 'sit':4273 'size':1873,2121,2440,2477,2774,2819,2823,2941 'size/variant':3105 'skill':89,142,179,198,199,201,248,255,258,346,414,438,474,3337,3373,4389,4391 'skill-generate-design-system' 'skillnam':166 'skip':894,905,1558,1720,2224,3771,3857,3874,4294 'slot':2891 'sm':1866 'small':2112,2444 'solid':1394,1415,1508,1540 'someth':427,589 'sourc':114,419,951,2048 'source-natdexterra' 'space':613,622,966,1428,1448,1587,1774,1846,1904,1935,2361,2512,2566,2737,2781,3227,3229,3447,3584,4081,4117 'space/3xl':1938 'space/md':1978 'space/xs':1936 'spacer':2527 'spec':100,2409,2420,2449,2453,2500,3073,3506,3804 'specif':627,1089,1968,2755,3003,4107 'specimen':2353 'spot':2011,3195 'spot-check':2010,3194 'src/components/ui':1000,3649,3659 'standalon':1274 'standard':303,525,2216,3684 'start':105,845,1528,1742,2329,2595,2627,2897,3611,3621 'state':892,2432,2586,2820,2824,2896,2899,2922,2943,3097,3533,3851,4355 'state/size':3510 'status':2325,2528,3426 'stay':2493 'step':563,599,2717,2809,2892,2925,2952,3013,3123 'stepper':2685 'stop':881,4336 'store':663,697,707,2131,3468 'stroke':607,1150,1407,1900,2736,2789,2966 'structur':65,305,314,1109,1165,1510,1790,1795,2211,2286,2385,2730,3040,3191,3608,3683,3779,3785,3867,3974,4092 'studio':1020 'style':285,288,342,470,702,1054,1134,1457,1468,1708,1711,2098,2116,2158,2184,2357,3226,3399,3402,3604,3726,3826 'styled-compon':1053 'success':2914,2920,4371 'suggest':2628,3329,3364,3703 'summari':1486,1581,2203,3386,3412,3629,3813,3908 'supplement':1290 'support':68,1001 'surfac':1199,1208,1221,1222,1333,4268,4277,4299,4309 'svelt':1080 'swap':2887,3058 'swatch':2343,3614 'switch':1685,1692,2539,3330,3365,4181,4188 'sync':75,451,1036,2040,2542,3636 'system':4,9,36,49,58,135,145,170,231,240,391,397,446,687,1344,1761,1782,1965,1986,2222,2668,2670,3306,3352,3371,3525,3562 'systemat':2962 't-color-core-r':1640 'tab':2680 'tabl':2834,3345 'tag/chips':2681 'tailwind':1048,2052,3668,3674,3677 'tailwind.config.js':988,3646,3654 'take':2571 'target':1292,1604,3063 'task':4053 'team':108 'templat':219,2502,3082 'tertiari':2456 'test':1202,3286,3479,3627,3701,3811,3906,4314 'text':156,284,326,341,469,701,757,773,799,805,816,820,1133,1154,1157,1195,1456,1460,1464,1467,1707,1902,2097,2157,2179,2302,2306,2356,2360,2740,2784,2837,2848,2870,3028,3223,3225,3268,3278,3398,3490,3495,3603,3725,3825,4214,4227,4242,4265 'theme':522,1056,4019 'theme.ts':990 'three':69,1826 'tier':1751,1823,4087,4098 'time':723,3886 'titl':2243,2252,2294,2320,2401,2407,2424,3086 'toast':2649,2916 'todo':3423 'togeth':3314 'toggl':642,1684,1691,2309,2879,3242,4121,4180,4187 'token':19,119,452,523,737,900,985,993,1015,1019,1044,1051,1196,1582,1630,1715,1733,1954,1969,1973,2025,2032,2044,2057,2087,2206,2348,2975,3376,3432,3643,3657,3669,3774,3855,3930,3934,4068,4266,4305 'token-nam':2024 'tokens.css':989 'tool':200,4390 'top':1254,1280 'top-level':1279 'topic-agent-skills' 'topic-claude-code' 'topic-design-system' 'topic-figma' 'topic-figma-mcp' 'topic-mcp' 'topic-skill' 'total':3391,3397,3403 'track':643,4122 'tree':3049 'true':1381 'truth':116,421 'two':767,1923 'type':1393,1414,2292,2818,2939,3051 'typographi':964,1033,1589,1776,2102,2352,3449,4083 'ui':1061 'unbound':3753 'understand':250,931,4352 'unit':708,2161 'unitless':671 'unless':4099 'unrel':1220,4298 'unvalid':578,2797,3156 'updat':55,835,1163,2281,2323,3976 'upfront':4032 'url':1024 'usag':1276,2331 'use':29,63,173,197,204,207,222,247,354,366,375,386,412,441,511,557,582,793,970,1104,1257,1530,1820,2027,2076,2117,2149,2156,2265,2510,2534,2551,2741,2763,2875,2885,2990,3080,3138,3199,3224,3228,3301,3575,3935,4017,4047,4074,4244,4332,4388,4394 'user':32,424,944,954,1482,1556,1578,1698,2199,2569,2653,2840,3163,3321,3357,3390,3557,3634,3713,3793,3821,4101 'util':2256,2524 'v1':3429 'v1.3.1':1113 'valid':18,97,163,306,478,560,926,1777,1990,3015,3150,3177,3308,3698,3893,4173,4291,4399 'validation-and-recoveri':4398 'valu':499,618,635,648,665,678,710,786,967,1126,1833,1847,1863,1941,2059,2137,2163,2557,2979,3214,3233,3470,3675,3754,4041,4114,4136,4141 'var':1646 'variabl':16,92,159,261,296,340,467,512,605,615,661,669,713,720,732,751,1047,1115,1137,1356,1509,1523,1546,1705,1747,1813,1889,2002,2014,2020,2066,2082,2126,2136,2167,2561,2590,2745,2782,2793,2955,3210,3230,3392,3395,3452,3454,3462,3467,3488,3672,3722,3756,3816,3823,3848,3892,3959,4057 'variables/styles':87,859 'variant':292,554,765,768,791,1074,1372,1379,2585,2812,2822,2874,2932,2961,3035,3043,3101,3110,3115,3146,3406,3529,3695,3990,3997 'variant.findall':1380 'verbal':1028 'verifi':1325,1999,2937,2987,3034,3847,4376 'version':2321 'vertic':2391,2411 'via':704,824,1103,2854 'violat':1121,3750 'visibl':1397,1418 'visual':602,1026,1534,2276,2363,2365,3023,4145,4377 'vs':1070,1488,1490,3944 'vue':1079 'w3c':1016 'want':3326,3358 'warn':1178,1229,1489,2918 'wcag':161,328,500,1180,3249,3410,3534,4208 'web':2023,3768 'websit':977 'weight':1883 'well':3313 'whatev':1794 'whether':1657 'whose':1205 'width':1907,2396,2413,2465,3516 'wine':1215,4285 'without':224,724,828,1466,2073,2166,4261 'work':228,237,548,579,2546,2798,3157,3712,4088 'workflow':28,67,545,837,1570,4384 'working-with-design-system':236 'worst':1226,3417 'would':3994,4142 'wrap':1260 'wrapper':2389,2461,2491,2501,3074,3507,3784,3805 'write':381 'xl':1869 'yet':1719","prices":[{"id":"d339f786-16a4-4883-bb4f-4f0dd4585ffa","listingId":"4ad21dca-1484-4516-8018-5f4d8a2d8ce7","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"natdexterra","category":"generate-design-system","install_from":"skills.sh"},"createdAt":"2026-04-19T00:00:18.722Z"}],"sources":[{"listingId":"4ad21dca-1484-4516-8018-5f4d8a2d8ce7","source":"github","sourceId":"natdexterra/generate-design-system","sourceUrl":"https://github.com/natdexterra/generate-design-system","isPrimary":false,"firstSeenAt":"2026-04-19T00:00:18.722Z","lastSeenAt":"2026-04-22T18:58:51.234Z"}],"details":{"listingId":"4ad21dca-1484-4516-8018-5f4d8a2d8ce7","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"natdexterra","slug":"generate-design-system","github":{"repo":"natdexterra/generate-design-system","stars":34,"topics":["agent-skills","claude-code","design-system","figma","figma-mcp","mcp","skill"],"license":"mit","html_url":"https://github.com/natdexterra/generate-design-system","pushed_at":"2026-04-17T18:47:45Z","description":"MCP skill for generating complete design systems in Figma: tokens, variables, components with variants and auto layout","skill_md_sha":"0c5720831c76b9c6dfdaa3cd0cc63617f78189bd","skill_md_path":"SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/natdexterra/generate-design-system"},"layout":"root","source":"github","category":"generate-design-system","frontmatter":{"name":"generate-design-system","description":"Build or extend design systems in Figma — create components with proper variable bindings, validate token coverage, and enforce quality patterns through a phased workflow. Use when the user says 'create design system', 'build DS in Figma', 'generate component library', 'set up tokens', 'audit my design system', or wants to push a design system from code to Figma. Also use for adding components to a file where variables and text styles already exist. Works from scratch, from a codebase, or by extending an existing file. Do NOT use to generate code from Figma designs (use figma-implement-design), build full-page screens (use figma-generate-design), or extract an internal DS for Claude Design (claude.ai/design). Use this skill whenever the user mentions Figma design systems, tokens, variables, or components, even if they don't explicitly say 'generate design system'.","compatibility":"Requires the figma-use skill to be installed. Requires Figma MCP server (remote) connected."},"skills_sh_url":"https://skills.sh/natdexterra/generate-design-system"},"updatedAt":"2026-04-22T18:58:51.234Z"}}