Ein sichtbarer Ausgangspunkt für dein Codex-Projekt

Website-Vorlagen für OpenAI Codex. Erstelle deine eigene Website, indem du Codex Änderungen an einem fertigen Design vornehmen lässt.

Wähle ein vorhandenes Frontend, sage Codex, was sich ändern soll, und prüfe das Ergebnis. Dieser Workflow nutzt Projektdateien; nicht jede ChatGPT-Oberfläche kann denselben Ordner bearbeiten.

Mein Codex-Startdesign wählen Meine erste Dateiänderung planen

Morrow

Framewise

Primefolio

Beispieldesigns · ersetze die fiktiven Inhalte durch deine eigenen.

AI ChatBeispielablauf

OpenAI Codex · Website-Projektordner

Lies index.html, RECREATE.md und die Assets in diesem Ordner. Zeige mir vor der Bearbeitung, wo Überschrift, Bilder und Kontaktlinks liegen.

KI · Beispielantwort

Ich prüfe die Dateien und liste Sektionen, Bildpfade und Links auf. Außerdem kennzeichne ich Formulare, die eine Aktion nur demonstrieren.

Verwende das vorhandene HTML. Meine Texte und Bilder liegen im Ordner materials.

KI · Beispielantwort

Ich ordne die Materialien den bestehenden Sektionen zu und frage nach fehlenden Inhalten.

Nächste Schritte

Ordner öffnen
Entpacke das Projekt und gib dem Agent Zugriff.
Seite prüfen
Lies HTML und Anleitung vor dem Austausch von Inhalten.
Eigene Materialien ergänzen
Gib eigene Texte, Bilder und das echte Kontaktziel an.

Ziel: Der Agent arbeitet an deinen tatsächlichen Website-Dateien.

Beispielablauf. Keine Live-Verbindung zu einer KI.

01 / Das Quellprojekt

Womit arbeitet Codex?

Mit geliefertem HTML und Design-Leitfaden in einem zugänglichen Projektordner. Morrow präsentiert ein Bewegungsstudio; Kursansichten und Bedienelemente sind Frontend-Beispiele, keine Buchungssoftware.

Website-Dateien + Designanweisungen

index.html

Nutze das gelieferte Frontend für direkte Inhalts- und Designänderungen.

RECREATE.md

Nutze den Leitfaden als Referenz oder separates Nachbauziel.

Ausgangsversion behalten

Sichere das unveränderte Paket und einen Versionsstand vor der Bearbeitung.

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.

index.html
RECREATE.md
assets/favicon.svg
assets/morrow-cabin.png
assets/morrow-fold.png
assets/morrow-group.png
assets/morrow-hero.png
assets/morrow-portrait.png
assets/morrow-still.png

Was die Originalanleitung festlegt

07-morrow/RECREATE.md · L5

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.

OpenAI Codex CLI ↗

02 / Deine Aufgabe

Wie halte ich die Anfrage konkret?

Sage Codex genau, was ersetzt und was erhalten wird. Zum Beispiel: Firmenname ändern, diese Leistungsbeschreibungen einsetzen, Button zur Buchungsseite verlinken, Layout beibehalten. So passt du die Seite an, ohne alles neu entwerfen zu lassen.

Beispiel für KI-BearbeitungFormwell

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.

index.html · RECREATE.md

Formwell · vorbereitete HTML-Vorschau

Ganze Vorschau öffnen ↗

Vorbereiteter Dialog und Projektversionen. Keine Live-Verbindung zu einer KI.

Codex-Änderung und Prüfung planen

Dein eigener Arbeitsplan

03 / Codex-Zugang

Welcher OpenAI-Codex-Workflow ist gemeint?

Dokumentierter Ausgangspunkt ist Codex CLI in einem lokalen Projekt. Andere Codex- und ChatGPT-Oberflächen haben eigene Datei-, Berechtigungs- und Vorschauwege.

Ist das WordPress Codex?

Nein. Hier geht es um OpenAI Codex als Coding-Tool, nicht um die WordPress-Dokumentation namens Codex.

Ist Codex in der Vorlage enthalten?

Nein. Prüfe aktuelle OpenAI-Konto- und Nutzungsanforderungen separat.

AI ChatBeispielablauf

OpenAI Codex · Website-Version sichern und wiederherstellen

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.

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.

04 / Spätere Änderungen

Kann ich die Website später weiter ändern?

Ja. Behalte den Website-Ordner, öffne ihn wieder in Codex und beschreibe die nächste Änderung: Leistung ergänzen, Foto ersetzen oder Preise aktualisieren. Lass vorher eine Kopie oder Git-Version sichern, damit du zurückkehren kannst.

01
Nächstes Ergebnis beschreiben
Benenne die genaue Überschrift, Sektion oder Besucheraktion zur Überarbeitung.
02
Prüfen und behalten
Lies den Unterschied, öffne die Seite und behalte die Version nach der Prüfung.

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.

Vorher
<h1 id="hero-title">Make room<br>for <em>yourself.</em></h1>

Erste vorbereitete Änderung
<h1 id="hero-title">Make room<br>for <em>movement.</em></h1>

