figma-pixel-verify

Installation
SKILL.md

Figma Pixel Verify

Measure a running UI against a Figma living artifact (Inventory + Spec) and write pass/fail evidence into its Verify section (or a Spec source sibling). On a non-pass row, fix and remeasure in this run. Actual values come from a laid-out read. Do not overwrite Figma expected. Do not edit figma-pixel-implement skill prose.

When to use

  • After figma-pixel-implement (or any Figma implement pass that left a durable inventory + spec path)
  • User asks to check pixel alignment / design fidelity / 对照稿面验收
  • Standalone: user provides Figma URL + running preview URL/route; persist a minimal inventory + spec to the same path convention before measuring

Inputs

  1. Living artifact — File path from implement. Same columns as implement reference (state, mode, basis). After an implement run this session, do not silently rebuild a missing table and claim that handoff complete—FAIL and return to figma-pixel-implement.
  2. Runnable UI — Document surfaces, preferred first: a component-workbench story from the living artifact’s Stories subsection (or a detected Storybook-style workbench) → a lightweight isolated harness (stub out host/engine dependencies) → the in-product preview route → a full app/browser launch (heaviest, last resort). Surfaces with no computed-style API use layout-probe: a command that mounts the control in the shipping parent (the container the screen uses), runs layout, and prints frames. A command that lays out the control with no parent is not a measurement.
  3. Running-UI screenshot when the channel can open a UI (storybook, isolated-harness, preview, full-app): save a png, jpg, jpeg, or webp of that UI this run and cite its path. A layout-probe that cannot open a UI records Screenshot: not-openable and does not invent an image. The image is supporting evidence. It does not replace numeric checks.

Workflow (ordered)

Installs
46
GitHub Stars
6
First Seen
Aug 13, 2026