ChatGPT kann auf zwei grundlegend unterschiedliche Weisen als Website-Builder fungieren: Entweder generiert es im Dialogmodus den vollständigen Code (HTML, CSS und Vanilla JavaScript), den Sie selbst auf einem gewählten Hosting bereitstellen, oder es erstellt und veröffentlicht die Seite direkt über die Cloud-Plattform ChatGPT Sites.

Die erste Methode funktioniert mit jedem Tarif (einschließlich Free) und gewährleistet 100 % Eigentumsrechte am Code. Die zweite Methode ist ausschließlich kostenpflichtigen Abonnements vorbehalten und weist eine Reihe strikter technischer sowie rechtlicher Einschränkungen auf, die vorab bekannt sein müssen.

1. Ansätze zur Erstellung von Websites mit ChatGPT

Die Wahl des Ansatzes bestimmt die Deployment-Tools, die Abonnementkosten und die Kontrolle über die fertige Ressource.

1.1. Codegenerierung im Chat vs. Hosting in ChatGPT Sites

Methode 1: Codegenerierung im Dialog. Sie übergeben einen strukturierten Brief, ChatGPT generiert eine einzelne oder modulare Datei mit dem Code, Sie prüfen das Ergebnis lokal im Browser, nehmen iterative Änderungen vor und laden die Seite auf GitHub Pages, Cloudflare Pages oder Netlify hoch. Dies funktioniert bei allen Tarifen, und die finalen Dateien gehören vollständig Ihnen.
Methode 2: ChatGPT Sites. Eine integrierte Umgebung innerhalb von ChatGPT Work, die nicht nur das Layout generiert, sondern dieses auch automatisch auf der OpenAI-Cloud-Infrastruktur hostet. Verfügbar nur bei kostenpflichtigen Abos (ohne Free und Go), mit geografischen Einschränkungen (zum Start nicht verfügbar im EWR, in der Schweiz und Großbritannien) und einem Verbot jeglicher kommerzieller Aktivitäten.

Hinweis

Wichtige Nuance: ChatGPT ist ein textbasierter Dialog, kein visuelles Canvas. Ein klassischer No-Code-Builder (Webflow, Framer) zeigt Änderungen am Layout sofort in Echtzeit an. Bei ChatGPT steuern Sie das Markup über Textanweisungen, daher hängt das Endergebnis nahezu zu 100 % von der Struktur und Präzision Ihrer Prompts ab.

1.2. Auswahl der optimalen Methode für Projektziele

Codegenerierung im Chat (Methode 1) ist die beste Wahl für Landingpages, Portfolio-Seiten von Spezialisten, Visitenkarten lokaler Unternehmen, Promo-Seiten für Events und Blogs. Der Code ist nicht an das OpenAI-Ökosystem gebunden und lässt sich leicht auf jeden Server oder CDN migrieren.
ChatGPT Sites (Methode 2) wurde primär für interne Unternehmensbedürfnisse entwickelt: analytische Dashboards, Sprint-Tracker, schnelle interaktive Prototypen und Utilities für Teams, die bereits in das ChatGPT-Work-Ökosystem integriert sind.

2. Schritt-für-Schritt-Prozess zur Website-Generierung im ChatGPT-Chat

Diese Methode ist der universelle Standard für KI-gestützte Webentwicklung. Sie funktioniert mit Free, Plus, Team, Enterprise und Pro und nutzt die natürlichen Stärken von LLMs: fehlerfreies Schreiben von semantischem Code und Copywriting nach strengen Spezifikationen.

2.1. Schritt 1: Strukturiertes Brief-Prompt

Beginnen Sie den Dialog nicht mit vagen Anfragen wie „Erstelle mir eine schöne Website“. Ein professioneller Brief muss sechs Schlüsselparameter festhalten: Kern des Geschäfts, Zielgruppenprofil, einzige Conversion-Aktion (CTA), Reihenfolge der Blöcke, stilistische Konzeption und technische Einschränkungen.

text

