What is the Canvas?
The Canvas is a space to explore and iterate on designs with Agent. Here, you’ll see your artifacts — such as apps, videos, and slides — displayed in a frame. You can work with Agent to create mockups, compare design directions, and apply changes back to your app — all from one visual board.
What’s on the Canvas
The Canvas is an infinite board where you can see and work with everything visually.
- Your apps: Your running apps appear as live, interactive previews right on the Canvas. You can click around and use them just like you would in a browser.
- Design mockups: Visual prototypes Agent creates for you. These look and feel like real pages — you can interact with them, resize them, and ask Agent to tweak them — but they’re separate from your live app so you can experiment freely.
- Shapes and drawings: Rectangles, circles, stars, arrows, hearts, and more. Use these to sketch rough ideas, mark up designs, or map out how screens connect.
- Text and sticky notes: Add labels or notes anywhere on the Canvas to organize your thoughts.
- Images: Drop screenshots or reference images onto the Canvas. Agent can recreate or riff on what it sees.
- Videos: Place video files on the Canvas alongside your other content.
Getting designs on the Canvas
There are a few ways to start creating designs. Pick whichever feels most natural.Ask Agent in chat
Type what you want to see in the chat input and Agent places it as an interactive frame on the Canvas.
Pick an output type
You can also choose what kind of output you want — web, mobile, slides, design, and more. Use the carousel to pick before sending your prompt.
Making changes
Once you have a design on the Canvas, there are several ways to iterate on it.Ask Agent for updates
Select a frame on the Canvas and type your changes in the input that appears below it. When you press enter, Agent picks up the request, runs the updates, and refreshes the mockup right on the Canvas.Draw and annotate
Use the drawing tools in the bottom toolbar to sketch directly on the Canvas. Draw arrows pointing to what you want changed, circle problem areas, or add text notes with your feedback. Then ask Agent to make the changes based on your annotations.Preview on different devices
See how your designs look on different screen sizes. Ask Agent to show you a mobile, tablet, or desktop version:- Mobile — 390 × 844
- Tablet — 768 × 1024
- Desktop — 1280 × 720
Apply changes to your app
When you’re happy with a design, apply the changes back to your main version. Agent shows you a summary of what was done and gives you the option to apply or dismiss.Comparing design directions
When you’re not sure which direction to go, ask Agent to generate multiple versions so you can compare them side by side.- Multiple versions of one page: “Show me five versions of this landing page.” Agent creates each one and lays them out next to each other.
- Multi-page flows: “Design a complete onboarding flow: welcome, profile setup, preferences, and confirmation.” Agent builds each screen and arranges them in order.
- Mix and match: “Show me the landing page and pricing page in both a minimal and a bold style.” Agent creates every combination so you can see the full picture.
Mapping out user flows
Lay out complete user journeys on the Canvas — sign-up, onboarding, dashboard, settings — and arrange them to see how everything connects.- Place each screen as a separate frame
- Ask Agent to generate the full flow: “Draw out the complete onboarding flow for my app”
- Use arrows and shapes to show how users move between screens
- Ask Agent to turn rough sketches into polished designs
Turning a design into a real app
When you’re happy with a design and want to make it real, there are two paths:Make it a full app
If your design needs real functionality — like saving data, user accounts, or connecting to other services — ask Agent to turn it into a full app. Say something like “Make this a real app” or “Add a backend to this.” Agent builds everything it needs to work as a real, publishable app.Turning a design into a full app requires a paid plan.
Convert it to a specific type
You can also convert a design frame into a specific artifact type:Ask Agent to convert
Tell Agent what you want — for example, “Convert this into a web app” or “Turn this into slides.”
Frequently asked questions
Are design frames the same as my running app?
Are design frames the same as my running app?
No. Design frames are visual prototypes — they look and feel like the real thing, but they don’t have a working backend or database behind them. Your app previews on the Canvas, on the other hand, are your actual running app.
Can I redesign a page without breaking my live app?
Can I redesign a page without breaking my live app?
Yes. Ask Agent to bring a page onto the Canvas — for example, “Put my dashboard on the canvas.” Agent makes a copy you can experiment with. Your live app isn’t affected until you choose to apply the changes.
How do I turn a design into a real app?
How do I turn a design into a real app?
Ask Agent to make it a full app (“Make this real”) or convert it to a specific type (“Convert this to a web app”). Agent builds everything it needs to become a working, publishable app.
Can I convert to types other than web apps?
Can I convert to types other than web apps?
Yes. You can turn Canvas frames into web apps, mobile apps, slides, data visualizations, and more.
Can I import designs from Figma or other tools?
Can I import designs from Figma or other tools?
There’s no direct import, but you can drop a screenshot onto the Canvas and ask Agent to recreate the design from it.
What else can I put on the Canvas?
What else can I put on the Canvas?
Besides design mockups and app previews, you can add shapes, arrows, text labels, sticky notes, images, and videos — useful for sketching ideas, annotating designs, or organizing your thinking.