Vibe Coding Experiments

This repository collects vibe-coding experiments inspired by Chapter 8 of the Vibe Coding book by Gene Kim and Steve Yegge.

The experiment

Chapter 8 explores what happens when the same short, "vibe-style" prompt is handed to several frontier coding models and their outputs are compared side-by-side. Instead of picking a winner up front, the idea is to run a handful of small, visually-verifiable tasks (a bouncing ball, a Pong clone, Flappy Bird, a rotating cube, a Breakout game, a data-chart generator) against each model and observe how their personalities, defaults, and strengths show up in the generated code.

The models exercised in this repo:

Label	Provider / runtime
claude	Anthropic Claude
codex	OpenAI Codex / GPT-family code model
gemini	Google Gemini
qwen3-coder	Qwen3 Coder (Ollama Cloud)
qwen3-coder-next	Qwen3 Coder next-preview (Ollama Cloud)
qwen3.5-397b / qwen3.5397b	Qwen 3.5 ~397B (Ollama Cloud)

For each task below, folder or file naming is used to attribute the output to the model that produced it, so the artefacts can be opened directly and compared visually.

Experiments and direct links

1. Bouncing ball — bouncing-ball/

Single-file canvas animation of a bouncing sphere with gravity, trails, and bounce particles. See bouncing-ball/README.md for the effect-by-effect breakdown of the reference implementation.

Model	Output
Claude	claude.html
Codex	codex.html
Gemini	gemini.html
Qwen3 Coder (next)	qwen3-coder-next.html
Qwen 3.5 ~397B	qwen3.5-397b.html

2. Breakout game — breakout_game/

Only Qwen 3.5 ~397B was run here, across two iterations of the same prompt.

Model	Output
Qwen 3.5 ~397B (iteration 2)	qwen3.5-397b_2.html
Qwen 3.5 ~397B (iteration 3, playable game)	qwen3.5-397b_3_game.html

3. Cube with light — cube-light/

A rotating 3D cube lit by a movable light source. Each model's output lives in its own subfolder with index.html as the entry point.

Model	Output
Claude	claude/index.html
Gemini	gemini/index.html
Qwen3 Coder	qwen3-coder/index.html
Qwen 3.5 ~397B	qwen3.5397b/index.html

4. Flappy Bird — flappy-bird/

A Flappy Bird clone per model, each in its own subfolder.

Model	Output
Claude	claude/index.html
Codex	codex/index.html
Gemini	gemini/index.html
Qwen3 Coder	qwen3-coder/index.html
Qwen 3.5 ~397B	qwen3.5397b/index.html

5. Photographs chart — photographs-chart/

Each model was asked to produce a bar chart of estimated photographs taken worldwide in 5-year intervals over the last 50 years. Models took different routes — some emitted a self-contained HTML page, Codex wrote a Python SVG generator, and Qwen 3.5 did both. See photographs-chart/codex/README.md for the sourcing methodology used by the Codex run.

Model	Output
Claude	claude/index.html
Codex (Python → SVG)	codex/photographs_5year_intervals.svg · codex/generate_photographs_chart.py
Gemini	gemini/chart.html
Qwen3 Coder	qwen3-coder/photo_chart.html
Qwen 3.5 ~397B	qwen3.5397b/photograph_chart.html · qwen3.5397b/photo_chart.py

6. Pong — pong/

The files here are not model-labelled, so they read as warm-up / reference demos rather than a per-model comparison:

• pong.html
• 2_bouncing_balls.html

How to explore

• Open any *.html file linked above directly in your browser to view the generated UI, game, or animation.
• photographs-chart/codex/generate_photographs_chart.py and photographs-chart/qwen3.5397b/photo_chart.py are runnable Python scripts that regenerate their respective charts.
• When comparing models on the same task, open the corresponding outputs in adjacent browser tabs — the differences in visual polish, physics, and interactivity are the point of the experiment.