Claude Code can now write directly to the Figma canvas via Figma MCP. The output looks correct. It is not. Click into any layer and you find raw hex values like #5C6AC4 where color/brand/primary should be, hardcoded 14px where text/body-sm is defined, and improvised one-off components where library instances exist. The design system is intact. Claude Code simply ignored it.
The fix is a four-skill workflow enforcement layer, available at github.com/senlindesign/claude2figma. Skill 01, Preflight, runs seven checks before any node is created, confirming MCP connection, file permissions, and full token load, outputting a Token Map and Component Registry with 347 variables, 16 text styles, and 78 component sets as a session baseline. Skill 02 parses references into a structured Design Brief before construction begins. Skill 03 forces a library search before any component is created. Skill 04 enforces token binding on every color, type, spacing, and radius value, then runs a QA pass item by item. No raw values accepted.
What makes this worth reading in full is not the conclusion but the architecture reasoning inside it. The author draws a precise distinction between a harness, a system-level constraint framework, and a workflow enforcement layer, rules that govern one specific context inside that harness. That framing explains why the same Claude Code instance should operate in full governance mode for iterable design work and drop compliance entirely for rapid prototyping. The gap between a powerful AI tool and a usable one is a set of rules. This is what writing them looks like.
[READ ORIGINAL →]