I’d Love to Hear
Your Ideas.
Let’s Connect!

Richard Masters

I’d Love to Hear
Your Ideas.
Let’s Connect!

Richard Masters

I’d Love to Hear
Your Ideas.
Let’s Connect!

Richard Masters

When Your Design System Becomes an AI Teammate

When Your Design System Becomes an AI Teammate

Sooner or later, an AI agent working on a product will ask a surprisingly sensible question: which component should I use?

The unhelpful answer is “the appropriate one”. The more common answer is a link to a design-system website containing 240 components, three deprecated navigation patterns and a search function that has interpreted “approval” as a personal challenge.

An AI-ready design system can do better. It can provide the agent with the relevant production components, explain the intent behind them, show comparable product examples and help test the result. At that point the system is no longer a passive library. It begins to behave like a teammate.

This does not mean giving the button catalogue a personality and inviting it to stand-up. It means turning accumulated product judgment into active context at the moment decisions are made.

From destination to participant

Most design systems are destinations. A designer visits a Figma library. An engineer opens documentation. A product manager searches for a pattern remembered from a previous release. The system waits politely to be consulted.

AI agents work differently. They need context delivered into the task. If the agent is asked to add a bulk pricing change, the relevant material should travel with the assignment: table selection behaviour, financial permissions, review patterns, validation states, content rules and production APIs.

The agent should not have to discover the system through the digital equivalent of wandering around a warehouse.

This changes how documentation is structured. Long narrative pages remain useful for people, but machines benefit from smaller, explicit units:

  • purpose and non-purpose;

  • required anatomy;

  • supported variants;

  • state transitions;

  • accessibility behaviour;

  • permission requirements;

  • good and bad examples;

  • implementation references;

  • tests and known limitations.

The result is a system that can answer a contextual question rather than merely display an inventory.

A worked example: choosing an approval pattern

Suppose an agent is implementing approval for a revised charter price.

A passive library offers a modal, cards, buttons, status chips and perhaps an approval component. The agent selects something plausible.

An active system asks – or enables the agent to ask – better questions:

  1. Does approval create an internal state change or an external commitment?

  2. Which values changed since the previous approval?

  3. Is the approver authorised for the size of the change?

  4. Which evidence must remain visible during the decision?

  5. Can the decision be reversed?

  6. What history must be recorded?

Based on the answers, the system recommends the Financial Change Review pattern rather than the generic confirmation dialog. It supplies the component and a real example. It warns that the comparison section is required. It identifies an existing permission check and the event that must be written to history.

That is useful teammate behaviour. It does not make the product decision independently; it brings the organisation’s previous decisions into the current one.

`DESIGN.md` is a beginning, not a personality transplant

Machine-readable design guidance is becoming an important bridge. Structured Markdown can describe tokens, components, content rules and product principles in a form an agent can inspect alongside code. Resources such as Refero Styles point towards this emerging practice.

The file should be treated as an interface to the system, not a ceremonial manifesto.

Useful guidance is specific:

> Use the Review Change pattern when a generated or imported update will alter a committed value. Show old and proposed values, source, validation and the person responsible for approval.

Weak guidance sounds agreeable while leaving every decision untouched:

> Create delightful, intuitive experiences that put users first.

Nobody objects to the second statement, including interfaces that are neither delightful nor intuitive. The first gives an agent something it can apply and a reviewer something they can verify.

An effective `DESIGN.md` should link outward rather than attempt to contain the entire product. It can point to component APIs, story examples, vocabulary definitions and workflow specifications. Keeping information close to its source reduces drift and prevents the Markdown file from becoming a small, confident copy of everything else.

The teammate needs real tools

Context without implementation creates recommendations that still require translation. The design system becomes substantially more useful when an agent can access production components directly.

For each component, it should know:

  • the import and supported properties;

  • which properties are semantic rather than visual;

  • valid composition patterns;

  • responsive behaviour;

  • accessibility guarantees;

  • examples from the live product;

  • deprecated alternatives;

  • relevant tests.

An agent building a status summary should use `WorkflowStatus`, not recreate a pill with approximately the same colour. An agent adding animated feedback should use approved motion patterns with reduced-motion support rather than inventing a transition because Motion made it attractively easy.

Tools and references collected through Design Engineer Tools can expand what teams are able to build. The AI-ready system decides how that capability enters this product without turning it into a showroom for unrelated enthusiasm.

