Skip to main content
The Visual Designer at /start provides a canvas-based interface for creating application screens. Design visually with tldraw, then generate production React code.

​
Interface Overview

┌────────────────────────────────────────────────────────────┐
│                      Top Header                             │
├──────────────┬──────────────────────────────────────────────┤
│              │                                              │
│    Left      │              tldraw Canvas                   │
│   Sidebar    │                                              │
│              │                                              │
│   - Prompt   │         [Generated Screens]                  │
│   - Settings │                                              │
│   - Generate │                                              │
│              │                                              │
└──────────────┴──────────────────────────────────────────────┘
                    └── Sandbox Panel (expandable) ──┘

​
Design Specs

Configure your design before generating:

​
Mode

Black and white structural mockupsCreates tldraw shapes representing your UI layout. Perfect for:
  • Quick concept exploration
  • Layout planning
  • Stakeholder reviews
Wireframes don’t require a sandbox - they’re pure tldraw shapes.

​
Page Type

TypeDescriptionUse Case
NormalStandard single-viewport screenApp screens, dashboards
LandingpageMulti-section scrolling pageMarketing pages, homepages
FunnelMulti-step conversion flowSignup flows, checkout
For Landingpage and Funnel types, configure the Sections slider (3-20 sections). Each section adds one viewport height to the generated page.

​
Screen Size

Choose from preset screen sizes:
SizeDimensionsBest For
Desktop1440 × 1024Standard desktop apps
Desktop HD1920 × 1080Full HD displays
Tablet1024 × 1366iPad and tablets
Mobile375 × 840Smartphones

​
Single Screen Generation

The default mode for generating one screen at a time.
1

Configure design specs

Set mode (Wireframe/HiFi), page type, and screen size.
2

Write your prompt

Describe the screen you want to create:
A user profile settings page with:
- Profile photo upload
- Name and email fields
- Password change section
- Notification preferences toggles
- Delete account button (danger zone)
Modern design with a clean white background
3

Add reference images (optional)

Drag and drop images or click the paperclip icon to upload design references.
4

Click Generate

The AI generates your screen and displays it on the canvas.

​
Prompt Enhancement

Click the Enhance button (wand icon) to have AI expand your prompt with more specific design details. This often produces better results for simple prompts.

​
Flow Generation

Create multiple related screens in one operation.

​
Autoflow

Let AI plan the screens for your app:
  1. Switch to Create Flow tab
  2. Enter your app context: 
    E-commerce mobile app for a fashion brand.
Users can browse products, add to cart, 
checkout, and track orders.
Modern minimal design with smooth animations.
  3. Optionally set the number of screens (leave empty for AI to decide)
  4. Click Autoflow
The AI generates a list of screens with names and prompts: 
1. Home - Product discovery with featured items and categories
2. Product Detail - Full product view with images, sizes, add to cart
3. Cart - Shopping cart with item list, quantities, totals
4. Checkout - Shipping, payment, order confirmation
5. Orders - Order history and tracking

​
Manual Screen List

You can also manually create and edit the screen list:
  • Drag to reorder screens using the grip handle
  • Edit names by clicking on the screen title
  • Modify prompts in the text area
  • Remove screens with the minus button
  • Clear all to start over

​
Generate Flow

Click Generate Flow to create all screens simultaneously. They appear side-by-side on the canvas.

​
Advanced Options

​
Deep Design

Toggle Deep Design for enhanced AI reasoning:
  • More thorough prompt analysis
  • Better component structure
  • Improved accessibility considerations
  • Higher quality code output
Uses more tokens but produces better results for complex screens.

​
Max Mode

Toggle Max Mode to use the most capable AI model available:
  • Best code quality
  • Slower generation
  • Higher cost
Recommended for production-quality output.

​
Reference Images

Upload images to guide the AI’s design:

Drag & Drop

Drag images directly onto the prompt area.

Click to Upload

Click the paperclip icon to select files.
Supported formats: PNG, JPG, WEBP, GIF

​
Best Practices for Reference Images

Show the AI exactly the style you’re going for.
Use high-quality mockups for pixel-perfect results.
Include color swatches to match brand colors.
Show specific UI patterns you want to use.

​
Working with Generated Screens

​
On the Canvas

Generated screens appear as frames on the tldraw canvas:
  • Pan: Hold space and drag, or use two-finger scroll
  • Zoom: Scroll or pinch to zoom
  • Select: Click on a screen to select it
  • Move: Drag selected screens to reposition

​
View Code

Click on any generated HiFi screen to see its React code. Use the Copy button to grab the code.

​
Edit with AI

Open the Sandbox Panel and use the AI Coder to:
  • Modify specific components
  • Add new features
  • Fix issues
  • Change styling

​
Download Project

Click the download button in the Sandbox Panel to get a ZIP file with:
  • All source files
  • package.json with dependencies
  • Vite configuration
  • Ready to run locally

​
Generation History

Click the History button (clock icon) to see previous generations:
  • View all past prompts
  • See screen dimensions and mode
  • Click Use Prompt to reuse a previous prompt
History persists during your session.

​
Tips for Best Results

1

Start simple

Generate basic layouts first, then iterate with AI to add complexity.
2

Be descriptive

Include colors, spacing, typography preferences in your prompts.
3

Use reference images

One good reference image is worth a thousand words.
4

Iterate with flows

Use Create Flow for consistent design across multiple screens.
5

Enable Deep Design

For production screens, the extra processing time is worth it.