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
- 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 tofigma-pixel-implement. - 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. - 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. Alayout-probethat cannot open a UI recordsScreenshot: not-openableand does not invent an image. The image is supporting evidence. It does not replace numeric checks.