Skills · SkillWeb & UIReviewed

build-figma

Turns a Figma node into production UI: maps it onto the repo's design system and runs a visual check.

Kind: Skill
Works with: Cursor
Languages: TypeScript / JavaScript
Source: cursor/plugins @ 9580c23696ac
Path: dyl-stack/skills/build-figma/SKILL.md
License: MIT
Jobs: UI/UX work

InstallCopy it from the source repository, or sign in and let the assistant adapt it for your project.

# 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)
…