figma-pixel-implement
Installation
SKILL.md
Figma Pixel Implement
Implement UI from a Figma node into the target codebase with export-faithful assets and a design-spec table that figma-pixel-verify can measure against.
Completion boundary: this skill ends at “implemented + measurable contract.” It does not assert pixel alignment. Run figma-pixel-verify for pass/fail with evidence.
This skill is platform-agnostic (Claude Code / Cursor / OpenCode / others). It requires a Figma design-context capability, not a particular Agent’s skill id.
Prerequisites
- 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.
- 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. - Figma URL or node — Prefer a
figma.comdesign/make URL or explicitfileKey+nodeId. If missing, ask once with clarifying-question discipline.