Design-Mode

Aktualisiert 30. März 2026Features

UI-Elemente visuell auswählen und bearbeiten.

So funktioniert es

Im Design-Mode klickst du ein beliebiges Element in der Live-Vorschau an, um es auszuwählen. XAIO hebt das Element hervor und zeigt dir die Quelldatei und Zeilennummer.

Elemente auswählen

1. Die Vorschau zeigt eine Hervorhebung, wenn du über Elemente fährst

2. Klick, um ein Element auszuwählen

3. XAIO zeigt Komponentenname, Dateipfad und Zeilennummer

4. Bitte die KI, das ausgewählte Element zu ändern: „Mach diesen Button größer" oder „Ändere diesen Text zu …"

Was du tun kannst

Komponenten identifizieren — finde heraus, welche Datei ein sichtbares Element rendert
Schnelle Edits — ein Element auswählen und Änderungen im Chat beschreiben
Layout-Inspektion — Grenzen, Padding und Margins sehen
Farbe abgreifen — im Design verwendete Farben identifizieren

Auto-Commit

Wenn du den Design-Mode nach Änderungen schließt, committet XAIO die Änderungen automatisch zu Git (falls verbunden). Das passiert im Hintergrund — keine manuelle Aktion nötig.

Screenshot-Aufnahme

Der Design-Mode enthält ein integriertes Screenshot-Tool. Screenshots werden serverseitig für gleichbleibende Qualität aufgenommen und im Projekt gespeichert.