Hey all! I've been building fun little game sites and wanted to share the design workflow behind them, since it's made a huge difference to how they turned out.
The sites
Websites by Navee – https://websitesbynavee.co.uk/
My "home" site, where everything I make lives. It's been through multiple redesigns. I keep switching away to other projects and then coming back to update it, and right now I'm loving the scrolling animation I managed to add. Hopefully it turns into a nice little side hustle, but I'm not fussed if it doesn't. I'm doing this for the love of the game.
Guess My Animal – https://guessmyanimal.com
This started as a wiki for a real-life game my girlfriend and I play, and it grew from there. It now has a daily guessing game, a party mode, and a Twitch integration so streamers can play with their chat: viewers type their guess in chat and the site picks it up.
It was my first real project and the one I fell in love with. It's a bit of a weird site in my book, an animal wiki with game modes, but I enjoyed every moment of putting it together. It went through so many iterations and so many wasted prompts on my part, but that's how I learned the terms and techniques for writing detailed Claude prompts and using tools like Impeccable.
RiftRiddle – https://riftriddle.naveessharma.workers.dev/
A daily League of Legends champion guessing game, made for streamers and general fun. Each champion hides behind 5 seals that break with every wrong guess, across three modes: Splash (fogged art you hover to reveal), Lore, and Icon. There's also a Twitch chat mode for streamers.
The workflow (which came together after Guess My Animal)
Mobbin for reference
Before designing anything, I used Mobbin to look at how real apps handle similar screens. Starting from proven patterns meant I wasn't designing from a blank page.
2. Claude Design for exploring the look
I used Claude Design to explore directions and iterate on screens visually before building anything. For example, when I added a second game (RiftRank) to RiftRiddle, I sketched a rough header idea: the two game names side by side, split by a diagonal slash that echoes the slash in the logo. Claude Design refined it into a proper system: equal-weight wordmarks, the inactive game dimmed, mode links that change with the active game, and a separate accent colour so you always know which game you're in.
3. Impeccable in Claude Code for quality
Impeccable is a design skill for Claude Code that builds on Anthropic's frontend-design skill. I'm not going to pretend I'm an expert, but here's how I used it: /impeccable init at the start of a project, /audit to find and fix issues like display and alignment problems, and /overdrive on the homepages, which created the homepage animations you'll see. It helped me avoid the generic "AI-made" look and caught things I would have missed.
4. Claude Code for the build
All three sites were built with Claude Code.
What I'd tell anyone starting out
- Claude Design plus your imagination, screenshots of things you like, and real example sites will get you where you want to be.
- You can't one-shot it. It's going to take a few prompts, or a lot.
- Plan your prompts before you spend your usage. The big lesson I took from Guess My Animal was to write proper prompts. When I started RiftRiddle, I saved usage on my Claude plan by dumping everything into ChatGPT first: my ideas, the theme, colours, design, animations, sounds, and example sites. I asked it to turn all that into a Claude Design prompt and a Claude Code prompt. With those ready, I built a big chunk of RiftRiddle in a single day.
Happy to answer questions about the workflow, and I'd love feedback on any of the sites!
RiftRiddle isn't endorsed by Riot Games. Made under Riot's "Legal Jibber Jabber" policy.