Floniks
Back to Blog
Tutorial9 min read

Vibe Coding Games With Claude Code and Floniks: The Seven-Step Method

You say what you want; Claude Code writes the code, calls Floniks for assets, runs the tests, and iterates on its own. The overview of our agentic game development series: seven steps from an agent-ready repository to a browser-playable collection, replayed from real git history.

Author: Elena Park
Vibe Coding Games With Claude Code and Floniks: The Seven-Step Method

You say what you want; the agent does everything else. Claude Code expands a single sentence into a plan — it reads the repository's conventions, writes the code, calls Floniks to generate assets, runs the tests, fixes its own bugs, and commits. This is the method behind our agentic game development series, replayed step by step from real git history: from one sentence adding a puzzle game, to a mild-horror visual novel built from text-to-image, image-to-image, background removal, TTS, and text-to-music, to systematic debugging and a browser release.

This is the overview of the series. Both deep-dive tutorials are already live: part one, Build a Puzzle Game From One Screenshot, and part two, Ship a Visual Novel From One Sentence. This piece connects them into one method you can reproduce end to end.

First, let's be precise about what vibe coding means here: you only state what you want — no prompt writing, no file ferrying. Claude Code turns your sentence into a plan, and your role shifts from operating tools to setting direction and verifying results.

Three parts mesh into one loop:

RoleWhat it isWhat it owns
OrchestrationClaude CodeReads conventions, writes code, runs tests, iterates on its own
EngineRust + Bevy + LuaRust owns rendering and cross-platform; Lua owns gameplay; a command queue decouples them
AssetsFloniks (over MCP)Text-to-image / image-to-image / background removal / TTS / text-to-music, exposed as agent tools

This is not a vision statement. Every step below comes with real stumbles and real fixes. The result is a collection of twelve mini-games playable in any browser: maweis.com/rust_bevy_lua_game.

Step 1: Start from a repository built for an agent

The key is not how powerful the tools are — it is writing the context into the repository. The CLAUDE.md at the project root is not a README for humans; it is an architecture contract for the agent: how Lua talks to the engine, what the steps are for adding a game, what belongs in Rust versus Lua. Say it once in the docs and it beats repeating it in a hundred conversations — that is what "the agent refines its own prompts" actually means.

Then wire in Floniks. One command, and an asset factory appears in the agent's toolbox — this is the Floniks MCP server:

claude mcp add --transport http floniks \
  https://api.floniks.com/api/v1/mcp \
  --header "Authorization: Bearer mk_YOUR_KEY"

From then on the agent can call tools like list_models, single_task, and execute_workflow — generate images, run workflows, check credits, fetch results — with no human moving files in between.

Step 2: One sentence adds a game

The smallest loop looks like this:

You say: build a Queens / Sudoku-variant logic puzzle, 8×8, one pony of each color per row and column, and no two ponies may touch.

The agent does: creates one Lua file, writes a generator (guaranteeing a unique solution) plus the interaction, self-registers the game into the menu, adds headless test assertions for the rule invariants, gets them green, and commits.

That is how Pony Parade was born. All gameplay lives in one Lua file; change a line, save, and desktop hot reload applies it in seconds — so the agent's write-then-verify loop runs at second-level speed. And the generator it wrote genuinely counts solutions, keeping only boards with exactly one.

Pony Parade running: rounded tiles, a bold CJK title, and a hearts / countdown / streak HUD — reconstructed frame by frame by the agent from a reference video
Pony Parade running: rounded tiles, a bold CJK title, and a hearts / countdown / streak HUD — reconstructed frame by frame by the agent from a reference video

The full development log of this game — from one screenshot to shipped, with zero prompts — is part one: Build a Puzzle Game From One Screenshot.

Step 3: Assets: Floniks generates them live

When programmers build games, code is never what blocks them — art is. Here the agent solves it itself: it reads an executable style bible (prompt DNA that locks the palette, outlines, and composition), fills in only each asset's subject words, generates with Floniks text-to-image, then removes the background and resizes to exact pixels, landing files into assets/textures/ under a same-name-same-size contract — the game reskins with zero code changes.

You say: the pony should have a chestnut body, a cream blaze, a flowing mane, side view, transparent background.

The agent does: composes the prompt → generates on Floniks → cuts out the background → lands it at 48×48 → updates the asset manifest. The same line also produced ten HUD icons and the rounded UI tiles.

Even the generated 15-second gameplay ad comes off this line: real assets rendered into keyframes, scored with Floniks text-to-music (Lyria 2).

A keyframe from the gameplay ad: a finger demonstrates placing a pony, conflicts auto-mark with an ✕, and the level completes — every element is a real in-game asset
A keyframe from the gameplay ad: a finger demonstrates placing a pony, conflicts auto-mark with an ✕, and the level completes — every element is a real in-game asset

Step 4: Make it polished: feedback-driven iteration

The first version usually runs fine but looks rough. You screenshot what you dislike and send it back; the agent fixes it. One real round — the feedback was "the tiles are flat color blocks, the font isn't round enough, add some camera effects" — became four parallel fixes:

  • Textures: a new 8× supersampled generator producing tintable rounded tiles, bold ✕ marks, capsules, and cards.
  • Engine: a new game.zoom() API — a light punch on a correct placement, a heavy one on a mistake, a hard zoom-in and rebound on level clear.
  • Font: a Noto Sans SC Bold subset, verified glyph by glyph for missing characters.
  • Generator: blind reshuffling couldn't find unique-solution boards at 8×8, so it switched to hill-climbing refinement — the first level converged from 237 solutions to exactly 1.

