zero2codex
OpenAI Codex workflow course

Course goal: ship your personal brand site

Build a personal brand site with Codex

Keep improving one project from an empty folder to a responsive one-page site with an introduction, projects, and contact details. Every lesson adds a visible result or a check toward that finish line.

Curriculum

Personal brand site build path

01

Start With Codex

Set up Codex and build the hero section of your personal brand site.

0/4
00|Install And Open CodexInstall the desktop app, sign in, open the site project folder, and send a safe first message.What Codex Is ForBuild the first version of your site with a name, introduction, projects, contact details, and one working button.Choose A Codex SurfaceEdit the site's Projects button locally, then verify its text and behavior in a browser.Your First Useful PromptTurn “add an About section” into a concrete request with content, constraints, and browser checks.
10 minReady

Your First Useful Prompt

Turn a vague coding wish into a prompt Codex can act on safely.

task framingconstraintsexpected checks

Watch, then try

03|把需求寫得具體(CLI 版・25 秒)

真實 CLI 輸出檢視器與本機網站錄影,非 Codex 原生介面;繁中字幕、無旁白,等待區段已剪接。

zero2codex
MP4

Step-by-step

  1. 沿用前一課的 my-brand-site,或從下方練習檔取用本課 before 起點。
  2. 在專案目錄執行本片 CLI 指令;本課權限為 workspace-write。
  3. 核對實際輸出與結束碼,不把文字回報當成瀏覽器操作證據。
  4. 在瀏覽器確認新增自介與既有 CTA 都在。
跟著本片操作:CLI 指令與練習檔(繁體中文)

這是本課的 CLI 替代實作路徑;下方概念課程仍保留其他介面的說明。先安裝並登入 Codex CLI,在 my-brand-site 資料夾內執行下列 macOS/Linux 指令。影片將真實 CLI JSON 事件排版成易讀畫面,下列指令使用一般 CLI 輸出;不是 Codex 原生介面,等待區段已剪接。

codex exec --ephemeral --ignore-user-config --sandbox workspace-write '只改 index.html 的 about 區塊,加上『我喜歡把複雜想法整理成簡單、實用的數位產品。』。保留 CTA『探索我的作品』及其他區塊。檢查該句只出現一次,回報具體結果。'

下載逐課練習檔與實際結果(ZIP)

12-minute lab

Hands-on lab

Make one visible improvement to the same personal brand site with a prompt that clearly states the goal, context, constraints, and proof of completion.

Before you start

  • Open my-brand-site after completing the first two lessons.
  • Preview index.html once so you know its current heading, sentence, and button behavior.

Do it now

Good prompt

Codex, improve the About section in index.html by adding this short paragraph: “I enjoy turning complex ideas into simple, useful digital products.” Add comfortable responsive spacing around that section. Keep the existing design, use one file, add no dependencies, and preserve the Projects button behavior. Verify the About copy and button at wide and narrow browser widths. Report the changed file and what you observed.

What success looks like

  • The About section has one clear paragraph and the project remains a single file.
  • The Projects button still moves to the right section.
  • Codex reports the changed file plus the wide and narrow layout checks.
Stuck? Try this
  • If the result is too broad, reply: “Keep the existing design. Add only the requested About paragraph and spacing.”
  • If verification is vague, ask: “Tell me exactly what you observed at wide and narrow browser widths.”

Plain-language explanation

A useful Codex prompt is not long because it is fancy. It is useful because it tells Codex what outcome you want, what context matters, what rules to follow, and how to prove the work is done.

Think of the prompt as a small work order. If another developer could read it and understand the task, Codex has a much better chance of doing the right thing.

Why it matters

Clear prompts reduce guessing. They also make the final answer easier to judge because you already defined what successful work should look like.

Common beginner mistake

Beginners often write prompts like “fix this” or “improve the app,” which gives Codex too many hidden decisions.

Try this

Take one vague request you might normally send and rewrite it with goal, context, constraints, and done-when criteria.

Completion checklist

  • Your prompt names the desired behavior instead of only naming a file.
  • Your prompt includes at least one concrete verification step.

Sources

08

Finish And Deliver The Site

Polish independent tasks in parallel, then complete one final acceptance review.

0/3

Practice lab

Copyable Codex prompts

Plan before coding

Codex, inspect the relevant files first, then propose a plan. Do not edit until the plan names tests and verification steps.

Verification checklist

  • Relevant files are named before edits begin.
  • The plan includes tests and verification commands.

Verify a UI change

Codex, start the dev server, open the route in the browser, check desktop and mobile layouts, then report the exact evidence.

Verification checklist

  • Desktop and mobile states are checked in the browser.
  • The final note includes exact evidence.

Review focused risk

Codex, review the uncommitted diff. Focus on behavioral regressions, missing tests, and accessibility issues. Do not modify files.

Verification checklist

  • Findings lead with severity and file references.
  • Unchanged files are left untouched.
Every good Codex request says what to change, what to preserve, and how to prove it worked.

Reference

Codex concepts to keep nearby