Vorbereitete Folgeänderung
<h1 id="hero-title">Make room<br>for <em>movement.</em></h1>

Eine gespeicherte Version zum Wiederherstellen

07-morrow · LP14-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.

f1e834179d7151f68f7a35464b9028816fbfc7ecccd414823cb9313cb378f538
f1e834179d7151f68f7a35464b9028816fbfc7ecccd414823cb9313cb378f538

Originalprojekt · Morrow

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 · Buchungsbutton verbinden

Verlinke die Kursbuttons auf meine bestehende Buchungsseite. Die echte URL liegt vor; behalte Kursbeschreibungen.

KI · Beispielantwort

Ich ersetze Beispielziele durch diese URL und prüfe jeden Button. Der Buchungsanbieter verarbeitet die echte Reservierung.

Hilf mir nach Veröffentlichung bei einer Testbuchung und prüfe den Eingang im Buchungskonto.

Nächste Schritte

Buchungsdienst nutzen
Gib die echte Buchungs-URL oder dokumentierte Einbettung an.
Buttons verbinden
Lass Beispiellinks ersetzen, ohne ein Buchungssystem zu erfinden.
Reservierung testen
Folge dem Link und prüfe das Ergebnis im Anbieter-Konto.

Ziel: Besucher buchen über deinen bestehenden Dienst.

Beispielablauf. Keine Live-Verbindung zu einer KI.

05 / Seite und Dienste

Enthält die neue Seite Live-Buchung?

Das Template zeigt Kurse und Buchungsbuttons, liefert aber kein Buchungssystem. Gib Codex die URL deines Buchungsdienstes oder lass ihn nach dessen Anleitung einbinden. Führe danach eine Testbuchung durch.

Frontend prüfenPrüfe mobile Navigation, lange Kurstitel, Bildladen, Dialoge und Tastaturfokus.Veröffentlichung planenHosting, Domain und öffentliche Ressourcenprüfungen sind getrennt von lokaler Bearbeitung.

Lokal auf diesem Gerät markiert; nichts wird übermittelt.

06 / Vorlage wählen

Wähle nach der Geschichte deiner Website.

Morrow passt zu Studio und Kursen. Portfolio, Kursangebot oder Softwareprodukt brauchen andere Strukturen. Vergleiche Designs ohne identische Codex-Tests für jedes Paket anzunehmen.

Morrow

Präsentiere Kurse, Studio und Informationen zum ersten Besuch. Live-Buchung braucht ein separates Ziel.

Preis und Dateien ansehen ↗

Dateien prüfen

Aktueller Download geprüft am 2. Oktober 2026. Prüfe die ausgewählten Dateien auf der Produktseite.

index.html
RECREATE.md
assets/favicon.svg
assets/morrow-cabin.png
assets/morrow-fold.png
assets/morrow-group.png
assets/morrow-hero.png
assets/morrow-portrait.png
assets/morrow-still.png

Einige Ressourcen können von externen URLs geladen werden. Prüfe dein gewähltes Projekt vor der Veröffentlichung.

Framewise

Präsentiere einen Kurs, Ansatz und Lehrplan. Kursbereitstellung und Lernkonten bleiben separat.

Preis und Dateien ansehen ↗

Dateien prüfen

Aktueller Download geprüft am 2. Oktober 2026. Prüfe die ausgewählten Dateien auf der Produktseite.

index.html
RECREATE.md
assets/creator-blue.png
assets/creator-coral.png
assets/creator-lilac.png
assets/creator-mint.png

Einige Ressourcen können von externen URLs geladen werden. Prüfe dein gewähltes Projekt vor der Veröffentlichung.

Primefolio

Zeige ausgewählte Studioarbeiten und Projektgeschichten mit eigenen freigegebenen Bildern und Fakten.

Preis und Dateien ansehen ↗

Dateien prüfen

Aktueller Download geprüft am 2. Oktober 2026. Prüfe die ausgewählten Dateien auf der Produktseite.

index.html
RECREATE.md
assets/current-product.png
assets/hero-form.png
assets/serein-brand.png

Einige Ressourcen können von externen URLs geladen werden. Prüfe dein gewähltes Projekt vor der Veröffentlichung.

Velora

Präsentiere einen Entwickler-Tool-Workflow. Code-Review-Ansichten zeigen das Konzept, keinen Live-Review-Dienst.

Preis und Dateien ansehen ↗

Dateien prüfen

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.

07 / Workflow fortsetzen

Was kläre ich vor dem Kauf?

Wähle vor dem Kauf ein Design für deine Inhalte und bestätige einen Codex-Ablauf mit Projektdateizugriff. Plane KI, Hosting und Domain separat ein. Für Buchung oder Kontaktversand wähle den anzubindenden Dienst, statt ihn im Template zu erwarten.

OpenAI-Codex-Leitfaden folgen Website-Veröffentlichung planen Lizenz für Kundenprojekte prüfen

Formwell / Website-Dateien + Designanweisungen

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.

Formwell-ZIP herunterladen RECREATE.md herunterladen ↗

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.

Meine Website-Vorlage wählen