Vibe Coding

Building software by describing what you want to an AI assistant and running what comes back: what that is good for, where it goes wrong, and how to move from "it seems to work" to code you can read, test and trust — while you build a small 3D space game, one prompt at a time.

18 pages 100 glossary terms

How to use this topic

Theory pages and build pages take turns. The theory pages explain vibe coding itself: where the term comes from, how an AI model writes code, the tools, prompting in small steps, reading and debugging the code you get, saving versions, writing your own prompts, the risks, and the way from a prototype to software others can rely on. Each build page adds one step to a single running project: a 3D space game in one CodePen Pen, made with HTML, CSS, JavaScript and the Three.js library. You start with a starfield and end with a game you have tuned yourself.

Read the pages in order the first time: each build step builds on the step before it and uses what the theory page in between explains. For steps 1 to 4 you get a complete prompt to paste into an AI assistant, and step 5 leaves two choices for you to fill in. From step 6 on you write the prompt yourself, with a template, a checklist and a few hints. Every build page also has a reference version that plays right in the page (Play, Stop and Reset), with its HTML, CSS and JavaScript underneath — one possible result, not the only right answer. What the AI gives you will look different, and an AI answer is never shown here as fixed output.

What you need

  • A free CodePen account, to build and save your Pen. The build pages are written for CodePen 2.0, with a short note for the Classic editor where it differs.
  • Any AI chat assistant; a free tier is enough. The pages never depend on one product: you copy prompts into the chat and copy the code back into the Pen.
  • A browser with WebGL 2, which Three.js uses to draw in 3D. Almost every current desktop and phone browser has it, but some devices or browsers still do not; on those the game stays blank, in CodePen and on these pages alike.

You do not need to know how to program. You do need to look closely at what you get, and the theory pages show you how. As of October 2026 there is no widely recognized exam for vibe coding; the pages on how models write code, prompting in small steps, writing your own prompt and the risks carry the AWS AI Practitioner tag, as the Prompt Engineering topic does.

This topic builds on Prompt Engineering, especially prompting for code and breaking down tasks, and on Artificial Intelligence for how language models work and using AI at work. The game code is plain JavaScript on a page made with HTML & CSS; those topics explain the language itself. When a prototype grows into something others depend on, the Git & CI/CD, Testing & QA and Security topics take over.

Learning path

  1. 01What Is Vibe Coding?Where the term comes from, what it originally meant and what it has come to mean, how vibe coding differs from AI-assisted programming and agentic engineering, and why it suits throwaway projects better than software others depend on.Beginner
  2. 02How an AI Model Writes CodeA language model writes code one token at a time without running it: why the same prompt gives different answers, why wrong code can look confident, why models suggest outdated APIs, and what the model knows about your project.BeginnerAWS AI Practitioner
  3. 03Vibe Coding ToolsThe kinds of tools people vibe code with as of October 2026: chat assistants, online code editors, assistants and agents in the editor and terminal, and app builders — what each does for you, what you still do yourself, and the free tiers.Beginner
  4. 04Build 1 · Your StarfieldThe first step of the space game: a new CodePen Pen with Three.js, a camera, and stars that stream toward you forever — proof that the setup works before anything else is built.Beginner
  5. 05Prompting in Small StepsWhy one change per prompt works better than a wish list: saying what must stay the same, asking for whole files or clearly marked changes, checking each result in the preview, and keeping the last working version.BeginnerAWS AI Practitioner
  6. 06Build 2 · A Ship You Can FlyA low-poly jet built from Three.js shapes that follows the mouse and the keyboard, leans into its turns and moves at the same speed on every screen, thanks to delta time.Beginner
  7. 07Reading the Code You GotHow to find your way around code an AI wrote: its overall structure, magic numbers, listeners and objects created in the loop, deprecated APIs, and asking the AI to explain while checking the explanation against the code.Intermediate
  8. 08Build 3 · Rocks from Every SideRocks that come out of the fog far ahead, spread over the whole view and fly past the ship, some aimed straight at it — spawning, moving and recycling many objects without slowing the game down.Beginner
  9. 09Debugging with AIFinding and fixing bugs with an AI assistant without getting stuck in a fix loop: the console in CodePen, giving the full error and context, isolating the problem, and going back to the last working version when fixes pile up.Intermediate
  10. 10Build 4 · Game Over and Try AgainCollisions that end the game, a GAME OVER screen that shows how long you lasted, and a restart with a 3-2-1 countdown — game states and resetting everything cleanly.Beginner
  11. 11Saving Versions and Going BackKeeping a version you can return to when an AI change breaks things: saving and autosave in CodePen, forks and exports on a free account, known-good versions, and how this is version control by hand.Beginner
  12. 12Build 5 · Fire!Shooting back: bursts from the wing guns, a reticle that shows where the shots meet, rocks that burst into pixels, and a score — with a prompt that leaves the first two choices to you.Intermediate
  13. 13Writing Your Own PromptA reusable template for coding prompts in this project — context, current state, one change, what must not change, constraints, output and how to check it — and a recap prompt for starting a fresh chat.IntermediateAWS AI Practitioner
  14. 14Build 6 · Faster, Harder, a ScoreYour first self-written prompt: a game that gets harder the longer you last, combos for quick shooting, a high score that is remembered, one shield, and a console along the bottom.Intermediate
  15. 15Build 7 · Polish: Sound and ExplosionsMaking the game feel alive with your own prompts: sound with the Web Audio API after the first key press, light flashes, a flame trail, warnings, pop-up points and a pause — and respecting reduced motion.Intermediate
  16. 16Build 8 · Your Perfect FlightFinishing the game your way, one idea per prompt: playtesting, tuning constants, ideas such as a title screen, power-ups and touch controls, a final checklist, and sharing what you made.Intermediate
  17. 17Risks of Vibe CodingWhat can go wrong when nobody reads the code: secrets in prompts and code, invented packages, insecure generated code, prompt injection, agents that delete things, over-reliance, and who owns generated code.IntermediateAWS AI Practitioner
  18. 18From Prototype to Real SoftwareWhen to stop vibe coding, and the path from a Pen to software others can rely on: exporting the code, version control, tests for the logic, code review, continuous integration and agents working under supervision.Intermediate

Vibe Coding glossary

Short definitions of the terms used in this topic. The full glossary covers every topic.