From skeleton to something you'd actually send people
Right now your site is a well-built empty house: Session 2's homepage skeleton, guarded by Session 3's AGENTS.md and skills. Today it gets furniture - three finished sections built from YOUR notes, in YOUR voice, with a design that survives a screenshot. This is the session where the project stops being an exercise and starts being your website.
Pages from raw material 8 min live
The Session 1 homework - a plain notes file with your bio, your builds, your ideas - was the real work. Today's rule: notes first, generate second. Codex shapes your material; it never invents it.
LiveNotes first, generate second4 min▶
Ask an AI to "write my about page" from nothing and you get a plausible stranger: confident, generic, and not you. Give it real raw material and a job description, and it becomes what it's actually good at - an editor. The difference is one prompt:
- Verbatim where it's good: your best lines survive untouched - that's what keeps the page sounding like you.
- Tighten where it rambles: editing is the job you're delegating, not authorship.
- Flag, don't pad: "flag anything that sounds like filler" turns Codex into an honest editor instead of a content mill.
LiveKeeping YOUR voice - the skill does the guarding2 min▶
You encoded your voice once, in Session 3's $content-voice skill - sentence length, warmth, the words you'd never use. Now it earns its keep: every content prompt today runs under it, so you're not re-explaining your taste in every message.
- Invoke it explicitly when content is the point: "use $content-voice for all copy in this pass".
- When output drifts ("that doesn't sound like me"), fix the skill, not just the page - the correction then applies forever.
A learner's first generated bio opened with "As a passionate, results-driven professional..." - three things her $content-voice skill banned. One message ("re-read $content-voice, then rewrite the bio") fixed the page. Adding "never open with 'As a...'" to the skill fixed every future page too.
Self-studyWhat "good raw material" looks like2 min read▶
| Section | Raw material that works | What Codex does with it |
|---|---|---|
| About | A short honest bio + 2-3 specifics (what you do, what you care about) | Tightens, orders, keeps your phrasing |
| Showcase | 3-5 builds, one line each: what it is, why it exists, one real result | Formats into cards, asks when a line is vague |
| Ideas | 2-3 ideas as rough paragraphs - unpolished is fine | Trims to crisp notes, flags where you trailed off |
Thin notes are fixable: ask Codex to interview you. "Ask me five questions that would make my showcase entries concrete" fills gaps with YOUR answers, not its guesses.
The design polish loop 10 min live
Codex can look at a screenshot of your page and critique it like a designer - then fix what it found. Screenshot, critique, fix, reload: run the loop until the page survives a hard look.
LiveThe structured critique prompt4 min▶
"Make it prettier" gets you random churn. A structured critique gets you a designer's read. Screenshot the page (full window), drop the image into Codex, and send this:
- "Don't change anything yet" keeps critique and fix as separate moves - you stay the editor-in-chief.
- Apply fix #1 only, reload, re-screenshot. If the critique was right, the next loop's complaints get smaller.
- Disagree freely: "I like the big name, skip fix 2" is the loop working, not failing.
LiveTaste rules - the three that do most of the work2 min▶
- One accent color. One. Everything else is ink, paper, and grays. The second accent is where template-smell starts.
- Whitespace is a feature. When in doubt, add space, not elements. Cramped reads as amateur faster than any font choice.
- Kill anything that looks templated. Stock hero gradients, three-icon feature rows, "Lorem"-shaped copy - if you've seen it on a thousand sites, it's hiding you.
Self-studyWhen the loop stalls - three escape hatches2 min read▶
Around loop three or four, critiques sometimes turn cosmetic ("maybe 2px more padding") while the page still feels off. That's not done - that's stalled. Three ways out:
- Ask for a bolder read: "Forget small fixes - if you redesigned ONE thing about this page to make it memorable, what would it be?" You can always say no.
- Bring a reference: screenshot a site whose feel you admire and ask "what does this page do that mine doesn't - structurally, not content?" Borrow the principle, never the look.
- Change one variable, hard: double the type scale, or strip every border, or try the accent somewhere unexpected. Reload, react, keep or revert. Git (next session) makes this fearless.
The professional pass 6 min live
Pretty on your laptop isn't done. Done means it works on a phone, for someone using a keyboard, for someone with low vision, and on a slow connection. One audit prompt covers the ground.
LiveThe audit prompt - responsive + accessibility in one pass3 min▶
"Fix what's safe, list what needs my judgment" is the key move - contrast tweaks and alt text are safe; "your gray-on-gray ideas section fails contrast, want a darker ink or a lighter card?" is a design decision that stays yours.
Self-studyThe professional-pass checklist3 min read▶
| Check | How to verify | Why it matters |
|---|---|---|
| Phone-width layout | Resize the browser narrow, or open on your phone | Most visitors arrive from a phone - a LinkedIn tap, not a desktop bookmark |
| Mobile menu | Every section reachable at narrow width | A nav that vanishes on mobile is a site with one page |
| Contrast | Squint test + ask Codex to check ratios | Low-contrast "elegant" gray is unreadable in sunlight and fails real users |
| Alt text | Every meaningful image has a real description | Screen readers, broken images, and image search all read it |
| Heading order | One h1, then h2/h3 without skips | It's the document's outline - assistive tech navigates by it |
| Keyboard nav | Put the mouse down, Tab through the whole page | If you can't reach it by keyboard, some visitors can't reach it at all |
| Image sizes | Nothing silly-large; ask Codex to flag >300KB | A 4MB hero photo is the difference between instant and "is this broken?" |
Build the three sections from your notes ★ 12 min · everyone builds
Open your project and confirm your notes file is in it. Thin notes? Two minutes now: one honest line per build, one rough paragraph per idea.
Run the Part 1 GCOB prompt - notes as source of truth, $site-design-system for layout, verbatim/tighten/flag boundaries. Let Codex build all three sections.
Now the important part: read what it wrote ABOUT YOU, slowly. Not the code - the words. Does the bio sound like you? Are the showcase claims true?
Find the exaggeration - there's almost always one - and fix it: "It made my dashboard project sound grander than it is - I built it for one team, not 'transformed the organization'. Tone it down to what actually happened."
Check the flags: everywhere Codex marked filler, either supply a real detail or cut the line. No padding survives.
This is the discernment moment of the whole course. The tool will happily inflate you - "spearheaded", "cutting-edge", "at scale" - and it reads as fake to everyone who actually knows you. The learners whose sites land are the ones who caught the inflation and toned it DOWN. Accurate and modest beats grand and hollow, every time.
Two full polish loops ★ 8 min · everyone loops
Loop 1: screenshot the full page, drop it into Codex with the structured critique prompt from Part 2. Read the three ranked fixes.
Apply fix #1 only - "apply your first fix, nothing else" - then reload and look. Better? Worse? Say so.
Loop 2: fresh screenshot, same prompt. Notice the complaints got smaller - that's the loop converging.
Apply the new top fix. Two loops in under eight minutes - now you know the cycle you'll run for the rest of this site's life.
The audit ★ 4 min · follow along
Run the Part 3 audit prompt - accessibility + mobile, fix what's safe, list what needs judgment.
Watch what it fixes silently (alt text, a contrast nudge, a heading-order swap) and read the judgment list out loud.
Make one judgment call from the list, then open the site on your actual phone. That's the render that matters.
This week ◐ 45 min total
- Two more polish loops - fresh screenshot, structured critique, top fix only. The loop should feel like reflex by Session 5.
- Show the site to one honest friend. Collect exactly 3 reactions - first impression, one confusion, one favorite thing - and turn EACH into a Codex iteration. Real feedback beats ten self-critiques.
- Finish all showcase entries. Every build gets its honest line and real result. Session 5 ships whatever exists - ship the finished version.
- Optional: run the audit prompt once more after your edits - new content can quietly reintroduce old issues.
Three questions before you go 🎯 ◐ 90 seconds
1 · Why does the workflow insist on notes first, generate second?
Codex shapes your material; it never invents it. "Verbatim where good, tighten where rambling, never add facts" is the boundary that keeps the page yours.
2 · The polish loop, in order:
Screenshot what's real, get a ranked critique, apply the TOP fix only, reload with fresh eyes. One fix per loop - batching hides which change worked.
3 · The accessibility pass catches...
Contrast, alt text, heading order, keyboard nav - plus the mobile layout and oversized images. Fix what's safe; design trade-offs stay your call.
Official sources covered
This session applies OpenAI's official prompting and iteration guidance to real content and design work - docs at learn.chatgpt.com and free courses at OpenAI Academy.