figma-check-design-parity
Installation
SKILL.md
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_figmarules — load the officialfigma-useskill first; it is the full Figma Plugin API reference. Essentials these scripts rely on: plain JS with top-levelawait+return(no IIFE, nofigma.closePlugin();console.logis not returned), inputs inlined asconstat 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→ usefigma-scan-code-accessibility(--map-to-codespecemits exactly that object). - Design-side WCAG lint → use
figma-lint-design.