ClaudeSoftwareShipping codeAI score · 76/100AI-assisted edit · no obvious prompt-injection riskX

Build a Zero-Asset Cat Restaurant Game with Claude Code + three.js

Design docs first → code-block assets → level editor → autopilot regression testing

Some experienceStepsWorkflowTip
Who
Developers with frontend experience who want to build browser mini-games with an AI coding assistant
You get
A three.js cat restaurant with zero imported assets, full gameplay loops, a draggable level editor, and automated regression tests
You need
Claude Code

Constraints

Prerequisites: Claude Code available; basic three.js or WebGL knowledge; no external art assets—everything generated via code using geometries and materials. Core workflow: write design docs (CLAUDE.md + economy/art/sound/event docs) first, then have Claude Code implement block by block; test each new gameplay loop before adding the next; finally run an autopilot script for regression testing.

What they did

Author anulagarwal used Claude Code with three.js to build a cozy cat restaurant web game with zero imported assets. The project started from a visual reference brief, then established CLAUDE.md and four design documents as the single source of truth; every cat, bowl, pond, and tree was created with code-generated geometries; gameplay was added one loop at a time; Claude Code also built a draggable level editor; each build included funnel events and live playtesting; a 15-minute autopilot script was maintained for regression testing.

How it went

The author reported that live playtesting revealed a gap at the very first purchase, leading to a redesigned onboarding flow; the 15-minute autopilot caught stalled orders and unreachable seats—none of which threw errors, surfacing only through automated testing. (Source: author report)

Worth knowing

The author summarized two key rules: 1) the agent that builds is never the one that approves—separate the roles; 2) every ruling goes into a file, forming a playbook so the next game starts from precedent, not zero. Start small: get one loop (carrot → soup → coin) working before expanding. This case does not provide the original CLAUDE.md, level editor code, or autopilot script; readers must implement those parts themselves.

Steps

  1. Write a visual reference brief

    Collect reference images and write a one-sentence style anchor. Example: "Cats & Soup mood, Monkey Mart readability," with screenshots of what you like. Use this brief as the anchor for all subsequent art decisions.

  2. Create CLAUDE.md and design docs

    Create CLAUDE.md in the project root with coding rules; add four design documents covering economy, art, sound, and events as the single source of truth. Claude Code implements without guessing, following only the written docs.

  3. Build assets in code, block by block

    Use no imported assets; generate everything with three.js primitives: big-headed cats running on all fours, carrots, a soup pot, a chef cat stirring animation, etc. Preview each asset locally to confirm style consistency.

  4. Implement one gameplay loop at a time

    Add one closed loop at a time: carry carrots → cook soup → serve tables → get paid → hire helpers → fish → unlock a second recipe. Verify each loop before adding the next to avoid maintaining multiple unvalidated systems.

  5. Have Claude Code build a level editor

    Ask Claude Code to implement a visual level editor: drag stations to reposition them, export layout data, paste it back into the project to apply. The author describes: "I drag the stations around, paste the layout back, and it ships exactly that."

  6. Instrument funnels and run live playtests

    Add event tracking at key funnel steps. Live playtesting revealed a gap at the very first purchase, prompting a redesign of the onboarding guidance. Iterate using real behavioral data rather than assumptions.

  7. Run a 15-minute autopilot on every test

    Launch a 15-minute autopilot that plays the full game on every test run. It caught stalled orders and seats no cat could reach—none of which threw an error, exposing issues only through automated testing.

  8. Give feedback with a reason

    Provide specific, reasoned feedback to Claude Code, e.g. "the camera feels jittery, give it a dead zone" or "I want to read their faces at this zoom." Context-rich requests yield more accurate changes than vague descriptions.

Prompt you can copy

Reference prompt · Editorial suggestion。Confirm the destination, input variables and output format before use.

This block is the prompt. Ads are never placed here.

No prompt needed — just follow the steps.

This case has no copyable master prompt. The reusable core is the workflow: docs-first, loop-by-loop validation, and automated regression testing.

Source

用 Claude Code + three.js 做零外部素材的猫咪餐厅游戏：先写设计文档再建、逐个玩法循环、自建关卡编辑器、15 分钟自动试玩测试 · anulagarwal · X · 2026-10-15T05:11:31.000Z

Comments & feedback

Tried this method? Share results, problems or improvements. Comments appear after moderation. Please avoid sensitive information.

Loading…

    Related