Mit AI bearbeiten

Der Visual Editor enthält einen AI-Assistenten: ABlyft Lumen („Lumen“). Du beschreibst eine Änderung in eigenen Worten, zum Beispiel „Ändere diese Überschrift in 'Jetzt kostenlos testen' und mach sie rot“. Lumen erstellt die Änderung und zeigt sie sofort auf der Seite.

Anschließend kannst du sie Schritt für Schritt verfeinern („mach das Rot etwas heller“), weitere unabhängige Änderungen hinzufügen und jede davon einzeln entfernen. Wenn du mit dem Ergebnis zufrieden bist, speicherst du die Variation wie gewohnt.

Die AI arbeitet neben den regulären Bearbeitungswerkzeugen. Manuelle Änderungen (Element bearbeiten, HTML bearbeiten, verschieben, ausblenden, einfügen, Erweiterungen) und AI-Änderungen lassen sich in derselben Variation kombinieren. Zum Editor selbst siehe Visual Editor.

Bevor du startestCopy Anchor Link

• AI ist für dein Team aktiviert. Siehe AI für dein Team aktivieren.
• Dein Team hat AI Credits verfügbar. Credits werden beim Speichern berechnet, nicht für jede Nachricht, siehe AI Credits.

Ist eine Voraussetzung nicht erfüllt, zeigt der Editor beim Öffnen des AI-Assistenten eine Meldung, die dir sagt, was fehlt.

Den AI-Assistenten öffnenCopy Anchor Link

Es gibt zwei Wege, den Assistenten zu öffnen. Beide öffnen dasselbe Chat-Panel.

„Edit with AI“ (Element-Menü)

1. Klicke auf ein Element auf der Seite, um es auszuwählen.
2. Wähle im Element-Menü „Edit with AI“ (in der Gruppe „Edit“).

Der Chat öffnet sich mit dem ausgewählten Element als Kontext. Deine Anweisung bezieht sich dann genau auf dieses Element („diese Überschrift“, „dieser Button“).

„Build with AI“ (Toolbar)

1. Klicke in der unteren Toolbar auf „Build with AI“.

Der Chat öffnet sich ohne ausgewähltes Element. Lumen arbeitet dann mit einer Übersicht der Seite. Ist unklar, welches Element du meinst (zum Beispiel „mach den Button größer“ auf einer Seite mit mehreren Buttons), stellt Lumen eine Rückfrage, statt zu raten.

Element im Chat auswählen oder wechselnCopy Anchor Link

Über dem Eingabefeld zeigt der Chat den aktuellen Element-Kontext:

• „Select element“ / „Change“: Klicke darauf und dann auf ein Element auf der Seite. Es wird zum Kontext für deine nächsten Anweisungen. Zum Abbrechen klicke im Chat auf „Cancel“ oder drücke Esc.
• ✕ entfernt das Element aus dem Kontext. Lumen nutzt dann wieder die Seitenübersicht.

Das Chat-PanelCopy Anchor Link

• Verschieben: Ziehe das Panel an seiner Kopfzeile.
• Größe ändern: Ziehe an der rechten unteren Ecke.
• Schließen: Nutze ✕ in der Kopfzeile oder drücke beim Tippen Esc. Beim erneuten Öffnen ist die Unterhaltung wieder da.
• Chat leeren: Das Papierkorb-Symbol in der Kopfzeile löscht die Unterhaltung nach einer Bestätigung. Deine AI-Änderungen bleiben erhalten und lassen sich weiter verfeinern; Lumen kennt nur die bisherige Unterhaltung nicht mehr.
• Verlauf der Unterhaltung: Bleibt für die aktuelle Variation erhalten, solange der Browser-Tab offen ist, auch wenn der Editor die Seite neu lädt. Schließt du den Tab, beginnt eine neue Unterhaltung. Die gespeicherten AI-Änderungen selbst sind davon nicht betroffen.

Anweisungen schreibenCopy Anchor Link

• Drücke Enter zum Senden und Shift+Enter für eine neue Zeile. Eine Anweisung kann bis zu 2.000 Zeichen haben.
• Lumen antwortet in der Sprache, in der du schreibst.
• Beschreibe genau, was sich ändern soll, und, wenn kein Element ausgewählt ist, wo.
• Es kann immer nur eine Anfrage gleichzeitig laufen. Während Lumen arbeitet, zeigt der Chat einen Hinweis an.