A teammate should disagree occasionally

A design system that merely agrees with every request is a component vending machine.

Useful agent behaviour includes identifying conflicts:

  • “This action is irreversible, but the selected pattern has no consequence summary.”

  • “The proposed status duplicates `Awaiting approval` under a different name.”

  • “This generated value is displayed as source data and lacks provenance.”

  • “The interaction depends on hover and has no keyboard equivalent.”

  • “The requested modal contains a workflow that should remain visible on the page.”

These are not aesthetic objections. They are system knowledge applied to a proposal.

The agent should explain the rule and offer an appropriate alternative. Humans can still override it, ideally with a reason. Repeated overrides reveal either a team avoiding the system or a system that has failed to learn something important.

Examples give rules their meaning

Component documentation often presents isolated anatomy. A teammate needs examples of components working together in recognisable situations.

For an integration failure, show:

  • the source record remaining safe;

  • the downstream action that failed;

  • affected work;

  • current owner;

  • retry and escalation routes;

  • technical detail available through disclosure;

  • the activity-history entry.

For AI-generated document text, show:

  • the source fields;

  • generated output;

  • missing information;

  • changes from the standard template;

  • review and approval state;

  • final recorded version.

Examples turn abstract rules into product behaviour. They also expose gaps. If a pattern has only a perfect desktop example, the system may not understand the pattern yet.

Modern inspiration libraries such as Great UI, Interface Craft and Devouring Details are valuable because they make interaction quality visible. An internal system should add the domain context that explains why a particular solution is appropriate.

Review becomes part of the loop

An AI teammate should help assess what it builds.

Some checks are mechanical:

  • only approved tokens are used;

  • components are not unnecessarily recreated;

  • focus and keyboard behaviour work;

  • contrast and labels meet standards;

  • supported responsive variants are present;

  • deprecated APIs are absent.

Other checks are contextual:

  • Does the state language match the workflow?

  • Is ownership visible where work can become blocked?

  • Can a user inspect the evidence behind a recommendation?

  • Is a material consequence presented before commitment?

  • Does failure preserve completed work and offer recovery?

The agent can run the first group and prompt review of the second. Browser-based verification can compare the implementation with real product scenarios rather than treating compilation as a victory parade.

This creates a tighter loop between intent, design, code and observed behaviour. The design system participates throughout rather than appearing at the beginning as a library and at the end as a compliance score.

The system learns through contribution

A teammate that never learns becomes the colleague everyone politely stops inviting.

When product work reveals a missing pattern, the system should capture it. An agent can gather comparable implementations, identify repeated local solutions and draft documentation. Designers and engineers decide whether the pattern is reusable, how it should behave and what belongs in production.

This is especially useful for complex enterprise states that appear gradually: partial synchronisation, conditional approval, disputed invoice values or customer data awaiting validation. These states may not justify a new visual component, but they often require new composition and content guidance.

In my case-study work, design systems became genuinely valuable when teams treated them as a record of product learning rather than a delivery completed before product work resumed. AI strengthens that model because it can surface patterns across more code and documentation than one person can reasonably keep in working memory.

Ownership remains human

An active design system still needs owners. Someone must decide whether a rule represents current product strategy, regulatory need, technical constraint or historical habit.

Agents can find inconsistencies and propose consolidation. They cannot determine by frequency alone which implementation is correct. The most common pattern may simply be the oldest mistake with the largest distribution network.

Human owners should govern:

  • semantic vocabulary;

  • workflow and permission rules;

  • contribution decisions;

  • deprecation;

  • accessibility standards;

  • exceptions and intentional divergence.

The AI teammate makes this work more informed and less archaeological. It does not remove accountability.

A colleague made of accumulated judgment

The appealing idea is not that a design system will chat. Everything chats now; some refrigerators have become almost needy.

The useful idea is that the system becomes active at the point of creation. It supplies the right context, recommends known patterns, connects to working components, identifies contradictions and helps review the result. It carries previous product decisions into new work without requiring every person to remember where they were documented.

That changes the design system’s value. It is no longer measured only by component adoption or the reduction of duplicated CSS. It becomes part of how the organisation makes coherent product decisions at speed.

The AI agent may write the interface. The design system becomes the experienced teammate leaning over – politely, one hopes – to ask whether that excellent button should really send the contract.