Design-Mode

So funktioniert es

Im Design-Mode klickst du ein beliebiges Element in der Live-Vorschau an, um es auszuwählen. XAEIO 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. XAEIO 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 XAEIO 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.

Das Eigenschaften-Panel

Ein ausgewähltes Element öffnet ein Panel mit drei Gruppen — Text, Style und Layout — dazu eine Properties-Ansicht für das Element selbst. Änderungen wirken live in der Vorschau; Undo geht einen Schritt zurück, Save schreibt die Änderung in den Code, und Design-Modus verlassen kehrt zur normalen Vorschau zurück.

Nimm das Panel für das Kleine und Genaue — eine Farbe, ein Abstand, eine Beschriftung. Nimm den Chat für alles, was eine Entscheidung braucht.