Build Figma
Use for \"/build-figma\", a figma.com/design URL with node-id, or \"implement this...
Install
npx skills add cursor/plugins --skill build-figma -g -a claude-code -y- Repository
- cursor/plugins15k
- Category
- Design
- Updated
- 4d ago
- License
- See repository
- Context cost
- Lightabout 858 tokens
- Runs scripts
- No, instructions only
What it does
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.
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. Missing → stop and tell the user to run /add-plugin <name>.
Failure modes that shaped the gates: 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, 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 |
| 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.
