# Build Figma

Use for \"/build-figma\", a figma.com/design URL with node-id, or \"implement this...

- Repository: https://github.com/cursor/plugins (15000 stars)
- Category: Design
- License: see repository
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add cursor/plugins --skill build-figma -g -a claude-code -y`
Codex: `npx skills add cursor/plugins --skill build-figma -g -a codex -y`
Cursor: `npx skills add cursor/plugins --skill build-figma -g -a cursor -y`
Gemini CLI: `npx skills add cursor/plugins --skill build-figma -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add cursor/plugins`

## Description

Use for \"/build-figma\", a figma.com/design URL with node-id, or \"implement this Figma\" into a web, desktop, or shared UI. Orchestrates Figma MCP intake, maps nodes to the repo's own design system, then a verify-this visual judge. Do not paste Figma Tailwind.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Build Figma

Orchestrator for Figma → production UI. It does **not** replace the skills below. Read each when that phase starts; do not restate them here.

**Requires** `figma` (plugin and connected MCP) and `cursor-team-kit`. Check first with [../dyl-mode/references/requirements.md](../dyl-mode/references/requirements.md). Missing → stop and tell the user to run `/add-plugin <name>`.

Failure modes that shaped the gates: [references/failure-lessons.md](references/failure-lessons.md).

## Delegate to (do not copy)

| Phase | Read |
| --- | --- |
| Figma MCP mechanics | `figma-design-to-code` from the Figma plugin, before every `get_design_context` |
| Design-system inventory | [references/design-system-discovery.md](references/design-system-discovery.md), then any repo-local design-system skill or rule it finds |
| Visual claim / verdict shape | `verify-this` from `cursor-team-kit` + [references/visual-judge.md](references/visual-judge.md) |
| Drive live UI | `control-ui` from `cursor-team-kit`, or the repo's own control skill for that surface |

## Gates

```
Build-figma progress:
- [ ] 0. Parse fileKey + nodeId (refuse file-only URLs)
- [ ] 1. Intake done before any product UI edit (see below)
- [ ] 2. Mapped to the repo's primitives/tokens only
- [ ] 3. Styling in the surface's own styling system
- [ ] 4. Visual judge VERIFIED per visual-judge.md (verify-this claim shape)
```

Gate 1 blocks coding. "Functional first, polish visuals later" is the main failure mode.

## Workflow (thin)

### 0. Parse URL

`figma.com/design/:fileKey/...?node-id=1-2` → `fileKey`, `nodeId` (`1-2` → `1:2`). Branch URLs use `branchKey` as `fileKey`. No `node-id` → stop.

### 1. Intake (blocking)

Follow `figma-design-to-code`. Call `get_design_context` and `get_screenshot`. If the response is sparse or too large, split to implementable **child** nodes. Download brand assets from MCP URLs; never redraw logos.

The rest: https://github.com/cursor/plugins/blob/HEAD/dyl-stack/skills/build-figma/SKILL.md