Drill How to Vibe Coding (Game Loop 2026)

People who type how to vibe coding into a search box already know the phrase exists. They want a procedure that ends in a playable build, not another origin essay. Wikipedia’s Vibe coding page (checked 2026-09-22) still frames the practice as describing a project in natural language to a large language model that writes source code, then guiding changes with results and follow-up prompts. This page turns that sentence into five moves sized for a browser game. Definitions live on what is vibe coding and vibe coding meaning. Facts below were verified 2026-09-22 against Wikipedia, MDN’s game anatomy guide, Phaser’s stable download page, and the Sorceress source for WizardGenie and the coding model roster.

How to vibe coding in five moves

DataForSEO lists the awkward phrase how to vibe coding at 1,600 searches a month, KD 20 (confirmed 2026-09-22 in tools/research-supplement.md). Neighboring rows include what is vibe coding (60,500/mo), vibe coding meaning (18,100/mo), vibe coding with claude (480/mo), and vibe coding claude (260/mo). Those neighbors want a definition or a model brand. This query wants a checklist.

1. Write one playable loop in ordinary English: who moves, what fails, what scores.
2. Hand that loop to an agent and keep the files it writes.
3. Run the page yourself. A chat screenshot is not a playtest.
4. Ask for one change you can see: higher jump, slower enemy, restart on death.
5. Stop when the loop is fun for thirty seconds. Expand only after that.

That is the whole procedure at jam scale. The rest of this article explains why each move exists, how Planner+Executor changes the cost math, and where assets fit without derailing the loop.

Start with a playable loop, not a genre bible

MDN’s Anatomy of a video game (checked 2026-09-22) reduces every game to a cycle: present a situation, accept input, interpret those signals, calculate a new situation, repeat until an end condition. If your first prompt asks for an open-world RPG with crafting, you skipped the cycle. If your first prompt asks for a character that jumps over spikes and restarts on hit, you named the cycle.

A useful first prompt names the five verbs:

Build a single browser scene. Present a ground and a player square.
Accept left/right and jump. Interpret jump as an upward velocity while grounded.
Calculate gravity and spike collisions. Repeat with requestAnimationFrame.
Restart on spike hit. Show a score that increases while alive.

Phaser v4.2.1 “Giedi” (released 9 July 2026, stable download page checked 2026-09-22) is a common runtime for that scene. Plain HTML Canvas works too. The point is not the library. The point is a loop you can feel in under a minute.

Planner vs Executor when you how to vibe coding

WizardGenie is the Sorceress coding lane built for this procedure. The marketing page (read 2026-09-22) describes Dual-agent Planner + Executor: a smart Planner thinks; a cheap Executor codes. The same page ships the engine as two builds. Desktop is the cutting-edge release with a native filesystem. The web build is free to try and receives the same features a little later. Describing WizardGenie as browser-only would misstate that page. Sorceress Code is the sibling file-aware chat surface for the same game-dev stack.

The economic rule that keeps the pattern honest: put an expensive reasoner on the plan, and a cheap fast typer on the keys. Acceptable planners in the current Sorceress roster are Claude Opus 4.7, GPT-5.5, Gemini 3.1 Pro, and Grok 4.2. Acceptable executors are DeepSeek V4 Pro, Kimi K2.5, and MiniMax M2.7. Claude Sonnet 4.6 appears on the roster as Fast + smart. It is the wrong chair for the typing side, because a frontier-priced model on every keystroke erases the reason to split the work. With a true cheap executor, the token bill lands nearer to roughly one-fifth of a single-frontier session than to a full frontier stack.

Model	Home roster tag	Sensible chair
Claude Opus 4.7	Top tier	Planner
Claude Sonnet 4.6	Fast + smart	Neither (too expensive to type)
GPT-5.5	Frontier	Planner
Gemini 3.1 Pro	1M context	Planner
DeepSeek V4 Pro	Budget	Executor
Kimi K2.5	256K coding	Executor
Grok 4.2	2M context	Planner
MiniMax M2.7	Agent-ready	Executor

Roster verified 2026-09-22 in src/app/_home-v2/_data/tools.ts CODING_MODELS. People who search vibe coding with claude usually want Claude on the thinking side of this table, not on every typed line.

Playtests are the control surface

Karpathy’s February 2025 coinage, quoted on Wikipedia (checked 2026-09-22), describes giving in to the vibes and forgetting that the code even exists on a throwaway weekend project. A jam you might show someone on Monday is already past that license. The control surface is the playable page, not the chat transcript.

After each generation:

• Open the build yourself.
• Move for ten seconds. Die on purpose. Restart.
• Write one sentence about what felt wrong.
• Paste that sentence back as the next prompt.

Examples that work: jump peak is too low; spikes kill on touch but the hitbox is taller than the art; score should reset on death. Examples that stall: make it better; add polish; build the whole campaign. The model cannot feel the jump. You can. How to vibe coding stays honest only while that feedback loop stays closed.

