HOW TO MAKE CLAUDE CODE FOLLOW YOUR DESIGN SYSTEM IN FIGMA

Summary from the TLDR Design newsletter

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.