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

AI Can Generate Interfaces. A Design System Makes Them Usable.

AI Can Generate Interfaces. A Design System Makes Them Usable.

AI can now produce a respectable interface before the meeting about the interface has finished. Give it a prompt, a component library and a moderately persuasive description of the user, and it will return cards, tables, filters and a gradient that appears to have been added for morale. This is genuinely useful. It is also the least interesting part of the problem.

The difficult work begins when the second screen arrives.

Does “Pending” mean the same thing here? Is the primary action still primary? Does a destructive change require confirmation, or has the generated interface decided that red text is adequate governance? Can a keyboard user complete the task? Does the empty state explain what is missing, or merely announce that the database has nothing cheerful to report?

Generation creates an interface. A design system makes that interface belong to a product.

That distinction matters in any software, but it becomes unavoidable in operational products. A cargo charter platform, for example, is not a loose collection of attractive screens. A request becomes a quote; a quote may need commercial approval; a contract carries commitments; a booking creates operational work; an invoice must agree with the record that produced it. The interface is describing one evolving reality. If every generated screen invents its own visual language and behavioural rules, the system stops feeling intelligent remarkably quickly.

The first screen is a misleading benchmark

AI-generated UI is often judged through a single-frame beauty contest. The prompt asks for a dashboard, the tool produces one, and everyone admires the speed. This is rather like judging an airport by the sign above the entrance. The sign may be excellent. The interesting questions begin when 40,000 people attempt to use the building.

A real product contains repetition, exceptions and change. It has loading, empty, partial, failed, restricted and stale states. It has users who arrive with different permissions, devices, expertise and levels of patience. It has terminology that acquired meaning through contracts and operating procedures rather than through a naming workshop.

AI can generate each of these states. Without a system, it will also make small, plausible decisions every time it does so. One screen uses “Approve”; another uses “Confirm”; a third uses “Continue” because the button looked lonely. One table places row actions at the end; another hides them in a menu; a third reveals them on hover, thereby ensuring that touchscreen users enjoy an additional puzzle.

None of these choices is catastrophic alone. Together they create what might be called interface interest: tiny inconsistencies that compound until every task costs slightly more attention than it should.

A design system is a decision system

The familiar description of a design system—a collection of reusable components and visual rules—is accurate but incomplete. The valuable part is not the button. It is the decision that the button embodies.

A useful system answers questions such as:

  • When is an action primary, and how many primary actions may appear in one decision area?

  • How do we distinguish information, warning, risk and failure without relying on colour alone?

  • What must a user know before approving something consequential?

  • How do generated, imported and manually entered values differ?

  • What happens when data is incomplete, permission is missing or an integration is unavailable?

  • Which terminology describes a status across the whole workflow?

These are product rules expressed through interface patterns. Components make the rules reusable. Documentation makes them understandable. Tokens make them portable. Examples make them difficult to misinterpret. Together they give both people and AI something firmer than taste to work with.

This is why resources such as Design Engineer Tools, Great UI and Motion are useful without being sufficient. They make high-quality implementation patterns easier to reach. They do not know what “financially approved” means in your product, who is authorised to reverse it or which evidence must remain visible afterwards. A component library can supply excellent grammar. The product still needs something to say.

Consistency is operational, not cosmetic

Design consistency is often discussed as if its main benefit were preventing the product from wearing two slightly different shades of blue. Brand coherence matters, but in enterprise software the larger benefit is predictability.

If the same status chip, approval pattern and document action behave consistently, users build reliable expectations. They stop rereading the interface and start concentrating on the decision. Familiarity moves effort away from operating the software and towards doing the work.

Consider a quote that is awaiting approval. The state may appear in a request list, a quote detail view, a notification, an activity log and a financial report. Those surfaces do not need to look identical, but they must tell the same truth. The status label, owner, available actions and consequences should agree. A generated screen that treats the status as a decorative badge has missed the product, however polished the badge may be.

The same principle applies to failure. An integration error is not simply a red container. The interface needs to identify what failed, which work is affected, whether data is safe, who can act and what happens next. Encoding that structure as a reusable pattern makes every future workflow safer. Leaving it to the next prompt produces beautifully varied emergencies.

