figma-check-design-paritylisted
Install: claude install-skill whiskfernlowdensitylipoprotein154/figma-console-mcp-skills
# figma-check-design-parity — design vs code drift checker
Pull a Figma node's real specs and diff them against a **codeSpec** (what your implementation
actually renders). Returns a weighted parity score, per-property discrepancies with severity, and
suggested fixes. This is the inverse of code generation: `get_design_context` turns a design into
code; this skill confirms the code didn't drift away from the design.
All design reads go through `use_figma`, so it works on **any Figma plan**.
## Skill boundaries
- **`use_figma` rules** — load the official **`figma-use`** skill first; it is the full Figma Plugin API reference. Essentials these scripts rely on: plain JS with top-level `await` + `return` (no IIFE, no `figma.closePlugin()`; `console.log` is not returned), inputs inlined as `const` at the top of each script, colors in 0–1 range, load fonts before any text op, `await figma.getNodeByIdAsync(...)`, and **atomic errors** (a failed script applies nothing — read the error, fix, retry).
- **Generating code from a design** → that's the native `get_design_context`; this skill validates, not generates.
- **CODE-side a11y to feed `codeSpec.accessibility`** → use `figma-scan-code-accessibility`
(`--map-to-codespec` emits exactly that object).
- **Design-side WCAG lint** → use `figma-lint-design`.
## Workflow
1. **Assemble the codeSpec.** Gather the values your component renders into the `codeSpec` object
([references/parity-scoring.md](references/parity-scoring.md) has