figma-lint-design
Installation
SKILL.md
figma-lint-design — WCAG 2.2 + design-system lint over a node tree
Walk a Figma node (or the whole current page) and report accessibility and design-quality problems
in one pass. Runs entirely through use_figma, so it works on any Figma plan and inspects the
real design (true colors, real auto-layout, actual variant names) rather than generated code.
Why this is unique: the native Figma MCP (get_design_context, get_metadata, etc.) reads
designs for code generation but does not lint them. There is no built-in "is this accessible /
token-clean?" check on the design side. This skill fills that gap with a faithful port of 14 WCAG 2.2
rules plus 6 design-system/layout rules.
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).- Per-component deep scorecard (state coverage, color-blind sim, 0–100 scores) → use
figma-audit-accessibility. - CODE-side a11y (axe-core over generated HTML) → use
figma-scan-code-accessibility. - Design-vs-code drift → use
figma-check-design-parity.