AI needs constraints it can read

Traditional design-system documentation was written for designers and developers browsing a website. AI agents introduce a new audience: software that must interpret the rules while making changes.

This is where machine-readable guidance becomes important. A system should describe tokens, components and examples, but also intent. “Use Alert when something needs attention” is vague. “Use Warning when the user may continue but should understand a material risk; include the affected object, consequence and recovery action” gives an agent a usable decision rule.

The emerging practice of putting design guidance into structured Markdown is promising for precisely this reason. Work such as Refero Styles points towards design documentation that can sit close to the work and be consumed by both humans and agents. The file is not magic. Its usefulness depends on whether the organisation has made the decisions clearly enough to write them down.

Good AI-ready guidance should include:

  1. Semantic tokens rather than unexplained values.

  2. Component purpose, anatomy and prohibited uses.

  3. Behaviour across loading, empty, error and permission states.

  4. Accessibility requirements and keyboard behaviour.

  5. Content patterns, terminology and tone.

  6. Real workflow examples, including exceptions.

  7. Links to production components and tests.

This turns the design system from a gallery into working context. The agent no longer has to infer the organisation’s position on approvals from three screenshots and a button named Final_Final_2.

Polished motion still needs a job

Modern component and animation libraries have raised the baseline of what small teams can produce. Anime.js and Motion can make transitions, orchestration and feedback accessible without requiring everyone to spend a week negotiating with cubic Bézier curves. Collections such as Aceternity UI demonstrate how much visual polish can now be assembled quickly.

The temptation is to confuse availability with appropriateness.

In an operational interface, motion should explain change, preserve continuity or confirm cause and effect. A panel expands so the user understands where detail came from. A changed value highlights briefly so an update can be located. A progress state moves because work is genuinely continuing. Animation that does not improve understanding is not automatically wrong, but it should be made to present a business case like everything else.

The design system provides that discipline. It defines durations, easing and reduced-motion behaviour, but more importantly it describes when motion is useful. AI can then apply a known transition rather than auditioning a fresh personality for every drawer.

Build around decisions and exceptions

Teams preparing a design system for AI often begin by making the visual foundations more complete. That is sensible, but it is not enough. The most valuable additions are usually workflow patterns.

Start with recurring moments of consequence:

  • reviewing and approving a proposal;

  • comparing alternatives;

  • resolving conflicting data;

  • showing generated content with its provenance;

  • making a bulk change safely;

  • recovering from a failed integration;

  • handing work between teams;

  • revising a document while preserving history.

Each pattern should define what information is required, which actions are available, how ownership appears and how the state changes. This is the material an AI needs to generate something more useful than a plausible arrangement of controls.

It is also where product judgment becomes visible. In my own case-study work, the strongest design systems were never merely tidy shelves of components. They connected recurring interface decisions to the structure of the work. That made new features faster to design, certainly, but it also made them less likely to contradict the rest of the product.

Speed without entropy

AI changes the economics of producing interface options. Teams can explore more directions, prototype more states and move from idea to working code with far less ceremony. That is an advantage worth taking seriously.

But faster generation also increases the rate at which weak decisions can enter a product. If ten people can now create ten screens in the time previously required for one, inconsistency has acquired an excellent distribution strategy.

The answer is not to slow the tools down. It is to make the system around them stronger.

Give agents approved components. Give them semantic tokens. Give them examples of the awkward states, not only the launch-day screenshot. Give them terminology tied to the domain. Make accessibility and permissions part of the definition rather than a review comment. Connect design guidance to production code so that the path of least resistance is also the path towards coherence.

Then keep human review focused on judgment: whether the interface represents the workflow honestly, whether the hierarchy supports the decision and whether an exception has exposed a rule the system does not yet contain.

AI can produce the first draft. A mature design system ensures the fiftieth screen still feels as though somebody understands the product.

That is the useful promise of AI-generated interfaces—not endless novelty, but greater speed without surrendering intent. The screens arrive faster. The system makes sure they arrive speaking the same language.