
Webseiten mit AI Studio erstellen
Erstellen Sie eine Landingpage, einen Einseiter, eine Produktdetailseite oder eine Social-Vorschau, testen Sie das Live-Ergebnis und legen Sie fest, wer es öffnen kann.
Ein Dokument kann eine Landingpage beschreiben. Ein Bild kann einen einzelnen Zustand zeigen. Beides verrät den Prüfenden jedoch nicht, was beim Öffnen der Seite geschieht, wie die Hierarchie auf einem Smartphone wirkt oder ob die Handlungsaufforderung nach dem ersten Scrollen noch eindeutig ist.
Wählen Sie Webseite, wenn das Seitenerlebnis selbst der Entwurf ist. AI Studio erstellt ein Live-Vorschauobjekt auf dem Canvas. So können Sie die Seite öffnen, testen, neben ihrem Quellmaterial prüfen und bei Bedarf als eigenständige Vorschau teilen.
Kurzfassung
Öffnen Sie ein bearbeitbares Canvas, wählen Sie Webseite und markieren Sie die Quellobjekte, die für die Seite verwendet werden sollen. Wählen Sie einen Stil, nennen Sie Zielgruppe, Zweck, Abschnitte und Hauptaktion im Prompt und wählen Sie anschließend Senden. Öffnen Sie die Vorschau, testen Sie Desktop- und Mobilansicht und prüfen Sie jede Aussage und jeden Link. Wenn Personen außerhalb des Canvas die Seite öffnen sollen, kann die für die Seite verantwortliche Person Vorschau teilen öffnen, Öffentlicher Link aktivieren und Link kopieren wählen.
Wählen Sie eine Webseite für ein prüfbares Seitenerlebnis
AI Studio-Webseiten eignen sich für Prototypen, Kundenprüfungen, Kampagnenkonzepte, interaktive Einseiter und andere Arbeiten, die geöffnet und nicht nur beschrieben werden sollen.
| Was Sie benötigen | Wahl | Warum |
|---|---|---|
| Bearbeitbarer Text, Recherche oder strukturiertes Briefing | Dokument | Der Text ist das Ergebnis. |
| Vergleich, Statusübersicht oder Datenraster | Tabelle | Zeilen und Spalten bestimmen die Logik. |
| Einzelnes Schlüsselbild oder statische Komposition | Bild | Ein Zustand reicht aus, um die Idee zu prüfen. |
| Erzählter Status oder Geschichte | Audiodatei | Das Anhören ist Teil der Übergabe. |
| Seite, die andere öffnen, scrollen, anklicken und testen sollen | Webseite | Layout und Interaktion gehören zum Ergebnis. |
Eine generierte Seite ist ein Vorschauartefakt, kein Hosting-Dienst für Ihre Produktionswebsite und kein Content-Management-System. Verwenden Sie sie, um die Richtung der Seite festzulegen und Feedback einzuholen. Überführen Sie freigegebene Texte, Medien, Tracking, Formulare, Rechtstexte und Produktionsintegrationen in das System, das die endgültige Website verwaltet.
Prüfen Sie den Zugriff, bevor Sie beginnen
| Element | Details |
|---|---|
| Verfügbar auf | Bearbeitbaren, nicht eingebetteten Canvases in der Web- und Desktop-App. |
| Wer generieren kann | Workspace-Mitglieder mit Bearbeitungszugriff auf das Canvas. |
| Wer die Canvas-Vorschau öffnen kann | Personen, die das fertige Canvas-Objekt öffnen dürfen. |
| Wer einen öffentlichen Vorschaulink erstellen kann | Die für die generierte Seitensitzung verantwortliche Person. |
| Was die Aufgabe startet | Erfolgreiche Prüfung des AI-Guthabens im Workspace beim Absenden. |
| Was das Ergebnis wird | Ein Live-Webseiten-Vorschauobjekt auf dem aktuellen Canvas. |
Gäste, externe Projektpartner und Personen mit reinem Lese- oder Kommentierungszugriff können keine neue Seite generieren. Sie können das fertige Objekt prüfen, sofern ihr Canvas-Zugriff dies erlaubt.
Erstellen Sie die Seite aus dem Canvas
- Öffnen Sie das Canvas, auf dem Briefing, Referenzen und generierte Seite abgelegt werden sollen.
- Wählen Sie Notizen, Bilder, Dateien, Tabellen oder frühere Ergebnisse aus, auf denen die Seite basieren soll.
- Wählen Sie in AI Studio die Option Webseite.
- Wählen Sie einen Stil.
- Schreiben Sie den Prompt. Nennen Sie Zielgruppe, Seitenziel, Hauptaktion, erforderliche Abschnitte, Quelleneinschränkungen und gegebenenfalls die vorrangige Geräteart oder Plattform.
- Hängen Sie Dateien an oder fügen Sie HTTPS-Links ein, wenn die Quelle noch nicht auf dem Canvas liegt. Warten Sie, bis alle Uploads abgeschlossen sind.
- Wählen Sie Senden. Ein Webseitenobjekt zeigt den Generierungsstatus, während AI Studio recherchiert, die Richtung festlegt und die Seite erstellt.
- Öffnen Sie die Vorschau, sobald das Objekt bereit ist.
Dieser Ablauf zeigt, wie ausgewähltes Canvas-Material zu einer Webseite wird und wie das fertige Ergebnis anschließend zur Prüfung und Freigabe geöffnet wird.
Das Ergebnis bleibt als Karte mit Titel, Beschreibung, Vorschaubild und Verbindung zur Vorschau auf dem Canvas. Lassen Sie es während der Prüfung neben Briefing und Referenzen liegen. So bleiben die Belege der Seite sichtbar und der Vorschaulink wird nicht zu einem zusammenhanglosen Einzelstück.
Wählen Sie den Stil passend zur Seitenaufgabe
| Stil | Geeignet, wenn | Ausrichtung der Seite |
|---|---|---|
| Auto | Das Ziel feststeht, Sie das Format aber nicht vorgeben müssen. | AI Studio wählt die Seitengestaltung anhand von Prompt und Quelle. |
| Landingpage | Neue Besucher das Angebot verstehen und eine Hauptaktion ausführen sollen. | Hero-Bereich, Nutzenversprechen, Belege oder Vertrauenssignale, Abschnittsfolge und klare Handlungsaufforderungen. |
| Einseiter | Briefing, Vorschlag, Launch-Zusammenfassung oder Status für Führungskräfte auf eine kompakte Seite passen soll. | Gut überfliegbare Abschnitte, starke Hierarchie, wesentliche Fakten und wenig erzählerische Umwege. |
| Produktdetail | Ein Produktkonzept mit Blick auf den Kauf geprüft werden soll. | Produktmedien, Titel und Preis, Varianten, Hinweise zu Versand und Rückgabe, Belege sowie klare Hierarchie für Warenkorb oder Kauf. |
| Social-Vorschau | Ein Kampagnenbeitrag so aussehen soll wie auf der Zielplattform. | Realistisches, mobil ausgerichtetes Beitragsmodell mit erkennbarem Konto, Medium, Aktion, Bildunterschrift und Zeitangaben. |
Wenn der Prompt eine einzelne Social-Media-Plattform nennt, bleibt die Social-Vorschau auf diese Plattform beschränkt. Bitten Sie nur dann um einen plattformübergreifenden Vergleich, wenn Sie tatsächlich mehrere Plattformdarstellungen in einem Ergebnis benötigen.
Wählen Sie nicht für jede ausgereifte Seite Landingpage. Ein Status mit fünf Abschnitten ist meist ein Einseiter. Ein Produkt-Launch mit Galerie, Optionen, Versandinformationen und Kaufbelegen ist Produktdetail. Die richtige Unterscheidung erspart eine Runde, in der unnötige Abschnitte entfernt werden müssen.
Geben Sie der Seite ein echtes Briefing
Der Seitengenerator kann ausgewählte Canvas-Bilder, hochgeladene Bilder, Dateien, PDFs, Audio- oder Videokontext, Tabellen und Textobjekte sowie erreichbare Weblinks verwenden. Bilder dienen als visuelle Referenzen. Dokumente, Transkripte, Tabellen und Seitentexte werden als Quellmaterial für Planung und Text genutzt.
| Eingabe | Geeignet für |
|---|---|
| Ausgewählte Canvas-Objekte | Die generierte Seite mit Briefing, freigegebenem Text, Tabellen und visuellen Referenzen verbinden, die bereits geprüft werden. |
| Angehängte Bilder | Produktfotos, Kampagnenmaterial, Logos oder Layout-Referenzen bereitstellen, die noch nicht auf dem Canvas liegen. |
| Angehängte Dokumente und Medien | Fakten, Spezifikationen, Interviewmaterial, Transkripte oder ein vorhandenes Briefing bereitstellen. |
| HTTPS-Links | Öffentliche Quellseiten und Referenzmaterial hinzufügen, das der Dienst erreichen kann. |
| Prompt | Zielgruppe, Aufgabe der Seite, Reihenfolge der Botschaften, Handlungsaufforderungen, verbindliche Fakten und Grenzen festlegen. |
Der stärkste Prompt liest sich wie ein kurzes Kreativbriefing:
Erstelle eine Produktdetailseite für das ausgewählte Hautpflegekonzept. Verwende das ausgewählte Produktbild als Hauptmotiv. Zielgruppe: Erstkäufer mit empfindlicher Haut. Füge Vorteile, Inhaltsstoffe, Anwendung, Versand und Rückgabe, drei Platzhalter für Bewertungen und eine Aktion „In den Warenkorb“ ein. Lass den angegebenen Preis und die Aussagen unverändert. Erfinde keine Zertifizierungen.
Dieser Prompt trennt Layoutentscheidungen von der Erlaubnis zu Fakten. Die Seite kann starke visuelle Entscheidungen treffen und bleibt zugleich innerhalb der bereitgestellten Belege.
So funktioniert das Live-Vorschauobjekt
Das generierte Objekt ist kein gewöhnlicher eingefügter Website-Link. Über Vorschau wird die generierte Seite in einem eigenen Viewer geöffnet. Der Viewer hält die Seite mit ihren generierten Versionen verbunden und bietet Desktop-, Mobil- und Codeansicht zur Prüfung.
Beantworten Sie in der Vorschau vier Fragen:
- Erklärt der erste Bildschirm die Seite, ohne auf das danebenliegende Briefing angewiesen zu sein?
- Bleibt die Hauptaktion nach dem ersten Scrollen eindeutig?
- Bewahrt die Mobilansicht die Hierarchie, statt sie nur zu verkleinern?
- Verhalten sich Links, Steuerelemente, Medien und interaktive Abschnitte so, wie es der Text verspricht?
Die Seite kann externe Bilder, Schriftarten, Skripte, Videos und andere HTTPS-Ressourcen laden. Diese Ressourcen können blockiert, entfernt oder von ihren Verantwortlichen verändert werden. Eine davon abhängige Vorschau muss vor einer Kundenprüfung erneut getestet werden. Ersetzen Sie instabile externe Ressourcen in der Produktionsumsetzung.
Prüfen Sie die Seite, bevor jemand den Link erhält
Öffnen Sie die Seite selbst und prüfen Sie Folgendes:
| Prüfung | Worauf Sie achten sollten |
|---|---|
| Botschaft | Nutzenversprechen, Zielgruppe und Hauptaktion entsprechen dem Briefing. |
| Fakten | Namen, Preise, Datumsangaben, Spezifikationen, Aussagen und Referenzen entsprechen der Quelle. |
| Desktop und Mobil | Abschnitte bleiben in beiden Breiten lesbar, sinnvoll geordnet und bedienbar. |
| Links und Steuerelemente | Jede sichtbare Aktion führt zum richtigen Ziel oder ist eindeutig als Prototyp gekennzeichnet. |
| Medien | Bilder werden geladen, Ausschnitte sind sinnvoll und keine privaten oder unrechtmäßig verwendeten Quellen sind in die Seite gelangt. |
| Seitenmetadaten | Titel, Beschreibung und Canvas-Vorschaubild kennzeichnen die richtige Version. |
| Sensible Inhalte | Interne Notizen, Kundendaten, juristische Entwürfe und unbelegte Versprechen wurden entfernt. |
Verwenden Sie Kommentare am Canvas-Objekt für Entscheidungen durch Personen. Verwenden Sie den AI-Einstiegspunkt der Seite für eine gezielte Überarbeitung oder Prüfung. Auch eine fertig wirkende Vorschau braucht eine verantwortliche Person, die ihre Aussagen freigibt.
Teilen Sie die Vorschau mit der richtigen Zielgruppe
Nur die für die Seite verantwortliche Person kann ihren öffentlichen Vorschaulink steuern.
- Öffnen Sie die Vorschau der generierten Seite.
- Wählen Sie Vorschau teilen.
- Aktivieren Sie Öffentlicher Link, wenn jede Person mit dem Link die Vorschau öffnen können soll.
- Wählen Sie Link kopieren und versenden Sie ihn erst, nachdem die Seite geprüft wurde.
Wenn Öffentlicher Link deaktiviert ist, können nur Personen mit Canvas-Zugriff die Vorschau öffnen. Wenn er aktiviert ist, kann jede Person mit dem Link die zuletzt veröffentlichte Vorschau öffnen. Wenn Sie den öffentlichen Zugriff deaktivieren, ist ein künftiges öffentliches Öffnen nicht mehr möglich. Bereits erhaltene Kopien, Screenshots oder Informationen werden dadurch nicht gelöscht.
Wenn Prüfende auch den Quellkontext benötigen, teilen Sie das Canvas, statt nur die Vorschau zu senden. Eine öffentliche Vorschau zeigt das Ergebnis. Das Canvas zeigt, warum es existiert.
Lassen Sie die Erstellung abschließen, bevor Sie es erneut versuchen
Die Generierung einer Webseite dauert länger als die eines kurzen Dokuments, da Quellen vorbereitet, das Seitenerlebnis geplant, visuelle Elemente erstellt oder ausgewählt, die Seite gebaut und die Vorschau gespeichert werden. Das Objekt in Verarbeitung zeigt den aktuellen Aufgabenstatus.
Sie können das Canvas verlassen, nachdem die Anfrage angenommen wurde. Kehren Sie zum selben Objekt zurück, statt eine doppelte Anfrage zu senden. Das Löschen des Objekts in Verarbeitung bricht die Canvas-Aufgabe ab, garantiert aber nicht, dass bereits geleistete Arbeit nicht berechnet wird. Das Löschen einer fertigen Seite erstattet nie Guthaben.
Die Kosten einer Webseite sind keine feste Zahl, die unter Stil angezeigt wird. Der Guthabenverbrauch richtet sich nach dem Quellmaterial und der zur Erstellung des Ergebnisses ausgeführten Arbeit. Prüfen Sie nach der Generierung den Verlauf des AI-Guthabens und überarbeiten Sie eine fast fertige Seite, statt sie wegen einer kleinen Textänderung neu zu erstellen.
Wenn die Vorschau nicht wie erwartet funktioniert
Die Karte wird noch verarbeitet. Lassen Sie das ursprüngliche Objekt bestehen und kehren Sie später zurück. Laden Sie das Canvas einmal neu, bevor Sie von einem festhängenden Vorgang ausgehen.
Die Vorschau fehlt. Die Generierung ist noch ausstehend, fehlgeschlagen, gelöscht oder wurde nicht als vorschaufähiges Ergebnis abgeschlossen. Erstellen Sie keine doppelte Anfrage, bevor Sie das ursprüngliche Objekt und den Guthabenstatus geprüft haben.
Die Vorschau funktioniert, aber die Karte hat einen allgemeinen Titel oder ein allgemeines Vorschaubild. Laden Sie das Canvas neu. Wenn Titel, Beschreibung oder Vorschaubild weiterhin falsch sind, kontaktieren Sie den Support mit Canvas-Link, Ausgabetyp und ungefährer Uhrzeit der Fertigstellung.
Ein Link, Bild, eine Schriftart oder ein interaktiver Abschnitt funktioniert nicht. Prüfen Sie, ob die externe Quelle direkt noch geladen wird und ob sie eine Anmeldung erfordert. Ersetzen Sie private oder instabile Ressourcen und speichern Sie dann eine neue Version oder generieren Sie aus erreichbarem Quellmaterial neu.
Die Seite hat das falsche Format. Wählen Sie den genauen Stil und nennen Sie die erforderlichen Bestandteile im Prompt. Eine Produktdetailseite sollte beispielsweise Galerie, Varianten, Preis, Versand, Belege und Kaufaktion nennen.
Der öffentliche Link lässt sich außerhalb des Canvas nicht öffnen. Die für die Seite verantwortliche Person muss Öffentlicher Link aktivieren. Das Kopieren der URL ändert die Zugriffsrichtlinie nicht.
Die Seite enthält unbelegte Aussagen. Korrigieren Sie Quelle und Prompt und bearbeiten oder generieren Sie die Seite anschließend einmal neu. Eine überzeugende Vorschau ist kein Beleg. Siehe Wenn ein AI-Ergebnis nicht zufriedenstellend ist.
Die Seite bleibt nach dem Neuladen hängen. Kontaktieren Sie den Support mit Workspace-Name, Canvas-Link, Ausgabetyp, ungefährer Uhrzeit des Absendens, Zusammenfassung des Prompts, Arten der Anhänge sowie der Angabe, ob Guthaben blockiert oder verbraucht wurde. Senden Sie keine Passwörter, privaten Zugangsdaten oder unnötigen Kundendaten.
Verwandte Guides
- AI Studio nutzen
- Bilder mit AI Studio erstellen
- Dokumente mit AI Studio erstellen
- AI-Ergebnisse überprüfen und Webseiten freigeben
- AI-Guthaben verstehen
- Wenn ein AI-Ergebnis nicht zufriedenstellend ist