Beispiele:

• „Ändere diese Überschrift in 'Jetzt kostenlos testen' und mach sie rot.“
• „Mach das Rot etwas heller.“
• „Mach diesen Button grün und den Text fett.“
• „Blende den Newsletter-Teaser im Footer aus.“

AI-ÄnderungenCopy Anchor Link

Jedes Ergebnis besteht aus einer oder mehreren AI-Änderungen. Eine AI-Änderung hat:

• eine ID, zum Beispiel ai_k3j9x0p2qa,
• eine kurze Beschreibung,
• das Ziel-Element,
• das CSS und/oder JavaScript, das sie umsetzt.

Für jeden erfolgreichen Schritt zeigt der Chat, welche Änderungen betroffen waren:

Für jede Änderung kannst du:

• auf den Ziel-Selektor klicken, um das Element auf der Seite hervorzuheben,
• CSS und JavaScript aufklappen, um den erzeugten Code mit Syntax-Hervorhebung zu sehen (beide sind standardmäßig zugeklappt),
• mit Copy den Code kopieren.

Verfeinern oder hinzufügenCopy Anchor Link

• Verfeinerungen aktualisieren die bestehende Änderung. „Mach das Rot etwas heller“ direkt nach „mach die Überschrift rot“ aktualisiert dieselbe AI-Änderung, es entsteht also kein Duplikat.
• Unabhängige Anfragen erzeugen eine neue Änderung. „Mach diesen Button grün“ erzeugt eine separate Änderung, sodass sich jede einzeln entfernen lässt.
• Lumen ändert oder entfernt niemals manuelle Änderungen, die du mit den regulären Editor-Werkzeugen gemacht hast.

PreviewCopy Anchor Link

Änderungen werden sofort auf die Seite angewendet, sodass du sie vor dem Speichern prüfen kannst. Ein Schritt gilt erst als erfolgreich, wenn er ohne Fehler auf die Preview angewendet wurde.

Ist das Ziel-Element noch nicht auf der Seite, zum Beispiel weil der Inhalt später geladen wird, zeigt der Chat einen Hinweis. Die Änderung wird angewendet, sobald das Element erscheint.

Wenn etwas schiefgehtCopy Anchor Link

• Die Änderung schlägt in der Preview fehl (zum Beispiel ein Script-Fehler): Es wird nichts angewendet und die Seite bleibt, wie sie war. Der Chat zeigt den Fehler mit „Ask AI to fix“, das den Fehler an Lumen zurückschickt, und „Retry“.
• Die AI liefert ein unbrauchbares Ergebnis: Es wird nichts angewendet und du kannst es erneut versuchen.
• Dein letzter Schritt war falsch: „Undo this AI step“ unter der letzten Antwort stellt den vorherigen Zustand wieder her. Nur der jeweils letzte AI-Schritt lässt sich so rückgängig machen.

AI-Änderungen unter „Changes“ verwaltenCopy Anchor Link

AI-Änderungen erscheinen im Dialog „Changes“ der Toolbar, markiert mit einem AI-Badge und ihrer Beschreibung:

• Unsaved: AI-Änderungen, die seit dem letzten Speichern neu sind oder geändert wurden, markiert mit „new“ oder „modified“.
• Saved: AI-Änderungen, die bereits gespeichert sind.

Fährst du mit der Maus über einen Eintrag, wird das Ziel-Element auf der Seite hervorgehoben. Das Löschen-Symbol entfernt diese einzelne AI-Änderung. Die Preview lädt ohne sie neu, alle anderen Änderungen bleiben erhalten.

SpeichernCopy Anchor Link

Speichere wie gewohnt mit „Save“ in der Toolbar. AI-Änderungen werden zusammen mit allen anderen Änderungen der Variation gespeichert.

Gespeicherte AI-Änderungen werden wie jede andere Änderung aus dem Visual Editor mit dem Snippet an deine Visitors ausgeliefert. Sie laufen nach den manuellen Änderungen der Variation. Öffnest du die Variation erneut im Visual Editor, werden alle gespeicherten AI-Änderungen angewendet und lassen sich weiter verfeinern.