Act as a senior web designer and front-end engineer. I need a modern one-page website for [business name], a [business type] located in [city]. Audience: [who visits the site and what specific problem they need to solve]. Primary CTA action: [call now / book a consultation / request a quote / email]. Required Sections in order: 1. Hero section with strong conversion headline, concise value proposition, and prominent CTA button. 2. Services section (3 interactive cards with icons and key benefits). 3. About section focusing on trust, credentials, and experience. 4. Social proof / Testimonials (3 authentic reviews with client names and roles). 5. Contact section with clickable phone number, email, interactive address, and working working contact form. Design Style: [clean and minimal / warm and welcoming / bold and high-tech]. Color Palette: [specific hex codes, or "curate a balanced accessible palette with dark charcoal background, off-white text, and an energetic accent"]. Typography: pairing from Google Fonts suitable for headings and body copy. Technical Requirements: - A single clean index.html file with embedded internal CSS (<style>) and vanilla JavaScript (<script>). - Strictly mobile-first responsive grid layout. - Valid semantic HTML5 tags (<header>, <main>, <section>, <article>, <footer>). - Zero frameworks, zero build steps, zero external npm dependencies except Google Fonts. - Fully accessible (WCAG AA compliant contrast, aria attributes, proper heading hierarchy). - Include comprehensive SEO meta tags (title under 60 chars, description under 155 chars, Open Graph tags). Output the complete, production-ready file without abbreviations or placeholders.

Jeder Parameter in eckigen Klammern ist eine strategische Geschäftsentscheidung. Je konkreter die Eingangsdaten (z. B. „Notfall-Sanitäter in Kiew, Besucher braucht einen Techniker-Einsatz innerhalb von 15 Minuten“), desto hochwertiger und weniger schablonenhaft wird der generierte Code.

2.2. Schritt 2: Genehmigung der Struktur vor der Codegenerierung

Für Projekte mit mehr als 2–3 Screens sollten Sie zwingend einen Zwischenkontrollpunkt einrichten. Die Abstimmung der Textstruktur dauert 30 Sekunden, während das Korrigieren der Seitenarchitektur nach der Generierung von 500 Zeilen HTML einen kompletten Neustart erfordert.

text

Before writing any code, propose a detailed structural outline for the webpage. List every section sequentially. For each section, provide: 1. Proposed section ID and primary headline. 2. Content components and interactive elements. 3. Psychological intent: how this specific block moves the visitor closer to taking the primary action [primary CTA]. 4. Any potential UX conflicts or gaps identified in my initial brief. Do not write HTML/CSS yet. Wait for my explicit approval or revisions before proceeding to code generation.

Prüfen Sie den vorgeschlagenen Plan sorgfältig: Befindet sich der Garantieblock vor dem Bestellformular? Wurde der Preisblock nicht vergessen? Ist die Argumentation logisch aufgebaut?

2.3. Schritt 3: Codegenerierung und Testen im Browser

Nach Erhalt Ihrer Bestätigung erstellt ChatGPT den vollständigen Seiten-Code. Speichern Sie den generierten Text in einer Datei index.html und öffnen Sie diese im Browser (Chrome, Safari oder Firefox).

Tipp

ChatGPT sieht die grafische Oberfläche der Seite nicht direkt. Das Rendering-Engine und der Tester sind Sie selbst. Öffnen Sie die Entwicklerwerkzeuge (DevTools -> F12 oder Cmd+Option+I) und überprüfen Sie unbedingt das Verhalten der Website im mobilen Modus (Breite 375–390px), bevor Sie zum Release übergehen.

2.4. Schritt 4: Umschreiben und Feinschliff des Copywritings

Der standardmäßig von KI generierte Text leidet oft unter bürokratischen Phrasen und pseudo-informellem „Wasser“ wie: „Willkommen! Wir bieten fortschrittliche Lösungen für Ihren Erfolg.“ Führen Sie einen zweiten Durchgang durch, der Klischees kategorisch verbietet:

text

