Verwendung
- Installationsbefehl kopieren und das Quellpaket vor der Installation in der eigenen Agentenumgebung prüfen.
- Benötigte Werkzeuge, Zugangsdaten und Hosts im Original prüfen.
- Eingabe und gewünschtes Ergebnis beschreiben und die Ausgabe mit den Quellen abgleichen.
npx skills add https://github.com/southleft/skills-for-figma --skill check-design-parity-figmaVor dem Start
- Die Installation umfasst weder Modellabo noch API-Kontingent oder Dateizugriffsrechte.
- Sterne und Installationen zeigen Aktivität, keine unabhängige Qualitäts- oder Sicherheitsprüfung.
Aus dem Quell-Repository gerendert; Überschriften, Beispiele, Code, Tabellen, Links und Bilder bleiben erhalten.
check-design-parity-figma — 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, 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` → use
scan-code-accessibility-figma
(--map-to-codespec emits exactly that object).
- Design-side WCAG lint → use
lint-design-figma.
Workflow
- Assemble the codeSpec. Gather the values your component renders into the
codeSpecobject
(references/parity-scoring.md has the full shape). You only need to fill the sections you want compared — visual, spacing, typography, accessibility. Tip: scan-code-accessibility-figma --map-to-codespec builds codeSpec.accessibility automatically.
- Read the design specs. Set
NODE_IDand paste yourcodeSpecinto
`scripts/check-parity.js`. Run it via use_figma (skillNames: "check-design-parity-figma"). It extracts the node's fills, strokes, corner radius, opacity, padding/gap, and text properties, then diffs them against the codeSpec.
- Read the scorecard.
summary.parityScoreis `max(0, 100 − (critical×15 + major×8 + minor×3 +
info×1)). discrepancies[] lists each mismatch with category, property, severity, designValue, codeValue, and a suggestion`.
- Decide which side to fix. Each discrepancy says what design has vs what code has. Update code to
match the design, or push the design to match an intentional code change (via manage-variables-figma / figma-use), then re-run to confirm the score rose.
Key rules
- Colors are 0–1 in Figma; the script converts to hex and normalizes both sides before comparing.
- Only filled codeSpec sections are compared. Omit a section to skip it — no false positives for
data you didn't provide.
- Numeric tolerance: dimensions compare with a small epsilon (≈2px for width/height, 0.01 for
opacity) so sub-pixel rounding doesn't register as drift.
- Severity drives the score: color/spacing mismatches are
major(−8), radius/border-width/opacity
are minor (−3). See parity-scoring.md for the full weighting.
