Design system skills for product designers. Works with Figma through any AI coding tool that supports MCP (Claude Code, Cursor, Windsurf, and others).
Catalog your tokens, explore variations, audit designs, stress-test with real content, and hand off to engineering — all from your terminal.
21 slash commands organized into 5 phases:
| Command | What it does |
|---|---|
/setup-tokens |
Pull design tokens from Figma into structured JSON |
/setup-components |
Document component specs, variants, and props |
/setup-relationships |
Map how components depend on each other |
/setup-icons |
Catalog icons with keys, categories, and search tags |
/setup-product |
Capture product identity, users, IA, terminology, voice — informs every other skill |
| Command | What it does |
|---|---|
/capture |
Take a live URL, rebuild it in Figma as raw replica + design-system-mapped version |
/wireframe |
Lo-fi wireframe on FigJam from a URL, screenshot, Figma frame, or text description |
| Command | What it does |
|---|---|
/design |
End-to-end autonomous: brief → plan → build → states → audit → handoff. Routes single screen or multi-screen flow automatically. |
/brainstorm |
Generate 3-5 design variations using SCAMPER + Jobs-to-be-Done |
/plan |
Create a build plan from a brief, wireframe, or screenshot |
/build |
Execute a plan in Figma via a 5-phase pipeline (scaffold, components, tokens, validate) |
/plan-component |
Plan a new component — variants, props, tokens, anatomy |
/build-component |
Build a component set in Figma from a plan |
/responsive |
Desktop to tablet and mobile with content choreography |
| Command | What it does |
|---|---|
/audit |
Nielsen's heuristics + Gestalt + cognitive load + WCAG 2.2 AA accessibility + token compliance |
/stress-test |
Break your design with edge-case content before users do |
/review-component |
Score component quality across 9 dimensions |
/revise |
Apply feedback from Figma comments or direct input |
/diff |
What changed in your design system since last extraction? |
| Command | What it does |
|---|---|
/handoff |
Generate developer-ready specs with exact tokens and states |
/handoff-ai |
Optimize your Figma file for AI/MCP consumption |
- Presentation deck — 14-slide onboarding deck. Open in a browser, navigate with arrow keys.
- Data viewer — Browse extracted tokens, components, and plans. Serve with
python3 -m http.serverand open in browser. - Quick start guide — Full skill table, common workflows, tips, and troubleshooting.
- An AI coding tool with MCP support (Claude Code, Cursor, Windsurf, or similar)
- Figma Desktop with a design system file open
- Figma Console MCP — connects your AI tool to Figma
Global install — available in every project:
git clone https://github.com/bladefury3/design-kit.git ~/.design-kit
cd ~/.design-kit && ./setupProject-local install — scoped to one repo:
git clone https://github.com/bladefury3/design-kit.git
cd design-kit && ./setup --localSkills are installed as slash commands. Type /setup-tokens in your AI tool to start.
git clone https://github.com/bladefury3/design-kit.git ~/.design-kit
cd ~/.design-kit && ./setup --cursor=/path/to/your/projectThis installs skills to .cursor/skills/ — Cursor auto-discovers them and you
can invoke them with /skill-name, same as any other MCP-compatible tool.
To install into the current directory instead:
cd your-project
~/.design-kit/setup --cursorThen type /brainstorm, /plan, /audit, etc. directly in Cursor's chat.
Each skill is just a text file in a folder. Drop them into .cursor/skills/
and Cursor discovers them automatically — you get /slash-commands just like
any MCP-compatible AI tool. No install script needed.
Step 1: Download design-kit into your project
Open Terminal (or press Ctrl+` in Cursor to use the built-in terminal),
navigate to your project folder, and run:
git clone https://github.com/bladefury3/design-kit.git .design-kitThis creates a hidden .design-kit folder inside your project with all the skills.
Step 2: Copy skills into Cursor's skills directory
for skill in .design-kit/*/SKILL.md; do
name=$(basename "$(dirname "$skill")")
mkdir -p ".cursor/skills/$name"
cp "$skill" ".cursor/skills/$name/SKILL.md"
doneThis creates the structure Cursor expects:
.cursor/skills/
├── plan/
│ └── SKILL.md
├── build/
│ └── SKILL.md
├── audit/
│ └── SKILL.md
├── brainstorm/
│ └── SKILL.md
└── ... (21 skills total)
Step 3: Use skills in Cursor
That's it. Type / in Cursor's chat to see the available skills, or invoke
them directly:
/brainstorm— explore design variations/plan— create a build plan from a brief or screenshot/build— execute a plan in Figma/audit— check your design against heuristics
Same slash commands, same behavior across all MCP-compatible AI tools.
Updating to the latest version
When new skills are added or existing ones improve:
cd .design-kit && git pull && cd ..
for skill in .design-kit/*/SKILL.md; do
name=$(basename "$(dirname "$skill")")
mkdir -p ".cursor/skills/$name"
cp "$skill" ".cursor/skills/$name/SKILL.md"
doneOnly want specific skills?
Copy just the ones you need:
mkdir -p .cursor/skills/plan .cursor/skills/build .cursor/skills/audit
cp .design-kit/plan/SKILL.md .cursor/skills/plan/SKILL.md
cp .design-kit/build/SKILL.md .cursor/skills/build/SKILL.md
cp .design-kit/audit/SKILL.md .cursor/skills/audit/SKILL.mdAll AI tools need the Figma Console MCP server to talk to Figma. See the full setup guide for details and troubleshooting.
Claude Code — add to ~/.claude/settings.json:
{
"mcpServers": {
"figma-console": {
"command": "npx",
"args": ["-y", "figma-console-mcp"]
}
}
}Cursor — add to .cursor/mcp.json:
{
"mcpServers": {
"figma-console": {
"command": "npx",
"args": ["-y", "figma-console-mcp"]
}
}
}Then open your Figma file and run the Desktop Bridge plugin (Plugins > Development > Figma Desktop Bridge).
/setup-tokens # pulls colors, spacing, typography, radii
/setup-components # catalogs all components with variant keys
/setup-relationships # maps how components compose together
/setup-icons # catalogs icons with search tags
/setup-product # captures product identity, users, IA, voice
This creates a design-system/ directory with your tokens, component specs,
dependency graph, and product context. It's a one-time step — the data is
cached locally and informs every future command (terminology, layout
archetypes, content voice).
/design # autonomous: brief → plan → build → states → audit → handoff
# OR drive each step yourself:
/plan # describe what you want, or paste a screenshot
/build # executes the plan in Figma
/brainstorm # generates 3-5 alternative layouts from your design
/responsive # creates tablet + mobile versions
/design "multi-screen" # /design auto-detects flows and plans every screen
/stress-test # injects extreme content — long names, empty states, RTL
/audit # scores against Nielsen's 10, Gestalt, cognitive load
/diff # what changed in the design system since last extraction?
/plan-component # plan variants, props, tokens, anatomy
/build-component # create the component set in Figma
/review-component # score quality across 9 dimensions
/revise # apply feedback without rebuilding from scratch
/handoff # generate developer specs with exact tokens and states
Phase 1: SETUP (one-time)
/setup-tokens → /setup-components → /setup-relationships → /setup-icons → /setup-product
CAPTURE + WIREFRAME (bring existing pages into Figma)
/capture URL ──→ raw replica + mapped version (Figma)
/wireframe ──→ hand-drawn lo-fi wireframe (FigJam)
accepts: URL, screenshot, Figma frame, or text description
Phase 2: CREATE
/design ──→ autonomous end-to-end pipeline (single screen or multi-screen flow)
│ (auto-detects topology, calls /plan + /build per screen, then audit + handoff)
│
└── OR drive it yourself:
/brainstorm ──→ pick a direction
│
/plan ──→ /build ──→ see it in Figma
│ │ │
│ │ ├── Phase 1: MANIFEST (parse build.json → task checklist)
│ │ ├── Phase 2: SCAFFOLD (empty frame structure)
│ │ ├── Phase 3: COMPONENTS (instantiate library components)
│ │ ├── Phase 4: TOKEN-BUILT (fill gaps with frames/text)
│ │ └── Phase 5: VALIDATE (coverage, text, tokens, visual)
│ │
└── /responsive (tablet + mobile)
Phase 3: REVIEW
/stress-test ──→ /audit ──→ /revise
(break it) (check it — heuristics, Gestalt, WCAG 2.2 AA)
(fix it)
Phase 4: HANDOFF
/handoff ──→ done
Need a new component?
/plan-component ──→ /build-component ──→ /review-component
Decision memory (no extra command — happens automatically)
Skills append meaningful design decisions to design-system/decisions.md.
Future sessions read it as context. See shared/decision-capture.md.
Skills read from and write to three local directories:
| Directory | What's in it | Created by |
|---|---|---|
design-system/ |
Tokens, icons, component specs, relationships, product context, decision log | /setup-* skills, /build-component, all skills (decisions) |
plans/ |
Screen + component build plans, autonomous workflow logs | /plan, /brainstorm, /plan-component, /design |
reports/ |
(deprecated — findings go to Figma comments) | /audit, /stress-test, /diff, /review-component |
You don't need to extract first — most skills can read directly from Figma as a fallback. But extraction is faster for repeated use and lets you track changes over time.
The --update flag pulls the latest version from git, shows what changed, and reinstalls:
# Claude Code (global)
cd ~/.design-kit && ./setup --update
# Claude Code (project-local)
cd design-kit && ./setup --update
# Cursor
cd ~/.design-kit && ./setup --update --cursor=/path/to/your/projectThe update shows you exactly what changed:
design-kit v0.2.0
✓ Updated: v0.1.0 → v0.2.0
What's new:
+ new /responsive
~ updated /audit
~ updated /brainstorm
~ updated PRINCIPLES.md
→ Installing 21 skills...
Set up a daily update with cron:
(crontab -l 2>/dev/null; echo "0 9 * * * cd ~/.design-kit && ./setup --update") | crontab -Or add to your project's Makefile:
update-design-kit:
cd ~/.design-kit && ./setup --updateDesign Kit embeds established design frameworks into every skill:
- Nielsen's 10 Usability Heuristics — scored 0-10 in audits, referenced in brainstorms
- Gestalt Principles — proximity, similarity, continuity checks in audits and planning
- Cognitive Load Laws — Hick's, Miller's, Fitts's Law with severity thresholds
- SCAMPER — structured variation technique for brainstorming
- Jobs-to-be-Done — each variation optimizes for a specific user job
- Content Choreography — responsive adaptation based on content priority
- AI Slop Check — catches generic card grids, uniform spacing, and "clean modern" non-decisions
- Component Design Principles — variant architecture, duplicate detection, token binding rules, quality dimensions
See PRINCIPLES.md for the full framework reference.
Design Kit includes an AI-based evaluation system to test skill quality over time.
/eval-skills # run benchmarks against test cases
Test cases feed varied inputs to each skill (vague briefs, contradictory constraints, intentionally flawed designs) and score the output against rubrics. This catches regressions when skills are edited and identifies weaknesses.
benchmarks/
├── test-cases/ # Diverse inputs per skill (vague, complex, edge-case)
├── rubrics/ # Shared + per-skill scoring criteria
├── results/ # Timestamped scores + baseline
└── dashboard.html # Visual benchmark dashboard (open in browser)
Open benchmarks/dashboard.html in a browser and load a results JSON to see
score trends, weakest criteria, and per-test-case breakdowns.
design-kit/
├── design-system/ # Extracted design system data (generated)
│ ├── tokens.json # Design tokens with Figma variable keys
│ ├── icons.json # Icon catalog with keys, categories, tags
│ ├── components/ # Component specs (index.json + per-component)
│ ├── relationships.json # Component dependency graph
│ ├── product.json # Product identity, users, IA, terminology
│ ├── content-guide.md # Voice, tone, content patterns
│ └── decisions.md # Append-only log of meaningful decisions (auto-captured)
├── plans/ # Build plans (generated)
│ ├── components/ # Component plans (from plan-component)
│ └── <feature>/ # Per-screen plans + workflow log (from /design)
├── shared/ # Shared prompt patterns referenced by all skills
│ ├── design-system-loading.md # Tier 0/1/2/3 fallback for data loading
│ ├── decision-capture.md # When + how skills append to decisions.md
│ └── ...
├── build-helpers/ # Reusable Figma plugin API helpers
│ ├── figma-helpers.js # mkFrame, mkText, sweepText, canvasScan, etc.
│ ├── build-phases.md # 5-phase build pipeline reference
│ ├── tasks-template.md # Task checklist template for /build
│ └── component-tasks-template.md # Task template for /build-component
├── capture/ # Capture live URLs → raw + mapped Figma builds
├── wireframe/ # Lo-fi wireframes on FigJam from any input
├── reports/ # (deprecated — findings go to Figma comments)
├── setup-tokens/ # Skills (each contains a SKILL.md)
├── setup-components/
├── setup-relationships/
├── setup-icons/
├── setup-product/
├── design/ # Autonomous end-to-end pipeline
├── plan/
├── build/
├── brainstorm/
├── responsive/
├── stress-test/
├── audit/
├── diff/
├── revise/
├── plan-component/
├── build-component/
├── review-component/
├── handoff/
├── handoff-ai/
├── flow/ # (internal — called by /design, not a public command)
├── setup # Installation script
├── CLAUDE.md # Project instructions for Claude
├── PRINCIPLES.md # Shared design frameworks
├── ETHOS.md # Design philosophy
└── VERSION
cd ~/.design-kit && ./setup --uninstallFor Cursor, delete the .cursor/skills/ directories that were installed.
MIT
Sidharath Chhatani