NEWS 03 · AISECRETS™ QUICKSTART GUIDE

ChatGPT Sites Tutorial: Von der Idee zur veröffentlichten Website

Dieser kompakte Einstieg zeigt dir das Wichtigste von Anfang an: wie du dein Ziel schärfst, ChatGPT ein belastbares Website-Briefing gibst, die Vorschau professionell prüfst und deine Site sicher veröffentlichst – auch ohne Programmierkenntnisse.

7 klare Schritte0 Code erforderlich1 Master-Prompt-Vorlage
01

DAS FUNDAMENT

Was ist ChatGPT Sites eigentlich?

ChatGPT Sites ist eine Funktion, mit der du in ChatGPT interaktive Websites und kleinere Webanwendungen erstellen, als Vorschau kontrollieren, veröffentlichen und teilen kannst. Statt zuerst Dateien, Komponenten oder Programmiersprachen zu planen, beschreibst du in natürlicher Sprache, was entstehen soll. ChatGPT setzt diese Anforderungen in eine funktionierende Site um und zeigt dir das Ergebnis direkt zur Prüfung.

Der entscheidende Punkt: Eine gute Site entsteht nicht allein durch den Satz „Erstelle eine Website“. ChatGPT kann nur dann gezielt arbeiten, wenn Ziel, Zielgruppe, Inhalte, Gestaltung und gewünschte Handlung klar beschrieben sind. Genau deshalb ist ein strukturierter Master-Prompt so wertvoll. Er übernimmt die Rolle eines digitalen Briefings für Strategie, Text, Design, Funktionen und Qualitätssicherung.

Das Zauberwort lautet Kontext.Je genauer ChatGPT versteht, für wen die Website arbeitet und welches Ergebnis sie erreichen soll, desto weniger Zufall steckt im ersten Entwurf.
02

VOR DEM ERSTEN PROMPT

Definiere zuerst Ziel, Zielgruppe und Material

Beginne mit einer einzigen geschäftlichen Hauptfrage: Was soll ein Besucher nach dem Lesen tun? Ein Produkt kaufen, einen Termin vereinbaren, eine Anfrage senden, sich registrieren oder einen Inhalt verstehen? Diese eine Handlung wird zur primären Conversion. Danach formulierst du die Zielgruppe so konkret wie möglich: Vorwissen, wichtigstes Problem, gewünschtes Ergebnis und typische Einwände.

Sammle anschließend alle verfügbaren Materialien. Dazu gehören Logo, Produktbilder, Texte, Links, Preise, Kontaktdaten, Markenfarben, gewünschte Schriftwirkung und echte Referenzen. Dateien, Daten und Links können dem Auftrag als Kontext mitgegeben werden. Wenn etwas noch fehlt, kennzeichne es als Platzhalter. So verhinderst du, dass eine überzeugend klingende, aber falsche Angabe unbemerkt in die veröffentlichte Version gelangt.

01Ziel und Zielgruppe festlegen02Inhalte und Designvorgaben sammeln
03

DER SCHNELLSTART

So startest du deine erste ChatGPT Site

Öffne ChatGPT im Web und wechsle in den Arbeitsbereich, in dem Websites erstellt werden können – je nach Oberfläche über Work oder Codex. Schreibe ausdrücklich, dass du eine Website erstellen möchtest, oder erwähne @Sites in deiner Anfrage. Beschreibe dann nicht nur das Thema, sondern das vollständige Ergebnis: Seitentyp, Nutzer, Ziel, benötigte Sektionen, Inhalte, visuelle Richtung und Funktionen.

Für eine Verkaufslandingpage könnten die Sektionen zum Beispiel aus Hero, Problem, Lösung, Vorteilen, Leistungsumfang, Referenzen, FAQ und Abschluss-CTA bestehen. Für ein Portal oder Tool brauchst du zusätzlich Zustände, Eingabefelder, Interaktionen und eine klare Beschreibung des Nutzerflusses. ChatGPT erstellt daraufhin eine erste Version, die du in der Vorschau öffnen und Schritt für Schritt verfeinern kannst.

04

COPY & ADAPT

Deine Master-Prompt-Vorlage

Kopiere die Vorlage, ersetze die eckigen Klammern und ergänze echte Inhalte. Sie ist bewusst kompakt, enthält aber alle Kernentscheidungen für einen belastbaren ersten Entwurf.

MASTER-PROMPT.txt
Erstelle mit @Sites eine responsive [Seitentyp]-Website für [Zielgruppe]. HAUPTZIEL Die wichtigste Handlung ist: [z. B. Produkt kaufen oder Termin buchen]. ANGEBOT & NUTZEN [Was wird angeboten? Welches Problem wird gelöst? Was ist das konkrete Ergebnis?] STRUKTUR Erstelle diese Sektionen: [Hero, Problem, Lösung, Vorteile, Umfang, Referenzen, FAQ, Abschluss-CTA]. DESIGN Wirkung: [z. B. hochwertig, technologisch, klar]. Farben: [Hexwerte oder Referenzbild]. Nutze klare Hierarchien, starke Kontraste und eine sehr gute Mobilansicht. INHALTE & LINKS Verwende ausschließlich diese Fakten: [Inhalte einfügen]. Verlinke den Hauptbutton auf: [URL]. Fehlende Angaben als sichtbare Platzhalter markieren – nichts erfinden. QUALITÄTSCHECK Prüfe vor Abschluss Navigation, Links, mobile Darstellung, Lesbarkeit, Barrierearmut, Rechtschreibung und eine eindeutige CTA-Führung.
05

