AI product creation
From prototype to working product: the AI handoff UX designers need
Move from a UX prototype to a tested app using ChatGPT Work or Codex, GitHub, Railway, and Supabase while preserving interaction intent.
In this guide
How do I turn a UX prototype into a working app with AI?
Translate the prototype into a behavior brief: user goal, sequence, data, permissions, states, and acceptance criteria. Implement one complete flow in the existing design system, then test saved data, keyboard use, mobile layout, and failure behavior.
A prototype answers some questions and leaves others open. It can show the sequence of screens while saying little about failed requests, saved data, permission boundaries, or what happens after someone leaves and returns.
AI can help turn that prototype into working software. The designer's contribution is making the intended behavior explicit enough to implement and evaluate.
Start with a flow, not a screenshot
Choose a small journey, such as saving a personal shortlist. Describe the user, what they are trying to decide, the information needed, and the conditions for success.
Include the states that a polished mockup tends to omit: no results, long titles, incomplete inputs, slow loading, failed saving, and a return visit. Explain which elements are interactive and which are only illustrative.
Give the agent an implementation brief
Use ChatGPT Work or Codex, with Astra Extra High where available for the complex handoff:
Implement this shortlist flow from the supplied design. Preserve the information hierarchy and use the existing design system. Create an authorized GitHub repository if this is a new project; otherwise use a branch in the existing repo. Prepare a Railway deployment and Supabase persistence. Include keyboard behavior, visible focus, mobile layout, loading and error states, and acceptance criteria. Identify any decision the prototype does not settle.
Supply source components, tokens, and assets you have permission to use. Ask the agent to explain deviations before replacing an established pattern.
Review behavior alongside appearance
A save control should communicate whether the action succeeded. A back action should not silently discard work. A private shortlist should stay private even when someone guesses its URL.
Use the repository to review changes and preserve decisions. Set the hosting variables through Railway's configuration and record database setup in migrations. Ask for an access test using a second account.
Run a task-based review
On the deployed page, ask someone to save an item, find it again, remove it, and explain the current state. Observe without narrating the interface. Test keyboard interaction and the smallest screen size you intend to support.
Automated checks can catch specific problems, but they cannot establish that the labels make sense or the flow fits the user's mental model. Record what the participant did, what they expected, and where they needed help.
Use AI to shorten the correction loop
Bring the observations back as evidence:
The participant expected saved items under “My shortlist” and did not understand the bookmark-only control. Propose a focused correction that preserves the existing layout. Explain how we will check whether the new label resolves the confusion.
Avoid requesting a complete redesign every time one interaction fails. A focused change is easier to evaluate and less likely to create a new set of untested assumptions.
Explore Railway through our referral link when you are ready to host a working version. The aim is an experience whose behavior is as considered as its visual design.
Continue with Claude, Claude Code, Claude Design, and Cowork: what to use when.
Questions you might be asking
Which prototype states are easy to miss during implementation?
Check empty results, long content, incomplete input, slow loading, failed saves, and the return visit. Explain what happens when a user loses access or signs out. Review these states alongside the polished success screen.
Sources and further reading
Sources checked October 19, 2026. Review the linked publisher information for current details.
Put one idea to work
Take the next step with a practical worksheet, a clear research question, and a standard you can use to review the work.
Explore design worksheets →Explore more from UX Design CoachGet design practice in your inbox →Keep practicing
AI tools and workflowsClaude, Claude Code, Claude Design, and Cowork: what to use when
A practical guide to Claude’s workspaces and design capabilities, plus when ChatGPT Work, Codex, or Grok Bot fits the same project.
October 19, 2026 · 5 min read
Research practiceMake AI a research sounding board, not a source of imaginary users
Use AI to challenge research plans and syntheses while keeping real observations, interpretations, and generated possibilities clearly separated.
October 19, 2026 · 6 min read