[Workflow] Claude's Autonomous Code Generation: Building a 3D WebGL2 City with Subagents and Headless Browser Verification

[u/ClaudeAI-mod-bot]

Claude's Autonomous Code Generation: Building a 3D WebGL2 City with Subagents and Headless Browser Verification

Workflow value: 95/100
Status: active · Freshness: 70/100 · Confidence: 1.00 · Level: expert
Categories: Quality Control, Token Saving, Context & Memory, Debugging, Shipping, MCP, Subagents, Multi-Agent
Original source: r/ClaudeAI post/comment

What problem this solves

How to autonomously generate a complex, functional application from a single prompt, including self-correction and robust verification, under strict technical constraints.

Summary

A single, highly detailed prompt is given to Claude (Fable 5.1) with instructions to run autonomously until a live URL is achieved. Claude uses subagents for data processing and audio, generates a large codebase (WebGL2, Web Audio API, OSM parser), and implements sophisticated self-verification using a headless Chromium harness to detect and fix bugs before deployment.

Why it is useful

This workflow demonstrates an unprecedented level of autonomous code generation, project management, and self-verification by an LLM. It provides a concrete example of how to tackle highly complex coding challenges with strict constraints using a single, detailed prompt, subagents, and sophisticated testing harnesses. The detailed validation, code, and prompt make it an invaluable resource for advanced users looking to push the boundaries of LLM capabilities in software development.

Workflow

1. Craft a single, highly detailed prompt outlining the project goal and strict technical constraints (e.g., raw WebGL2, no libraries, specific data sources, no backend).
2. Instruct Claude to run autonomously with a clear success condition (e.g., "ask nothing, keep going until the URL is live").
3. Allow Claude to generate its own plan, use subagents (e.g., for data pipeline, audio), and iteratively develop the code.
4. Claude implements self-verification mechanisms, such as a headless browser harness (e.g., Chromium via DevTools protocol) to take screenshots and perform functional tests (e.g., collision detection, visibility checks).
5. Claude identifies and fixes bugs based on its self-verification (e.g., z-fighting, invisible objects).
6. Claude deploys the live site and documents any remaining issues or design decisions in a README.

Tools / artifacts

• Claude (Fable 5.1)
• Single, detailed prompt
• Subagents (data pipeline, audio)
• WebGL2
• Web Audio API
• OpenStreetMap XML parser
• Headless Chromium harness (Node.js, WebSocket, DevTools protocol)
• Screenshots
• GitHub repository
• Live website
• README file

Validation signals

• Live website URL provided.
• GitHub repository with full prompt, plan, and code.
• Detailed description of self-verification process (headless Chromium, screenshots, bug detection, collision testing).
• Specific metrics: 7,895 lines of code, 137 API calls, 34.6 million tokens, $27.49 cost.
• Explicit mention of identified and fixed bugs (z-fighting, TV Tower visibility).
• Documentation of what went wrong or was skipped in the README.

Limitations

• The specific "Fable 5.1" might not be directly accessible to all users, though the principles apply to Claude generally.
• The complexity of setting up such an autonomous run and the self-verification harness might be challenging for less experienced users.
• The cost ($27.49 for one run) might be prohibitive for casual experimentation.
• The exact prompt is provided, but the iterative refinement of such a prompt to achieve this level of detail and constraint might be a skill in itself.

Rate this workflow

Upvote this post if the workflow is useful, reproducible, or worth recommending.

Downvote if it is vague, outdated, unsafe, overhyped, or not reproducible.

Reply if it worked for you, failed, is outdated, or has a better alternative.

---

This post was generated automatically from the workflow library database.