Agent skill · cursor
build-figma
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.
What it needs
About 2k tokens when loaded.
What this skill does
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 getdesigncontext 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 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 getdesigncontext and getscreenshot. If the response is sparse or too large, split to implementable child nodes. Download brand assets from MCP URLs; never redraw logos. Run design-system discovery. Then write /tmp/build-figma/<slug>/intake.md: Target surface, code path, and how you will drive it live. Node tree. Metric table. Figma px → token, or pinned value when no token matches. Node → primitive map. Each Figma node to an existing component. Mark any node with no match as new, with why. 2. Implement Use the surface's styling system and the mapped components. When Figma px disagree with a primitive's default size, pin the Figma metric in that styling system. Do not bend the primitive's defaults globally. Hard bans below. 3. Visual judge (blocking) Specialize verify-this with references/visual-judge.md. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills cursor/build-figma