Zum Inhalt springen
Creaitercreate your vision with ai
EinloggenRegistrieren
Alle Creaites
Jetzt verfügbar8 Min.Einsteiger

Mit Codex aus Lernnotizen eine Infografik erstellen

Dieses Beispiel ist das Ergebnis des Guides: keine Bildattrappe, sondern lesbarer, responsiver DOM-Inhalt, den du direkt nachbauen kannst.

Werkzeuge

  • OpenAI / Codex

Das echte Ergebnis

Der Codex-Arbeitsablauf in 4 Schritten

Ein klarer Auftrag beginnt beim Ziel und endet erst mit sichtbarer Prüfung.

  1. 01

    Ziel geben

    Beschreibe das Ergebnis, das nach der Änderung sichtbar sein soll.

  2. 02

    Kontext geben

    Nenne Projekt, relevante Dateien, vorhandene Muster oder ein Beispiel.

  3. 03

    Arbeit begleiten

    Lies Zwischenstände, beantworte Rückfragen und korrigiere die Richtung konkret.

  4. 04

    Ergebnis prüfen

    Kontrolliere Diff, Tests und das sichtbare Verhalten im Browser.

  • Diff
  • Test
  • Browser

Video-Walkthrough

Das stille Walkthrough zeigt denselben Weg von den Notizen über Codex bis zu den vier Schritten. Die vollständige Erklärung steht direkt darunter.

Was im Video passiert

  1. 1Vier rohe Lernnotizen bilden den Ausgangspunkt.
  2. 2Codex erhält Quelle, Ziel, Grenzen und das Fertig-wenn.
  3. 3Der Inhalt wird als vier zugängliche Schritte im Web strukturiert.
  4. 4Diff, Test und Browserprüfung schließen die Umsetzung ab.

Ausgangsmaterial

Diese vier Notizen sind das echte Ausgangsmaterial. Sie definieren den Inhalt, aber noch nicht die visuelle Hierarchie.

  • 01Ziel geben: Beschreibe das gewünschte Ergebnis.
  • 02Kontext geben: Nenne Projekt, relevante Dateien oder ein Beispiel.
  • 03Arbeit begleiten: Beantworte Rückfragen und korrigiere die Richtung.
  • 04Ergebnis prüfen: Lies den Diff, starte Tests und öffne die Änderung im Browser.

Der Codex-Auftrag

Der Prompt trennt den Arbeitsauftrag bewusst von der späteren Vier-Schritte-Infografik.

Wähle einen Baustein der Formel

Jeder Baustein markiert seinen Absatz im Prompt und erklärt, was er bewirkt.

  1. 1 · Ziel

    Ziel: Erstelle aus den folgenden Lernnotizen eine responsive Web-Infografik mit dem Titel „Der Codex-Arbeitsablauf in 4 Schritten“.

  2. 2 · Kontext

    Kontext: Nutze ausschließlich diese Aussagen: Ziel geben, Kontext geben, Arbeit begleiten und Ergebnis prüfen. Die Infografik gehört in die bestehende Oberfläche und muss deren Komponenten, Design-Tokens und Sprache verwenden.

  3. 3 · Grenzen

    Grenzen: Kein Text in einem Bild, keine neue Abhängigkeit und keine Änderungen außerhalb der Infografik und ihrer Tests. Funktionale Icons kommen aus dem vorhandenen Icon-System.

  4. 4 · Fertig-wenn

    Fertig-wenn: Die vier Schritte sind als zugänglicher DOM-Inhalt in fester Reihenfolge sichtbar, funktionieren bei 390 und 1280 Pixeln ohne horizontalen Overflow, unterstützen Hell- und Dunkelmodus, besitzen einen passenden Test und wurden im Browser geprüft.

Warum dieser Baustein?

Das Ziel beschreibt das sichtbare Endergebnis samt Titel. Codex arbeitet auf ein konkretes Artefakt hin statt auf eine vage Absicht.

Ziel: Erstelle aus den folgenden Lernnotizen eine responsive Web-Infografik mit dem Titel „Der Codex-Arbeitsablauf in 4 Schritten“.

Kontext: Nutze ausschließlich diese Aussagen: Ziel geben, Kontext geben, Arbeit begleiten und Ergebnis prüfen. Die Infografik gehört in die bestehende Oberfläche und muss deren Komponenten, Design-Tokens und Sprache verwenden.

Grenzen: Kein Text in einem Bild, keine neue Abhängigkeit und keine Änderungen außerhalb der Infografik und ihrer Tests. Funktionale Icons kommen aus dem vorhandenen Icon-System.

Fertig-wenn: Die vier Schritte sind als zugänglicher DOM-Inhalt in fester Reihenfolge sichtbar, funktionieren bei 390 und 1280 Pixeln ohne horizontalen Overflow, unterstützen Hell- und Dunkelmodus, besitzen einen passenden Test und wurden im Browser geprüft.

