Skip to content
OTFotf
All posts

AI Accelerates Interface Creation, Elevating Design's Importance

D
DaveAuthor
7 min read
AI Accelerates Interface Creation, Elevating Design's Importance

The interface used to be the most expensive part of building a product — designers, engineers, handoffs, revisions, QA, weeks or months of work. The AI in interface design impact is now collapsing that timeline. With AI coding platforms like Google Antigravity, teams can use agents to plan a feature, modify a codebase, run the application, test it in a browser, and return screenshots, walkthroughs, or a working preview for human review. An idea can become a functioning interface in hours.

As a 20-year Principal Product Designer wrote in the piece that sparked this post, that is great news. Not because AI replaces designers or engineers. It gives both disciplines new use. AI helps us move faster. Human expertise helps us move in the right direction.

When the interface becomes easier to produce, the real differentiator becomes clearer: what should we build, how should it work, and why should anyone trust it?

The old bottleneck was rendering. The new one is consistency

A polished, AI-generated screen can still be wrong. It can emphasize the wrong field, conflict with the rest of the product, automate a decision without surfacing it, handle the ideal path beautifully and ignore the error path entirely. The first thing you learn when you put a generated interface in front of a real user is that a screenshot is not a product.

Two controlled-study numbers tell the size of the swing:

  • Developers using GitHub Copilot completed a programming task 55.8% faster than developers without it (GitHub controlled experiment).
  • In a randomized controlled trial with full-time Google software engineers, AI assistance produced a best-estimate ~21% reduction in time on task for a complex enterprise-grade task.

Both numbers are single-study and the second is vendor-adjacent. The exact result varies by task, team, product, and codebase. What is not variable: the distance between an idea and working software is shrinking fast.

When rendering is cheap, the durable constraint becomes the things rendering doesn't give you — consistency across surfaces, error and permission states, the part of the interface that doesn't change when the model does.

a generated screen vs a shipped screen — same pixels, different guarantees

The role of human designers did not shrink. It moved up the stack

AI is fast. AI is not empathetic, ethical, or strategically aware. Those are not properties the next model release is going to invent by accident. They come from a person who has watched users fail a flow, argued with legal about disclosure copy, shipped a redesign and measured the regression.

Three places that judgment shows up and the model does not:

  1. Trust and disclosure. A generated checkout that auto-fills a saved card is convenient; a generated checkout that auto-charges a saved card without a confirmation step is a lawsuit. The model has no preference between those two.
  2. Permission and error states. The happy path is what the model drafts well. The empty state, the rate-limit response, the "you do not have access to this workspace" toast — those need someone who has thought about what the user sees when the system says no.
  3. Brand and consistency across surfaces. One screen, drawn by an agent, looks great. The same screen three weeks later, drawn by a different agent, looks like a different product. The thing that keeps the second one consistent with the first is a shared design system, not a shared prompt.

One codebase. iOS, Android, and web.

The Fitness Kit ships with auth, a database, and a backend already connected — no setup. Live demo at fitness-preview.otf-kit.dev.

See the live demo

What AI design tools are actually good at — and where they fail

The current generation of tools falls into three honest buckets, and the honest version of each is more useful than the marketing version.

Drafting and ideation. Layout, color, and component suggestions are at their best when you treat them as a junior designer who has never seen your product. They will produce ten options in the time it takes you to sketch one. Most will be wrong for your brand. The one that isn't will save you an afternoon.

Repetitive production. Form fields, table rows, card grids, settings lists. Anything where the structure is known and the variation is small. This is the work AI is genuinely cheapest at, and it is the work most worth handing off — because it is also the work that burns out the senior people who should not be doing it.

Test and feedback synthesis. Recording sessions, clustering feedback, summarizing heatmaps. AI is genuinely useful as a summarization layer over evidence you already have. It is not useful as a substitute for the evidence.

Where AI fails, and will keep failing, is in the long tail: the state that only appears for the 0.4% of users, the copy that has to survive a legal review, the integration that depends on a third-party API you do not control. Those edges are where products actually break.

How to actually use this today

If you want to feel the shift for yourself, here is a concrete path that takes an afternoon.

1. Pick the agent. For a coding agent that can draft a UI from a prompt, several capable models route through OpenRouter. Set the base URL and pick one tuned for code generation:

export OPENROUTER_API_KEY=...
export AGENT_MODEL="anthropic/claude-sonnet-4.5"

2. Point it at a structured component contract. This is the part most teams skip and then regret. Give the agent a single source of truth for what a button, a card, a table row is in your product — names, props, states, accessibility roles. A minimal one looks like:

// components/button.contract.ts
export const ButtonContract = {
  name: "Button",
  variants: ["primary", "secondary", "destructive", "ghost"],
  states: ["default", "hover", "pressed", "disabled", "loading"],
  a11y: { role: "button", minTarget: "44x44" },
  slots: ["leadingIcon", "label", "trailingIcon"],
} as const;

The agent reads this. Every screen it drafts uses these primitives. The interface stays coherent across pages and across sessions because the contract is the contract — not whatever the model happens to remember from its training.

3. Draft, then audit. Use the agent to draft three variants of the screen. Open each one and run a manual audit against your contract — does the disabled state exist? Does the empty state exist? Does the destructive action ask for confirmation? The audit is the human step. It is also the step that catches the lawsuit-class bugs above.

4. Ship the contract, not the screen. The screen is a one-time artifact. The contract is what the next agent, the next designer, the next quarter's redesign will reuse. Version it. Export it. Treat it like an API.

This is the durable layer underneath the tool churn: when the model changes, when the agent changes, when the platform changes, the contract is what keeps the product looking like itself.

The next 18 months

Three things will happen regardless of which vendor wins the model race:

  • Drafting will get faster and cheaper. The marginal cost of "what if we tried" is already approaching zero. Use it.
  • Differentiation will move from rendering to coherence. The winners will be the teams whose generated screens look like one product, not twelve.
  • The senior designer and senior engineer pair becomes more valuable, not less. They are the ones who can tell the agent which problem to solve, and who can audit the result.

The interface is becoming abundant. Coherent, reliable products remain scarce. That is the entire game.

What does not change

Use the agents. Use Google Antigravity or its peers. Ship faster than you could last year. Draft three variants on Monday, pick one on Tuesday, audit it on Wednesday, ship it Thursday.

And underneath whatever agent you pick this quarter — keep one thing constant: a component contract that survives the model swap. The same component looks and behaves the same on web, iOS, and Android, because it is the same component, defined once, versioned, and exported. The agent reads it. The next agent reads it. The designer audits it. The product looks like itself.

That is the part that does not change when the model does.

ai-toolsdesign-systemreact-native
OTF Fitness Kit

Stop wiring. Start shipping.

  • Login, database, and backend already connected — nothing to set up
  • iOS + Android + web from one codebase
  • AI configs pre-tuned + 40+ tested prompts included