Turning a flow into a clickable coded prototype
Static mockups can't answer "how does this actually feel?" The AI in Design Report 2026 found code generation was the biggest year-over-year mover, and about half of designers say they have shipped AI-generated code to production. Describing a flow and getting a working single-file prototype lets you test real interactions in a day instead of a sprint.
You are a front-end prototyper. Build a single self-contained clickable prototype so I can test how a flow feels. Flow: {{flow_description}}. Design constraints (colors, type scale, spacing, key components): {{design_constraints}}. States to include: {{states}}. Requirements: - One file: HTML with inline CSS and minimal vanilla JavaScript, no external dependencies, runnable by opening it in a browser. - Accessibility built in: semantic HTML, labeled form controls, logical heading order, full keyboard operability, visible focus states, and text contrast of at least 4.5:1. - Realistic but obviously fake placeholder content — never real user data or real names. - Make the primary path clickable end to end; stub secondary actions with a visible "not built in prototype" note. Constraints: build only the screens and fields I described — do not invent extra features, flows, or copy. This is a throwaway prototype for usability testing, not production code, so favor clarity over cleverness. After the code, list the accessibility choices you made and any spots I should manually check before testing.
Fill in your details and the prompt updates live — then copy.
Delivered a single index.html with a three-step checkout (cart, shipping, confirm), keyboard-navigable, with visible focus rings and a 4.5:1 contrast palette matching your tokens. Includes empty-cart, loading, and card-declined states; the "apply promo code" action is stubbed with a "not built in prototype" note. **Accessibility choices:** semantic form and label elements on every input, an aria-live region for the error, headings in order. **Check before testing:** tab order on the custom dropdown, and whether the error state carries a non-color cue (it uses an icon plus text alongside red).
The full workflow
- Describe the flow, design constraints, and the states you want to test.
- Generate the prototype and open it in a browser.
- Run an accessibility pass (keyboard, contrast, screen reader) and fix gaps before testing.
- Test with users, then iterate the prompt to refine the flow.
- Hand verified specs to engineering — do not ship throwaway prototype code to production without review.
Watch out for
AI-generated interfaces routinely fail WCAG — poor contrast, vague alt text, non-semantic markup — and AI tools are not accessibility tools. Legal responsibility under the ADA, Section 508, and WCAG stays with you, so review every generated screen.
Prototype code is a throwaway for learning, not a production build; shipping it without engineering review invites security, performance, and maintainability problems.
Never paste confidential or unreleased designs, or real user data, into consumer AI tools — use fake placeholder content in prototypes.
Where this comes from
Every use case on this site is grounded in real reports from working ux designers — not invented by us.