Working Surfacelink · 9 Oct 2026
07
A designer seen from behind at a desk holding two paint swatches of nearly the same colour up to a screen that shows a payment sheet, the whole scene drawn with wide empty margins on every side.
tingowiggle

Giving AI Agents a Design System They Can Actually Ask

yutingo · 7 October 2026

How-to · design systems · agents · Agent context files

Read the original
Takeaway

Designer yutingo built a tool that lets an AI coding agent look up design-system rules for each task, after a written guide alone produced near-miss colours and duplicate components.

Summary

The designer who writes as yutingo uses AI coding agents to prototype interfaces, and found the results fast but rarely consistent with the design system. Giving the agent a written design guide did not help it find the right rule at the right moment. The author built an open-source tool that returns the tokens, components and rules for the screen the agent is asked to build.

Key points
  • With too little guidance the AI agent guesses a colour or corner radius that is close but wrong. With the whole guide, the one rule that matters can be lost.
  • An agent can build a screen that looks correct while rebuilding a component that already exists. The copy then stays unchanged when the real component is updated.
  • In the test design system, teal marks an action a person confirmed and violet marks a suggestion from the AI assistant. A suggestion shown in teal could look already approved.
  • The author says the checks are not guarantees: accessibility, interaction states and whole flows still need a person's review.
Implication

A design team can check whether its AI agent reuses existing components, and not only whether the screen looks right. This is an inference and is not the author's claim; the piece describes the author's own tool, tested on a fictional product.

Plays
Design

Give the AI agent a way to look up the existing component and its rules for the screen it is building, instead of the whole design guide.

Design

Check every colour and size in a screen built by an AI agent against the design system's named values, and replace any that is not one of them.

Derived by Working Surface from the article; more in the Playbook. Source line: These are helpful checks, not guarantees: accessibility, interaction states and whole flows still need a person to review.

Source issue

9 October 2026: when AI agents take on routine work, teams write down in advance what a person still decides, put those rules where the agent reads them, and keep the people who approve able to understand the work.