Design Mode
Updated Mar 30, 2026Features
Visually select and edit UI elements.
How It Works
Design Mode lets you click on any element in the live preview to select it. XAIO highlights the element and shows you the source file and line number.
Selecting Elements
1. The preview shows a highlight overlay as you hover over elements
2. Click to select an element
3. XAIO shows the component name, file path, and line number
4. Ask the AI to modify the selected element: "Make this button larger" or "Change this text to..."
What You Can Do
- Identify components — Find which file renders any visible element
- Quick edits — Select an element and describe changes in chat
- Layout inspection — See boundaries, padding, and margins
- Color picking — Identify colors used in the design
Auto-Commit
When you close Design Mode after making changes, XAIO automatically commits the changes to Git (if connected). This happens in the background — no manual action needed.
Screenshot Capture
Design Mode includes a built-in screenshot tool. Screenshots are captured server-side for consistent quality and saved to the project.