Design Mode Overview
Use Design Mode's visual controls for precise styling without writing code.
While the AI editor handles complex changes through conversation, Design Mode gives you precise visual controls for fine-tuning your design. Think of it as a complement to the AI—perfect for those pixel-perfect adjustments.
Entering Design Mode
Design Mode is accessible from the chat panel. When you enter Design Mode, the chat area transforms into a visual editor with:
- Theme Editor: Global color and styling controls
- Element Editor: Controls for selected elements
Design Mode works alongside the AI. You can use both—ask the AI for structural changes and use Design Mode for visual fine-tuning.
Design Mode Interface
The Design Mode panel shows a breadcrumb-style navigation:
- Theme: Click to edit global theme colors
- Element: Appears when you've selected an element in the preview
Theme Tab
Controls the global color scheme for your landing page:
- Primary, secondary, and accent colors
- Background colors for light and dark modes
- Foreground (text) colors
Element Tab
When you click an element in the preview, you can edit its individual styles:
- Layout (display, alignment, gaps)
- Spacing (margins and padding)
- Typography (font size, weight, line height)
- Colors (background, text, borders)
- Borders (width, style, radius)
- Size (width, height)
How It Works
- Enter Design Mode from the chat panel
- Click an element in the preview to select it
- Use the visual controls to adjust styling
- See changes live as you make adjustments
- Exit Design Mode to return to chat
Changes made in Design Mode are applied immediately and saved automatically.
When to Use Design Mode
Fine-Tuning Colors
Adjust specific shades, tweak the theme, or change individual element colors.
Adjusting Spacing
Precisely control margins, padding, and gaps between elements.
Typography Tweaks
Change font sizes, weights, and line heights for specific text.
Quick Visual Changes
Make small adjustments faster than typing a prompt.
Design Mode vs. AI Editor
| Task | Best Tool |
|---|---|
| Major layout changes | AI Editor |
| Adding/removing sections | AI Editor |
| Changing content | AI Editor |
| Adjusting a specific color | Design Mode |
| Fine-tuning spacing | Design Mode |
| Testing color variations | Design Mode |
Use them together: Ask the AI to create a section, then use Design Mode to perfect the spacing and colors.
Selecting Elements
To select an element for editing:
- Make sure you're in Design Mode
- Click on any element in the preview
- The element is highlighted, and its controls appear in the panel
Selection Overlay
When Design Mode is active, an overlay appears in the preview showing:
- Element boundaries: Highlighted outlines around elements
- Hover state: Elements highlight as you hover
- Selected element: Currently selected element is emphasized
Element Information
When you select an element, the panel shows:
- Element type: The HTML tag (div, button, h1, etc.)
- Source file: Which component file contains this element
- Available controls: Styling options for this element
Action Menu
When elements are selected, an action menu may appear with quick actions:
- Delete: Remove the selected element (if deletable)
- Additional actions: Context-specific options
Some elements cannot be deleted directly. Use the AI to make structural changes if the delete option is unavailable.
Exiting Design Mode
To exit Design Mode and return to the chat:
- Click the Theme button when no element is selected
- Or simply start typing a message—this switches focus back to chat