"Claude Code can now write directly to the Figma canvas through Figma MCP. You describe an interface in natural language; it builds it. Visually, the result can be pixel-perfect. But click into any layer and you'll find #5C6AC4 where color/brand/primary should be, 14 where text/body-sm is defined, a freshly minted one-off component where an existing Button instance is sitting right there in the library."
"In AI engineering, people talk about a concept called Harness: The constraint framework you build around a model. It defines what the model can do, what it can't, and how to verify the output. The model is the engine; the harness is everything that makes the engine run by your rules."
"Figma has its own governance system: variables, styles, component libraries, naming conventions. But Claude Code operates entirely outside that system. Every color value is isolated. Every component is improvised. Every modification requires re-locating everything from scratch. It passes visual QA. It fails structural QA."
Claude Code can create pixel-perfect Figma interfaces from natural language descriptions, but it operates outside design system governance by using hardcoded values instead of design tokens, creating one-off components instead of library instances, and ignoring established naming conventions. This results in designs that pass visual quality assurance but fail structural requirements. The core issue is that Claude Code lacks instruction on project-specific rules and governance systems. A workflow enforcement layer—distinct from a system-level harness—is needed to govern how AI behaves within Figma's existing governance framework of variables, styles, component libraries, and naming conventions. This layer ensures AI-generated designs integrate with established design systems rather than creating isolated, non-reusable elements.
#ai-design-automation #design-system-governance #figma-integration #workflow-enforcement #design-tokens
Read at Medium
Unable to calculate read time
Collection
[
|
...
]