Claude Code and Figma: Effectively Integrating the Design System

Claude Code, the artificial intelligence tool, can now generate interfaces directly on the Figma canvas thanks to Figma MCP. You describe an interface in natural language, and it builds it. Visually, the result can be pixel-perfect. However, upon examining each layer, you will find #5C6AC4 where color/brand/primary should be, 14 where text/body-sm is defined, and a freshly created unique component where a button instance already exists in the library. It is impossible to iterate on this basis. The design system already integrates these elements, but Claude Code does not utilize them.

The issue is not one of capability. Claude Code knows how to call the Figma API, query a library, and link a variable. The problem is that it does not know it should apply this knowledge in your specific project. No one has indicated the rules to it, so it has invented its own. Every color is isolated, every component improvised, and every modification requires relocating everything from the start. It succeeds in visual quality control but fails at the structural level.

Understanding the Harness Concept

In AI engineering, the term Harness refers to a framework of constraints that guides a model's behavior. This framework defines what the model can or cannot do, and how to verify the output. The model is the engine, and the harness is everything that makes the engine run according to your rules. In the case of Claude Code, a set of rules has been created to frame its operation in Figma. However, this is not a harness in the strict sense, but rather an application layer of workflows.

Governance Challenges in Figma

Figma has its own governance system, including variables, styles, and component libraries. However, Claude Code often operates outside this framework, leading to structural inconsistencies despite successful visual quality control. Each color value is isolated, each component is improvised, and every modification requires relocating everything from the start. The crucial question is how to integrate Claude Code into Figma's design system.

Four Essential Skills for Claude Code

To address this issue, four skills have been developed for Claude Code, each responding to a specific task in the design process.

01 | Preflight: Initial Check

Before any design session, three checks are performed: connection to Figma MCP, read/write permissions, and complete loading of styles and components. This generates a Token Map and a Component Registry to ensure a solid foundation. As long as the Preflight is not validated, no node is created. The value is simple: you do not discover thirty minutes later that your library tokens were never loaded.

02 | Reference Interpreter: Pre-planning

When a screenshot or design description is shared, this skill analyzes the input to produce a structured Design Brief. This allows for confirming the direction before starting the build.

03 | Component Rules: Using Existing Components

Every interface building task follows one rule: first, search the connected library. If a matching component exists, use its instance. Only if nothing is found do you build from scratch, and even then, automatic layout and semantic naming are mandatory. This skill modifies the default behavior of the AI. Without it, the instinct is to invent. With it, the first move becomes research. For any team maintaining a design system, this sequence makes the difference between usable and unusable.

04 | Style Binding: Linking Styles

For every task involving visual properties, this skill ensures that each property is linked to its corresponding variable or style. No raw values are accepted. After writing in Figma, it performs a quality control pass, confirming the links element by element. It does exactly one thing: transform #5C6AC4 into color/brand/primary.

Adapting the Tool's Role According to Context

These skills do not just solve a token linking problem. They encode a more fundamental judgment: the same AI tool should play different roles in different contexts and produce different types of output accordingly. When the designer needs to remain involved, Claude Code acts as a design assistant. Its output must be something a human can take, modify, and iterate. This means compliance at every layer: tokens, components, layout structure. The four skills are active. The complete governance chain is in effect.

When the goal is rapid prototyping, it switches to coding mode. Speed takes precedence over compliance. The rules application layer withdraws. Raw values are expected, not exceptions. The AI is powerful enough to write Figma. It is powerful enough to write React. But the gap between a powerful tool and a usable tool is often just a set of rules that no one has written.