--- type: feature title: "KI-Website-Editor für prüfbare Storefront-Änderungen" description: "Nutzen Sie einen KI-Website-Editor mit Storefront-Kontext, Referenzbildern, ausgewählten Elementen, Quelldateiänderungen und responsiven Vorschauen zur Prüfung." category: ai-websites h1: "Ein KI-Website-Editor für die Prüfung von Storefronts" image: "https://storage.googleapis.com/download/storage/v1/b/runner-blog/o/features%2Fai-website-editor%2Fhero.png?generation=1788075293992901&alt=media" keyword: "ai website editor" legacyKind: structured --- Ein **KI-Website-Editor** sollte eine angeforderte Storefront-Änderung verständlich machen, bevor sie veröffentlicht wird. Runner AI arbeitet mit dem aktuellen Shop-Projekt, einem klar eingegrenzten Briefing, optionalen Referenzbildern und dem von Ihnen ausgewählten Element. Als Ergebnis erhalten Sie Änderungen an den Quelldateien und responsive Vorschauen, die Sie unabhängig von der Veröffentlichung prüfen, überarbeiten und speichern können. ![Ein ausgewählter Storefront-Hero in einem KI-Bearbeitungs-Workspace mit responsiven Vorschauen und geänderten Dateien](https://storage.googleapis.com/download/storage/v1/b/runner-blog/o/features%2Fai-website-editor%2Fhero.png?generation=1788075293992901&alt=media) ## Geben Sie dem KI-Website-Editor ein klar begrenztes Storefront-Briefing Beginnen Sie mit der Seite und der Kundenaktion, die sich ändern sollen. Benennen Sie das aktuelle Problem, das gewünschte sichtbare Ergebnis und die Teile des Shops, die unverändert bleiben müssen. Eine hilfreiche Anfrage könnte Runner AI bitten, eine Kollektion auf der Startseite leichter auffindbar zu machen und dabei die bestehende Navigation, Produktdaten, den Warenkorbpfad und die Markensprache beizubehalten. Nennen Sie die zu prüfenden Gerätezustände und den Klickpfad, statt nur um eine vage Verbesserung zu bitten. Als Eingaben können die aktuellen Storefront-Dateien, verifizierte Katalogfakten, freigegebene Texte, Markenregeln, ein Referenzbild und die betreffende Route oder der Abschnitt dienen. Ein Referenzbild ist ein Beleg für das Erscheinungsbild, ersetzt aber keine Produktwahrheit. Runner benötigt weiterhin korrekte Produkte, Preise, Bestandsregeln, Richtlinien, Ziele und Zuständigkeitsgrenzen, wenn sie das Ergebnis beeinflussen. Wenn ein Quellbild oder Beispiel jemand anderem gehört, dürfen Sie es nur mit den für Ihr Projekt erforderlichen Rechten und Genehmigungen verwenden. Beschränken Sie jede Anfrage auf ein zusammenhängendes Ergebnis. Wenn das erste Resultat das Ziel verfehlt, nennen Sie den genauen Abschnitt, erklären Sie den erwarteten Zustand und stellen Sie bei Bedarf eine eindeutigere Referenz bereit. So entsteht eine Prüfspur für eine konkrete Änderung, statt wiederholt eine gesamte Website neu zu erzeugen. Für ein Projekt, das von einer autorisierten öffentlichen URL statt von einem bestehenden Shop-Abschnitt ausgeht, beschreibt [KI-Website-Klonen](/de/ai-website-cloning) den separaten Ablauf von der Erfassung zum Code und seine Rechteabgrenzung. ## Wählen Sie ein Storefront-Element aus und bewahren Sie seinen Codekontext Der Design Mode von Runner AI ist für gezielte visuelle Änderungen an der aktuell bereiten Storefront-Version vorgesehen. Auf dem Desktop können Sie die Storefront öffnen, den Design Mode aktivieren und ein sichtbares Element auswählen. Das ausgewählte Element und sein umgebender Codekontext können mit einer Anweisung an Ask Runner AI übermittelt werden. Dadurch wird die Anfrage auf die tatsächlich gewählte Komponente eingegrenzt. Das ist hilfreich, wenn „diese Überschrift ändern“ oder „dieses Bild ersetzen“ klarer ist, als die Position aus dem Gedächtnis zu beschreiben. Direkte Bedienelemente unterstützen bestimmte Änderungen an Abständen, Bildern und Texten sowie das Entfernen von Elementen. Das Bild-Panel kann für unterstützte Medienelemente Upload- und KI-generierte Optionen anzeigen. Mit den Textbedienelementen lassen sich Eigenschaften wie Größe, Stärke, Schriftfamilie, Farbe, Deckkraft und Ausrichtung anpassen. Rückgängig und Wiederholen gelten für den aktuellen, noch nicht gespeicherten Verlauf im Design Mode. Da eine KI-Anfrage beim Start der Verarbeitung die Auswahl und den ungespeicherten Verlauf direkter Änderungen zurücksetzt, sollten Sie ausstehende direkte Änderungen speichern, bevor Sie von den direkten Bedienelementen zu Ask Runner AI wechseln. Die Verfügbarkeit hängt vom Projektstatus ab. Design Mode kann nicht verfügbar sein, wenn die neueste Storefront-Version nicht bereit ist, eine ältere Version in der Vorschau angezeigt wird, eine andere Anfrage läuft, die Funktion für den Workspace nicht aktiviert ist oder kein Desktop-Layout verwendet wird. Der normale Runner-Chat bleibt der passende Weg für Arbeiten an mehreren Seiten, neues Verhalten oder umfassendere Funktionen. Der Editor sollte nicht als universelle Steuerung dargestellt werden, die Projektbereitschaft oder Feature-Gates umgeht. ## Prüfen Sie Quelldateiänderungen und responsive Vorschauen Beim Speichern einer visuellen Änderung wird die ausstehende Änderung in das Projekt geschrieben. Wenn der aktuelle Workflow dies unterstützt, kann dabei ein neuer Versions-Snapshot erstellt werden. Anschließend wird die Vorschau neu geladen, damit Sie das sichtbare Ergebnis erneut prüfen können. Sehen Sie sich die Seite in PC-, Tablet- und Smartphone-Layouts an und verfolgen Sie die im Briefing genannte Kundenaktion. Ein Abschnitt, der bei einer Breite korrekt aussieht, kann bei einer anderen weiterhin Text abschneiden, ein Bedienelement verbergen, eine Route unterbrechen oder eine Produktaktion in eine ungünstige Abfolge verschieben. Runner bietet außerdem einen bedingt verfügbaren Code-Editor, mit dem Sie die Storefront-Dateien hinter der Vorschau untersuchen können. Seine Git-Ansicht trennt gespeicherte Dateien, Diffs, Staging, Commits und Pushes. Diese Trennung ist wichtig: Eine gespeicherte Datei wird nicht automatisch committet, ein Commit wird nicht automatisch gepusht und keine dieser Aktionen veröffentlicht die Storefront. Prüfen Sie den vorgesehenen Datei-Diff und fassen Sie nicht zusammenhanglose Änderungen nur deshalb zusammen, weil sie im selben Workspace vorhanden sind. Verwenden Sie die responsive Vorschau als Beleg für den aktuellen Projektstatus, nicht als Nachweis für jedes verbundene System. Prüfen Sie echte Produktdaten, Links, Suche, Warenkorbverhalten, Checkout-Zuständigkeit, Analytics, Barrierefreiheit und öffentliche Routen an der jeweils maßgeblichen Quelle. Wenn die Änderung Teil einer umfassenderen Überarbeitung von Navigation, Seitenhierarchie und Inhalten ist, erklärt das [Redesign einer E-Commerce-Website](/de/ecommerce-website-redesign), wie das Redesign an Belege aus dem aktuellen Shop gebunden bleibt, statt nur eine allgemeine visuelle Auffrischung zu sein. ## Halten Sie Speichern, Versionsprüfung und Veröffentlichung getrennt Ein KI-Website-Editor ist sicherer, wenn jeder folgenreiche Schritt ausdrücklich bleibt. Im Design Mode können direkte Änderungen vor dem Speichern mit Rückgängig und Wiederholen geprüft werden. Nach dem Speichern zeigt die normale Storefront-Vorschau das aktuelle Ergebnis. Der Versionsverlauf bietet, sofern er für das Projekt verfügbar ist, eine weitere Möglichkeit, frühere Storefront-Arbeiten zu prüfen oder wiederherzustellen, ohne jeden gespeicherten Vorschlag als endgültige öffentliche Fassung zu behandeln. Die Veröffentlichung ist eine separate Entscheidung. Vergleichen Sie das Ergebnis vor der Veröffentlichung mit dem ursprünglichen Briefing und prüfen Sie, ob der ausgewählte Abschnitt weiterhin mit dem Katalog, der umgebenden Seite, den Gerätelayouts und dem Kundenpfad funktioniert. Gleichen Sie sachliche Texte mit dem System ab, das diese Informationen verwaltet. Eine generierte Beschreibung belegt keinen Bestand, eine Vorschau belegt keine Zahlungsverfügbarkeit und ein erfolgreiches Schreiben einer Datei belegt nicht, dass jede Route oder Integration korrekt funktioniert. Diese Prüfgrenze ist der entscheidende Unterschied von Runner AI für Commerce-Teams. Der Editor arbeitet innerhalb des Storefront-Projekts und kann ein ausgewähltes Element mit seinem Quellkontext verbinden. Die verantwortliche Person kann jedoch weiterhin prüfen, was sich geändert hat, und entscheiden, ob das Ergebnis bereit ist. Die Ausgabe ist nicht nur ein flaches Mockup oder eine unerklärte visuelle Veränderung, sondern eine bearbeitbare Projektänderung mit sichtbaren Dateien und Vorschauen, die einen bewussten Freigabeprozess unterstützen. ## FAQ zum KI-Website-Editor ### Welche Eingaben kann ich Runner AI für eine Website-Änderung geben? Geben Sie Runner AI das aktuelle Shop-Projekt, die betreffende Seite oder das Element, die zu verbessernde Kundenaktion, verifizierte Katalog- oder Inhaltsfakten und die einzuhaltenden Grenzen. Wenn das Erscheinungsbild wichtig ist, können Sie ein freigegebenes Referenzbild hinzufügen. Im Design Mode lässt sich durch die Auswahl eines Elements außerdem dieses Element samt umgebendem Codekontext an eine gezielte Ask Runner AI-Anfrage anhängen. ### Kann ich eine Storefront bearbeiten, ohne den Code manuell zu ändern? Design Mode bietet direkte Bedienelemente für unterstützte Änderungen an Abständen, Bildern und Texten sowie zum Entfernen von Elementen. Hinzu kommt ein Ask Runner AI-Feld für Anfragen zum ausgewählten Element. Umfassendere Änderungen können im normalen Chat angefordert werden. Für Personen, die eine gezielte Dateiänderung prüfen oder selbst vornehmen müssen, bleibt ein bedingt verfügbarer Code-Editor vorhanden. Er ist jedoch nicht für jede visuelle Anpassung erforderlich. ### Wird eine gespeicherte Änderung sofort veröffentlicht? Nein. Beim Speichern wird der Projekt-Workspace aktualisiert und die aktuelle Vorschau neu geladen. Commit, Push und Veröffentlichung bleiben separate Aktionen mit eigenen Berechtigungen und Prüfungen. Prüfen Sie die betroffene Seite auf PC, Tablet und Smartphone, untersuchen Sie die relevanten Dateiänderungen und verifizieren Sie den Kundenpfad, bevor Sie die Storefront veröffentlichen. ### Wie unterscheidet sich dies von einem allgemeinen KI-Website-Generator? Ein allgemeiner Generator beginnt häufig mit einem leeren Prompt und stellt die erste vollständige Website in den Mittelpunkt. Der Bearbeitungsablauf von Runner AI kann vom aktuellen Commerce-Projekt, einem ausgewählten Storefront-Element, dem umgebenden Quellkontext, Referenzbildern und verifizierten Shop-Fakten ausgehen. Die prüfbare Ausgabe umfasst geänderte Dateien und responsive Vorschauen. So lässt sich eine gezielte Überarbeitung kontrollieren, ohne Erzeugung, Speichern und Veröffentlichung als dasselbe Ereignis darzustellen. ## Bearbeiten Sie eine aktuelle Storefront mit prüfbarer Ausgabe Bringen Sie Ihre aktuelle Storefront, die genaue Seite oder das ausgewählte Element, verifizierte Katalog- und Markenfakten, ein optionales Referenzbild und die Kundenaktion mit, die erhalten bleiben muss. Bitten Sie Runner AI um die geänderten Quelldateien und Vorschauen für PC, Tablet und Smartphone, damit Sie das Ergebnis prüfen können, bevor Sie über die Veröffentlichung entscheiden. [Den KI-Website-Editor-Workflow in Runner AI öffnen](https://www.runnerai.com/de/auth/login?prompt=Nutze%20meine%20aktuelle%20Storefront%2C%20die%20von%20mir%20genannte%20Seite%20oder%20das%20ausgew%C3%A4hlte%20Element%2C%20meine%20verifizierten%20Katalog-%20und%20Markenfakten%20sowie%20ein%20optionales%20Referenzbild%20f%C3%BCr%20eine%20gezielte%20%C3%84nderung.%20Gib%20die%20ge%C3%A4nderten%20Quelldateien%20und%20Vorschauen%20f%C3%BCr%20PC%2C%20Tablet%20und%20Smartphone%20aus%2C%20damit%20ich%20den%20Kundenweg%20vor%20der%20Ver%C3%B6ffentlichung%20pr%C3%BCfen%20kann.) ## Verwandte Funktionen - [Eine autorisierte Referenz mit KI-Website-Klonen in Storefront-Code verwandeln](/de/ai-website-cloning) - [Ein Redesign der aktuellen E-Commerce-Website planen](/de/ecommerce-website-redesign) - [Alle Funktionen von Runner AI entdecken](/de)