Working Surfacelink · 6 Oct 2026
04
A front-end engineer seen from behind at two monitors, one showing a design file and the other a running web page, with a colleague in silhouette leaning in to point at a gap, the whole scene drawn with wide empty margins on every side.
QuantumBlack, AI by McKinsey

What changes when your design system can talk to an AI?

Natalia Kurakina, with Péter Kismarczi, Carolina Staudinger and Joseph Perkins · 1 October 2026

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

Read the original
Takeaway

QuantumBlack moved a product's whole interface onto its design system with an AI coding agent that was told to stop and ask whenever the design left gaps.

Summary

QuantumBlack, AI by McKinsey, is the consultancy's AI arm. It moved the interface of one of its products, which runs to 21 pages and 13 modals, onto its own design system. Natalia Kurakina, writing with three colleagues, describes how a front-end engineer and designers used Claude Code, an AI coding agent, connected to Figma designs. She also lists the checks people still carry out.

Key points
  • The engineer gives the agent the pull request, a screenshot, the target Figma design and a skill that packages the design system. The engineer also tells it to ask when something is not trivial.
  • A simple page took 10 to 15 minutes and a complex page 4 to 5 hours; both would have taken days by hand.
  • The designer reports first-pass match to the design rising from about 20 percent to 70 to 80 percent, and review rounds falling from four or more to one or two.
  • People still check interaction states, confirm that existing functions survived, sort test failures and review every change before merge.
Implication

The authors argue that the clarity of the design system decides the quality of agent output. Their stated practice is to make the agent ask about gaps instead of guessing. The piece is an organisation describing its own open-source system, read through Medium's own feed because the article page blocks automated access.

Plays
Engineering

Instruct the AI coding agent to stop and ask when a design leaves something non-trivial undecided, and answer in writing before it continues.

Design

Before merging a page that an AI agent has rebuilt, click through its interaction states and confirm that each existing function still works.

Derived by Working Surface from the article; more in the Playbook. Source line: The highest-value design work this year was in making the system itself unambiguous, because every product and every AI tool inherits its clarity, or its mess.

Source issue

6 October 2026: as AI agents take on more of the work, teams are writing down expert judgement for agents, keeping juniors next to reviewers, and building views that let a person check agent output.