Skip to content
Creaitercreate your vision with ai
Sign inRegister
All Creaites
Available now8 minBeginner

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.

  1. 01

    Set the goal

    Describe the result that should be visible after the change.

  2. 02

    Provide context

    Name the project, relevant files, existing patterns, or an example.

  3. 03

    Guide the work

    Read updates, answer questions, and correct the direction with specific feedback.

  4. 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

  1. 1Four raw learning notes form the starting point.
  2. 2Codex receives the source, goal, boundaries, and definition of done.
  3. 3The content becomes four accessible steps on the web.
  4. 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.

Pick a building block of the formula

Each block highlights its paragraph in the prompt and explains what it does.

  1. 1 · Goal

    Goal: Turn the following learning notes into a responsive web infographic titled “The Codex workflow in 4 steps.”

  2. 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. 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. 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

  1. Step 1

    Bound the source

    Give Codex only the four factual notes and identify them as the authoritative source.

  2. Step 2

    Describe the output

    Request a responsive DOM infographic instead of an image with baked-in text.

  3. Step 3

    Protect project patterns

    Require existing tokens, components, and icons, and rule out new dependencies.

  4. 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

Why does the context name exactly the four notes as the only source?

Official sources

Brands are shown for factual identification only; Creaiter does not claim a partnership.