AI CreditsCopy Anchor Link

Credits werden beim Speichern berechnet, nicht pro Nachricht. Du kannst im Chat Ideen ausprobieren und verfeinern; Credits werden erst verbraucht, wenn du das Ergebnis speicherst.

• Das Speichern neuer oder geänderter AI-Änderungen kostet 50 Credits pro Speichervorgang, egal wie viele AI-Änderungen er enthält.
• Keine Credits werden berechnet, wenn du erneut ohne neue AI-Änderungen speicherst, nur manuelle Änderungen speicherst oder nach dem Entfernen von AI-Änderungen speicherst.
• Speicherst du nach weiteren AI-Verfeinerungen erneut, wird erneut berechnet.
• Nach einem Speichervorgang, der Credits verbraucht hat, zeigt die Bestätigung, wie viele Credits berechnet wurden.

Berechnungen aus dem Visual Editor erscheinen auf der Seite AI Usage mit der Quelle „AI Visual Editor“. Siehe AI Credits.

AI-Änderungen außerhalb des Visual Editors bearbeitenCopy Anchor Link

In den Einstellungen der Variation lassen sich die Daten des Visual Editors (Settings from Visual Editor) weiterhin als JSON bearbeiten. AI-Änderungen kannst du dort entfernen, aber nicht erstellen oder ändern. Nutze dafür den Visual Editor.

Datenschutz und SicherheitCopy Anchor Link

Lumen erhält nur, was es für deine Anfrage braucht:

• deine Anweisung und die letzten Chat-Nachrichten,
• das ausgewählte Element oder, wenn kein Element ausgewählt ist, eine kompakte Übersicht der Seite,
• die AI-Änderungen der Variation und eine kurze Zusammenfassung deiner manuellen Änderungen (welche Elemente und Eigenschaften geändert wurden).

Die gesamte Seite wird nicht gesendet.

Bevor Seiteninhalte gesendet werden, werden sie bereinigt:

• Scripts, Styles, Werte von Formularfeldern, Passwortfelder und versteckte Felder werden entfernt.
• E-Mail-Adressen, Telefonnummern, lange Zahlen (zum Beispiel Kartennummern) und Token-ähnliche Zeichenketten werden durch Platzhalter ersetzt.
• URLs werden ohne Query-Parameter gesendet.

Weitere Schutzmaßnahmen:

• Text auf deiner Website wird als Daten behandelt, niemals als Anweisung an die AI.
• Erzeugter Code darf keine Daten irgendwohin senden und nicht auf Cookies oder den Browser-Speicher zugreifen. Code, der das versucht, wird abgelehnt.
• Erzeugter Code folgt denselben Regeln wie Code, den du selbst in einer Variation schreibst. Er nutzt das ABlyft-Hilfsmittel ablyftTools.waitForElement, um auf Elemente zu warten.

LimitsCopy Anchor Link

Eine Anfrage dauert meist wenige Sekunden, bei komplexen Änderungen bis zu etwa einer halben Minute.

FAQCopy Anchor Link

Zahle ich für jede Nachricht?Copy Anchor Link

Nein. Credits werden nur berechnet, wenn du neue oder geänderte AI-Änderungen speicherst.

Überschreibt Lumen meine manuellen Änderungen?Copy Anchor Link

Nein. Lumen erstellt, aktualisiert oder entfernt nur AI-Änderungen. Manuelle Änderungen werden nie angefasst.

Kann ich den erzeugten Code selbst bearbeiten?Copy Anchor Link

Du kannst das CSS und JavaScript im Chat ansehen und kopieren. Um eine AI-Änderung anzupassen, beschreibe die Anpassung Lumen. Möchtest du den Code selbst pflegen, kopiere ihn in eine Variation vom Typ Code, siehe Variations.

Ich habe den Chat geleert. Sind meine Änderungen weg?Copy Anchor Link

Nein. Das Leeren entfernt nur die Unterhaltung. Alle AI-Änderungen bleiben erhalten und lassen sich weiter verfeinern.

Warum ist „Edit with AI“ nicht verfügbar?Copy Anchor Link

AI muss für dein Team aktiviert sein, siehe Bevor du startest. Der Editor zeigt, welche Voraussetzung fehlt.

Nächste SchritteCopy Anchor Link