claude2figma-design-system-harness
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:
- figma-preflight — 3-step parallel check that loads Token Map + Component Registry
- component-rules — Library-first lookup, Auto Layout patterns, semantic naming
- figma-style-binding — Enforces Variable/Style binding + post-write QA verification
- reference-interpreter — Converts screenshots/references → structured Design Brief
More from aradotso/design-skills
open-design-ai-prototyping
Local-first AI design tool that turns coding agents into design engines with 31 skills, 129 design systems, and multi-format export
69design-md-format
Create and validate DESIGN.md files that give AI coding agents structured understanding of design systems through machine-readable tokens and human-readable rationale.
67open-codesign-ai-design
Use Open CoDesign to generate prototypes, slides, and PDFs from prompts with Claude, GPT, Gemini, or local models
66claude-design-system-hooks
AI-powered design-to-code engine that generates production-ready UI components from natural language using Claude API
63claude-design-ui-framework
AI UI/UX framework for building Claude-powered apps with React, Tailwind, screenshot-to-code, and Artifacts-style components
62keychron-hardware-design
Access and work with Keychron keyboard and mouse industrial design files (STEP, DXF, DWG, PDF) for 135+ models to create compatible accessories, remixes, and modifications.
60