All guides
AI builds

How to Build a Real App With OpenAI Codex in One Prompt (my exact prompt, no code)

By Zaid Koradia·Updated Aug 6, 2026· 12 min read

You give Codex one long, specific prompt that describes the data, the look, and the rules, and it writes the whole working app in a single file. The trick is not the tool. It is putting real numbers and exact colours inside the prompt, so Codex has nothing left to guess and cannot invent anything.

You build: A finished, good-looking web app built from one prompt, using my exact prompt template, plus the real air-pollution app from my reel that you can rebuild for your own city in about ten minutes·10 min·beginner

For a long time every app I asked AI to build came out looking like a school project. Grey boxes, a sad chart, a font nobody chose. It worked, and I still would not show it to anyone. I assumed I needed to learn design.

My AI content has crossed over ten million views across Instagram, YouTube, and Facebook. I have built automations, agents, apps, websites, and more with AI for myself and for real businesses, and now I teach AI to millions of people across several countries so they get ahead in the AI race. So I kept testing until I found what was actually wrong, and it was not the AI. It was my prompt.

This is the exact prompt structure I use now, the real one, written out properly instead of squeezed into a 40 second reel. You will not find it laid out like this anywhere else, only here on FabRich. If any part looks technical, relax. There is nothing to install, and at the end I hand you the complete prompt that does the whole thing for you.

The one thing that changes everything

Most people prompt like this: build me an app that shows air pollution. Codex then has to invent the data, invent the colours, invent the layout, and invent the point. It guesses about twenty times, and every guess is average. Average twenty times over is exactly what AI slop looks like.

So I stopped asking for an app. I started handing over a specification. Real numbers pasted in. Exact hex colours. The actual sentence I want on screen. What it must never do. Codex is not being creative at that point, it is being precise, and precise is where it is genuinely excellent.

The rule I run on everything: every decision you do not make, the AI makes for you. Take back the decisions you actually care about, and let it keep the rest.

There are five things worth deciding yourself. Put all five in the prompt and the output stops looking generated.

  • The data. Paste the real numbers in. Never let it invent a statistic, because it will, and it will sound confident.
  • The look. Name a specific aesthetic and give exact hex codes. Not modern and clean. Something like 1980s Japanese anime sunset, and then list the colours.
  • The one moment. Every good build has a single thing that makes someone stop. Describe that moment in detail and let everything else be simple.
  • The limits. Say what it cannot use. No libraries, no internet, one file. Limits are why it works first try.
  • The proof. Ask it to show its source on screen, so anyone can check the numbers.

The example: your city, measured in cigarettes

Here is the app from my video, so you can see the five rules doing real work. Berkeley Earth published a comparison that breathing 22 micrograms of PM2.5 for a day carries roughly the same long-term risk as smoking one cigarette. It is a risk comparison from mortality research, not a claim that smog and tobacco are the same thing.

Run that over a year and cities stop being abstract. Delhi averaged 86.1 micrograms over the last twelve months, which works out to 1,428 cigarettes, or 71 packs, that nobody lit. London averaged 8, which is 133 for the year. The World Health Organization puts the safe annual limit at 5.

Berkeley Earth: air pollution and cigarette equivalenceOpen-Meteo air quality API (where the PM2.5 numbers came from, Copernicus CAMS)

Those numbers are already inside the prompt below, so you do not have to fetch anything, sign up for anything, or get an API key. That is on purpose. Every extra step is somewhere the build can break.

Step 1: open Codex

Codex lives inside ChatGPT now. Open ChatGPT, find Codex in the sidebar, and start a new task. If you are on a paid plan you can also ask it to publish the result with Sites, which gives you a real public link you can send to anyone. On the free plan you get the file instead, which works exactly the same when you open it.

ChatGPT (Codex is in the sidebar)

Step 2: paste the prompt

Paste the whole thing below. Do not shorten it. The length is the reason it works, because every line you delete is a decision handed back to the AI.

THE PROMPT (paste this into Codex exactly as it is)
Build me a single HTML file called smog.html that shows how many cigarettes I "smoke" every year just by breathing my city's air.

