DEVOURED
How to make Claude Code follow your design system in Figma
To make Claude Code adhere to design system governance in Figma, the author developed four "Skills" that enforce token and component library usage during canvas construction.
What: Claude Code, when writing directly to Figma via Figma MCP, ignores design system governance, using raw hex values and improvised components. The author addressed this by creating four Claude Code Skills—Preflight, Reference Interpreter, Component Rules, and Style Binding—to ensure compliance with design system tokens and library instances during Figma canvas generation.
Why it matters: This demonstrates the practical challenges and solutions in integrating AI code generation with existing design system principles, highlighting the need for programmatic governance layers to ensure consistency and maintainability in AI-assisted design and development workflows.
Takeaway: Developers and designers integrating AI code generation tools into their Figma workflows should consider building custom rules or 'skills' to enforce design system compliance from the outset.
Decoder
- Figma MCP: Figma's Machine Code Plugin (MCP), a component that allows external tools, like AI models, to directly interact with and manipulate Figma files.
- Design system: A set of standards, reusable components, and guidelines that define the design of products across a brand, ensuring consistency and efficiency.
- Design tokens: The smallest, indivisible units of a design system, such as color values, font sizes, spacing, and animation durations, stored in a format that can be used across different platforms.
- Library instances: Reusable components from a Figma design library that maintain a link to the master component, allowing for consistent updates.
Original article
Claude Code writes directly to Figma via Figma MCP but ignores design system governance, using raw hex values and improvised components instead of tokens and library instances. To fix this, the author built four Claude Code Skills — Preflight, Reference Interpreter, Component Rules, and Style Binding — that enforce design system compliance at every layer before and during canvas construction. The same tool can then shift roles: acting as a strict design assistant when iteration matters, or a fast prototyper when speed takes priority.
Explore all 40 articles in today's digest
Fresh dev news, AI-digested daily. Never miss a trend at devoured.fyi