Where assets fit without breaking the loop

Art and audio are not the first prompt. Once the square-on-spikes loop is fun, swap in real assets from the same suite:

• AI Image Gen for a character still.
• Auto-Sprite v2 or Quick Sprites for a sheet.
• Music Gen for a short bed.

Tell the agent the file names and sizes. Do not ask it to invent a full art bible while the collision code is still wrong. Tool comparisons for vibe coding platforms live on best vibe coding tools. A broader browser build walkthrough lives on how to make a game with AI.

Guardrails that keep how to vibe coding from becoming unread code

Wikipedia’s reception section (checked 2026-09-22) summarizes the critic case: accountability, maintainability, and security when generated code ships without review. The same page notes Karpathy framed the loose style for throwaway work, and that Merriam-Webster listed the slang in March 2025 while Collins named it Word of the Year for 2025. None of those dictionary moments license an unread production merge.

Practical guardrails for this workflow:

• Keep the folder. If you cannot find the files, you cannot patch them.
• One visible change per prompt. Bundled wish lists hide which edit broke the jump.
• Read the collision and input code. You do not need to author every line. You do need to know where death is decided.
• Do not paste secrets into the chat. API keys belong in the product’s key slots, not in the prompt.
• Stop at a fun loop. Expanding scope is a second session, not a longer first prompt.

WizardGenie’s Mem Palace + Graphify memory (marketing page, 2026-09-22) helps across sessions so you are not re-explaining the project each time. Agentic web browsing can pull docs into context. Neither feature replaces the playtest.

If you need a script for that first session, write the loop on paper before you open the agent. One sentence for the player verb. One sentence for the failure. One sentence for the win condition or score. That three-sentence card is the entire design doc for hour one. Anything that does not fit on the card waits for hour two. This is also how you avoid the common failure mode where the chat invents a menu, a shop, and a save system before anyone has jumped once.

When the loop is browser-native, keep the verify step brutal and short. Hard-refresh. Disable extensions if they inject CSS. Confirm the URL is your local file or your WizardGenie preview, not a cached tab from yesterday. MDN’s game development center (checked 2026-09-22) still frames web games as HTML, CSS, and JavaScript on a standards-compliant browser. Your playtest has to meet that bar in the same environment a stranger will use.

Phaser is optional scaffolding, not a requirement. If the agent reaches for Phaser v4.2.1 “Giedi,” that is fine because the stable build published 9 July 2026 is a known, documentable target. If the agent stays on Canvas 2D, that is also fine. What is not fine is swapping engines mid-session because a follow-up prompt said make it more professional. Engine thrash is how a fun jump becomes an empty repo.

Single-model sessions still work for tiny prototypes. Dual-agent is the pattern you reach for when the plan is multi-file and the typing volume is high. WizardGenie’s marketing copy (read 2026-09-22) even frames the split as roughly a quarter of the token cost for similar quality; with a true budget executor the practical ratio often lands closer to one-fifth of a frontier-only run. Either framing fails if you put Opus or GPT-5.5 on the typing chair. The Planner writes the approach. The Executor edits files. You are the playtester between them.

Sorceress keeps both WizardGenie and Code in the same studio so the coding lane can later pull sprites, music, and 3D without leaving the product family. That is a convenience, not a license to load every tool on prompt one. How to vibe coding stays a coding procedure until the loop is fun.

A good playtest log is boring on purpose. Timestamp. What you pressed. What you expected. What happened. Paste that block back. The agent does not need motivation. It needs a diff target. If two bugs appear at once, fix the one that blocks movement first. A pretty death animation on a character that cannot jump is still a broken loop.

When you do bring assets in, size them for the engine you already chose. A 256x256 sheet that the agent scales in code is easier to debug than a 4K portrait the browser downsamples poorly. Name files without spaces. Keep a transparent background if the character is a sprite. The BG Remover and True Pixel lanes exist for that cleanup, but again: after the jump feels right.

Security and maintainability are not abstract ethics lectures here. Wikipedia (checked 2026-09-22) cites researchers and engineers who warn that accepting unread AI code raises vulnerability rates and debugging cost. For a jam, the practical translation is simple: you must be able to explain where input becomes velocity and where overlap becomes death. If you cannot point at those two sites in the project, you are not finished with the guardrail step even if the demo looks flashy in a screen recording.

The verdict

How to vibe coding a game in 2026 is not a personality trait and not a brand loyalty test. It is five moves: name a loop, generate code, play it, steer one visible change, keep a guardrail. Wikipedia still defines the practice around natural-language prompts to an LLM that writes source. MDN still defines a game as present–accept–interpret–calculate–repeat. Sorceress WizardGenie maps those facts onto a dual-agent desktop-or-web engine with a coding roster verified today in source. Start with spikes and a jump. Earn the RPG later.