Skip to content
Under the Hood
Decks
5

Chapter 5

Making real things

The build loop, and shipping something real this week.

3 things to try in this chapter

✦ AI presenter · 15s

A Lego minifigure in a bright Lego city

Transcript

Wanna know the best part about AI? You can build real stuff with it — apps, websites, even games — without knowing how to code. You just snap the ideas together and see what happens. That's the whole game.

Start outside

The best ideas don’t start at a keyboard. Before you open a single tool, go outside and walk. Say the idea out loud while you go — into your phone’s voice recorder, rambling and half-formed, for five minutes or an hour. You’ll look slightly mad. Doesn’t matter.

Here’s the whole method. Walk until the idea starts coming out — what it is, who it’s for, why you care, the bit you can’t figure out. Keep talking past the point where you feel finished; the good stuff often turns up there. Then get the transcript (most recorder apps make one) and paste the entire mess to the AI with one line: “Here’s my idea — help me shape it.”

The transcript is the prompt. It’ll be richer than anything you’d have typed, because you think differently on your feet — looser, quicker, more honest. Twenty minutes of rambling from a walk gives the machine far more to work with than two tidy sentences composed at a desk.

The order matters more than it looks. Start at the keyboard and the AI’s first suggestion quietly becomes the plan — it’s fluent, it’s instant, and before you notice, you’re building its idea instead of yours. Start outside and you arrive already knowing what you want, with something to defend when the machine suggests otherwise. It still does the shaping and the building. It didn’t do the choosing.

There’s a plainer reason too: your body is part of how you think. Moving shakes ideas loose in a way sitting doesn’t — it’s why answers turn up in the shower and on bike rides, never on demand. Watch who builds the best things this week. It’ll be whoever keeps leaving the desk and coming back with something.

You can make, not just watch

Most people use these tools to consume — ask a question, get an answer, move on. The far more interesting move is to make something.

A real website. A working game. A song with your lyrics. An app that does a thing you wished existed. All genuinely within reach now, this week, by you.

Here’s what most grown-ups haven’t clocked yet: the thing that used to take a team, a pile of money, and months — a real app, a website people can visit — you can make in an afternoon. One curious kid and a good AI.

Getting from “I have an idea” to “the idea is real and my friends can use it” used to be the hard part. For basically everyone, forever. Now it mostly isn’t. So the thing between you and building something isn’t money, and it isn’t being some genius. It’s whether you actually sit down and try.

Pick the shape before the tool

Before choosing an AI app, decide what another person needs to receive. A page they can use? A deck they can follow? A table they can sort? A diagram that makes one relationship visible?

The choice · shape before tool
What must another person receive?
01

Page

visit + interact

02

Deck / doc

read in order

03

Data tool

explore + calculate

04

Diagram / image

see a relationship

Choose the container first. The tool comes second.

A page, document, data tool, and diagram ask for different information. Decide what another person needs to receive before choosing the machine.

The shape changes the job. A website needs navigation and working controls. A deck needs a sequence. A data tool needs clean fields and correct calculations. An image needs composition, light, and a clear subject.

Once the shape is clear, tool choice gets much easier. You are no longer asking which AI is best. You are asking which tool can make this kind of thing and still let you test it.

Every container also changes what counts as proof. A document can be checked sentence by sentence. A calculator needs test cases. A diagram must show the relationship accurately. A website has to survive real clicks on a real device. Choose the proof when you choose the shape.

Three ways to give AI a table

You can paste a small table, upload a clean CSV, or show a screenshot when the data is trapped in a page or PDF. None of those routes begins with analysis. First, prove the table arrived correctly.

The route · data in, evidence out

Paste

small + simple

watch the size

CSV

many clean rows

check the headers

Screenshot

trapped in a page

pixels can be misread

recreate the tableask a known answerthen analyze
Pasted text, a CSV, and a screenshot do not carry information equally. Confirm the table survived before asking what it means.
  • PasteFast for a small table. Keep the headers, do not paste thousands of rows, and check that columns did not slide out of place.
  • CSVBest for many clean rows. A CSV is plain text that preserves rows and columns; one clear header row makes it much easier to read.
  • ScreenshotUseful when copying is impossible. The AI has to read pixels first, so a cropped label or blurry number can quietly change the data.
  • The gateAsk it to recreate the table, count the rows, and answer two questions whose answers you already know. Only then ask for patterns or conclusions.

Two AI systems giving the same answer is useful, but it is not proof. They can rely on the same bad source, make the same assumption, or copy the same calculation mistake. For an important claim, return to the original data, calculate it independently, and look for evidence that did not come from either model.

