Design mode is Vision’s sketchpad. It spins up clickable, multi-screen prototypes with mock data — no code changes, your codebase stays untouched — so you can explore an idea in seconds before committing to a real build.
Mock data
When to use it
- You’re not sure what you want yet — try three layouts, keep one.
- You want sign-off from a teammate before spending build time.
- You’re pitching an idea and need something clickable to share.
Design turns are fast and cheap compared to real builds, so it is the right place to iterate on direction.
Using Design mode
Switch the composer to Design mode and describe what you want — or let Vision suggest it: when a prompt looks like visual work, it offers “Design it first?” before building. Either way, Vision generates a prototype with one or more screens:
- Screens appear as pills in the bar above the preview — click one to load it.
- Plan opens a floating panel with the thinking behind the prototype, readable beside the screens.
- Comments work here too — leave notes on any screen for your team.
- Share opens the design full screen, publishes it to a durable public link anyone can view, or downloads the HTML as a zip.
Every screen is mock data only — nothing in your app changes until you press Build.
From prototype to real app
Happy with a prototype? Press Build. Vision hands the prototype to Agent mode, which builds it for real in your codebase — with your guardrails applied and a proper version in history like any other change.