Design Mode Basics
Generation gets you 90% of the way. Design Mode is where you add the final 10% of polish that makes a design truly yours.
The Interface
The Layer Tree
Navigate the DOM structure of your design. See exactly how sections, containers, and elements are nested. Use this to select parent wrappers that are hard to click on the canvas.
The Property Inspector
Your visual command center. Adjust colors, typography, layout, spacing, and animations for the currently selected element with real-time feedback.
Core Tools
The Selector
Click any element on the canvas to highlight it and load its properties.
Inline Text
Double-click any text element to edit the content directly on the page.
The Panner
Hold Spacebar to move around large canvas layouts and full-page designs.
Switching to Design Mode
Once the AI finishes generating, look for the Design / Preview toggle in the top bar. Switching to Design Mode unlocks the property panel and deep selection capabilities.
Start Visual Editing →