RULES
- ONE file. Nothing to install, no libraries, no CDN, no internet calls, no API keys.
- It must work when I just double-click it.
- Pure HTML, CSS, JavaScript and Canvas only.
- Never change or invent a number. Use exactly the data below.

THE SCIENCE
Berkeley Earth found that breathing 22 ug/m3 of PM2.5 for a day carries about the same long-term mortality risk as smoking 1 cigarette. So cigarettes per year = (city average PM2.5 / 22) x 365. Say "equal to", never "you smoked", because it is a risk comparison and not literal smoking.

THE LOOK: 1980s JAPANESE ANIME SUNSET POSTER
Bright, saturated and beautiful. Think a city pop album cover. Not a dashboard.

Sky, full screen vertical gradient, exactly these colours top to bottom:
#1B0B3A, #3B1163, #6E1E74, #B02A6B, #E8455C, #FF7A3D, #FFB03A, #FFD972, #FFF0B8

THE SUN is the hero. A huge disc low in the frame, sitting behind the skyline, filled with a radial gradient #FFFCE8 to #FFE873 to #FFC13C to #FF8A3C. Draw horizontal dark slice bands across it for the retro look, and fade the slices out near the edge of the disc.

A flat city skyline silhouette along the bottom in near-black purple #190526, with small glowing windows in warm #FFD24A and cyan #5CF2FF.

Two black telephone poles with sagging power lines across the foreground, pure silhouette.

A few flattened white-pink ellipse clouds drifting slowly across the upper third only. Hard edges, like painted anime cels, not soft blurry blobs.

Over everything: a fine halftone dot texture and faint horizontal scanlines, both very subtle.

