claude2figma-design-system-harness

What problem does it solve?

AI-assisted design in Figma often produces layouts and styles that drift away from your Design System by hardcoding colors, spacing, and typography instead of binding everything to tokens and component instances.

Core Features & Use Cases

• Token-binding enforcement for visual properties: Rejects or prevents raw hardcoded values and ensures fills/text/effects reference Variables and Styles.
• Library-first component construction: Prioritizes connected Design System libraries, creates instances (not primitives), applies valid variant properties, and maintains component structure.
• Preflight-driven compliance workflow: Runs a session-start preflight that loads a Token Map and a Component Registry, then guides the rest of the build with QA verification.
• Reference-to-Design-Brief translation: Converts screenshots/references into a structured brief so the build stays aligned with DS constraints.

Quick Start

Run the preflight step before starting any Figma edits so the Token Map and Component Registry are loaded and the compliance rules are enforced for the rest of the session.