web design
The Backstory
I wanted a small project that would let me try a different way of working: with an AI collaborator, and without a design tool in between. Birds were an easy choice. Sydney is full of them, and most of us know only a handful by name.
The plan was 3 to 4 days, while life continued to happen. I’d lead the design and make the calls on taste. Claude would write the code and keep the notes. We agreed on a few ideas up front: a card deck you could draw from, decks by habitat, and a walk where you meet birds and collect them.
Designing Without Figma
Before anything was built, I wrote a design brief in Notion. It held my references, with a line on what I liked about each, and answered the questions a mockup usually would. How should it feel? Cottage-core storybook meets mixed media. How many fonts? No more than three, each with a job. What colour? Neutral backgrounds, so the birds’ colours take centre stage. What’s non-negotiable? Accessibility, alt text, and calls written out as words.
Claude read the brief before every session. Its first interpretation of it was a style tile, built in code: type, colour, a sample card and a sample of motion. I reviewed it in the browser and asked for changes, and it updated live. We went through four versions before I approved it.
Designing in the real medium meant I was judging the actual thing: how a card flips, how a sticker catches the light, how text sits on a phone. The trade-off was that there was no artboard to point at, so my feedback had to be precise in words.
Catching the AI Default
Claude’s first palette was warm cream and kraft paper. It looked fine, and it looked like it was generated by AI. I asked it to think about the sky instead, and how a bird’s colours show up against it.
We moved to cool sky neutrals, with wattle yellow and fairywren blue as accents. The birds became the brightest things on the page. It was a small moment, but it’s the one I come back to: the AI can produce something reasonable very quickly, and it’s still the designer’s job to notice when reasonable isn’t good enough.
The Card
Nest Door has 37 birds: 13 in the backyard, 12 at the harbour and 12 in the bushland. We chose birds you can actually see around Sydney, with strong personalities, a spread of colours, and a few lookalikes worth telling apart. It’s enough to fill three decks, and few enough that every bird could be painted, checked and credited by hand.
Each bird has a card. The front has two zones split by a rule: the art above, and the name below. Nothing decorative is allowed to cross that line. Above it sit the painted bird on a torn paper scrap, a deck shape behind it, a die-cut sticker for its habitat, and a polaroid of the real bird. Below it sit the name, a handwritten note and a small cluster of dots in the bird’s colour.
The back shows three real photos of the bird in motion, short field notes, its call, and credits for every photo and recording.
Many small decisions came from my reviews. The sticker had to look like a sticker, not a button, because a button promises a click. The handwritten notes moved onto paper slips so they stay readable over dark shapes. Each bird’s size was checked against its perch, so a 20 cm wagtail isn’t bigger than a fence post.
From Drawing to Directing
Claude’s first attempt was a galah drawn in code. It had the right colours and the wrong shape. We decided to use paintings from Google’s Gemini instead, with Claude writing the prompts. The plan was to generate them through Gemini’s API, but Google’s ID check blocked my key. So I generated every painting myself in the Gemini app, one prompt at a time.
While the paintings arrived, the deck stayed complete and honest: unpainted birds showed “painting on its way” alongside their real field notes, and the bird of the day only ever picked a finished card.
Claude’s role shifted from drawing to art direction: a shared style prompt, the field marks for each bird, and one approved galah as the style anchor. Every bird had to reach a clear likeness to a real photo.
Gemini couldn’t repaint the same bird in new poses, so I asked for each bird and its perch as separate paintings. Claude turned them into layers that move. That’s how every bird got a small move of its own: the galah tumbles, the ibis dives into a bin, the kookaburra laughs.
The paintings are labelled as AI-generated wherever they appear. The real bird is always on the card as well, in photos from Wikimedia Commons, each credited to its photographer.
When Licences Shaped the Interaction
Every call is a real recording from xeno-canto, a community library of bird sounds recorded and shared by volunteers. Thank you to the people behind it, for the library and for making it open to use, including an API for projects like this one.
Claude did the research that led us there. It checked the licences, picked a recording for each bird through the API (preferring clear recordings made close to Sydney), found the liveliest few seconds of each, and credited every recordist. That took hours, if not days, of work off my plate. I listened back to every one, and for a while my workspace sounded like an aviary.
Some recordings can’t be edited under their licence. So instead of trimming files, the site plays only those few seconds, and leaves the file whole. A legal detail became an interaction decision.
One bird has no call at all. Xeno-canto withholds rainbow lorikeet recordings to protect the species from trapping, so the lorikeet’s card explains why it’s silent.
The Walk
The walk was the most ambitious part, and the most personal. It’s inspired by Club Penguin. I played it for hours as a child, and it still holds a special place for me and my design brain when I think about delightful interactions.
You visit an island with three places, a backyard, a harbour and the bushland, each painted as a room. A small walker moves where you tap.
Accessibility From the Start
Accessibility was part of the brief, not a pass at the end. Every sound has a text version, with the call written out. Every image has a description. Quiz answers are marked with an icon and a word, not just a colour, and the body font, Atkinson Hyperlegible, was designed so letters are hard to confuse. Motion follows reduced-motion settings.
On the walk, every bird is a button: you can Tab to a bird and press Enter, and the walker goes to meet it. Walking freely around a room is tap or click only for now.
Launch and After
Nest Door went live on 29 October 2026 on Cloudflare Pages. It’s a static site with no accounts and no backend: your collection is saved in your own browser.
The first days after launch brought real-world fixes. Cards flipped wrongly in Safari, showing the front through the back, and link previews needed work before they showed up properly when shared.
Working this way moved most of my time from making screens to making decisions. It helped me experience what it’s like to give up granular control, to be a better communicator, and to judge which features are worth building when building comes this easily.
AI models are differently skilled collaborators, and understanding their limits matters as much as their strengths.
Claude is excellent at code but not at painting. Gemini produces rich visuals, but needs very exhaustive, articulate instructions to paint a bird with two wings instead of four.
The speed came from the AI. The quality came from reviewing everything closely and saying exactly what was wrong. Skipping Figma worked for a project like this, where the details live in motion and sound. I’d keep the decision log for any project, with or without AI.
Illustrations generated with Google Gemini. Bird photos via Wikimedia Commons by Charles J. Sharp, Shea Walsh, Ank Kumar, Steve Fitzgerald, JJ Harrison, Sardaka, Shagil Kannur, Wayne Butterworth, Thennicke and Toby Hudson (CC BY-SA / CC BY). Calls via xeno-canto.
