Funktionen
Visuelle Bearbeitung
Wie du Design, Texte und Layout direkt auf der Seite änderst
Du musst nicht jede Kleinigkeit dem Agenten beschreiben, sondern kannst direkt in der Vorschau deines Projekts arbeiten. Klicke ein Element an, um sein Aussehen zu ändern, schreibe Text an Ort und Stelle um, oder zeichne eine Markierung über die Seite, um dem Agenten zu zeigen, was du meinst.
Die visuelle Bearbeitung arbeitet immer mit einem einzelnen Element. Du wählst ein Element auf der Seite aus, siehst die verfügbaren Einstellungen dafür und änderst sie direkt. Design- und Textänderungen werden beim Speichern in dein Projekt geschrieben, ohne Zutun des Agenten und ohne Credits zu verbrauchen.
Die visuelle Bearbeitung funktioniert nur am Computer. Auf dem Handy und in schmalen Browserfenstern erscheint die Leiste nicht.
Die Werkzeugleiste
Über der Live-Vorschau deines Projekts schwebt eine Leiste mit drei Werkzeugen:
- Design bearbeiten: Klicke ein beliebiges Element an, um Aussehen, Bild oder Layout zu ändern.
- Text bearbeiten: Bearbeitbarer Text wird umrandet, du klickst ihn an und schreibst ihn um.
- Anmerkung: Zeichne auf die Seite, worum es dir geht.
Mit Esc kehrst du jederzeit zum normalen Betrachten der Vorschau zurück.
Design bearbeiten
Wählst du ein Element aus, öffnen sich seine Einstellungen im linken Panel. Was dort steht, hängt vom Typ des Elements ab: Ein Abschnitt bietet Größe, Abstände, Hintergrund, Rahmen und die Anordnung der enthaltenen Elemente, ein Textelement bietet Typografie, und bei einem Bild tauschst du die Datei aus.
Der Kopf des Panels zeigt, wo du dich gerade befindest, von der Ebene Global bis hinunter zum ausgewählten Element. Mit dem Themenschalter prüfst du dein Ergebnis vor dem Speichern im hellen und im dunklen Modus.
Text bearbeiten
Text, den du umschreiben kannst, wird direkt in der Vorschau umrandet. Klicke hinein und tippe. So korrigierst du eine Überschrift oder einen Absatz am schnellsten, weil du das Ergebnis beim Schreiben an Ort und Stelle siehst.
Anmerkung
Manchmal geht es schneller, dem Agenten zu zeigen, was du meinst, als es zu beschreiben.
Ist Anmerkung aktiv, zeichnest du über den Teil der Seite, um den es geht. Vibewax ermittelt, welche Elemente unter deiner Markierung liegen, und hängt sie an deine nächste Nachricht an. Zeichne so viele Markierungen, wie du brauchst, tippe dann deine Nachricht und schicke sie wie gewohnt ab.
Beim Zeichnen liegen Markierung rückgängig machen, Markierung wiederholen und Löschen direkt in der Leiste bereit.
Anmerkungen dienen zum Zeigen, nicht zum Hinterlassen von Kommentaren. Sie werden nicht mit deinem Projekt gespeichert und kosten nichts außer der Nachricht, die du abschickst.
Speichere oder verwirf deine Designänderungen, bevor du mit dem Zeichnen beginnst, und ändere die Größe der Vorschau nicht, während du zeichnest. Beim Ändern der Größe verschwinden deine Markierungen, weil sie an der Position des Inhalts verankert sind.
Navigation zwischen Elementen
Genau das anzuklicken, was du willst, klappt nicht immer, typischerweise wenn Elemente sich überlappen oder ein verschachteltes Element sein übergeordnetes verdeckt.
Über deiner Auswahl liegt eine kleine Leiste, mit der du eine Ebene nach oben oder mit den Pfeilen zu benachbarten Elementen wechselst. Dort findest du auch das Code-Symbol, das den Quelltext des Elements im Tab Code öffnet, sowie die Möglichkeit, das Element ganz zu entfernen.
KI fragen
Bei Texten und Bildern findest du im Panel KI fragen, für die Momente, in denen es einfacher ist, eine Änderung zu beschreiben, als sie einzustellen. Bei Text wird die Formulierung nach deiner Vorgabe umgeschrieben. Bei einem Bild lässt sich das vorhandene bearbeiten oder ein neues erzeugen, und du siehst das Ergebnis, bevor du es übernimmst.
Ist ein Element ausgewählt, wechselt auch das Nachrichtenfeld im Chat in den Bearbeitungsmodus. Alles, was du dort schreibst, gilt nur für deine aktuelle Auswahl.
KI fragen und Nachrichten aus dem Chat verbrauchen Credits wie jede andere KI-Anfrage, und den Preis für KI fragen siehst du vorher. Alles, was du im Panel von Hand einstellst, ist kostenlos.
Änderungen speichern
Solange du ungespeicherte Änderungen hast, zeigt die Leiste ihre Anzahl an, und du kannst sie alle auf einmal mit Speichern übernehmen oder mit Verwerfen wieder loswerden.
Das Speichern läuft nicht über den Agenten, ist also sofort erledigt und kostet keine Credits. Ist eine Änderung aufwendiger, gibt Vibewax sie an den Agenten im Chat weiter, wo sie sich wie jede andere Nachricht verhält.
Wann die Werkzeugleiste nicht verfügbar ist
Die Leiste blendet sich aus oder wird ausgegraut, wenn direktes Bearbeiten nicht funktionieren würde:
- Warte, bis Vibewax fertig ist: Der Agent arbeitet gerade an deinem Projekt.
- Warten, bis die Vorschau bereit ist: Deine Vorschau startet noch.
- Schließe den Plan, um die Seite zu bearbeiten: Im Chat ist ein Plan geöffnet.