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.
- 01
Ziel geben
Beschreibe das Ergebnis, das nach der Änderung sichtbar sein soll.
- 02
Kontext geben
Nenne Projekt, relevante Dateien, vorhandene Muster oder ein Beispiel.
- 03
Arbeit begleiten
Lies Zwischenstände, beantworte Rückfragen und korrigiere die Richtung konkret.
- 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
- 1Vier rohe Lernnotizen bilden den Ausgangspunkt.
- 2Codex erhält Quelle, Ziel, Grenzen und das Fertig-wenn.
- 3Der Inhalt wird als vier zugängliche Schritte im Web strukturiert.
- 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.
1 · Ziel
Ziel: Erstelle aus den folgenden Lernnotizen eine responsive Web-Infografik mit dem Titel „Der Codex-Arbeitsablauf in 4 Schritten“.
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 · 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 · 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
Schritt 1
Quelle begrenzen
Gib Codex nur die vier fachlichen Notizen und nenne sie als verbindliche Quelle.
Schritt 2
Ausgabe beschreiben
Fordere eine responsive DOM-Infografik statt einer Grafik mit eingebranntem Text.
Schritt 3
Projektmuster schützen
Verlange vorhandene Tokens, Komponenten und Icons und schließe neue Abhängigkeiten aus.
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
Offizielle Quellen
Marken dienen nur der sachlichen Zuordnung; Creaiter behauptet keine Partnerschaft.