Sie stellen das Designbild bereit und geben die Zielseite an. Die KI analysiert dann die visuelle Struktur, identifiziert die Elemente und deren Stile und ordnet das Design den GemPages-Elementen zu.
Falls Sie GemPages MCP noch nie verwendet haben, beginnen Sie mit diesen Anleitungen:
Bevor du anfängst
Stelle sicher das:
- GemCommerce MCP ist mit Ihrem KI-Tool verbunden.
- Ihr Shopify-Shop ist verbunden.
- Sie haben ein Referenzbild des Abschnitts, den Sie nachbilden möchten.
- Sie kennen den Namen oder die URL der Zielseite in GemPages.
Verwenden Sie ein klares Bild, das den gesamten Abschnitt zeigt. Wenn Sie mehrere Abschnitte nachbilden möchten, können Sie mehrere Bilder verwenden oder jeweils einen Abschnitt bearbeiten.
Wie die bildbasierte Seitengenerierung mit GemPages MCP funktioniert
GemPages MCP unterstützt die KI-gestützte Seitengenerierung aus HTML, Bildern und URLs.
Dieser Leitfaden konzentriert sich speziell auf die Verwendung eines Bild als Quelle.
Die Bildeingabe ist dann sinnvoll, wenn das Design bereits visuell existiert, aber noch nicht als HTML implementiert wurde.
Die Referenz könnte stammen von:
- Ein Screenshot
- Ein Design-Mockup
- Ein exportierter Rahmen
- Ein Kampagnenbild
- Ein bestehender Seitenabschnitt
GemPages MCP verwendet das Bild als visuelle Referenz und erstellt das Design mithilfe von editierbaren GemPages-Elementen nach.
Wie man Schritt für Schritt ein Design aus einem Bild erstellt
Schritt 1: Referenzbild anhängen
Fügen Sie das Designbild Ihrer Konversation bei.
Die Referenz könnte lauten:
- Ein Screenshot eines bestehenden Abschnitts
- Ein Design-Mockup
- Ein aus einem Designtool exportiertes Bild.
- Eine weitere visuelle Referenz, die Sie in GemPages nachbilden möchten.
Vermeiden Sie unscharfe, stark beschnittene Bilder oder Bilder mit nicht relevanten Browser-Steuerelementen. Die KI kann nur mit den in der Referenz enthaltenen visuellen Informationen arbeiten.
Bei einer langen Seite können Sie separate Bilder für einzelne Abschnitte bereitstellen und diese nacheinander neu erstellen.
Schritt 2: Geben Sie die Eingabeaufforderung ein
Nach dem Anhängen des Referenzbildes geben Sie bitte folgende Eingabeaufforderung ein:
Verwenden Sie GemCommerce MCP, um die visuelle Struktur zu beschreiben, die Ebenenstruktur und die Elementstile zu identifizieren, diese dann GemPages-Elementen zuzuordnen und den Abschnitt in [Seitenname oder URL] in GemPages einzubauen.
Ersetzen [Seitenname oder URL] mit der Zielseite.
Was die Aufforderung von der KI verlangt
Die Eingabeaufforderung enthält zwei Hauptanfragen.
Analysiere das Referenzbild
Im ersten Teil wird die KI aufgefordert, Folgendes zu untersuchen:
- Die visuelle Struktur
- Die Hierarchie der Elemente
- Die im Design verwendeten sichtbaren Stile
Je nach KI-Tool und Analyseergebnis kann die Antwort beispielsweise folgende Informationen enthalten:
- Visuelle Struktur
- Vorgeschlagene GemPages-Schichtenstruktur
- Sichtbare Gestaltungsdetails wie Typografie, Abstände, Farben oder Ausrichtung
Das genaue Format und der Detaillierungsgrad können variieren. Dies sind keine festen Ausgabestufen, die in jeder GemPages MCP-Aufgabe vorkommen.
Erstellen Sie den Abschnitt in GemPages.
Im zweiten Teil wird die KI aufgefordert:
- Ordnen Sie die identifizierten Teile des Designs den GemPages-Elementen zu.
- Erstellen Sie den Abschnitt auf der von Ihnen angegebenen Seite.
Wenn beide Anfragen in derselben Eingabeaufforderung enthalten sind, erhält die KI das Referenzbild, die beabsichtigte Interpretation und das Ziel für das Ergebnis.
Schritt 3: Lassen Sie GemPages MCP den Abschnitt erstellen
Nachdem Sie die Eingabeaufforderung abgeschickt haben, lassen Sie die KI das Bild analysieren und den Abschnitt bearbeiten.
Halten Sie die Konversation während des laufenden Prozesses aufrecht. Wenn die KI Sie auffordert, einen Aufruf des GemCommerce MCP-Tools zu genehmigen, überprüfen und genehmigen Sie diesen, damit der Workflow fortgesetzt werden kann.
Die KI kann auch weitere Informationen anfordern, wenn die Zielseite oder ein Teil des Designs unklar ist.
Schritt 4: Ergebnis in GemPages überprüfen
Sobald der Abschnitt erstellt wurde, öffnen Sie die Zielseite in GemPages und vergleichen Sie sie mit dem Referenzbild.
Prüfen Sie Folgendes:
- Layout und Elementreihenfolge
- Text- und Bildplatzierung
- Farben und Typografie
- Abstand und Ausrichtung
- Darstellung auf Desktop und Mobilgeräten
Ein Referenzbild enthält möglicherweise nicht alle Designdetails, wie z. B. den ursprünglichen Schriftnamen, die genauen Abmessungen oder die Einstellungen für responsives Design. Sie können die letzten Anpassungen direkt im GemPages-Editor vornehmen oder eine Folgeanweisung senden.
Schritt 5: Ergebnis verfeinern
Falls ein Teil des wiederhergestellten Abschnitts angepasst werden muss, fahren Sie im selben Gespräch fort und beschreiben Sie die erforderliche Änderung.
Beispielsweise:
Verwenden Sie das GemCommerce MCP, um den soeben erstellten Abschnitt zu aktualisieren. Verringern Sie den Abstand zwischen Überschrift und Absatz und vergrößern Sie das Bild. Der Rest der Seite bleibt unverändert.
Für eine Layoutänderung:
Verwenden Sie das GemCommerce MCP, um den neu erstellten Abschnitt zu aktualisieren. Platzieren Sie den Text auf dem Desktop links und das Bild rechts.
Für eine mobile Anpassung:
Verwenden Sie das GemCommerce MCP, um den neu erstellten Abschnitt zu aktualisieren. Platzieren Sie auf Mobilgeräten das Bild unter dem Text und zentrieren Sie die Schaltfläche.
Für eine Styling-Anpassung:
Verwenden Sie das GemCommerce MCP, um den neu erstellten Abschnitt zu aktualisieren. Passen Sie die Überschriftenstärke und den Schaltflächenstil an das Referenzbild an.
Vermeiden Sie allgemeine Anweisungen wie:
Sorge dafür, dass es besser aussieht.
Identifizieren Sie stattdessen das betreffende Element und erklären Sie, was geändert werden soll. Eine konkrete Nachfrage macht das gewünschte Ergebnis leichter verständlich.
Tipps für bessere Ergebnisse
- Verwenden Sie ein hochwertiges Referenzbild.
- Stellen Sie sicher, dass der gesamte Abschnitt sichtbar ist.
- Geben Sie die genaue Zielseite an.
- Geben Sie an, wo der Abschnitt eingefügt werden soll.
- Beim Bearbeiten einer langen Seite muss man jeweils einen Abschnitt neu erstellen.
- Stellen Sie die Originalbilder oder den genauen Text bei Bedarf separat zur Verfügung.
- Nutzen Sie Folgeaufforderungen für kleine Anpassungen, anstatt den gesamten Abschnitt neu zu erstellen.
GemPages MCP bietet Ihnen einen schnelleren Einstieg in die Neuerstellung eines Designs, wobei das Ergebnis weiterhin in GemPages bearbeitbar bleibt. Überprüfen Sie den fertigen Abschnitt vor der Veröffentlichung immer sorgfältig und nehmen Sie gegebenenfalls Anpassungen vor.
Vielen Dank für Ihre Kommentare