Rewrite all marketing copy for this website. Business name: [name]. Core service: [what you do] for [target audience]. Brand Voice: [direct, confident, transparent, professional without jargon]. Strict Copywriting Guidelines: 1. Hero Headline: under 10 words, focusing strictly on the visitor's tangible outcome, not internal processes. 2. Hero Subheadline: answers "What is this and who is it for?" in exactly one clear sentence. 3. Section Titles: must be descriptive and outcome-driven (e.g., "Emergency Repairs in Under 30 Minutes"), never generic (never "Our Services" or "About Us"). 4. CTA Button Text: action-oriented and specific (e.g., "Calculate Repair Cost"), never vague ("Submit", "Learn More", "Click Here"). 5. Strictly banned words and buzzwords: "solutions", "seamless", "cutting-edge", "passionate", "elevate", "game-changer", "world-class", "innovative". First, provide 3 punchy headline alternatives. Once I select the winning variant, output the finalized copy blocks for each section.

2.5. Schritt 5: Design-Optimierung nach messbaren Regeln

Vages Feedback („mach es moderner und heller“) führt zu chaotischen Layout-Änderungen. Ein effektiver Design-Prompt operiert mit präzisen digitalen Größen: vertikale Abstände, Schriftgrößen, Kontrastwerte und Grids.

text

