Figma Pixel Implement

Implement UI from a Figma node into the target codebase with export-faithful assets, a screen × state inventory, and a durable living spec in the target repo that figma-pixel-verify can measure against.

Completion boundary: this skill ends at “implemented + measurable contract” (code + file path to Inventory, Spec, and Assets sections). A session-only table is not complete. Missing Assets rows for implemented visible graphics means implement is incomplete. When the project has a component workbench, story coverage of the in-scope inventory (states × context) is also part of implement complete (Workflow 9). Pixel alignment is owned by figma-pixel-verify, which this run continues into. The user-facing result is that skill’s overall PASS. Iterations stay inside the run.

This skill is platform-agnostic (Claude Code / Cursor / OpenCode / others). It requires a Figma design-context capability, not a particular Agent’s skill id.

Visual source of truth: the named Figma node. Walkthrough or QA notes that conflict with the current node are recorded as notes/residuals; they do not replace expected.

Prerequisites

1. Figma design-context available (hard gate) — Confirm the Agent can fetch structured design payload for a node (design context, metadata, screenshot, asset export as the environment provides). If that channel is missing or auth fails, stop: tell the user how to enable Figma MCP / plugin / equivalent for their Agent. Do not invent a single hard-coded install path as the only option. Do not invent UI from the URL alone.
2. Optional: platform Figma→code guidance — If this Agent already ships an official Figma design→code skill or guide (names vary by product; one Cursor plugin example is figma-design-to-code), load it when present and follow its URL parsing / Code Connect / adaptation rules. Missing that named skill is not a blocker—continue with Figma MCP (or equivalent) + this skill’s fidelity rules. Do not require a Cursor-only skill id on Claude Code, OpenCode, or other Agents.
3. Figma URL or node — Prefer a figma.com design/make URL or explicit fileKey + nodeId. If missing, ask once with clarifying-question discipline.

Workflow (ordered)