Asking a model to explain its steps can help you inspect an answer. It does not reveal a guaranteed record of the model's hidden reasoning, and a neat explanation can still defend the wrong result. Check the numbers, not the confidence of the explanation.

Planner before Send. Explorer after

Making with AI uses two different modes. Before generation, plan the frame. After the result arrives, explore what actually happened.

The pivot · before and after Send

Before generation

Planner

goalfactsshapelimitschecks
Send

After generation

Explorer

noticeask whychange one thingtest

Plan the frame. Then let the evidence change your next move.

Before generation, define the frame. After generation, inspect what happened and let the evidence shape the next move.
  • The PlannerNames the goal, audience, facts, examples, limits, output shape, and test before asking the machine to make anything.
  • The ExplorerReads what arrived, notices what feels wrong, asks why, changes one thing, runs a test, and stays willing to revise the original plan.

Strong builders switch modes on purpose. Planning forever becomes fear dressed as preparation. Exploring without a plan becomes endless random generation. Send is the pivot: decide enough before it, then let evidence teach you after it.

The build loop

Making something real follows a loop. The same five steps, whether you’re building a song or a website. Learn the loop and you can build almost anything.

The loop · idea to shipped
an idea in your head
1Talk it out
2Plan it
3Build it
4Verify it
5Ship it

Then you go around again — fixing, adding, polishing. Each lap is faster than the last.

Out the other end: a real thing, live on the internet.

Every real thing gets built the same way: a loop you run over and over, getting faster each time around.
  • 1. Talk it outWalk around and describe the idea out loud, to a friend or a recorder — the walk from the start of this chapter is this step. What is it? Who’s it for? What should it do? Don’t build yet. Get it clear in words first.
  • 2. Shape it into a planHave the AI turn your rambling into a proper plan — sometimes called a PRD, a product requirements document. A short, ordered list of what gets built. This is where vague becomes buildable.
  • 3. BuildHand the plan to a building tool and let it make the first version. This part is faster than you’d believe. Minutes, often.
  • 4. VerifyActually try it. Click every button. Find what’s broken or wrong or ugly. The AI will not tell you what it got wrong — that part is your job, and it’s the part that matters.
  • 5. Ship and showPut it somewhere real and show it to a person. A live link beats a perfect idea that never left your head. Then loop back: fix, improve, repeat.

The loop never really ends — you just go round it faster and with better taste each time. The first lap is clumsy. By the tenth, you’re shaping the plan more sharply, catching problems earlier, knowing what “done” actually feels like. And the loop transfers — a song, a site, a business, a school project all go round the same five steps.

Turn your taste into a visual guide

“Make it cool” makes the AI guess every design decision. A visual guide names the choices you already care about: colors, type styles, spacing, layout, image mood, and a few examples.

  • Artifact style guideControls the whole page, deck, document, or dashboard: color roles, typography, spacing, layout rules, and repeated components.
  • Image guideControls the pictures inside it: subject, framing, light, materials, mood, realism, and anything that should never appear.
  • Reference examplesShow two or three things that feel right and explain why. The explanation matters more than the brand name or screenshot.
  • Reverse engineerWhen a result surprises you in a good way, ask what visual rules produced it. Save those rules, test them on a second image or page, and revise the guide.

A visual guide is not a taste machine. It makes some decisions repeatable so you can spend your attention on the choices that still need a human eye. If every result follows the guide but feels dead, the guide is incomplete—or you followed it too literally.

Vibe coding, explained

“Vibe coding” means building software by describing what you want in plain language and letting the AI write the actual code. You bring the idea and the judgement; it handles the syntax.

Code is just very precise instructions for a computer, written in a language a computer understands. It used to be that you had to learn that language yourself, character by character, semicolons and all. Now you can describe what you want — “a page with my photos and a button that shuffles them” — and the AI writes the code that makes it real.

That doesn’t make the code unimportant or make you helpless without the AI. The opposite: the more you understand what it’s building, the better you can steer it, spot when it’s gone wrong, and ask for the right fix. Vibe coding gets you started. Actually wanting to know what the AI just built is what makes you good at it.

When it breaks

It will break. Something won’t work, a screen will go blank, an error message will appear. This is normal — it happens to everyone who builds, including the experts. It is not a sign you’ve failed.

The move is almost embarrassingly simple: tell the AI. “This isn’t working, here’s what happened, help me fix it.”

The decision · choose your debugging move
What kind of broken is this?

One part broke

Fix one thing

keep everything else still

Several systems tangled

Restart clean

use a shorter, clearer plan

Same failure × 3

Ask for help

