Select Mode
Select Mode allows you to precisely target specific elements in your design when requesting AI modifications. Instead of describing which element you want to change, simply click on it and the AI will know exactly what you’re referring to.
Why Use Select Mode?
When working with complex designs, it can be difficult to describe exactly which element you want to modify:
Without Select Mode:
“Change the color of the second button in the third section”
With Select Mode:
Click the button, then type “Make this blue”
Select Mode eliminates ambiguity and ensures the AI modifies exactly the element you intended.
How to Use Select Mode
Step 1: Activate Select Mode
Click the Select button (cursor icon) in the input toolbar. The button turns black when active, and you’ll enter element selection mode.
Note: Select Mode is only available after the AI has finished generating the design.
Step 2: Select an Element
- Hover over elements in the preview - they’ll highlight with a blue border
- Click to select an element - it shows an orange border
- The element’s path appears as a tag in your input field
Note: You can only select one element at a time. Simply click another element to change your selection - the previous one will be automatically replaced.
Step 3: Describe Your Change
With the element selected, type your modification request:
- “Make this larger”
- “Change the background to gradient”
- “Add a shadow”
- “Remove this element”
- “Duplicate this section”
Step 4: Send Your Request
Press Enter or click Send. The AI receives both your text and the selected element information, ensuring accurate modifications.
Tips and Examples
Be Concise
With the element already selected, you don’t need to describe it. Just say “Make this red” instead of “Make this button in the hero section red”.
Example Prompts
- “Make this a gradient with hover animation”
- “Add a subtle shadow and increase border radius”
- “Change this to a 3-column grid on desktop”
- “Make this match the header style”
- “Make this blue, add rounded corners, and increase the padding”
Parent vs Child Selection
If you want to modify a container rather than its contents, click on the container’s edge or background area.
Select Mode vs Design Mode
Select Mode:
- Purpose: Target elements for AI modifications
- Changes via: Text prompts
- Best for: Complex modifications (animations, responsive behavior, restructuring)
Design Mode:
- Purpose: Direct visual editing
- Changes via: Visual controls
- Best for: Quick visual tweaks (colors, sizes, borders)