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.

Privacy setting

May we measure pseudonymous page views and session replays?

With your consent, PostHog EU measures which pages are opened and additionally records your session: mouse movement, clicks, scrolling and the rendered page content are stored as a replayable reconstruction. Typed input is masked before sending. The contents of sign-in, sign-up, password recovery, the founder chat, the newsletter field, your email display, your quiz answers and the checklists are not recorded at all; on the sign-in and sign-up pages recording is paused. Addresses are always stored without query parameters. A random device identifier and technical connection data such as the IP address are processed as well. In addition, strictly defined usage events are measured: how far a post was read, which article element was used, which call to action was clicked, how a newsletter sign-up ended, how far you get in a course or in the feed (recording only whether a task was correct or incorrect, never your answer itself), which video you start, whether you switch the language, and how a sign-in or sign-up attempt ended — without the email address, without the password, and without the error message. Only values from a fixed list and whole numbers from fixed ranges are transmitted — no input and no free text. We also label production, internal, and automated test visits separately and derive whether a visit came from a known interface such as ChatGPT, Claude, or Perplexity from a known referring domain or a strictly allowed campaign value. The full referring address and query parameters are not sent, and this cannot identify a specific AI model. If PostHog's IP-based geo enrichment is enabled in the project, the service can derive an approximate country, continent, and region; we do not request browser or GPS location. Every visit is also assigned to a page area from a fixed list (for example home, blog, tools, account) — the area is sent, not the address. Page loading and stability metrics are measured as well (Core Web Vitals: LCP, CLS, INP, FCP), without network payloads. A click on a link leading away from the site is recorded only as the target domain from a fixed list, without path, query parameters, or link text. For the Idea Wheel, AI Labelling and Limit Reset tools only the kind of action is measured — spin, option changed, copy or export, for instance — never your input and never a result. Learn more about privacy

Without your consent no analytics code is loaded and nothing is recorded. You can withdraw at any time: withdrawal ends collection immediately; data already collected may have been transmitted by then and is deleted after the storage period.