Design Mode
Use Design Mode to select specific elements visually for precise AI edits.
Design Mode lets you click on elements in your landing page preview to select them for editing. Instead of describing which element you mean, you can point directly at it.
What Design Mode Does
When Design Mode is active:
- Your landing page preview becomes interactive
- Hovering over elements highlights them
- Clicking an element selects it
- The selected element is attached to your next message
- AI targets that specific element for changes
This eliminates ambiguity when your page has multiple similar elements — no more confusion about "which button?" or "which headline?".
How to Enable Design Mode
Using the Button
- Look for the Design button in the chat input area
- Click it to toggle Design Mode on
- The button highlights when active
- Click again to turn it off
Using the Slash Command
- Type
/designin the chat input - Press Enter to toggle Design Mode
- Design Mode activates immediately
Design Mode requires the preview to be loaded and the sandbox to be running. If the button is disabled, wait for the preview to load.
Selecting Elements
With Design Mode active:
Hover to Highlight
Move your cursor over the preview. Elements highlight as you hover, showing you what can be selected.
Click to Select
Click any element to select it. A badge appears in the chat input showing:
- Tag name — The element type (Button, Image, Heading, etc.)
- Source file — Which file contains this element
Deselect
Click the X on the element badge to deselect, or click a different element to change your selection.
Using Selected Elements
Send a Request
With an element selected:
- Type your edit request in the chat input
- Press Enter to send
- AI knows exactly which element you're referring to
- Changes target that specific element
Example Workflow
- Enable Design Mode
- Click on a "Sign Up" button in the preview
- Badge shows:
Button — hero.tsx - Type: "Change the color to blue and make it larger"
- Send — AI modifies that exact button
Auto-Disable
Design Mode automatically turns off after you send a message. This prevents accidental selections. Enable it again for your next visual edit.
When to Use Design Mode
Multiple Similar Elements
When your page has several buttons, cards, or headings and you need to change a specific one.
Precise Styling
When you want to adjust spacing, colors, or sizes on a particular element.
Unclear References
When describing the element might be confusing — "the small gray text under the hero image" vs. just clicking it.
Nested Elements
When you need to select a specific element inside a component, like an icon within a card.
Element Information
The element badge shows key information:
Tag Name
The HTML/component tag, like:
Button— A button elementImage— An image elementHeading— A heading (h1-h6)Card— A card componentSection— A section container
Source File
The file where this element is defined:
- Helps you understand the page structure
- AI uses this to locate the correct code
- Shown as just the filename (e.g.,
hero.tsx)
Limitations
Elements That Can't Be Selected
Some elements may not be selectable:
- Very small elements (icons, tiny text)
- Overlay elements (modals, tooltips when closed)
- Dynamically generated content
If you can't select a specific element, try selecting its parent container and describe which child element you want to change.
Preview Must Be Loaded
Design Mode only works when:
- The sandbox is running
- The preview iframe has loaded
- The page has built successfully
If Design Mode isn't working, check that your preview is showing the page correctly.
Best Practices
Combine with Descriptions
Even with an element selected, add context to your request:
Good
[Button selected] "Change this to a secondary style with an outline instead of filled background"
Less helpful
[Button selected] "Change this"
Select the Right Level
Click carefully to select the element you want:
- Clicking a card's icon selects the icon
- Clicking the card's background selects the card
- Be precise for better results
Preview Your Selection
Check the element badge to confirm you selected what you intended before sending your message.