When was the last time you coded something by hand?
I’ve been wanting to make some changes to this site’s design and structure for months. Specifically:
- I wanted the home page to display the most recent post instead of the text about my professional profile.
- I had different views for different posts’ categories. I wanted to merge in just two views: one for book reviews, and the other for everything else.
- I wanted a better looking font.
- Other small adjustments.
The problem was time. My Hugo-generated site uses the Ristretto theme, which I coded myself. If I wanted to change the layout and structure, I had to change the code of my custom theme. Coding UIs is not what I am most proficient at, really. So I kept postponing the changes because, in my mind, they would require a couple of days to accomplish.
But of course, now we have AI. You can see where this is going. I use AI every day, for non-trivial tasks. Even so, I was surprised by what I could accomplish in three hours—most of the time it was the agent working—and the quality of the output.
To get a sense of what I’m talking about: I had been looking at fonts for this site on the web. But the one I liked best required a yearly subscription. There are lots of great fonts that have a permissive license—you just have to find them. So I asked the coding agent to find fonts similar to the commercial one, do a benchmark, and present three finalists comparing technical details, text samples, etc.
The agent assembled a catalog with ten different fonts and produced sample texts using each of them. It then presented some arguments for and against each of them, and recommended three finalists. After some thought, I settled on Source Sans 3. Claude Code then replaced the font in the blog instance it was running locally, and produced sample pages with text to test and approve how different elements of the site looked on-screen. For example, we had to fix the size relationship between heading levels, and the size of the blockquote text.
Another example. This version of the blog displays a grid of recent posts after the most recent article. Each post is supposed to have a cover image, which is displayed in the grid. But some posts don’t have cover images, so they display as “No image”, which is ugly.
So I asked Claude Code to check the last coverless posts, then choose three images from Pexels for each that resonated with the post’s content. So Claude Code found the posts, and built a temporary webpage so I could triage the images for each post. Then it resized the chosen ones to the appropriate size, and converted them to .webp, which is the format I use for covers. It also generated an appropriate cover caption and alt text, and of course inserted them into each post.
This all worked out well, because of a few deliberate choices:
- Coding agents are goal-oriented. I made the effort to lay out clearly the changes I needed. I had been taking notes about the redesign for some weeks before I actually started making changes.
- I worked in phases. For each phase, I used plan mode to divide the phase into smaller tasks. This is essential so the agent doesn’t lose its bearings.
- I made sure that the agent had the means of verifying its work. In this case, among other things by using Claude’s browser extension to check its own work.
I enjoyed the whole process. The agent really felt like an extension of my mind.