Wie erstellst du eine Website mit OpenAI Codex? Erstelle deine eigene Website, indem du die Änderungen beschreibst, die Codex an der Vorlage vornehmen soll.
Starte mit einer Website-Vorlage, sichere einen Versionsstand und gib Codex jeweils eine Aufgabe. Prüfe Quellen und Browserergebnis vor jeder Freigabe.
Beispieldesigns · ersetze die fiktiven Inhalte durch deine eigenen.
01 / Codex-Konfiguration
Welcher Codex ist hier gemeint?
OpenAI Codex CLI in einem lokalen Projektverzeichnis. Prüfe aktuelle Anmeldung und Berechtigungen in OpenAIs Dokumentation. Desktop-, IDE- und Cloud-Oberflächen brauchen eigene Projektzugriffe.
Lokal auf diesem Gerät markiert; nichts wird übermittelt.
OpenAI Codex · Website-Version sichern und wiederherstellen
Du
Sichere vor der Bearbeitung diese freigegebene Version. Erstelle einen Git-Stand, wenn verfügbar, und lasse mein originales ZIP unverändert.
KI · Beispielantwort
Ich bestätige vor der nächsten Änderung, wo die gesicherte Version liegt.
Du
Das vorherige Layout gefällt mir besser. Stelle es wieder her, behalte aber die neue Kontaktadresse.
KI · Beispielantwort
Ich vergleiche die Versionen, stelle das vorige Layout wieder her und prüfe, ob die gewünschte Kontaktadresse bleibt.
Nächste Schritte
Vorher sichern
Behalte Original-ZIP und freigegebenen Ordner oder Git-Stand.
Wiederherstellung benennen
Sage der KI, welche Version und welche Elemente zurückkehren sollen.
Wiederhergestellte Seite prüfen
Öffne sie und prüfe Inhalte, Layout und Kontaktlinks.
Ziel: Gezielt zur bevorzugten Version zurückkehren.
Beispielablauf. Keine Live-Verbindung zu einer KI.
02 / Ausgangsstand sichern
Was sichere ich vor Codex-Änderungen?
Behalte das Original-ZIP und lass Codex vor der Bearbeitung den Ausgangsordner oder einen Git-Stand sichern. Sichere auch akzeptierte Änderungen. So kannst du eine bekannte Version wiederherstellen lassen.
01
Ausgangsstand festhalten
Sichere Quellen und halte das ursprüngliche Aussehen fest.
02
Freigegebene Ergebnisse behalten
Sichere jede geprüfte Version mit kurzer Änderungsbeschreibung.
Quelldateien und technische Details ansehen
Die tatsächlichen Projektdateien
07-morrow · Aktuell geprüftes ZIP
Aktueller Produktdownload geprüft am 2. Oktober 2026. Dateien und externe Ressourcen gehören zu diesem Projekt; andere Templates unterscheiden sich.
Die Anleitung beschreibt die ursprüngliche fiktive Seite. Trenne ihre Aufgabe von den Änderungen für dein eigenes Unternehmen.
Build an English movement-studio demonstration as `index.html` plus `assets/favicon.svg` and six local PNG copies listed in section 9. Put all CSS and vanilla JavaScript in the HTML; use no framework, bundler, build step, external JavaScript or library. Reproduce the structure, copy, proportions, palette, image placement and behavior specified here. Keep native browser scrolling and native HTML dialogs.
03 / Eine klare Aufgabe
Wie halte ich die Anpassung konkret?
Gib Firmentexte an und benenne, was bleiben soll: Reihenfolge, Bilder oder Farben. Lass Codex das vorhandene HTML bearbeiten und Änderungen auflisten. Zum Beispiel: Beispielfirma und Leistungen ersetzen, ohne die Seite neu zu gestalten.
›_ Beispiel für KI-BearbeitungFormwell
Du
Passe Formwell für das fiktive Markenstudio Alder an. Ändere Name, Hero-Überschrift und Einleitung. Behalte Layout und Beispiel-Projektbilder.
KI · Beispielantwort
Die vorbereitete Vorschau ersetzt Firmenname, Hero-Überschrift und Einleitung. Vergleiche Inhalte und Original; übrige Projektbilder bleiben Beispielinhalte.
Vorbereiteter Dialog und Projektversionen. Keine Live-Verbindung zu einer KI.
AI ChatBeispielablauf
OpenAI Codex · Bearbeitete Seite prüfen
Du
Vergleiche die bearbeitete Seite mit meinen Anweisungen. Prüfe Überschrift, Bildpfade, Navigation und Kontaktbutton auf Desktop- und Handybreite.
KI · Beispielantwort
Ich liste Abweichungen auf und prüfe die tatsächliche Browseransicht. Eine gespeicherte Datei allein bestätigt das sichtbare Ergebnis nicht.
Du
Auf meinem Handy ist die Überschrift abgeschnitten. Behebe das, ohne den Text zu ändern.
KI · Beispielantwort
Ich passe das responsive Layout an und prüfe dieselbe Handybreite erneut. Danach kannst du das Ergebnis freigeben.
Nächste Schritte
Änderungen vergleichen
Prüfe Texte, Bilder und den beauftragten Umfang.
Vorschau öffnen
Prüfe Desktop und Handy sowie Navigation und Kontakt.
Problem beschreiben
Beschreibe den Fehler und lass die korrigierte Ansicht erneut prüfen.
Ziel: Eine geprüfte Version zum Weiterbearbeiten oder Veröffentlichen.
Beispielablauf. Keine Live-Verbindung zu einer KI.
04 / Ergebnis prüfen
Woher weiß ich, was Codex geändert hat?
Vergleiche gespeicherte Dateien mit dem vorherigen Stand und öffne die Seite. Prüfe Texte, Bildpfade, Links und unerwartete Änderungen; eine Erfolgsmeldung ersetzt diese Prüfung nicht.
Lokal auf diesem Gerät markiert; nichts wird übermittelt.
Quelldateien und technische Details ansehen
Eine kleine Änderung zum Prüfen
07-morrow/index.html · L84
Diese Auszüge stammen aus dem geprüften englischen Original. Die folgenden Beispiele sind vorbereitete Quelltextänderungen, keine Live-KI-Sitzung. Unternehmen und Arbeiten bleiben fiktiv.
Diese Auszüge stammen aus dem geprüften englischen Original. Die folgenden Beispiele sind vorbereitete Quelltextänderungen, keine Live-KI-Sitzung. Unternehmen und Arbeiten bleiben fiktiv.Ganze Vorschau öffnen ↗
Vorbereitete Quelltextänderung
Diese vorbereitete Version ändert ausgewählte Texte oder Bilder im selben Projekt. Struktur und Beispielinhalte bleiben erhalten. Vergleiche die Dateien vor einer ähnlichen Änderung für dein Unternehmen.Ganze Vorschau öffnen ↗
AI ChatBeispielablauf
OpenAI Codex · Vorhandene Website anpassen
Du
Ändere Firmenname, Überschrift und Leistungsbeschreibungen mit meinen Texten. Behalte das Layout und ersetze nur die angegebenen Bilder.
KI · Beispielantwort
Ich bearbeite das bestehende HTML, behalte die übrigen Sektionen und zeige die geänderten Dateien.
Du
Verlinke den Hauptbutton auf meine Buchungsseite mit der angegebenen URL.
KI · Beispielantwort
Ich aktualisiere den Buttonlink und prüfe ihn zusammen mit der geänderten Überschrift im Browser.
Nächste Schritte
Eigene Inhalte liefern
Gib genaue Texte, Bilddateinamen und Linkziele an.
Template bearbeiten
Lass bestehende Dateien bearbeiten und gewünschte Teile erhalten.
Vorschau prüfen
Lies die neuen Texte und teste echte Links auf Handy und Desktop.
Ziel: Dein Unternehmen im ausgewählten Design.
Beispielablauf. Keine Live-Verbindung zu einer KI.
05 / Nächste Korrektur
Wie geht es nach dem ersten Ergebnis weiter?
Fordere die nächste Änderung aus der freigegebenen Version an. Beschreibe Problem und gewünschtes Ergebnis, prüfe neue Unterschiede und den betroffenen Teil.
01
Umfang klarhalten
Zum Beispiel eine gelieferte Überschrift kürzen und das Sektionslayout behalten.
02
Vor dem Behalten erneut prüfen
Prüfe die Korrektur bei der Bildschirmgröße des Problems.
Quelldateien und technische Details ansehen
Eine gespeicherte Version zum Wiederherstellen
07-morrow · LP19-restore.diff
Die gespeicherte erste Änderung wurde in einer lokalen Testdatei wiederhergestellt; ihre Prüfsumme stimmte überein. Das zeigt eine Dateiwiederherstellung, keinen Agent-Checkpoint oder Hosting-Rollback.
Die gespeicherte erste Änderung wurde in einer lokalen Testdatei wiederhergestellt; ihre Prüfsumme stimmte überein. Das zeigt eine Dateiwiederherstellung, keinen Agent-Checkpoint oder Hosting-Rollback.
Wähle nach tatsächlichen Sektionen und Inhaltsbedarf. Kurspräsentation, Portfolio und Softwaregeschichte brauchen unterschiedliche Inhalte und Live-Dienste.
Morrow
Präsentiere Kurse, Studio und Informationen zum ersten Besuch. Live-Buchung braucht ein separates Ziel.
Aktueller Download geprüft am 2. Oktober 2026. Prüfe die ausgewählten Dateien auf der Produktseite.
index.html
RECREATE.md
Einige Ressourcen können von externen URLs geladen werden. Prüfe dein gewähltes Projekt vor der Veröffentlichung.
Beispieldesigns · ersetze die fiktiven Inhalte durch deine eigenen.
AI ChatBeispielablauf
OpenAI Codex · Cloudflare Pages · vom Ordner ins Web
Du
Meine Website ist fertig. Veröffentliche diesen Projektordner mit Wrangler auf Cloudflare Pages. Sag mir zuerst, welchen Kontozugriff und welche Freigabe du brauchst.
KI · Beispielantwort
Ich prüfe Dateien und Bildpfade. Melde dich mit deinem Cloudflare-Konto an und gib das Erstellen oder Aktualisieren des Pages-Projekts vor dem Upload frei.
Du
Ich gebe die Veröffentlichung in einem neuen Pages-Projekt frei. Lass meine aktuelle Domain unverändert, bis ich die Vorschau geprüft habe.
KI · Beispielantwort
Nach dem freigegebenen Upload gebe ich die von Cloudflare bereitgestellte Adresse zurück und prüfe Bilder und Links. Nach deiner Freigabe können wir die Domain verbinden.
Nächste Schritte
Projekt an Agent geben
Nutze einen KI-Agent mit Datei- und Terminalzugriff; lasse index.html und Assets zusammen.
Upload freigeben
Melde dich beim Host an und bestätige das Projekt. Der Agent kann die unterstützte CLI oder API nutzen.
Echte Adresse prüfen
Öffne die zurückgegebene URL; verbinde die Domain erst nach Prüfung der Website.
Ziel: Deine Website an einer öffentlichen Adresse, danach unter deiner Domain.
Beispielablauf. Keine Live-Verbindung zu einer KI.
07 / Nach der Sitzung
Was bleibt nach der Codex-Aufgabe offen?
Nach der Bearbeitung verbindest du Kontakt- oder Buchungsdienste und lässt den KI-Agent den Ordner auf passendem Hosting veröffentlichen. Gib Konto und Upload frei, prüfe die echte URL und verbinde deine Domain. Hosting und KI-Zugang sind separat.
Teste ein echtes Template, bevor du dich entscheidest.
Lade das originale Formwell-Projekt herunter. Gib die Dateien und RECREATE.md an ein geeignetes KI-Tool, probiere eine kleine Änderung und prüfe das Ergebnis.
Das kostenlose Beispiel ist Formwell. Originaldesign und Anleitung sind auf Englisch. Die Produktpreise bleiben unverändert.
Wähle ein Template. Mach es mit OpenAI Codex zu deiner Website.
Lade Dateien herunter, öffne das Projekt im KI-Tool und beschreibe deine Änderungen. Du beginnst mit einem vorhandenen Design und kannst die gespeicherte Website weiter bearbeiten.
OneDollarStock setzt ein Projekt zur Vorbereitung der Plattform auf den Eintritt in den deutschen Markt im Rahmen des Akzelerationspfads „Go Global“ des Programms „Unicorn Hub Startup Booster“ um (Projektnr. FENG.02.28-IP.02-0013/23). Das Projekt wird aus Mitteln des Programms European Funds for Smart Economy 2021–2027 im Rahmen der Priorität „Innovation-friendly environment“, Maßnahme FENG.2.28 Startup Booster Poland, kofinanziert.
Mehr über das Projekt erfahren →
Savi
Template ansehen
Rondist
Template ansehen
Passer
Template ansehen
Outer Light
Template ansehen
Osma
Template ansehen
Nightglass
Template ansehen
Lark
Template ansehen
Drumlin
Template ansehen
Aveniq
Template ansehen
Novera
Template ansehen
Aurelia Atelier
Template ansehen
Nivora
Template ansehen
Savi
Template ansehen
Rondist
Template ansehen
Passer
Template ansehen
Outer Light
Template ansehen
Osma
Template ansehen
Nightglass
Template ansehen
Lark
Template ansehen
Drumlin
Template ansehen
Aveniq
Template ansehen
Novera
Template ansehen
Aurelia Atelier
Template ansehen
Nivora
Template ansehen
