Thomas the Tank Engine ABCs
How I build a custom ABCs app with Claude Code
On Sunday morning, I was on my laptop while Charlie watched Thomas the Tank Engine and drank his milk. He likes to type on laptops - his uncle lets him type into Google Docs, though he mostly likes pressing O over and over again. I’d be happier if he was learning his letters. And he loves Thomas…
I played a lot of Reader Rabbit when I was just a little older than he is now. I can’t remember if that taught me the alphabet or not, but I’m sure it didn’t hurt. Reader Rabbit is long gone, but it sure would be nice if I had a Thomas the Tank Engine Reader Rabbit clone…
I got started after breakfast, and he was playing with it by dinnertime.
Building the Specification
I’ll post a more detailed process post, but generally I follow this flow for Claude Code projects:
Work with Claude to build a spec
Work with Claude Code to build a development plan (phases, milestones, technical decisions)
Have Claude progress through milestones, providing me with verification steps
Test out the whole thing, make small changes
Sometimes “building the spec” involves some extra legwork - researching an idea or a technology, or in this case testing if Claude would be willing to help me on a project that involves copyrighted material. It was willing to brainstorm “A is for Annie”, but not willing to generate images.
Ok, great - safe to proceed to making the spec. I can write a decent PRD, but Claude does a pretty good job in a fraction of the time, and does a great job of asking clarifying questions. There’s no magic to this phase, just a brain dump of the features that you can think of.
Claude responded with a list of 29 questions, with topics ranging from Audio and Visual Design to Gameplay. It even asked how old Charlie is to “calibrate complexity, text size, feedback timing”, who knows if it really used that information. I copied the questions into a Google Doc, answered them inline, and sent the answers back. Then I asked for the spec back as a downloadable spec.md file. This is just a markdown file that I’m going to put in the project directory.
Coding
I created a project directory, put spec.md and my claude.md file in, and launched Claude Code. I started with a simple message: ` Please review spec.md. Generate a high level development plan, then we’ll review that and discuss the tools you’ll need access to.`
We iterated on the plan for a couple messages, and it output a development_plan.md with 6 phases.
There are folks online who talk about handing a spec to Claude, having it do the whole thing in a single shot, and being happy with the result. I have never had this experience - I prefer shorter milestones with clear verification steps. This project was just small enough that it might have worked, but it’s not my process. We agreed to the plan and it started developing phases 1-3.
Assets
The spec calls for me to provide the audio and image assets. The audio is a recording of someone saying “T is for Thomas”, etc for each letter, and the image asset is just a picture of the subject. The letter is displayed with code, no image needed.
For the images, I opened up another instance of Claude Code in a temp directory. I added the letter / topic list, and explained that its job was to find an image online of each subject (Annie, Bertie, Cranky, etc) that we could use for the app. We had a brief discussion on copyright, it seemed content that I was only going to use this for personal use, and it went about downloading images and saving them as annie.png, bertie.png, etc.
I didn’t want to actually record audio, and Claude suggested ElevenLabs. I’d heard of them but never used them before - it was free and easy. Pick a voice, type “T is for Thomas” into the box, generate, test, download. Maybe it took me 10 minutes, I bet I could have gotten Claude to do it for me if I was paying for a developer account. It’s not perfect, but I think it’s better than OSX’ built in text to speech.
Unfortunately, it was useless at generating a friendly train whistle, I just recorded audio and used that. I could still use a couple more sound effects, but I wasn’t going to hold up the show for them.
Oh, and I had to make up a train. We couldn’t find a good option for Z, so Z is for Zhao, who’s Yong Bao’s best friend. Zhao’s the Percy to Yong Bao’s Thomas. ChatGPT/Dall-E was happy to make a picture of him.
Finished Product
There were a couple navigation issues to fix with Phase 1-3, then submitting the assets, then some very minor tweaks. The whole project took 39 messages from me, but that included some negotiation of libraries or questions.
It’s worth noting that the Coding section might be the shortest one. I think that’s pretty standard - your time is spent working on the spec. Of the 39 Claude code messages I sent, one was “proceed with phases 1-3”, one was “proceed through phases 4-5”, and one was “proceed through the last phase”. Everything else was negotiating the development plan (11 messages), the libraries to use, getting the build to work, and small fixes/changes.
39 messages sound like a lot, but I wasn’t locked away upstairs toiling on this project. I kept the laptop on the kitchen island while we watched football, and tended to it like you might tend to a stew in the afternoon. The audio and the spec took maybe 40 minutes of concentrated work, and otherwise I just checked in periodically.
What Does this Mean?
The short answer is “I don’t know”. Claude Code is a very powerful and surprisingly accessible tool. Anyone with a bit of curiosity and patience can make a simple app in an afternoon - very little hard knowledge required.
Josh Bleecher Snyder wrote about just-in-time software - he generated a shopping list on his phone while at the grocery store. Last year, Mike Masnick built the todo app that he always wanted, and since it was just-for-him he didn’t have to care about the features other people would want. I’ve heard rumblings that open source maintainers are getting overwhelmed by Claude Code PRs, and I can’t say that I’m surprised. Last year I wanted a small new feature in an open source library that I used, Claude added it and I submitted the PR. It took less than an hour, and the maintainer appeared to review my code with Claude.
I’m very confident that there’s going to be more “disposable” software, and pretty confident that there will be more personal software. I’d bet that Not Invented Here syndrome is going to get much, much worse at big companies… and to be honest, in my household too. Beyond that, I’m not quite sure.