Build and prototype with Claude

I've previously written about prototyping several times—it's like I am obsessed. I even built the website SwiftUI Prototyping to help teach designer how to make app prototypes using Xcode, Swift and SwiftUI. The value of building real prototypes is still valid, and knowing just enough SwiftUI is helpful, but we're not at the stage where the AI coding tools have removed the barriers for designers.

It's no longer "designers should learn to code" and more likely "designers should know how to write*" because that's basically how we're interacting with AI. (You can actually dictate to Claude and ChatGPT if you don't want to write). This pitch is also "designers should know how to work with AI" but I would say something like "designers, time permitting, should have fun and do whatever they want... including play with AI".

(While I'm covering off the caveats, I'll also touch on side-projects! Side-projects are useful, they're like a hobby and they don't really need to have a goal. Sure you could be learning some new skill or technology, and you could be showing "entrepreneurial spirit" while also making sure it's not distracting from your day job, but at the end of the day, a side-project is whatever you want it to be. My side-projects have in the past revolved around data, an idea and a bit of a challenge—can I build an app, for example. My coffee finding app started as a bigger project and scaled down to something manageable, and while it helped me learn how to write an iPhone app—and navigate Apple's App Review—it actually got me out of my flat visiting every third-wave coffee shop I could find.)

In under seven years (okay that's a long time) we've gone from a much easier app "front-end language" easy enough for most nerdy designers to pickup, to AI coding tools that can do the work for you.

I've recently been listening to Lenny's Podcast and his interviews with Jenny Wen and Boris Cherny and there were many amazing takeaways from both episodes. Claude developers (and designers) use Claude Code to write code for the Claude products—developers are writing a lot less code (they're reviewing code written by the LLM) which means they're more productive. LLMs have largely solved coding. Claude designers on the other hand are also using Claude to build. In fact the big takeaway I heard from Jenny was basically build something, use the tools.

Until a few months ago I was having Claude write code in the regular browser chat. The small context window meant I was constantly hitting a wall where I'd just started a project and two or three pages in I was forced to start a new chat and bring that chat up to speed on the project (eventually I broke the project down into very small components like some "agile" task based process, but there were still limits, especially maintaining consistency). I was missing out on the best way to get LLM code—either the command-line tool in the Terminal or now, using the Claude desktop app. I have now tried Claude Code in the Terminal (please give me the ability to include line-breaks!) and the Code tab in the Claude app, and the results are amazing.

Typical of my side-projects, I've started several and lost focus just as many times. My own human context window does not like switching back to the project I was half working on while watching tv the other night or coming back from pesky sleep. But I would argue each project was a different experiment—each time I setup and tackled the project following a different process. (Also I have a long list of previous side-projects and over a dozen unused domains).

TLDR: I've spent the last three months experimenting with Claude Code and how much design I gave Claude ahead of coding. My process is still evolving, and there currently remains a gap between the design and the finished code. The following is a deep-dive summary of 3 varied experiments.

Pick a Film

Back in 2010-2014 I designed and built several film sites using the iTunes API including FlixFlip and Pick a Film (plus two others where I've given up the domain). Both were based on a simple idea—given me a random movie pick so I can watch something. Of course instead of watching the pick, I built the website! A few weeks ago I scanned through my domain list looking to pick one for my first Claude Code, using the CLI. Enter pick-a-film.com. I gave Claude a small prompt and no inspiration for the design—this was about the idea not the design (says the designer).

In under 5 prompts (sorry I can't see the original kickoff prompt) I have both a front-end with several features AND a complete admin CRUD tool to add and edit films. What I have now is more than what it replaced. I've been making a few tweaks to the design (changing the navigation bar to something more in vogue) and copy (changing "Today's pick" to "Your pick"), and asking for a few bug fixes, otherwise even though it's written in PHP/HTML/CSS/JS so I can understand it, 99% of the code came from Claude. I now have a long list of additional features I could get built in minutes not days, and Claude Code knows how to actually build the more complex algorithms—improved rules for the "random" picker). The process was a lot easier given in the terminal Claude Code has access to the local folder containing all the code. But the human is still needed, not least for the core idea—I just added several fields to the admin edit film file to add new bespoke content not available in the APIs. And honestly copying, pasting, and tweaking a few lines of HTML & PHP, or adding a new CSS class myself likely took about the same amount of time as it would have writing out the change to Claude. That's still a valuable skill. And unlike with the regular generic chat, the next time I ask for a big feature from Claude Code, it can first review the adjustments I made to the code.

Could I have first designed the main pages? Absolutely. Would I likely still be sitting in Figma crafting the perfect UI? Yes. For a side-project the bar for "good enough" doesn't necessarily have to be "fine", it can actually be a starting point like Bootstrap used to be (or now Tailwind). Should I have included a note in the prompt for Claude to avoid using Emojis? Yes, that's one of many annoyances with Claude's code and yet at least it didn't generate its own image that might be very wrong. (It's also an opportunity to draw ones that can be unique to the brand).

But is it my design? No. Can I design a project first? Yes, absolutely.

Sort game

The next experiment I did with Claude was to build an iOS game. I have a folder of half-built games. Games take a lot of work, especially creating assets. And I'm an Apple fan—rather than using Unreal or Unity, I build games using Swift and Apple's game frameworks: SpriteKit and SceneKit. There is so little documentation and tutorials for SpriteKit and SceneKit. Claude can solve this barrier. Of course my game idea was simple enough that I can be written using SwiftUI.

For the sort game I spent many hours in Figma building out the screens and understanding the gameplay even before engaging Claude. I already had a colour palette from some earlier experiments, and the concept was to build a sorting game with simple graphics—simple enough that Claude could code them as basic views (Rect, Circle, RoundedRect). This was also my first time using the Claude desktop app's Code tab unlike Pick a Film's terminal experiment. Using the desktop app allowed me to attach screenshots, other assets and better instructions (with line-breaks!). But first I used a regular Claude Chat to write up a spec document with the entire app structure written out. Despite heavily editing that document and removing some AI hallucinations (seriously I think Claude wanted to write a completely different game), there were issues with the coding process and features added that I had removed from the document, including how the levels and tiers were structured, and the content of the game's home screen.

Aside from the hallucinations, the coding process was better than I could have imagined, however the implementation of the design was at best rough. I had to provide several rounds of specific feedback to get the design to more closely match the Figma screens. There are still rough spots, however I haven't yet had to tweak the code myself (though using SwiftUI will allow me to eventually adjust the styling to better match the original design). For some reason the recent Xcode 26.4 upgrade has caused no end of difficulty getting a build of the app working. When it was working, the current gameplay was actually too easy. I didn't want to add a timer to levels, so I need to coax Claude Code into making the levels harder—I've given this instruction but it hasn't resulted in improvements to the levels. Or fix the splash screen animation. Or fully implement the full themed UI.

The sort game will potentially be a longer experiment, though this will be a longer time commitment. My goal is to get it into the App Store. In reality this will require a bit more thought with the gameplay and designing more variation with the levels. I'm aiming to avoid inserting ads or spammy features, and I'm planning a single in-app purchase upgrade bundle without hobbling the free app.

One pitfall I discovered with the Claude desktop app and the Code feature—I had lost the chat. The app had refreshed and my chat history, and progress had vanished. I'm pretty sure I wasn't able to find the progress but now I can—clearly this was a discovery issue but unlike the Chat tab, the Code tab does not have a Chats history button (and I had the sidebar minimized which hid the previous chats list).

This site

Back in January I had a rough idea for redesigning this site and mainly the homepage but I didn't immediately jump into Claude. Instead I started in Figma (and this was before I ran the Pick a Film experiment). I spent a Saturday in Figma crafting several rough but comprehensive iterations inspired by a design I created for Dew, and once I'd landed on a design direction, I fed the designs, assets and copy into a Claude chat. My aim was to speed up the build, and it showed me something interesting very quickly—I didn't like the resulting webpage. Some of that was that my design and instructions were ignored, particularly the font weights and grid. Also most of the images were left unlinked.

And so I iterated. First I continued chatting with Claude to fine-tune the design until it was closer to the original design, though it was still only about 90% correct. Then I jumped into the code to continue building out and tweaking the content while making improvements to the design beyond the original Figma mockups. Once I saw how the mockups translated into HTML & CSS—how the design looked on a real device—I knew that my original style concept wasn't quite right.

I evolved the design, not in Figma but in the browser, and then I did begin to wonder if the new design was too similar to the previous site design. The hero and h1 were particularly a major focus with several iterations adding additional content—blocks of words or images looping in a carousel. I experimented with the fonts I had tested out in Figma and after several tweaks, I landed on a design I am (currently) happy with. It'll evolve some more I am sure, and the content will get updated many more times—this is not a static site.

In the end very little of the code Claude wrote remains on this page—I copied Claude's javascript. My CSS is now even more of a mess than before as I've tacked on additional styles, the HTML contains most of the original structure with some minor semantic improvements, and I've kept the simple PHP templating I build years ago. My next experiment will be to download my entire site, and have Claude Code read the source code and provide feedback. Ideally I'll keep a local copy that I will edit, run builds from, and push the changes to my server.

Summary

You can probably guess I don't use Claude to write these posts, or even make them succinct! I have tried using Claude to produce other writing and it hasn't felt appropriate. Claude is pretty good at synthesizing and reducing—it's a good sounding board. Claude is also a capable coder, more than I suspect I will ever be. This ultimately means I can spend more time focused on problems, ideation and testing out concepts built very quickly.

The IKEA effect

One phenomenon with IKEA is the relationship customers have with the products they assemble, the item ends up having more value to them than a fully assembled product. I am wondering how much this may extend to our own creative work and building. Whether it is because I've previously built Pick a Film and I'm not sure it is still as useful today, or because I didn't build it myself, I am now wondering about its value. I don't have the same feeling of ownership over the site—I didn't design or build it, I wrote instructions. Yet it's better than I could have written.