Case study · Mike Butz
Building Iron Walker Studios: from direction to review
How I directed an Astro website through design decisions, bounded implementation, artwork optimization and browser review, while keeping publication separate from a working local draft.
This website is itself an example of my Applied AI work. I chose the direction, reviewed the presentation and content, and set the boundary between a local draft and a public release. AI assisted the implementation and verification. The result is a static website prepared for publication, with a playable browser prototype and readable accounts of the work behind it.
Turn the design direction into requirements
The site needed to serve two audiences: people interested in Unproven and people interested in how I direct AI-assisted development. I wanted balanced entrances, warm reading surfaces and a recognizable studio identity, rather than a game page with an unrelated résumé attached.
I guided revisions to the header, logo behavior, nameplates and artwork. Later content decisions included using Mike Butz publicly, being candid about Unproven’s production pause and my pursuit of full-time work, and keeping the Browser RPG separate from Unproven. I supplied the business contact address and chose to omit newsletter promotion and signup.
Those decisions became concrete implementation requirements: keep the approved artwork intact, make navigation usable with a keyboard and on narrow screens, distinguish design goals from implemented behavior, and show case studies as readable pages. A working preview would not authorize publication.
Choose a small static architecture
I chose an Astro, GitHub and Netlify plan, with Squarespace retained for the domain. The implemented site uses static Astro pages, shared layouts and components, strict TypeScript, and project-pinned Node and npm versions. No server application is needed to read the articles or view the artwork.
The Applied AI section uses a content collection and one shared case-study template. An index introduces the work; each study gets its own URL, summary, technology labels and generated section links. That structure makes a new study easier to add and read without extending a single sequential page indefinitely.
The source documents, page code, optimized assets and local verification records have different roles. Private evidence stays outside the served pages and client code. Publication metadata distinguishes approved release candidates from drafts; review evidence stays private.
Preserve the art and its role
Unproven’s supplied character illustrations became separate transparent WebP derivatives while the original masters remained unchanged. Astro generates responsive sizes with intrinsic dimensions and lazy loading. Full characters sit in alternating desktop margins, then move above their related text on phones.
The key art is identified as artwork, rather than gameplay. That distinction matters: an illustration can communicate the intended world, but it cannot prove the game already delivers that experience. The same principle governs the wording around implemented foundations and planned systems.
Integrate a real prototype deliberately
The Browser RPG page embeds a copy of the existing Unity WebGL delivery. It downloads the roughly 52 MB build only after a desktop player selects Play. Controls, keyboard focus, fullscreen, returning to website focus and unloading surround the player; phone readers receive an explanation of the keyboard requirement.
The wrapper retains the build’s company and product identifiers. It explains that saves belong to a browser profile and origin, including the port, and are separate from cloud backups. Website integration checks covered startup, headers, focus, fullscreen, unloading and manual-save reload behavior. They were separate from the game’s own development tests.
The Browser RPG study explains the gameplay work and what a later mechanics audit established. This page describes the website integration, rather than claiming those checks certify the whole game.
Review the rendered result and correct it
The workflow was direction, requirements, implementation, browser review and correction. Source checks and a successful build were useful gates, followed by checking the actual presentation and interactions.
One local content snapshot passed Astro diagnostics with zero errors, warnings or hints, built 11 pages, and underwent 33 route/layout checks. It also checked 35 internal links and anchors and 44 generated assets. These counts describe that historical snapshot; adding this article changes the site and calls for a fresh check.
A full-page mobile screenshot caught a player panel extending past the requested screen width. The initial metric had compared against a viewport already expanded by the layout. The correction constrained the panel width, and the next review compared against the requested device width as well as inspecting the pixels. That was a useful reminder to check whether a measurement can actually reveal the defect being investigated.
The evidence includes page source, successful check/build output, desktop and mobile screenshots, link and header results, and hashes for preserved artwork and copied game files. These artifacts support specific observations; they are not a permanent guarantee for later changes.
Make local review usable
A second preview launch encountered a port already occupied by the existing healthy server. The recovery verified the owning process and responses instead of stopping an unknown application. The review command now recognizes a healthy instance of this project and reports its URL.
A double-click local launcher opens a visible PowerShell window and the local address in the PC’s browser. If a new foreground server starts, that window must remain open; Ctrl+C stops it. If an existing preview is healthy, it is reused. The PC-only address cannot be opened from an iPhone’s localhost, and an agent-started process’s future lifetime is not something I treat as guaranteed.
Keep publication a separate decision
I approved the current content and release preparation. The source is intended for my private personal GitHub repository, with Netlify selected for static hosting and Squarespace retained for the domain. Preparing and pushing that source does not establish that hosting or the domain is live.
Production and preview builds now have separate indexing behavior. Case-study routes, cards and counts share a publication status/date rule; production builds require the main branch. An explicit approved-asset list prevents additional draft media from silently entering the build. Preview no-index instructions discourage indexing but do not provide visitor access protection. Netlify access settings and the hosted pages still require owner verification.
Contact uses the business email link I approved. No contact form, newsletter provider, analytics or cloud-save service is integrated. The privacy copy describes the behavior that exists, rather than promising a service that has not been configured.
What I learned
Human direction was most useful when it named an observable result: a whole character visible in the margin, a readable article, a clear project status, a keyboard route out of the game, or a preview I could open and restart. Those requirements gave implementation and review something concrete to assess.
I do not claim measured time savings or that AI independently built and published the studio’s presence. This work shows a practical collaboration: I made the product and acceptance decisions, AI helped translate them into code, and review exposed corrections that the first successful build did not settle.
For the same approach at a different level of risk, see the Unproven Inventory Core workflow. You can also review the studio homepage or browse the playable prototype.