Turn learning notes into an infographic with Codex
This example is the guide's real result: readable, responsive DOM content you can recreate, not a picture of a possible output.
Tools
- OpenAI / Codex
The real result
The Codex workflow in 4 steps
A clear task starts with the goal and is not complete until the result is visibly verified.
- 01
Set the goal
Describe the result that should be visible after the change.
- 02
Provide context
Name the project, relevant files, existing patterns, or an example.
- 03
Guide the work
Read updates, answer questions, and correct the direction with specific feedback.
- 04
Verify the result
Check the diff, tests, and visible behavior in the browser.
- Diff
- Test
- Browser
Video walkthrough
The silent walkthrough follows the same path from notes through Codex to four steps. The complete explanation is repeated below.
What happens in the video
- 1Four raw learning notes form the starting point.
- 2Codex receives the source, goal, boundaries, and definition of done.
- 3The content becomes four accessible steps on the web.
- 4Diff, tests, and a browser check complete the workflow.
Source material
These four notes are the real source material. They define the content, but not yet its visual hierarchy.
- 01Set the goal: describe the result you want.
- 02Provide context: name the project, relevant files, or an example.
- 03Guide the work: answer questions and correct the direction.
- 04Verify the result: read the diff, run tests, and open the change in a browser.
The Codex task
The prompt deliberately separates the task contract from the four-step infographic it produces.
1 · Goal
Goal: Turn the following learning notes into a responsive web infographic titled “The Codex workflow in 4 steps.”
2 · Context
Context: Use only these ideas: set the goal, provide context, guide the work, and verify the result. The infographic belongs in the existing interface and must use its components, design tokens, and language.
3 · Boundaries
Boundaries: Do not put text inside an image, add a dependency, or change anything outside the infographic and its tests. Functional icons must use the existing icon system.
4 · Done when
Done when: The four steps appear as accessible DOM content in the defined order, work at 390 and 1280 pixels without horizontal overflow, support light and dark themes, include a focused test, and have been checked in the browser.
Why this block?
The goal describes the visible end result, including its title. Codex works toward a concrete artifact instead of a vague intention.
Goal: Turn the following learning notes into a responsive web infographic titled “The Codex workflow in 4 steps.”
Context: Use only these ideas: set the goal, provide context, guide the work, and verify the result. The infographic belongs in the existing interface and must use its components, design tokens, and language.
Boundaries: Do not put text inside an image, add a dependency, or change anything outside the infographic and its tests. Functional icons must use the existing icon system.
Done when: The four steps appear as accessible DOM content in the defined order, work at 390 and 1280 pixels without horizontal overflow, support light and dark themes, include a focused test, and have been checked in the browser.Apply it to your own case
Keep the four building blocks and replace their content with your own project. Edit the example prompt right here.
Recreate it step by step
Step 1
Bound the source
Give Codex only the four factual notes and identify them as the authoritative source.
Step 2
Describe the output
Request a responsive DOM infographic instead of an image with baked-in text.
Step 3
Protect project patterns
Require existing tokens, components, and icons, and rule out new dependencies.
Step 4
Require evidence
Make a test, two widths, both themes, and browser verification part of done.
Review checklist
0/4 criteria checked
Self-check
Self-check: Do you think like the prompt?
Three questions test the principles behind the formula and the workflow — no memorizing required.
1 / 3
Official sources
Brands are shown for factual identification only; Creaiter does not claim a partnership.