The fastest way to understand Vision is to build something. This takes about a minute.
1. Describe what you want
Your home page opens on one question: “What are we building?” Type into the prompt box: what the app is, who it’s for, and what it should do. Paste screenshots or mockups straight into the box if you have them.
The pill beside the box picks where the work lands — a blank project, a template (working apps you can change right away), one of your GitHub repositories, or an existing site to import.
An inventory tracker for our warehouse team — a table of items with
quantities, a form to log stock in and out, and a low-stock warning list.
Vision starts warming up a workspace the moment you begin typing, so launch is instant when you press Enter.
What are we building?
An inventory tracker for our warehouse team — a table of items with quantities, a form to log stock in and out, and a low-stock warning list.
Start from a blank project, a template, a GitHub repository, or an existing site.
2. Pick a mode
The pill next to the prompt box picks how Vision responds:
- Agent — makes real changes to your codebase. The default.
- Design — prototypes it first as clickable mock screens.
- Prompt Builder — asks a few questions, then builds a winning prompt. Brand-new blank projects start here by default — it’s the best way to turn a rough idea into a solid first build.
You can switch any time — see Agent modes.
3. Press Enter and watch it build
A workspace opens: chat on the left, your app’s live preview on the right. The agent plans, writes code, and runs it — you watch the preview update in real time. If the agent needs something (an API key, a decision), it asks in chat.
Maddie · just now
Add a low-stock warning to the dashboard — flag anything at or under its reorder point
Vision
9 steps
Added a Low stock section — items at or under their reorder point get an amber badge.
Guardrails · all 6 checks passed
Items
1,284
Low stock
7
Orders today
32
4. Iterate
Talk to it like a teammate: “make the table sortable”, “the warning should be red”. For pixel-precise feedback, click any element in the preview and send it to the AI — see Visual edit. Every prompt becomes a restorable version, so you can never lose work (Rollbacks).
5. Publish
When it’s ready, put it live from Project settings → Publish. Your app gets its own public URL, and you can connect a custom domain with automatic HTTPS.
That’s the loop: describe, watch, refine, ship. Next, learn how the agents work under the hood.