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

  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)

Installs
26
GitHub Stars
6
First Seen
Aug 13, 2026
figma-pixel-implement — fudesign2008/open-skills