UX Collective: how to make Claude Code follow your design system in Figma
What the article is about
Published in UX Collective in May 2026, this is a practical implementation guide by designer Sen Lin on a specific problem: when AI coding agents like Claude Code write UI to the Figma canvas, they tend to use hardcoded values — hex colors, pixel sizes, raw spacing — rather than the design tokens and component instances that a design system defines. The article describes four Claude Code skills that prevent this at each stage of the build process.
Context
As the Figma MCP server and Claude Code become more accessible, designers are experimenting with agentic workflows where a language model is given a brief and generates design frames directly on the Figma canvas. The problem Sen Lin addresses is a structural one: an agent that does not have explicit rules about a design system will produce output that looks plausible but breaks the system’s logic. Fixing this after the fact takes longer than getting it right at the start.
The four-skill workflow
The first skill is a preflight check. Before any node is created on the canvas, the agent runs a token map and component registry audit. It lists the available variables, spacing tokens, and type styles in the Figma file. If the preflight fails — for example, if no components are linked — the agent stops and reports the problem rather than proceeding.
The second skill handles design brief parsing. When a designer shares a screenshot, a reference link, or a written description, this skill converts the input into a structured brief: which sections to build, which components from the connected library to use, and which tokens to apply. It makes the intent explicit before any generation starts.
The third skill enforces component library search. Every time the agent needs a UI element, it first queries the connected Figma component library. If a matching component exists, it uses an instance. If nothing matches, it builds from scratch. This prevents the agent from generating arbitrary UI when a system-approved component could serve the purpose.
The fourth skill is a token binding QA pass. After writing to the canvas, the agent runs a validation step that checks each binding — converting hardcoded hex values back to their semantic token equivalents where applicable, and flagging any nodes that do not map to a variable.
Key argument
The article’s main point is that Claude Code by itself is not sufficient for design system compliance. Compliance requires explicit instruction at each decision point. The four skills add those instructions in a structured way, so the agent’s behavior is predictable across different projects and files. The author frames it as writing a workflow once and calling it reliably, rather than re-explaining system rules in every prompt.
Who should read this
Product designers and design system leads who are experimenting with Figma MCP or Claude Code for UI generation and want to ensure that AI-generated output stays within the bounds of their design system.