Design-Mode

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. Airbuild 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. Airbuild 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 Airbuild 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.

Anhänge im Design-Mode

Die Prompt-Leiste im Design-Mode nimmt Dateien genauso wie das Chat-Eingabefeld: Büroklammer, Drag & Drop oder aus der Zwischenablage — ein eingefügter Screenshot bekommt seinen Zeitstempel als Namen. Die Vorschaubilder haben einen Entfernen-Button und einen Upload-Ring, und der Upload in die Medienbibliothek startet, sobald du anhängst. So landet ein Referenzbild direkt beim ausgewählten Element.

Farbfragen beantworten

Fragt der Agent nach Farben, kommt die Frage als Reihe von Farbfeldern — die Töne, die er für dein Projekt vorschlägt — daneben ein Farbwähler für alles andere. Ein Klick beantwortet sie, und die Farbe geht direkt ins Design, statt eines Codes, den du erst nachschlagen und tippen musst.