> ## Documentation Index
> Fetch the complete documentation index at: https://docs.seemodo.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# Visual Designer
> The canvas workspace at /start where you generate screens, wireframes, landing pages, and multi-screen flows with AI.
# 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:
1. 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?")
2. Answer questions via quick-select buttons or free text
3. The AI builds a comprehensive design brief from your answers
4. Click **Generate from brief** to produce screens based on the conversation
5. You can continue chatting to refine or ask follow-up questions
This is ideal when you're not sure exactly what to build — the AI guides you through the decisions.
## 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 |
For Landing Pages and Funnels, set the **section count** (3–20). The page height equals screen height × section count.
### 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:
"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."
"Dark theme with purple accent color, glassmorphism cards, subtle gradients, Inter font, rounded corners."
"A pricing page similar to Stripe's, with three plan cards, feature comparison table, and FAQ accordion at the bottom."
"A restaurant menu with categories: Starters (Bruschetta $8, Soup $6), Mains (Pasta $14, Steak $22, Fish $18), Desserts (Tiramisu $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
The AI analyzes the style, colors, layout, and components from your references.
## 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 |
Enable both for the best possible output on important screens.
## 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"
The AI modifies the code and the live preview updates instantly.
### 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
Generate entire multi-screen apps
Learn about the sandbox environment