Lerne, wie du Visual Edits in AI Studio nutzt, um dein Projekt direkt aus der Live-Vorschau zu verfeinern. Du lernst, wie du den Visual-Edit-Modus aktivierst und bearbeitbare Elemente auswählst. Außerdem siehst du, wie du Text, Bilder, Icons, Farben, Abstände und Layouts aktualisierst.
INHALTSVERZEICHNIS
Was sind Visual Edits in AI Studio
Wichtige Vorteile von Visual Edits in AI Studio
Welche Elemente können bearbeitet werden
So aktivierst du den Visual-Edit-Modus
So erstellst du Visual Edits
Klicken zum Auswählen und Öffnen der Visual Controls
Text inline bearbeiten
Icons aktualisieren
Bild-Layout anpassen
Prompts auf ausgewählte Elemente verwenden
Änderungen speichern oder verwerfen
Häufig gestellte Fragen
Verwandte Artikel
Was sind Visual Edits in AI Studio
Visual Edits in AI Studio ermöglichen es dir, dein AI-Projekt direkt nach der Generierung in der Live-Vorschau zu verfeinern. Du kannst auf Texte klicken, Seitenelemente auswählen, Styling-Optionen anpassen oder gezielte Prompts verwenden, um bestimmte Bereiche der Seite zu verändern.
Diese Funktion ist besonders nützlich, wenn deine AI-generierte Seite fast fertig ist, aber noch Feinschliff benötigt, z. B. bei Texten, Abständen, Farben, Buttons, Bildern, Icons oder Layouts. Änderungen werden zuerst in der Live-Vorschau angezeigt und erst übernommen, wenn du speicherst.
Hinweis: Das AI-Modell wird nur ausgeführt, wenn du explizit einen Prompt sendest. Direkte visuelle Änderungen über die Editier-Controls verbrauchen keine AI-Tokens.
Wichtige Vorteile von Visual Edits in AI Studio
Direkte Seitenbearbeitung: Elemente im Preview anklicken und direkt bearbeiten
Schnelle Textänderungen: Texte per Doppelklick inline ändern
Gezielte Prompt-Änderungen: Ausgewählte Elemente mit Anweisungen verändern
Keine Token-Nutzung für direkte Edits: Direkte Änderungen verbrauchen keine AI-Tokens
Preview vor dem Speichern: Änderungen zuerst in der Vorschau prüfen
Welche Elemente können bearbeitet werden
Visual Edits unterstützt die wichtigsten Elemente einer Seite. Die verfügbaren Optionen passen sich automatisch an das ausgewählte Element an.
Bearbeitbare Elemente:
Überschriften und Text: Inhalt, Typografie, Ausrichtung, Farbe, Stil
Buttons: Text, Stil, Typ, Abstände, Farben
Bilder: Quelle, Darstellung, Alt-Text
Icons: Austausch, Größe, Styling
Container und Sektionen: Abstände, Rahmen, Schatten, Hintergrund, Layout
So aktivierst du den Visual-Edit-Modus
Öffne AI Studio und wähle dein Projekt
Klicke im Prompt-Bereich unten links auf Visual Edits
Klicke ein Element in der Vorschau an, um zu starten
So erstellst du Visual Edits
Visual Edits bietet mehrere Möglichkeiten zur Bearbeitung einer Seite:
Klicken zum Auswählen und Öffnen der Visual Controls
Klicke auf ein Element in der Vorschau, um das Visual-Edits-Panel zu öffnen. Die Controls passen sich automatisch an (Text, Buttons, Bilder, Icons, Container usw.).
Farb- und Abstandsoptionen erscheinen nur, wenn sie zum Element passen. Zusätzlich stehen Theme-Farben sowie die vollständige Tailwind-Palette zur Verfügung. Margin- und Padding-Controls erlauben präzise Abstandsanpassungen.
Text inline bearbeiten
Doppelklicke auf Text, um ihn direkt im Preview zu bearbeiten. Ideal für schnelle Copy-Änderungen.
Icons aktualisieren
Beim Auswählen eines Lucide-Icons kannst du aus über 1.600 Icons wählen, sie direkt ersetzen oder in der Größe anpassen – ohne Reload.
Bild-Layout anpassen
Bei Bildern kannst du:
Bild-URL ändern
Alt-Text aktualisieren
Layout über ein Dropdown anpassen
Prompts auf ausgewählte Elemente verwenden
Du kannst ein oder mehrere Elemente auswählen und in einfachen Worten beschreiben, was geändert werden soll.
Beispiele:
„Mache diesen Abschnitt moderner“
„Passe die Abstände in diesem Container an“
„Vereinheitliche die Button-Stile“
Für mehrere Elemente kannst du konsistente Änderungen anwenden, z. B.:
gleiche Button-Stile
einheitliche Farben
identische Abstände in Karten-Layouts
Änderungen speichern oder verwerfen
Visual Edits nutzt einen Preview-first Workflow:
Speichern: Änderungen werden ins Projekt übernommen
Verwerfen: Änderungen werden gelöscht und der vorherige Zustand bleibt erhalten
Häufig gestellte Fragen
F: Muss ich etwas aktivieren, um Visual Edits zu nutzen?
Nein. Du öffnest einfach ein AI-Studio-Projekt und klickst auf Visual Edits.
F: Verbrauchen Visual Edits AI-Tokens?
Nein, direkte Änderungen über Controls verbrauchen keine Tokens.
F: Kann ich Prompts auf einzelne Elemente anwenden?
Ja, du kannst gezielt ein Element auswählen und eine Anweisung eingeben.
F: Kann ich mehrere Elemente gleichzeitig bearbeiten?
Ja, Multi-Select ermöglicht konsistente Änderungen über mehrere Elemente hinweg.
Verwandte Artikel
AI Studio in ProfitBoost
Code Editor in AI Studio
Advanced SEO Support in AI Studio
Connect Forms and Calendars in AI Studio