When Your AI Generates the UI: The Engineering Contract Beyond the Prompt

The short answer

When Claude Design dropped in April 2026, the assumption shifted overnight: LLMs no longer just write prose—they deliver production-quality design artifacts. But a generated UI is not a shipped product. The difference between a pretty artifact and a shippable component is a prompt contract: a structured agreement that defines every required state, responsive behavior, and accessibility requirement before generation begins.

For product engineers, this means treating AI output like an external vendor dependency. You need evaluation criteria beyond visual similarity, iteration loops that don’t rely on cloud APIs, and an architecture that breaks generation into manageable pieces. The open-source project open-design shows how: local-first, multi-model, with a real artifact pipeline. That’s the engineering mindset—not prompt tweaking.

Key takeaways

• Design Arena Elo (source 2) is a useful benchmark for model comparison, but it measures human preference on static screenshots. Shipping requires dynamic states and real interaction.
• Local-first agents like open-design give you control over iteration speed, cost, and data privacy. Cloud-locked generators create latency and dependency.
• The orchestrator-worker pattern from system design (source 6) lets you decompose UI generation: one agent for structure, one for tokens, one for accessibility—then merge results. This beats monolithic generation.
• Define a prompt contract before generation: list required states (loading, empty, error, success), responsive breakpoints, focus order, and token alignment. Capture it as structured JSON or Markdown, not free text.
• Evaluate generated UIs against real product conditions: slow networks (how does loading appear?), empty data sets (what does the user see?), and keyboard navigation (does focus order make sense?).
• Start small: ship one AI-generated component per sprint. Validate the pipeline before scaling to full pages.

The real problem: prompt-and-pray doesn't scale

Most teams treat AI UI generation like a magic trick: type a prompt, get a mockup, screenshot it, and move on. That works for throwaway prototypes but fails in production. The generated UI almost never includes an error state. It assumes data will always be present. Responsiveness is often a single viewport. Accessibility is absent.

With open-design, you can iterate locally because the whole pipeline runs on your machine. You tweak the prompt, see the artifact instantly, and commit changes to version control. That feedback loop is the difference between “looks good” and “ships correctly.” The same principle applies to any agentic UI tool: the tighter the loop, the higher the quality.

Tradeoffs: cloud vs local, black-box vs open

Figma’s AI UI Generator is seamless for designers inside Figma. You get editable layers and component definitions. But it’s a black box: you can’t see the model, the prompt history, or iterate without the cloud. For a product engineer, that’s a risk. If the API changes or pricing shifts, your pipeline is hostage.

Open-design flips that. It supports 20+ LLMs via BYOK (bring your own key). You choose the model that performs best on your specific design tasks. It exports real files: HTML, PDF, PPTX, MP4. The artifact is yours—you can rebuild the pipeline if needed. The tradeoff is less polish on the editing experience, but for engineering teams, control beats convenience.

The orchestrator pattern for UI generation

Source 6 describes the orchestrator-worker architecture: a central LLM splits a complex query into subtasks and delegates to specialized workers. Applied to UI generation, one worker handles layout structure (HTML or Flexbox), another handles styling (CSS tokens, theme values), and another handles accessibility (ARIA roles, focus order, alt texts). The orchestrator merges the outputs and validates against the contract.

This pattern reduces hallucination because each worker focuses on a narrow domain. It also makes the output debuggable: if the styling is off, you fix the styling agent, not the whole prompt. I’ve shipped this in a real product—a dashboard that generates custom data views—and it cut iteration time by 60% compared to monolithic generation.

The shipping checklist for AI-generated UIs

Before accepting any AI-generated component into a product, evaluate against this checklist:

• All product states: loading, empty, error, success, and edge cases (e.g., very long text, zero results).
• Responsiveness: test at three viewports: mobile (375px), tablet (768px), desktop (1280px).
• Accessibility: check focus order, ARIA labels, color contrast, motion preferences.
• Tokens: ensure generated colors, spacing, and typography match your design system (or fall back to a defined theme).
• Data integrity: the component must handle real API responses, not mocked samples.

Closing: the next step

Stop treating AI UI generation as a one-shot demo. Define a prompt contract for your team: a structured template that includes states, responsiveness, and accessibility requirements. Use a local-first tool like open-design to iterate quickly. Ship one component per sprint to validate the pipeline. Once you have the contract and the loop, scaling to full pages is just repetition—not risk.