Visual Designer
The Visual Designer at/start is a canvas-based workspace for generating screens visually. Describe what you want, configure your settings, and the AI creates production-ready designs.
Workspace layout
| Area | Function |
|---|---|
| Top Header | Project name, sync status, credits display, account settings, dark/light toggle, share button |
| Left Sidebar | Studio/Chat tabs, Design Specs, Prompt input, generation controls |
| Canvas | Infinite workspace where generated screens appear as frames |
| AI Editor | Bottom panel for editing selected screens (appears when a screen is selected) |
| Sandbox Panel | Terminal, AI Coder, Git, Vite Logs (opens via terminal button) |
Studio vs. Chat tabs
The left sidebar has two modes:- Studio — The visual generation mode (default). Configure specs, write prompts, generate screens.
- Chat (Beta) — A Brainstorm mode where AI helps you refine your idea through conversation.
Chat / Brainstorm mode
Switch to Chat for a guided ideation experience:- The AI shows you context cards with questions (e.g., “What kind of app are you building?”, “Who is your target audience?”, “What’s the primary action users take?”)
- Answer questions via quick-select buttons or free text
- The AI builds a comprehensive design brief from your answers
- Click Generate from brief to produce screens based on the conversation
- You can continue chatting to refine or ask follow-up questions
Design Specs
Configure before generating:Mode
| Mode | Description | Credit cost |
|---|---|---|
| Wireframe | Black-and-white structural layout. Quick and cheap. | 3 credits |
| HiFi | Full-color, production-ready design with live sandbox. | 6 credits |
Page type
| Type | Best for |
|---|---|
| Normal | Standard single-viewport screens (apps, dashboards, forms) |
| Landing Page | Long scrollable pages with 3–20 configurable sections |
| Funnel | Multi-step conversion flows with sequential sections |
Screen size
| Preset | Resolution |
|---|---|
| Desktop | 1440 × 1024 |
| Desktop HD | 1920 × 1080 |
| Tablet | 1024 × 1366 |
| Mobile | 375 × 840 |
Writing prompts
Your prompt drives the generation. Be as specific as you want:Describe content and structure
Describe content and structure
“A project management dashboard with a left sidebar showing Projects, Tasks, Calendar, Team. Main area shows a kanban board with To Do, In Progress, and Done columns. Each card has a title, assignee avatar, and priority tag.”
Specify visual style
Specify visual style
“Dark theme with purple accent color, glassmorphism cards, subtle gradients, Inter font, rounded corners.”
Reference known designs
Reference known designs
“A pricing page similar to Stripe’s, with three plan cards, feature comparison table, and FAQ accordion at the bottom.”
Include content details
Include content details
“A restaurant menu with categories: Starters (Bruschetta 6), Mains (Pasta 22, Fish 9, Ice Cream $7).”
Reference images
Upload reference images to guide the AI’s visual output:- Click the paperclip icon below the prompt
- Or drag and drop images directly onto the prompt area
- Upload up to 10 images per generation
Enhance Prompt
Click the magic wand (Enhance) button to let AI improve your prompt. It adds design details, structure, and specificity for better results.Deep Design & Max Mode
| Toggle | Effect | Credits |
|---|---|---|
| Deep Design | AI thinks longer, produces more detailed and thoughtful designs | Higher |
| Max Mode | Uses the most capable AI model for maximum quality | Highest |
Generation
Click Generate (single screen) or Generate Flow (multi-screen). In HiFi mode, a sandbox automatically starts to run your app live.Working with generated screens
After generation, screens appear as frames on the canvas. You can:- Click a screen to select it — opens the AI Editor at the bottom
- Pan and zoom the canvas to navigate between screens
- Move screens by dragging them around the canvas
AI Editor (screen editing)
When a screen is selected, the AI Editor appears. Type a change request:- “Make the header sticky”
- “Change the button color to green”
- “Add a search bar at the top”
- “Replace the placeholder text with real content about coffee shops”
Generation History
Click the clock icon next to the Prompt header to see all past generations. You can:- Review previous prompts and results
- Click Use Prompt to reuse any past prompt
Next steps
Flow Generation
Generate entire multi-screen apps
Live Preview
Learn about the sandbox environment