Note the last item: that was a real bug, caught on the spot by the tests and forced into a fix. Tests are the agent's eyes — it cannot see whether the screen looks good, but it can see whether the unique-solution invariant still holds.

Step 5: Go heavier: a full visual novel

The same method carries much heavier material. Midnight Gallery is a mild-horror interrogation visual novel: the famous painting The Gazer is stolen from a gallery; you question three witnesses one by one, choose how to ask, watch their expressions shift, and finally accuse the thief. This step used the full multimodal range of Floniks.

The witness select screen: three witnesses side by side, with tap-to-advance, shake, and zoom — transparent portrait cutouts composite cleanly over the midnight gallery backdrop
The witness select screen: three witnesses side by side, with tap-to-advance, shake, and zoom — transparent portrait cutouts composite cleanly over the midnight gallery backdrop

Four capabilities, one chain:

  • Portraits — text-to-image + image-to-image: one text-to-image base per character, then image-to-image derives calm / tense / frightened variants — same face, different emotion. Background removal turns them into transparent sprites.
  • Voices — TTS, one timbre per character: three genuinely distinct female voices, one pinned to each witness, acoustically verified at distinct fundamental frequencies (291 / 202 / 158 Hz).
  • Atmosphere — text-to-music: a dark ambient loop generated by Lyria 2, laid under the dialogue.
  • Story — a branching dialogue tree: typewriter subtitles and choice branches; hitting the key clue flips a portrait to its frightened expression, while soft questions get deflected.

The three witnesses in their calm expressions: the same pipeline guarantees character consistency — a base image locks each face, image-to-image derives the expressions
The three witnesses in their calm expressions: the same pipeline guarantees character consistency — a base image locks each face, image-to-image derives the expressions

The Gazer scene: a clean gallery backdrop turned into an unsettling variant with image-to-image — one painting on the wall now watches you. The mild-horror mood is fully generated
The Gazer scene: a clean gallery backdrop turned into an unsettling variant with image-to-image — one painting on the wall now watches you. The mild-horror mood is fully generated

The full build — including how the "everyone got the same voice" bug was exposed by an instrument reading rather than an impression — is part two: Ship a Visual Novel From One Sentence.

Step 6: Systematic polish: the real debugging loop

Vibe coding does not mean no bugs. It means you report symptoms and the agent finds root causes. Three that really happened in this project, each solved systematically:

You reportIt finds and fixes
The web build is silentBrowsers initialize the AudioContext suspended until the first interaction — resume every audio context on the page's first click
A portrait's backdrop covers other charactersPortraits shipped with baked backgrounds → run all nine through Floniks background removal; then browser caching served the old art → rename the files to bust it
Audio tracks pile up and overlapNo channel model → refactor the engine into three channels: SFX may overlap but deduplicate per frame, Music never restarts the same track, Voice is a single dialogue channel (a new line stops the old one)

Every fix landed with a regression test or a verification. The headless suite now carries 130,000+ assertions — that is what lets the agent iterate alone with confidence.

Step 7: Ship: playable in the browser

The same Rust crate compiles three ways: desktop, iOS, and WebAssembly. Merging to the main branch auto-deploys to GitHub Pages — one link, playable in any mobile browser, no download.

git push        # merge to main
# → CI compiles wasm → publishes to GitHub Pages → live

Play it in your browser · Read the source

Why this method holds

  • Context lives in the repository. CLAUDE.md, the style bible, and the asset manifest are the agent's senior architect. Write a convention once; it applies forever.
  • Tests are the agent's eyes. It cannot see the screen, but it can see invariants. A machine-checkable definition of "correct" is what makes autonomous iteration safe.
  • Floniks is the asset factory. Over MCP, generation becomes an ordinary tool. A model upgrade is an id swap and a replay — the architecture never moves.
  • You supply only intent and acceptance. No prompts, no file ferrying. You set direction and verify results; plans, code, assets, and tests belong to the agent.

One person plus one agent: leave a sentence at night, collect a string of green-tested commits in the morning. That is what we believe game development should look like in the AI era.

Questions and answers

What does "vibe coding" mean in this method?

You state intent and acceptance in plain language, and the agent does the rest: Claude Code expands your sentence into plans, code, Floniks generation calls, tests, and commits. Your role shifts from operating tools to setting direction and verifying results.

What exactly does Floniks contribute to the pipeline?

Connected over MCP, Floniks becomes the asset factory in the agent's toolbox: text-to-image, image-to-image, background removal, TTS, and text-to-music, with results landing directly in the game's asset folders — no human ferrying files.

Do you need to write prompts?

No. The human provided one-line intents and screenshot feedback; the agent composed its own generation prompts for Floniks and its own task decomposition for the engine work.

Can this be reproduced?

Yes. The engine is open source in the rust_bevy_lua_game repository on GitHub, the finished collection plays in any browser via WebAssembly, and connecting Floniks to Claude Code takes a single claude mcp add command with your API key.

Ready to wire an asset factory into your own build loop? Start with the Floniks MCP server, then follow the two tutorials: part one builds the puzzle game, and part two ships the visual novel.

Tags

#tutorial#vibe-coding#claude-code#mcp#ai-game-development#game-asset-generation#agentic-development#webassembly

Related Articles

Vibe Coding Games With Claude Code and Floniks | Floniks