Descriptions:
Web Dev Cody explores a creative workflow for making web application UIs feel as immersive as those from Blizzard Entertainment — the studio behind Diablo II, StarCraft 2, and Warcraft 3 — by combining AI image generation with traditional CSS techniques. The video is built around his Mission Control app, a Claude Code session manager, which he redesigned using a multi-step AI-assisted pipeline rather than hand-crafting assets from scratch.
The process begins with screenshotting an existing UI and passing it into ChatGPT with GPT Image 2, prompting for a dark, space-age Blizzard-style redesign. After iterating on the generated reference image, Cody extracts individual UI elements — buttons, panels, borders — and uses another ChatGPT prompt to convert them into nine-slice-compatible square PNGs. These are applied in code via the CSS `border-image` property, allowing buttons and panels to scale cleanly without distorting the custom border artwork. A local theming script, built with GPT-4.5, overlays color blend modes on grayscale base images to generate full color-variant sets automatically, so adding a new theme requires running a single script rather than manually editing each asset.
The finished application supports switchable color themes (orange, purple, lime) and a custom animated intro sequence. The video is a practical end-to-end demonstration of how AI image generation, nine-slice asset techniques, and scripted automation can combine to produce game-quality UI aesthetics in web applications without a dedicated design team.
📺 Source: Web Dev Cody · Published May 11, 2026
🏷️ Format: Hands On Build
