Design Systems for AI Agents
Luke Wroblewski · 1 October 2026
Read the originalLuke Wroblewski, a product designer, shows how an instruction file and code-based design tokens keep every team's AI agents on one website design.
Luke Wroblewski, a product designer, has watched design systems fall out of date for more than 20 years. Now that marketing staff, engineers and product managers can all change a website through AI agents, each agent invents its own styles unless steered. On his recent projects, a design lead and a front-end lead set the shared values once, and agents are told to reuse them.
- On the Intent website, an instruction file for agents, AGENTS.md, tells agents to reuse the shared stylesheet values instead of copying colours, type or grid values.
- When someone asks for a new button, the agent reuses the existing button component, which already handles dark mode.
- The design system started from Figma specifications, but the code then became the reference, and the design system page is built from that code.
Design teams can treat the design system as instructions that agents read on every change, owned by a design lead and a front-end lead together. The pairing is the author's practice; its wider use is an inference.
Have a design lead and a front-end lead define the grid, fonts, colours, spacing and components once, and point every agent to them through an instruction file.
Make the website's stylesheet and components the reference for the design system, and generate the design system documentation page from that code so that the two stay the same.
Derived by Working Surface from the article; more in the Playbook. Source line: Design teams have spent years trying to get people to actually read their design system documentation. Agents read it every single time.
3 October 2026: the written material that steers AI agents has become a maintained product that needs an owner, and setups without one decay into tangles that only the AI can navigate.