This site

Making Willowmere: a portfolio game built with Claude Code

I built this website as a pixel-art game part-time, between 19 September and 5 October 2026. It took 272 commits, and Claude Code wrote 228 of them. I wrote the story, designed the world and made every call on how it should look, feel and read.

Why build a portfolio as a game?

Most design portfolios look the same: a grid of case studies, a headshot, a contact form. I've spent years telling teams that personality is what separates a brand from the Ford Focus of the internet, so it felt a bit rich to have a portfolio that looked like everyone else's.

I'm also a huge fan of storytelling in games and comics. A game lets people explore my work instead of scrolling past it, and anyone who just wants the facts can skip straight to the portfolio and CV.

It was also a test. I wanted to know how far I could get with AI doing the building and me acting as creative director.

How did the art come together?

The village of Willowmere is full of real Manchester landmarks, and each one started as a photo or a sketch. I built a flow in Figma Weave that turns any reference into a pixel-art sprite in the game's style, and tested it on one or two buildings before committing to a month's subscription.

Then I wrote a Claude skill that drives it. Claude runs the Weave flow in the browser, then cleans each image up in code against a strict set of rules:

At most 16 colours per sprite
A one-pixel outline, matching Heaton Hall, with crisp diagonals
Signs redrawn in a pixel font, so they're readable
Everything sized against my own character, so a pub and a town hall sit at the right scale
A grey copy of each building, for before Manchester's colour comes back

Real materials stay real: red brick stays red brick and sandstone stays sandstone. Where a colour is close to one in my design system, the sprite uses the design system colour instead, pulled from my Design Systems for Humans MCP server. That keeps the whole world feeling like one place rather than a collage.

Afflecks in pixel art, before and after clean-up: the second has a crisper outline, fewer colours and the shop's tree mural — Afflecks: Weave's first pass (left) and after the clean-up and a second round of feedback (right).

A line-up of Manchester landmarks in pixel art, from the Peveril of the Peak to the Town Hall, with Paul's small character for scale — The Manchester set, all at one scale against my character (bottom left).

Pixel-art street decorations: lion statues, a phone box, bollards, trees and the Peveril of the Peak on cobbles — Street decorations from the same flow: statues, bee bollards, a phone box and trees.

What did Claude Code actually do?

Most of the typing. Claude Code wrote and tested most of the code, across Phaser, React and a Cloudflare Worker, and checked its own work with screenshots before I saw it.

What it didn't do was decide anything important. I wrote the story, designed the map and zones (there's a desert, some ruins, a shroomland and a graveyard for ideas that didn't make it), and reviewed the work as it went. When something read badly or looked off, I sent it back.

Animated pixel art: a windmill turning, chimney smoke and swaying trees — Animations added in code afterwards: windmill sails, chimney smoke, the lighthouse and swaying trees.

Does it work as a normal website?

Yes. Every page is rendered on the server, so search engines and AI tools can read it without playing the game, and there's a "skip the game" link for anyone in a hurry.

What did I learn?

Write the rules down sooner. Until I'd decided what "on style" meant and written it into the clean-up skill, buildings needed more back and forth. Once the rules were in the skill, there was far less fixing to do. I see the same thing with design teams: the brief matters more than the tool.

Fancy building something like this?

At Designed for Humans I help teams get real work out of AI tools, from building with Claude Code to writing the skills and briefs that keep the output consistent. Design Systems for Humans supplied the colours for every building in Willowmere, through its MCP server.

If that sounds useful, see how we can work together, or carry on to the MCP server behind the colours.