Refine the CSS styling of this webpage without altering the approved copy or section hierarchy: 1. Layout & Whitespace: - Section vertical padding: minimum 96px top/bottom on desktop (>1024px), 48px on mobile (<768px). - Maximum content container width: 1200px centered with automatic margins and 24px horizontal gutter. 2. Color Palette & Restraint: - Strict 60-30-10 palette rule: 60% dominant background, 30% structural neutral, 10% high-contrast brand accent [hex code]. - Eliminate unnecessary background card borders; replace with subtle 1px border (#e5e7eb or rgba(255,255,255,0.08)) or soft shadow. 3. Typography Scale: - Base body text: 18px with 1.65 line-height for optimal readability. - Distinct heading hierarchy with negative letter-spacing (-0.02em) on H1 and H2. 4. UI Hierarchy: - Exactly ONE primary button style across the page. Secondary CTAs must be ghost buttons or text links with clear hover underlines. 5. Accessibility: - Validate all color pairs against WCAG AA standards (minimum 4.5:1 contrast for normal text). Return the full, updated index.html document.

2.6. Schritt 6: Vorbereitung auf den Launch, SEO und Hosting

Wenn Interface und Texte abgestimmt sind, finalisieren Sie die technische Optimierung vor der Veröffentlichung:

text

The webpage design and copy are finalized. Prepare the code for production deployment: 1. SEO Optimization: - Write a compelling Meta Title (50-60 characters) containing the primary keyword "[keyword]". - Write a Meta Description (140-155 characters) with clear value proposition and call to action. - Add Open Graph meta tags (og:title, og:description, og:type, og:image placeholder). - Add Twitter Card meta tags. - Ensure every <img> element has a descriptive, keyword-rich alt attribute. 2. Code Hygiene: - Strip all internal console.log statements, unused CSS classes, and development comments. - Ensure smooth scroll behavior (scroll-behavior: smooth). 3. Deployment Guide: - Provide concise, step-by-step instructions for deploying this single file to [GitHub Pages / Netlify / Cloudflare Pages] with a custom domain, assuming zero prior server administration experience.

Das Deployment einer statischen Website aus einer einzigen Datei index.html auf GitHub Pages, Netlify oder Cloudflare Pages ist kostenlos, dauert etwa 3 Minuten und stellt automatisch ein kostenloses SSL-Zertifikat (HTTPS) bereit.

3. Funktionen und schrittweiser Start in ChatGPT Sites

ChatGPT Sites ist eine Cloud-Umgebung für schnelles Prototyping und die Veröffentlichung leichter Web-Apps, entwickelt von OpenAI innerhalb des ChatGPT-Work-Ökosystems.

3.1. Verfügbarkeit nach Tarifen und Regionen

Abonnements: Die Sites-Funktionalität wird Nutzern kostenpflichtiger Tarife (Pro, Pro Lite, Enterprise, Edu, Team und Plus) bereitgestellt. Der kostenlose Tarif (Free) und der Tarif Go haben keinen Zugriff auf das Cloud-Hosting von Sites.
Geografische Einschränkungen: Während der Beta-Phase ist das Tool für Nutzer aus dem Europäischen Wirtschaftsraum (EWR), der Schweiz und Großbritannien aufgrund lokaler Datenregulierungsvorschriften gesperrt.
Administratorenrechte: In Unternehmensräumen (Enterprise) werden die Rechte zur Erstellung und Veröffentlichung externer Websites vom Organisationsadministrator kontrolliert.

3.2. Schrittweiser Deploy-Prozess in ChatGPT Work

Öffnen Sie die ChatGPT-Oberfläche im Browser oder in der Desktop-Anwendung und wechseln Sie zum Arbeitsbereich Work oder aktivieren Sie das Tool Codex (im klassischen Chat-Fenster fehlt die Sites-Funktionalität).
Formulieren Sie eine Anfrage mit zwingender Verwendung des Wortes website oder des Tags @Sites. Beschreiben Sie den Zweck der Seite, die Struktur, die erwarteten interaktiven Elemente und fügen Sie bei Bedarf Eingabedateien oder Tabellen hinzu.
Erhalten Sie einen Link zur geschlossenen interaktiven Vorschau (Preview), die auf den OpenAI-Servern deployed wird.
Nehmen Sie Korrekturen über normale Textanfragen im Chat vor und beobachten Sie das Update des Layouts.
Fixieren Sie die Arbeitsversion über das Steuerungsmenü und konfigurieren Sie die Zugriffsstufe: privat (nur Sie), für das Team (Arbeitsbereich) oder öffentlicher Zugriff via direktem Internet-Link.
Verbinden Sie bei Bedarf Ihre eigene Domain zweiter Ebene durch Hinzufügen von CNAME- und TXT-Einträgen im DNS-Provider-Dashboard.

4. Technische und regulatorische Einschränkungen von ChatGPT Sites

Trotz der Bequemlichkeit des automatischen Deploys hat ChatGPT Sites prinzipielle Einschränkungen, die seine Nutzung für vollwertige kommerzielle Projekte ausschließen.

4.1. Zusammenfassende Matrix der technischen und rechtlichen Einschränkungen

Nachfolgend finden Sie eine zusammenfassende Matrix der Plattformbeschränkungen und deren praktischen Einfluss auf die Entwicklung:

Zusammenfassende Matrix der ChatGPT Sites Beschränkungen — Illustration 1 Збільшити

Zusammenfassende Matrix der ChatGPT Sites Beschränkungen — Illustration 1

Einschränkungsfaktor	Spezifikation im System	Praktische Bedeutung
Kommerz verboten	Vollständiges Verbot finanzieller Transaktionen	Sites kann keine Zahlungen verarbeiten oder Kreditkartendaten sammeln. Keine Online-Shops oder bezahlten Buchungen.
Begrenzte Runtime	Basis Cloudflare D1 und Storage R2	Keine Unterstützung für beliebige Node.js-Backends, PostgreSQL, Docker-Container oder externe schwere Frameworks.
Regionale Sperren	Fehlende Lizenz in einzelnen Jurisdiktionen	Der Service ist für Nutzer und Entwickler in EWR-Ländern, der Schweiz und Großbritannien nicht verfügbar.
Tarifstruktur	Nur Premium-Abonnements	Nutzer des kostenlosen Tarifs Free und des Tarifs Go sind vollständig vom Zugang zu Sites ausgeschlossen.
Anfragelimits	Analog zu OpenAI Codex Limits	Bei Erreichen der Generierungslimits wird die Arbeit an der Website temporär blockiert; stark belastete Seiten stoppen.
Jeder Deploy ist Production	Kein separates Staging-Environment	Jedes Code-Update wird sofort Besuchern über die öffentliche Adresse angezeigt.
Content-Policy	Strikte Moderation durch OpenAI Safety	Platzierung von medizinischen Daten, Finanzfragebögen und Inhalten für Kinder unter 13 Jahren ist verboten und führt zur Löschung der Site.
Datenresidenz	Keine souveränen Server	Daten fallen nicht unter Unternehmens-Sicherheitszertifikate, was die Nutzung in Finanz- und Gesundheitseinrichtungen unmöglich macht.

5. Typische Entwicklungsfehler und Optimierungs-Empfehlungen

Die Praxis zeigt, dass 90 % der gescheiterten Versuche, eine Website mit ChatGPT zu erstellen, auf Verstöße gegen die Grundregeln der Interaktion mit dem Sprachmodell zurückzuführen sind.

5.1. Versuch, die gesamte Website in einen riesigen Prompt zu packen

Der Versuch, Design, Copywriting, Rechner-Skripte, SEO und Struktur in einer einzigen Nachricht zu beschreiben, führt dazu, dass das neuronale Netz Abkürzungen nimmt: Es kürzt Blöcke, schreibt primitive Styles oder platziert Kommentare wie . Zerlegen Sie das Projekt in eine Kette: Brief → Struktur → Markup → Copywriting → Design → Finalisierung.

5.2. Ignorieren des Tests auf mobilen Bildschirmen

ChatGPT operiert mit Code in der Abstraktion und sieht nicht, wie Elemente in einem schmalen Smartphone-Fenster übereinandergelegt werden (z. B. wenn ein fixierter Header den Titel des Hero-Blocks verdeckt). Prüfen Sie die Seite immer im Emulationsmodus für mobile Geräte nach jeder Runde der Änderungen.

5.3. Einfügen von Fragmenten statt der vollständigen Code-Datei

Wenn auf der Website etwas kaputtgeht, kopieren Nutzer oft nur 10 Zeilen des fehlerhaften Blocks in den Chat. Ohne den Gesamtkontext der CSS-Klassen und der Struktur der Elterncontainer liefert ChatGPT einen Patch, der benachbarte Blöcke bricht. Übergeben Sie die vollständige Datei mit klarer Anweisung:

text

Something is visually broken: [describe symptom, e.g., the mobile hamburger menu overlaps the hero headline on screens narrower than 480px]. Here is my complete current index.html file: [paste full file content] Identify the root cause, explain the fix in one sentence, and return the complete corrected index.html file. Do not change any unrelated code or styling.

5.4. Veröffentlichung von KI-Rohtext ohne Redaktionsarbeit

Texte aus der ersten Generation klingen glatt, entbehren aber Konkretisierung und Sinn. Ein einfacher Test: Setzen Sie den Namen eines Wettbewerbers in die Überschrift. Wenn der Text genauso gut zu jedem anderen Anbieter passt – das ist Informationsmüll, der gemäß Schritt 4 umgeschrieben werden muss.

5.5. Vollständige Ignorierung von Meta-Tags und Basis-SEO

Eine Website ohne Open Graph Tags, korrekte meta description und alt-Attribute für Bilder ist zu organischem Traffic-Mangel und unattraktiven Previews in Messengern verurteilt. Fügen Sie den SEO-Block bereits im initialen Briefing hinzu.

6. Vergleich: ChatGPT vs. spezialisierte AI-Builders

ChatGPT ist ein leistungsstarkes Tool zur Codegenerierung, jedoch existiert zwischen dem textbasierten Dialog und spezialisierten visuellen Website-Buildern ein wesentlicher funktionaler Unterschied.

6.1. Vergleichstabelle der Kernfunktionen

Bewertungskriterium	Codegenerierung in ChatGPT (Methode 1)	Plattform ChatGPT Sites (Methode 2)	Spezialisierte AI-Builders (Framer, Webflow, Wix Studio)
Visuelles Canvas (WYSIWYG)	Nicht vorhanden (Arbeit blind über Code)	Nur basisches Cloud-Preview	Vollwertiger interaktiver Drag-and-Drop-Editor
Deployment-Geschwindigkeit	5–10 Min (manueller Upload zum Hosting)	Sofort in 1 Klick	Sofort in 1 Klick
Unterstützung für E-Commerce	Integration externer Backend erforderlich	Streng verboten	Vollständig (Warenkorb, Payment Gateways, Orders)
Flexibilität & Code-Eigentum	100 % Autonomie (Dateien gehören Ihnen)	Geschlossene OpenAI-Infrastruktur	Code-Export bei Pro-Tarifen
Betriebskosten	Kostenlos (auch im Free-Tarif)	Erfordert Abo Plus / Work / Pro	Von $15 bis $40 pro Monat

6.2. Kriterien für die Tool-Auswahl bei Geschäftsaufgaben

Wählen Sie Codegenerierung im ChatGPT-Chat, wenn Sie eine schnelle, kostenlose, leichte One-Pager-Website benötigen, die in Sekundenbruchteilen lädt und vollständig Ihnen gehört.
Wählen Sie ChatGPT Sites, wenn Sie ein internes Dashboard oder einen Prototyp für Kollegen innerhalb des OpenAI-Unternehmensraums deployen müssen.
Wählen Sie spezialisierte AI-Builders, wenn die Website regelmäßige Marketing-Updates durch nicht-technische Spezialisten, ein dynamisches CMS, Kartenzahlungen oder komplexe interaktive Animationen erfordert.

7. Workflow-Architektur und Entscheidungsfindung

Um den optimalen Weg zur Projektdurchführung ohne unnötigen Zeit- und Kostenaufwand zu wählen, nutzen Sie den Entscheidungsbaum:

7.1. Diagramm zur Auswahl der Development-Pipeline

mermaid

flowchart TD Start["Завдання: створити вебсайт за допомогою ШІ"] --> Q1{"Чи потрібен прийом онлайн-платежів або складна CMS?"} Q1 -- "Так (e-commerce / блог)" --> Dedicated["Спеціалізований AI-конструктор\n(Framer, Webflow, Shopify)"] Q1 -- "Ні (лендінг / дашборд)" --> Q2{"Чи потрібна публікація без власного хостингу всередині команди?"} Q2 -- "Так (внутрішній прототип)" --> Q3{"Чи є платний тариф ChatGPT та доступний регіон?"} Q3 -- "Так" --> Sites["ChatGPT Sites\n(Хмарний деплой OpenAI)"] Q3 -- "Ні (ЄЕЗ / Free тариф)" --> ChatCode["Генерація HTML/CSS в чаті ChatGPT\n+ Деплой на GitHub Pages / Netlify"] Q2 -- "Ні (публічний сайт з власним доменом)" --> ChatCode

Diese Pipeline minimiert technische Risiken und stellt sicher, dass der gewählte Stack den Anforderungen Ihres Geschäfts entspricht.

8. Häufig gestellte Fragen (FAQ)

8.1. Praktische Antworten auf Schlüsselfragen

Hinweis

Ist ChatGPT ein vollwertiger Website-Builder?
Nein, ChatGPT ist ein generatives Sprachmodell, das Seiten-Code basierend auf einem Text-Brief erstellt. Das Cloud-Tool ChatGPT Sites fügt die Hosting-Funktion hinzu, aber aufgrund des fehlenden visuellen Drag-and-Drop-Editors erfolgt die gesamte Interaktion über Prompts.

Tipp

Welcher Prompt liefert das beste Ergebnis beim ersten Versuch?
Das beste Ergebnis liefert der strukturierte Brief aus Schritt 2.1, der eine klare Beschreibung des Geschäfts, der Zielgruppe, der Zielaktion, der Pflichtblöcke, der Design-Anforderungen und der strengen technischen Rahmenbedingungen (eine einzelne Datei index.html ohne externe Bibliotheken) enthält.

Wichtig

Kann man eine Website kostenlos mit ChatGPT erstellen und veröffentlichen?
Ja. Sie können den vollständigen Website-Code im kostenlosen ChatGPT-Free-Tarif generieren und anschließend die erhaltene Datei index.html kostenlos auf Plattformen wie GitHub Pages oder Cloudflare Pages hosten. Ein kostenpflichtiges Abo ist nur für den Cloud-Service ChatGPT Sites erforderlich.

Warnung

Warum kann man in ChatGPT Sites keinen Online-Shop betreiben?
Die Sicherheitsrichtlinie von OpenAI verbietet streng die Verarbeitung von Bankkartendaten und die Durchführung finanzieller Transaktionen innerhalb der Sites-Plattform. Für E-Commerce muss autonomer Code mit externen Payment-Gateways oder E-Commerce-Plattformen verwendet werden.