claude2figma Design System Harness

Skill by ara.so — Design Skills collection.

A harness for Claude Code + Figma that enforces Design System compliance in AI-generated designs. Prevents hardcoded values, ensures components stay linked, and binds all visual properties to tokens and styles.

What This Does

When AI writes to Figma without guidance, it creates everything from scratch:

• Hardcoded hex colors instead of color tokens
• Raw spacing values instead of spacing variables
• Components rebuilt from primitives instead of instances

claude2figma fixes this with 4 Claude Code Skills:

1. figma-preflight — 3-step parallel check that loads Token Map + Component Registry
2. component-rules — Library-first lookup, Auto Layout patterns, semantic naming
3. figma-style-binding — Enforces Variable/Style binding + post-write QA verification
4. reference-interpreter — Converts screenshots/references → structured Design Brief