Where it started
I was building the design system for a buyer portal: tokens, variables, components. The company has a clear process for this, with stages and rules for structure and naming, and a designer gets a full working day for it. Work with rules this clear looked like a good fit for an agent.
My first try in Claude Code through Figma MCP gave a decent base, but the structure and styling were far from the company standard.
Getting buy-in
I asked the art director whether the company needed this. His answer was yes: the time saved goes into craft and design. He gave me reference design systems and sent me to an art director from another department, whose team had tried to create a shared language for designers and developers and then stopped. I took their naming work and the problems they had found.
How I built it
- A company rulebook. I went through the reference systems with the agent and answered its questions. We wrote down what we use, what we do not, and how things are structured.
- First run. A design system is built after the home page is approved, so I gave the agent the home page of a real project. It described typography and colors well but made mistakes: it invented things that were not in the layout and called unfinished work done. There was no final check.
- A second agent: the reviewer. It checks every stage before the designer sees it and compares the result with the layout in numbers: structure, spacing, effects. Nothing ships without its report. From the second run, the results were good.
- Every mistake becomes a rule. Over 4 runs the agent's handbook grew: 114 mistakes analyzed, about 15 rule documents and 54 documented Figma traps. Closed mistakes never came back.
Where the agent works, where the designer steps in
The designer joins at a few points, for minutes. Agents do the rest.
How it works for the designer
- Questions first. The agent studies the layout and asks before it starts: why this spacing, this size, this element. Mismatches are found before the build, not after.
- Links inside the text. Every element the agent mentions links to its Figma node. The designer clicks a word and sees the element.
- Clear touchpoints. The designer provides the files, answers questions, approves the spec, accepts the work with the reviewer's report and publishes the library. The agent does the rest: tokens, styles, components, then page modules.
- Notes for developers. Every component has a description: what it is for, where it is used, how it behaves with fill and hug, and what to avoid. Developers and their AI agents read it.
The agent does not just create tokens; it explains each one: what it is for, where it is used and how often it appears in the layout. When a purpose is unclear, it flags it instead of guessing: "added by another designer, purpose not defined — clarify or remove".
Results (measured on a real project)
- About 1.5 hours of designer time instead of
8–10 hours of manual work on the design system and modules. - 23 components, 143 tokens, 12 styles, 8 home page sections for desktop and mobile.
- The reviewer caught 17 defects, 10 of them critical, before a person saw the work.
- Designer interventions went from 12 review cycles to 2.
- Blind comparison with the
hand-built design system of the same project, which the agent never saw: 0 missing states versus 59, descriptions on 100% of components versus 0%, no typos or duplicates.
Blind comparison: agent vs a
Same project. The agent never saw the
Size is not comparable: the agent saw only the home page, while the
Where a human stays in the loop
Only the designer publishes libraries and stays the last check: an eye still catches "these buttons look poorer than the layout". The agent hands work over so that checking takes minutes: screenshots, tables and the reviewer's report.
Key takeaway
The results came from written rules, not from a smart model: the rulebook, agent roles, mandatory review and a mistake log. That is why the system can be handed to a team instead of living in one chat.