VORSCHAU & REPAIR

Prüfe die Site wie ein echter Besucher

Öffne die Vorschau und beantworte zuerst drei Fragen: Verstehe ich innerhalb weniger Sekunden, worum es geht? Erkenne ich den wichtigsten Nutzen? Ist die nächste Handlung eindeutig? Prüfe danach Navigation, alle Buttons, Texte, Bilder, Abstände und die Darstellung auf einem schmalen Bildschirm. Lange Überschriften, breite Tabellen oder starre Kartenraster sind typische mobile Schwachstellen.

Änderungen funktionieren am besten als kleine, präzise Reparaturaufträge. Nenne den betroffenen Bereich, beschreibe das sichtbare Problem, definiere das gewünschte Ergebnis und füge eine Schutzklausel hinzu. Ein guter Repair-Prompt lautet zum Beispiel: „Verkleinere ausschließlich die Hero-Überschrift auf Mobilgeräten, sodass sie maximal vier Zeilen benötigt. Inhalt, Desktop-Darstellung, CTA und Hintergrundanimation bleiben unverändert.“ So sinkt das Risiko, dass bereits funktionierende Elemente versehentlich neu gebaut werden.

SEKTION+PROBLEM+ZIEL+SCHUTZKLAUSEL
06

GO LIVE

Veröffentlichen, Zugriff prüfen und teilen

Wenn Inhalt und Funktionen stimmen, kannst du die Site veröffentlichen. Wichtig zu wissen: Eine bereitgestellte URL ist eine echte Produktionsadresse und kein folgenloser Testlink. Kontrolliere deshalb vor jedem neuen Stand noch einmal sensible Inhalte, Fakten, Formulare und externe Verknüpfungen. Prüfe auch, wer die Site öffnen darf. Welche Freigabeoptionen verfügbar sind, kann vom verwendeten Tarif und Workspace abhängen.

Falls deine Umgebung eigene Domains unterstützt, kannst du eine Domain verbinden, die dir gehört. Dafür sind normalerweise Änderungen an den DNS-Einstellungen beim Domainanbieter nötig. Für den ersten Start reicht jedoch die bereitgestellte Adresse: Teile sie mit wenigen Testpersonen, sammle konkrete Rückmeldungen und verbessere anschließend nur die Punkte, die Verständnis, Vertrauen oder Conversion tatsächlich beeinflussen.

Offizielle OpenAI-Hilfe zu ChatGPT Sites öffnen
07

REALITY CHECK

Die 7 häufigsten Anfängerfehler

01Zu allgemein starten+

„Mach mir eine schöne Website“ lässt Zielgruppe, Angebot, Stil und Hauptaktion offen. Das Ergebnis kann nett aussehen, aber am Geschäftsziel vorbeigehen.

02Zu viele Ziele gleichzeitig+

Verkaufen, Newsletter, Terminbuchung und Community sollten nicht alle dieselbe Priorität erhalten. Lege eine primäre Handlung fest.

03Platzhalter übersehen+

Prüfe Preise, Kontaktdaten, Links, Referenzen und rechtliche Angaben. KI-generierte Entwürfe ersetzen keine Faktenkontrolle.

04Vage Korrekturen geben+

„Mach es besser“ ist kein belastbarer Reparaturauftrag. Benenne Sektion, Problem, Ziel und Elemente, die unverändert bleiben sollen.

05Nur am Desktop prüfen+

Navigation, Textlänge, Tabellen, Buttons und Abstände müssen auch auf schmalen Bildschirmen funktionieren.

06Ohne Linktest veröffentlichen+

Jeder CTA, externe Link und Sprunganker sollte vor dem Teilen einmal tatsächlich angeklickt werden.

07Zugriffsrechte vergessen+

Kontrolliere beim Veröffentlichen, wer die Site öffnen darf. Die verfügbaren Optionen können von Tarif und Workspace abhängen.

08

DEIN 15-MINUTEN-CHECK

Vor dem Veröffentlichen einmal abhaken

Die Hero-Zone erklärt Angebot, Zielgruppe und Nutzen sofort.

Es gibt eine klar priorisierte Hauptaktion.

Alle Preise, Namen, Zahlen und Aussagen sind geprüft.

Navigation, Buttons, Sprunganker und externe Links funktionieren.

Die Seite ist auf Smartphone und Desktop gut lesbar.

Bilder haben sinnvolle Alternativtexte und Texte genügend Kontrast.

Kontakt, Datenschutz und rechtliche Pflichtangaben sind berücksichtigt.

Die gewählte Freigabe entspricht der gewünschten Zielgruppe.

VOM BRIEFING ZUM SYSTEM

Du willst nicht jedes Detail selbst zusammensetzen?

Der AISECRETS™ Quantum Sites Architect führt dich durch die richtigen Fragen und erstellt daraus deinen individuellen ChatGPT-Sites-Master-Prompt – inklusive Design-DNA, Conversion, SEO, Repair-System und Qualitätsaudit.

Quantum Sites Architect ansehen Zur Landingpage