claude-figma-kit

claude-figma-kit

A Claude Code plugin that generates professional Figma design systems from a product description — combining AI design intelligence with Figma Plugin API automation.

Installation

Step 1 — Clone the repo (one time only)

git clone https://github.com/tuanna/claude-figma-kit

Clone anywhere you like.

---

Step 2 — Run setup (one time only)

cd claude-figma-kit
bash setup.sh

This registers a global figma-kit-install alias in your ~/.zshrc. Run it once — works for all future projects.

---

Step 3 — Link into any project

cd /your/project
cfk install

That's it. The command creates .claude/commands and .claude/agents symlinks in your project.

Keeping up to date

When the repo has new updates, run from anywhere:

cfk upgrade

---

Step 4 — Restart Claude Code

Quit and reopen Claude Code completely (not just reload the window).

Verify it worked: type /figma in the Claude Code chat — you should see the commands autocomplete:

/figma-setup
/figma-init
/figma-tokens
/figma-components
/figma-pages
/figma-review

---

How to run commands

Slash commands are typed in the Claude Code chat window (not the terminal):

/figma-setup
/figma-init "Travel insurance platform for young travelers"
/figma-tokens
/figma-components
/figma-pages
/figma-review

Terminal commands are run in your shell:

# Review the generated design brief before building in Figma
cat .claude/figma/design-brief.md

---

How it works

Two tools work together:

1. ui-ux-pro-max — AI design engine with 161 reasoning rules. Given a product description, it generates a complete design system: color palette, typography, spacing, radius, page patterns, and anti-patterns.

2. Figma MCP — Official Figma MCP server (@figma/mcp-server). Executes Figma Plugin API code to create variables, components, and screens in your actual Figma file.

You describe your product. Claude generates the design system spec. You review it. Then Claude builds it in Figma.

Prerequisites

• Claude Code (claude.ai/code)
• Python 3
• A Figma account and file

Quickstart

/figma-setup

This one command installs everything — Python checks, ui-ux-pro-max skill, Figma MCP config, and Figma OAuth login. Run it once per project.

Full workflow

# 1. One-time setup
/figma-setup

# 2. Generate AI design system from your product description
/figma-init "Travel insurance platform for young travelers"

# → Review the generated brief before proceeding:
cat .claude/figma/design-brief.md

# 3. Create design tokens in Figma (Primitive + Semantic variables)
/figma-tokens

# 4. Build component library (Button, Input, Card, Nav, etc.)
/figma-components

# 5. Compose screens (Landing, Auth, Dashboard, etc.)
/figma-pages

# 6. Audit the design
/figma-review

What gets generated

After /figma-init:

File	Contents
design-system/MASTER.md	Full design system spec from AI
.claude/figma/design-tokens.json	Structured tokens: colors, typography, spacing density, radius style
.claude/figma/design-brief.md	Human-readable brief — review this before running /figma-tokens

After /figma-tokens onwards, these tokens are created in your Figma file:

• Primitives collection — brand/50–900, gray/50–900, accent, status colors, spacing, radius (Light + Dark modes)
• Semantic collection — aliased tokens: color/bg/default, color/interactive/primary/bg, spacing/md, radius/button, etc.
• Text styles — Display, Heading (H1–H4), Body, Label, Caption

Figma page structure

Page	Contents
Cover	Project cover
Design System	Token documentation
Components	All component sets (atoms, molecules, organisms)
Screens	Full-page screen compositions
Archive	Deprecated work

Design review

# Review everything
/figma-review

# Review a specific screen
/figma-review "Dashboard screen only"

# Auto-fix CRITICAL issues
/figma-review --fix

The reviewer checks:

• CRITICAL: Hardcoded colors (breaks dark mode), clipped text
• HIGH: WCAG contrast failures, inconsistent spacing, wrong component variants
• MEDIUM: Missing interactive states, placeholder text
• LOW: Pixel tweaks

Design system quality

The AI-generated design system includes:

• Color palette derived from your product's aesthetic (minimalist, bold, playful, professional)
• Typography pairing (heading + body fonts from Google Fonts)
• Spacing density (compact / default / relaxed based on product type)
• Corner radius style (sharp, subtle, rounded, pill)
• Landing page pattern with recommended sections
• Anti-patterns to avoid for your product category

Project structure