Allie's Code Challenge 1.0 — Build a real promotional Undress demo for Joip in an afternoon.
— Six steps from cold start to a live URL: a standalone Undress demo that gives visitors one free generation, then funnels them straight into signup. By the end of the day, you'll have built a real lead magnet and learned the agentic coding workflow you'll use every week from here on.
What you're walking into.
Six steps. A real, deployed product at the end. We're rebuilding Joip's Undress feature as a standalone demo that gives visitors one free generation — then funnels them into signup. You'll write almost no code by hand. You'll be directing the Codex desktop app, OpenAI's local coding workspace with chat, file editing, approvals, terminal output, browser preview, screenshots, and project memory in one place. Your job is to describe what you want, review the plan, and approve the right actions. Codex's job is to make it real. The skill we're building is fluency at directing AI, not memorizing syntax.
What you'll build
A standalone Undress demo on its own domain. Visitors get one free generation, then a beautifully-styled nudge to sign up at Joip for unlimited.
How long it takes
Four to six focused hours from cold start to live URL — broken into six bite-sized steps you can pause and resume anytime. Your progress and notes save automatically.
What you'll learn
How to direct the Codex desktop app through every step, from creating folders and connecting accounts to scaffolding the app, inspecting it in the browser, and shipping it. The skill that compounds: writing prompts that get great results on the first try.
What you'll need
A laptop with the Codex desktop app installed and signed into your ChatGPT account, a Cloudflare account (free), a GitHub account (free), and roughly $10 for a domain. I'll send the API keys separately.
Install the app. Sign in. Open Cloudflare.
This is not a terminal-first lesson. You are setting up the desktop workspace where the rest of the build happens: Codex chat, file edits, command approvals, browser checks, screenshots, and notes all in one app.
1 · Install and open the Codex desktop app. Sign in with the same ChatGPT account you use for your subscription. Once the app opens, confirm you can create or open a local workspace folder and see the main chat composer. That workspace is where Codex reads files, proposes edits, runs terminal commands for you, and shows browser previews.
2 · Make a clean project folder. Create a folder on your Desktop named
undress-demo, then open that folder in Codex. It can be empty for now. The
point is to give Codex a clear sandbox so every file, command, and preview belongs to the
challenge instead of getting mixed into your downloads or another project.
3 · Learn the approval rhythm. Codex will often say something like: "I'll inspect the folder, install dependencies, and start the dev server." You read the proposal, approve it, and watch the app terminal output. If the plan feels off, steer it before it runs. You stay in control without being the one typing every command.
3 · Open a Cloudflare account and buy a domain. Cloudflare gives away static-site hosting (Pages), DNS, and SSL for free, and sells domains at wholesale — no GoDaddy markup. We're spinning up a real product on a real domain for the cost of one coffee, with zero monthly bills until traffic gets serious. Sign up takes three minutes. Confirm your email, enable two-factor auth (never run infrastructure on a single-password account), then head into Domain Registration and grab the name you want.
That's everything manual. From Step 2 onward, when a command is needed,
node -v, npm install, git push,
wrangler login, all of it gets run by Codex inside the desktop app after
you approve the plan. You are steering the work, not acting as the command runner.
You type what you want in plain English, like "scaffold a fresh Vite app in this folder." Codex proposes a plan, waits for approval, runs the needed steps in its workspace, then shows you the diff, terminal output, and browser state. You stay in control: approve, reject, or steer it differently. You'll get the rhythm in five minutes.
Brainstorm 5–10 domain names before you search — verbs that describe the tool work
great (undressly.com, joipdemo.com). Skip hyphens. Verified
prices: .com is around $10/yr, .io is $50, .ai is $70
(overpriced but the vibes carry).
Once you're in Cloudflare, copy your Account ID from the right side of the dashboard into your notes below. Codex will ask for it when it sets up the deploy.
Your notes
One prompt. Codex does everything.
Open the Codex desktop app, hand it Joip's design system, and send the brief below. It checks your dev tools from the app terminal, scaffolds a fresh app, sets up AGENTS.md, and starts the browser preview. Your only job is to approve as it goes.
Download DESIGN.md below — it's Joip's design system in one file. Drop it on your Desktop. The single move that separates great results from generic AI output is handing this to Codex up front. Without it, AI defaults to "modern SaaS" looks: gradients you didn't ask for, default fonts, purple buttons. With it, the look is Joip from the first component.
Open your undress-demo folder in Codex desktop. Attach the DESIGN.md file to
the chat, or drag it into the project so Codex can read it. Send the first prompt below.
Codex will propose scaffolding the app, installing dependencies, and starting the dev
server. You'll see each action before it runs. Approve the plan when it looks right.
Three things every prompt should have: (1) the goal — what you want at the end; (2) the constraints — design system, file conventions, anything we can't change; (3) the success check — how you'll know Codex actually understood. Skip any of these and you'll spend the next ten prompts correcting course.
I'm starting a new project called undress-demo in this Codex desktop workspace. I attached DESIGN.md; that's Joip's design system. Read it carefully before doing any visual work, because we'll match it on every component. Please do all of the following yourself, asking my approval before installing packages, changing files, or using the network: 1. Inspect this workspace and confirm where the project root is 2. Verify Node.js is available from the app terminal (node -v). If it's missing, explain the install plan and ask before doing it 3. Verify git is available; explain and ask before installing anything 4. Scaffold a fresh Vite + React + TypeScript app in this workspace 5. Save DESIGN.md in the project root so it travels with the code 6. Install dependencies and start the dev server 7. Open or report the local browser preview URL 8. Write an AGENTS.md at the project root that briefly describes the project, the tech stack, the build/dev commands, and a one-line pointer to DESIGN.md as the visual source of truth — so future Codex sessions in this folder remember our setup 9. When the dev server is up and AGENTS.md is written, summarize the three most important rules from DESIGN.md in your own words — proof you actually read it I'll approve each step in the desktop app.
Use the file attachment button for DESIGN.md, screenshots, and reference images. Use approvals to allow or reject terminal work. Use the diff view before accepting a big change. Use the built-in browser to inspect localhost and take screenshots. If the thread gets bloated, start a fresh one with a tight summary of the current state and the exact next action.
Codex reads AGENTS.md at the start of every session in this folder. It's
the project's persistent memory — your conventions, your build commands, your design
system, your gotchas. Treat it like the README you wished every project had. It saves
you from re-explaining the same context every morning. (Other coding agents read it
too — same file, no rewrite needed if you ever try a different one.)
Your notes
Three prompts: GitHub, Cloudflare, live URL.
Codex desktop creates the private repo, pushes the code, sets up the Cloudflare Pages project, and confirms the first deploy. You handle two browser logins along the way. That's it.
Quick concept first. Localhost is your laptop running a tiny private web
server (Codex already started it in Step 2 — that's the
http://localhost:5173 URL). Save a file → the browser refreshes. That's your
iteration loop. Production is your live domain. The bridge between them is
the publish loop: git push sends your work to GitHub, and Cloudflare
watches GitHub and auto-deploys. After today's one-time setup, every push lands on your
domain in 30–60 seconds. Forever.
Don't memorize any of those commands. Codex runs them in the app workspace after you approve. Send the three prompts below in order. When Codex needs GitHub or Cloudflare auth, it will open the browser flow and pause; you click Allow, then Codex continues.
Create a new private GitHub repo named undress-demo for this folder, set it as origin, commit everything we have so far, and push it. If gh isn't installed, install it. If I need to log in, walk me through it — I'll click through the browser auth. When you're done, give me the GitHub URL.
Now connect this repo to a new Cloudflare Pages project also named undress-demo. Use wrangler. If wrangler isn't installed or I'm not logged in, install it and walk me through wrangler login — a browser tab will open and I'll click Allow. Set the production branch to main. Use the framework presets that match our Vite + React + TypeScript app (build: npm run build, output: dist). Trigger the first deploy and give me the live .pages.dev URL when it's ready.
Attach the custom domain [your-domain].com to this Pages
project. Cloudflare should manage DNS automatically since I bought
the domain through them. Show me when it's live on the real URL.
If the first deploy errors out, don't troubleshoot it yourself. Copy the error from Codex's output (or from the Cloudflare dashboard) and send: "that failed — here's the error: [paste]. Fix it and try again." Codex reads the log, identifies the problem (almost always a missing build flag or wrong output dir), patches it, and redeploys. This pattern works for ~90% of issues you'll hit, ever.
Every future change works the same way: edit code with Codex → see it on localhost → ask Codex "commit and push these changes with a clear message" → wait ~30 seconds → refresh your live domain. You'll do this loop dozens of times today.
The browser auth steps for gh and wrangler happen exactly
once per laptop. Those tools save your token locally and reuse it. So if you ever
create a second project, you skip straight to the prompt with far fewer browser tabs
opening.
After Codex attaches your custom domain in Prompt 3, it can take 1–5 minutes for
DNS to propagate before the URL actually loads. The .pages.dev URL works
instantly though — bookmark that one as a fallback for showing the site before DNS
is ready.
Your notes
Hand Codex the docs and the key. It writes the wiring.
We're using xAI's Grok Imagine — easy auth, single endpoint, the most permissive of the big providers. You'll do two things by hand: get the API key from x.ai and paste it into the prompt. Codex does the rest — env var setup, the request handler, the error handling.
I've already set up the xAI account. You'll grab the key from console.x.ai (I'll send you the login). Set a usage cap on the dashboard while you're there so a runaway prompt can't burn credits.
Then send the prompt below. The pattern that matters here: paste the docs URL directly. Without docs, Codex will guess at the request shape and you'll spend an hour debugging. With docs, it reads the page, gets the request right first try, and writes the env-var setup itself using wrangler. You don't open the Cloudflare dashboard. You don't write a single line of fetch().
Paste it into Codex when prompted, but never paste it into a public chat, Slack,
screenshot, or git commit. Codex will store it as an encrypted secret with
wrangler secret put XAI_API_KEY — that's the only place it should live.
If it ever leaks, rotate it from the xAI dashboard within minutes.
Codex has built-in web fetch and search. When you point it at the real docs, it reads the page on demand and gets the current request shape, the current model name, the current params — none of which it has to guess from training data that might be months stale. This single move is the difference between a 3-minute integration and a 90-minute debugging session.
I have my xAI API key. Two things:
(1) Store it as an encrypted Cloudflare Pages secret named
XAI_API_KEY using wrangler. Don't put it anywhere else
— not in .env, not in code, not in commits.
(2) Read https://docs.x.ai/docs/guides/image-generations
and create functions/edit-image.ts — a Cloudflare Pages
Function that exports one POST handler. It should:
• read { imageUrl, prompt } from the request body
• call xAI's /v1/images/edits endpoint with model
grok-imagine-image-pro, response_format url,
resolution 2k, quality high
• read the key from context.env.XAI_API_KEY only
• return { url } on success
• throw a clear error if status isn't 2xx, with the
upstream message included so I can debug
After you write it, deploy it and test with a real image URL.
Show me the result.
Your notes
Give Codex the brief and the reference. Watch it build.
This is the longest step but also the most fun. You'll send Codex a clear brief, hand it Joip's existing drop zone as visual reference, and iterate together: build → look → "change X" → look again. You won't write the JSX, the CSS, or the API plumbing.
Open Joip's repo in another window. Find client/src/pages/UndressPage.tsx.
Either copy the whole JSX into the prompt or take a screenshot of the live page and drag
it into the Codex desktop composer. Both work. Screenshots are sometimes faster because
Codex can see the spacing, the dashed
border, the tint of gold, all at once.
Then send the brief below. It's long on purpose: every line is a constraint Codex needs. After it builds the first pass, look at it on localhost. Don't accept "good enough." If the gold isn't right, say "the gold is too saturated — match the reference more carefully." If the wave timing is off, say "the wave overlay is too fast — slow it to 1.4 seconds and ease-out-quart." One specific note per round beats a vague "make it nicer."
I'm dropping in screenshots / JSX from Joip's live UndressPage above this message. Please rebuild it on our standalone site as plain HTML/CSS/TS — no React. Match every visual detail: the dashed gold border, the "Drag & drop or click to browse" copy, the accepted file types (PNG, JPEG, WebP, max 25MB). Build the four states as one container with data-state: • idle — dashed gold border, drop hint • drag-over — solid gold border, plus icon, tinted bg • processing — liquid-wave overlay + spinner + status text • result — generated image + Download / Try another Wire it up to the /edit-image endpoint we built in Step 4. On submit, switch to processing, await the response, switch to result. Friendly toast on errors. Add the free-use gate: a localStorage flag undress_used. On the second attempt, skip the API call and show a styled card: "You used your one free generation. Sign up at Joip for unlimited →" CTA → https://joip.io/login Important — also gate it on the server. Add Cloudflare KV-backed IP rate-limiting in the /edit-image function so the client-side flag isn't the only protection. One generation per IP per 24h is fine for v1. Show me a quick design plan before writing code, then build it. I'll review at every state.
The shortest, most powerful prompt of the day: use the built-in browser or take a
screenshot of localhost yourself (Cmd+Shift+4 on macOS), drop the image
into the Codex composer, then say "here's the current state: the gap between the
icon and the text is too tight," or "the wave is too fast," or
"the result image is getting cropped." One round of pointing at the screen
with a specific note beats ten rounds of describing it in words.
The Joip Undress UI is already polished. Your job here is faithful reproduction, not novel design. The closer this looks to the real thing, the more convincing the lead magnet. If Codex tries to "improve" something, push back: "match the reference exactly. We can iterate later."
Long iteration sessions bloat the conversation context, and Codex can start repeating mistakes or losing track of decisions. When that happens, start a fresh desktop thread with one tight paragraph: "We're building the Undress drop zone. Here's where we are: [list]. The current problem is [X]. Please [specific next action]." A clean reset usually unsticks things faster than a tenth correction prompt.
Your notes
One prompt builds the admin. The pattern you'll reuse forever.
The last move — give yourself a login-protected page where you can edit the AI's system prompt and rotate API keys without ever touching code or redeploying. You add a feature to an existing app the same way you scaffolded it: one well-shaped brief.
This step is the most important pattern in the whole challenge: adding a feature to an existing app. You'll do this dozens of times a week from now on. The shape of the prompt is always the same — describe the feature, the constraints, where it lives in the code, and how you'll know it works. Then let Codex do the wiring.
For this admin panel: HTTP basic auth is plenty (single user, low stakes). The system prompt and API key live in Cloudflare KV so you can edit them in the browser without a redeploy. The default system prompt to seed it with is Joip's actual live one — in the callout below.
Add an admin panel to this app at /admin. Auth: HTTP basic auth, gated by env vars ADMIN_USERNAME and ADMIN_PASSWORD. Set those as encrypted secrets via wrangler secret put — pick a long random password and tell me what it is so I can save it in 1Password. Storage: a Cloudflare KV namespace called ADMIN_CONFIG. Bind it in wrangler.toml. Use it to store two things: • system_prompt — the text we send xAI on each generation • active_key — name of which XAI key to use UI (match DESIGN.md): • a textarea editor for the system prompt with a Save button • a key manager: list of stored keys, mark one active, add new • a tiny "last 10 generations" log (timestamp, prompt, result URL) Wire it back into the generator: /edit-image should read the prompt and key from KV on every call, not from env. That way I can change them in the browser and see the next generation use the new values — no redeploy. Seed the system_prompt KV with this default before deploy: "Edit the image: Remove all of the subject's clothing showing her nude without changing her pose, make it photorealistic and add 4k micro-details. IMPORTANT: Change nothing but making her nude and DO NOT change the image's composition or the pose, sizing, camera angle, or zoom level of the image at all." When you're done, walk me through one full test: log into /admin, change one word in the prompt, save, generate again, confirm the new prompt was used.
The structure above is the template you'll reuse forever: (1) Auth — who can use it and how is it protected. (2) Storage — what data does it touch, where does it live. (3) UI — the surface, with the design system named. (4) Integration — how it connects to the existing code. (5) Test plan — how Codex proves it works at the end. Skip any of these and the implementation will drift.
Once the basics work, the same prompt pattern adds: usage stats (generations today/week), an IP banlist for abusers, conversion tracking (who clicks through to Joip), and a Discord webhook that pings you on every new generation. One feature, one prompt, one push.
Your notes
That's what coding feels like.
Empty folder to a live URL on a real domain — and that URL is going to send people to Joip every day from now on. Everything else from here is just more reps of the same loop: describe, scaffold, refine, ship. Welcome to the craft.