Auf deinen Fall übertragen

Behalte die vier Bausteine und ersetze ihren Inhalt durch dein eigenes Vorhaben. Bearbeite den Beispiel-Prompt direkt hier.

So baust du es nach

  1. Schritt 1

    Quelle begrenzen

    Gib Codex nur die vier fachlichen Notizen und nenne sie als verbindliche Quelle.

  2. Schritt 2

    Ausgabe beschreiben

    Fordere eine responsive DOM-Infografik statt einer Grafik mit eingebranntem Text.

  3. Schritt 3

    Projektmuster schützen

    Verlange vorhandene Tokens, Komponenten und Icons und schließe neue Abhängigkeiten aus.

  4. Schritt 4

    Beweise einfordern

    Definiere Test, zwei Breiten, beide Themes und die Browserprüfung als Fertig-wenn.

Prüfcheckliste

0/4 Kriterien geprüft

Selbstcheck

Selbstcheck: Denkst du wie der Auftrag?

Drei Fragen prüfen die Prinzipien hinter Formel und Arbeitsablauf – ohne Auswendiglernen.

1 / 3

Warum nennt der Kontext genau die vier Notizen als einzige Quelle?

Offizielle Quellen

Marken dienen nur der sachlichen Zuordnung; Creaiter behauptet keine Partnerschaft.

Datenschutz-Einstellung

Dürfen wir pseudonyme Seitenaufrufe und Sitzungsaufzeichnungen messen?

Mit deiner Zustimmung misst PostHog EU, welche Seiten aufgerufen werden, und zeichnet zusätzlich deine Sitzung auf: Mausbewegungen, Klicks, Scrollen und die dargestellten Seiteninhalte werden als abspielbares Abbild gespeichert. Getippte Eingaben werden vor dem Senden maskiert. Die Inhalte von Anmeldung, Registrierung, Passwort-Wiederherstellung, Founder-Chat, Newsletter-Feld, deiner E-Mail-Anzeige, deinen Quizantworten und den Checklisten werden gar nicht erst aufgezeichnet; auf den Anmelde- und Registrierungsseiten pausiert die Aufzeichnung. Adressen werden immer ohne Suchparameter gespeichert. Verarbeitet werden außerdem eine zufällige Gerätekennung und technische Verbindungsdaten wie die IP-Adresse. Zusätzlich werden fest definierte Nutzungsereignisse gemessen: wie weit ein Beitrag gelesen wurde, welcher Artikelbaustein benutzt wurde, welcher Handlungsaufruf geklickt wurde, wie eine Newsletter-Anmeldung ausging, wie weit du in einem Kurs oder im Feed kommst (dabei nur richtig oder falsch einer Aufgabe, nie deine Antwort selbst), welches Video du startest, ob du die Sprache wechselst und wie ein Anmelde- oder Registrierungsversuch ausging — ohne E-Mail-Adresse, ohne Passwort und ohne Fehlermeldung. Dabei werden ausschließlich Werte aus einer festen Liste und ganze Zahlen aus festen Wertebereichen übertragen — keine Eingaben und kein Freitext. Wir kennzeichnen außerdem Produktions-, interne und automatisierte Testaufrufe getrennt und leiten aus einer bekannten Herkunfts-Domain oder einem streng erlaubten Kampagnenwert ab, ob ein Besuch etwa aus ChatGPT, Claude oder Perplexity kam. Die vollständige Herkunftsadresse und Suchparameter werden nicht gesendet; ein konkretes KI-Modell lässt sich daraus nicht erkennen. Sofern PostHog die IP-basierte Geo-Anreicherung im Projekt aktiviert hat, kann der Dienst grob Land, Kontinent und Region ableiten; einen Browser- oder GPS-Standort fragen wir nicht ab. Jeder Aufruf wird außerdem einem Seitenbereich aus einer festen Liste zugeordnet (etwa Startseite, Blog, Werkzeuge, Konto) — gesendet wird der Bereich, nicht die Adresse. Gemessen werden zusätzlich Ladezeit- und Stabilitätskennzahlen der Seite (Core Web Vitals: LCP, CLS, INP, FCP), ohne Netzwerkinhalte. Ein Klick auf einen Link nach außen wird nur als Zieldomain aus einer festen Liste erfasst, ohne Pfad, Suchparameter und Linktext. Bei den Werkzeugen Ideenrad, KI-Kennzeichnung und Limit-Reset wird nur die Art der Handlung gemessen, etwa Drehen, Auswahl geändert, Kopieren oder Export — keine Eingaben und keine Ergebnisse. Mehr zum Datenschutz

Ohne deine Zustimmung wird weder Analyse-Code geladen noch aufgezeichnet. Du kannst die Einwilligung jederzeit widerrufen: Der Widerruf beendet die Erfassung sofort; bereits erhobene Daten können zu diesem Zeitpunkt schon übertragen sein und werden nach der Speicherfrist gelöscht.