person or official docs

A single broken piece needs a careful fix. A tangled build may need a clean restart. A stubborn problem needs another set of eyes.

Good debugging is mostly good describing. Don’t just say “it’s broken.” Say what you expected, what actually happened, and paste the exact error message if there is one. The error message looks like gibberish; paste it anyway — to the AI it’s a precise clue, often the whole answer.

Then go one fix at a time. Change one thing, test, see if it helped. If you change five things at once and it works, you’ll never know which one mattered — and if it still breaks, you’ve made a bigger mess. Patience is genuinely rare here — most people quit at the first error message. The ones who don’t are the ones who ship.

  • Fix one thingUse this when one part is broken and the rest works. Name the exact element or behavior, protect everything else, change one cause, and test again.
  • Restart cleanUse this when several systems are tangled or the conversation has become confused. Save the working pieces, write a shorter plan, and begin from a clean state.
  • Ask for helpUse this when the same failure survives three careful attempts. Ask a person, read the official documentation, or show another tool the exact error and the smallest example that still fails.

Brain care is part of the build

Tired builders stop checking. A fluent answer starts to look finished because your attention is finished.

  • Save the stateWrite down what works, what is broken, and the next test. Do not make your brain hold the whole project.
  • Leave the screenStand up, drink water, look far away, and let your eyes and attention reset. Five honest minutes can beat thirty foggy ones.
  • Return with one testDo not reopen every possibility. Start with the single check you wrote before the break.

This is not a motivational extra. Verification depends on attention. When attention drops, you accept defaults, skip strange cases, and mistake smoothness for correctness. The human is part of the system, so the human needs maintenance too.

Toy or real thing?

Anyone can generate something half-working in five minutes. The interesting question is what lifts a thing from a toy you abandon to something real you’re proud of.

  • It’s finishedNot 80 percent. Finished. The last 20 percent — the rough edges, the broken link, the bit you kept meaning to fix — is exactly the part most people skip, and exactly the part that separates a real thing from a demo.
  • It actually worksEvery button does what it says. Nothing crashes when a friend pokes at it. A thing that breaks the moment someone else touches it isn’t finished, however clever the idea was.
  • It has tasteSomeone made choices. It looks considered, reads cleanly, feels like it was cared about. Taste is the one thing the AI can’t do for you. That part’s yours — and it’s the part people notice.

Here’s the quiet part: the AI can crank out endless stuff that’s fine. Competent. Forgettable. What it can’t do is decide what’s worth making, when it’s actually good, or what to throw away. That’s all you. And the better these tools get at the making part, the more your taste and your calls are what count. You’re the one driving.

How software actually works

You don’t need this to build something. But the moment you get curious about what’s under your own creation, a few words make the whole thing click.

  • FrontendEverything you see and touch — the buttons, the colours, the layout, the words on screen. The part of the building you actually walk around in.
  • BackendThe machinery you don’t see — where information is stored, accounts are checked, the real work happens. The engine room below deck. A simple site might have almost none; anything that remembers things needs one.
  • A repoShort for repository. The folder that holds all your project’s code, with a full history of every change — so you can always see what you did and go back if you break something. A save system for builders.
  • DeployTo put your project on the internet so it has a real address and anyone can visit. The moment it stops being yours-only and becomes a thing that exists in the world. Going from your workshop to a shop with an open door.

Once you’re comfortable with the loop, the next leap is building with agents — handing the AI a goal and letting it run several steps of the loop on its own. You describe the feature; it plans, writes the code, tests it, fixes its own mistakes, and comes back when it’s done or stuck.

This is powerful and it has a catch: an agent moving fast can build the wrong thing fast. So you stop typing and start directing — say clearly what you want, check what it actually did, keep your taste in the loop. You’re less the builder now and more the person deciding what gets built, and whether it’s any good.

The capstone · ship one real thing

Build something, for real, this week

Pick anything you actually want to exist — a site, a game, a tool, a comic — and run it all the way through the loop. Tick these off as you go (saved on this device).

0/6

Your card · proof you were here

Take something with you

Put your name on it, say what you built, and download it. A little proof that you didn't just use AI this week — you got under the hood of it.

Next

You've planned it. Now build a working AI to help you make it.

Enter the Workshop
✦ Try it

Turn an idea into a plan. Describe something you wish existed.

The prompt

I want to build a simple website that picks a random adventure for me and my friends on a boring afternoon. Give me a clear, ordered plan a total beginner could follow.

Check yourself · not a test

Did it actually stick?

Try to answer in your head first — out loud is even better — then tap to check. Remembering it beats re-reading it.