LAYOUT
- Top left: a dropdown to pick the city, starting on Delhi, then the city name huge underneath. Headings in Impact or Arial Black, white, with a thick dark outline and a hard pink #FF3D81 offset shadow.
- Small cyan Japanese text above the city name: スモッグ ・ 大気汚染
- Lower left: the cigarette number enormous, counting up from 0 over about 2 seconds. Under it "CIGARETTES A YEAR" in cyan, then a line like "3.91 a day, 71 packs, and you never lit one".
- Press the spacebar and the screen fills with the actual cigarettes, drawn one at a time, white paper with an amber #DD8A2B filter tip, until all of them are on screen. Keep them big enough to see individually. They must not merge into stripes.
- Bottom right, small but always visible: "22 ug/m3 PM2.5 = 1 cigarette, Berkeley Earth. Data: Copernicus CAMS, Aug 2025 to Jul 2026."
- Picking a different city re-animates everything.
- If I pick a clean city like London, switch the sky to a bright blue daytime gradient (#1E63B8, #8FD1F5, #EFFAFF) with white clouds, clear the haze, and turn the text dark so it stays readable on the light background.

THE DATA (city, average PM2.5 ug/m3, cigarettes per year)
Delhi 86.1 1428 | Beijing 85.0 1410 | Jakarta 71.5 1186 | Lahore 71.1 1180
Patna 68.0 1128 | Lucknow 64.5 1070 | Kanpur 63.8 1058 | Varanasi 62.2 1032
Kolkata 60.7 1007 | Dhaka 48.6 806 | Dubai 46.4 769 | Chandigarh 44.9 746
Jaipur 40.8 676 | Mumbai 34.9 579 | Indore 32.0 530 | Hyderabad 31.0 514
Ahmedabad 29.5 490 | Tokyo 27.1 449 | Pune 26.4 438 | Chennai 22.4 372
Bengaluru 22.4 371 | Bangkok 21.0 348 | Singapore 17.0 282 | New York 14.1 234
Zurich 10.4 173 | Sydney 9.9 165 | London 8.0 133

Packs = round(cigarettes / 20).

Make it look like a real product, not a demo. Then give me the finished smog.html file.

Step 3: open it

Codex gives you the file. Download it and double-click it. It opens in your browser and it works offline forever, because there is nothing for it to phone home to. If you asked for a Sites link instead, just open the link.

If you want to change something, do not start again. Stay in the same chat and say what is wrong in plain words. Make the sun bigger. The number is hard to read. Add my city. Codex already has the whole thing in its head, so small corrections are quick.

How you build from now on

This is the part worth keeping long after this one app. When you want something built, open a new chat and write the five things: the real data, the exact look, the one moment that matters, the limits, and the proof. Then paste it and let it run.

You are not learning to code. You are learning to describe things precisely, which is a skill you already have in every other part of your life. The prompt above is a template. Swap the data for your sales numbers, your gym progress, your city's rainfall, your football team, and the same structure holds.

If something goes wrong

  • You open the file and the screen is blank: you probably asked for a library or a 3D engine somewhere. Tell Codex no libraries, one file, plain JavaScript only, and ask it to rebuild.
  • It looks grey and boring: you skipped the colours. Paste the hex codes back in. Naming an aesthetic without exact colours is the single most common reason output looks generated.
  • The cigarettes look like stripes: they are too small. Tell it to draw fewer per row and make each one clearly visible.
  • It invented a city or a number: add the line saying never change or invent a number, use exactly the data below, and paste the list again.
  • The text disappears on the London sky: the light background needs dark text. Tell it to switch the text colour with the theme.
  • It gives you several files: say you want one single self-contained HTML file with everything inside it.
Do I need to know how to code?
No. You paste the prompt and open the file it gives you. I am not writing code either, I am describing what I want carefully and letting Codex do the typing.
Do I need to pay for ChatGPT?
Not for this. The prompt produces a file that works on any plan. The live public link through Sites is a paid feature, but the app itself is identical either way.
Where do the pollution numbers come from?
Copernicus CAMS, the European atmospheric monitoring service, pulled through Open-Meteo. It is 8,760 hourly readings per city covering August 2025 to July 2026, averaged into one number per city.
Is the cigarette comparison real?
It is real and it is published, but read it precisely. Berkeley Earth compared long-term mortality risk, so it means the risk is similar, not that breathing smog is chemically the same as smoking. That distinction matters and I keep it on screen.
Why is my city not in the list?
I only included 27. Ask Codex to add yours and give it the average PM2.5 for your city, which you can look up on Open-Meteo or IQAir. Do not let it guess the number.
Are these numbers too high or too low?
If anything they are low. Model data reads under ground sensors. Indian ground stations put Delhi nearer 104.7 micrograms, which would be about 1,737 cigarettes instead of 1,428.
Can I use this prompt for something completely different?
That is the point. Keep the five-part structure and swap the data and the look. The structure is what makes it work, not the subject.
Will Codex build exactly what I see in the video?
Close, not identical. AI output varies between runs. Run it, then correct it in the same chat with plain words until it matches. Two or three small corrections is normal.

Straight with you: the reel that brought you here is a paid partnership with OpenAI. The prompt, the method and the numbers are mine and they are the same ones I actually use. Berkeley Earth and Copernicus CAMS have nothing to do with the partnership, and you can check every figure yourself with the links above.

This guide is the what. AI Mastery is the how, done with you, so you ship in the first lesson instead of reading about it. If you would rather have me in the room, 1:1 coaching is me building your setup with you live. And if you would rather it just existed, Hire FabRich is my team building it for you.

The King tier

All-Access. Every course, free, forever.

Own every course we have, plus every single future course we ever make. One payment. Yours for life. Never pay for a Claude course again.

  • Every course, today and forever
  • Every future course free, the day it drops
  • What you own keeps growing, you never pay again
  • Lifetime access and updates
Save 79%

Years of courses, worth $1,417 today and climbing

$299

Lock it for life. Every future course is free, so you never pay more, ever.

Get All-Access
The inner circle

1:1 with Zaid. Direct access while you build.

The highest level. A direct line to me and a live call every week. I help you learn and build your own project, step by step. You do the work, I guide you the whole way.

  • A live call with me every week
  • A direct line to me, I reply on weekdays
  • A room of other serious builders
  • I follow you back and reply on Instagram

from

$1,499

Only 2 of 10 seats left this month.

Apply for 1:1