This is a quite different post to usual—more like an actual article or essay. But I thought this might be useful because a number of people asked me about it, and coding with AI is intriguing, kind of miraculous, and most of us probably haven’t done a lot with it yet. Normal service resumes this weekend as usual. Caveat: I wrote much of it several months ago, and because things move so fast, tools and capabilities continue to improve.

In October last year, over the course of about a week, I built a Chrome Extension with the help of AI: Sketchplanations New Tab

Chrome extensions can be added to the desktop Chrome browser to do useful and fun things. I personally hate it when I open a new tab, and browsers try and throw news articles, stocks, and gossip at me. And I’ve enjoyed extensions that show me nice photographs or teach me something. I’m always thinking of how to better share sketches from the archive with people new to Sketchplanations, and I had the idea of building an extension that would show you a sketch from the site in each new browser tab. The only problem was that I had no idea how to build a browser extension.

This is the story of building that extension and what I learned using AI to do it. Feel free to skip if coding with AI is just not your thing.

Background: I was not Starting from Zero

First some background. Though I’m not a developer, I’ve written code since my teens, at University, in my postgraduate degree and for my own personal sites. I’ve also worked in product and design at 2 tech startups for 15 years, collaborating with developers daily. So I wasn’t starting from zero. At the same time, I’m orders of magnitude less experienced with code than the talented developers I worked with.

Over the past few years, I’ve been adding to and modifying the Sketchplanations site, first with the help of CoPilot in VS Code and, more recently, with Cursor. I bought paid plans for both. I also pay for ChatGPT.

Here are ten things I learned while coding this extension with AI—part experience, part lessons learned, and part practical advice if you want to build something yourself:

1. You Just Have to Think to Ask

2. Going from 0 to 0.7 is Fast. Going from 0.7 to 1.0 is Still Slow

3. Plan Before Building

4. Styling and Layout Sucks Time

5. Agents Don’t Work for My Model of Working, Yet

6. Finish With Tidying Questions

7. Use the AI to Learn

8. Use Good Product Development Practice and Break Features Down

9. Use the Knowledge You Have to Ask About Improvements

10. Don’t Underestimate Publishing and Release

1.
You Just Have to Think to Ask

One afternoon with nothing pressing, the idea of the extension came to me again, and, on a whim, it occurred to me to ask ChatGPT if it could be done, and then if it could create it. About three minutes later, I had a zip file to download that I could unzip and install in Chrome as a first draft.

I knew nothing of what was involved in creating an extension, what language they were built in, special instructions, how to package it, install it, nothing. And yet a few minutes later, I had a working extension. Incredible.

I could have done this six months earlier. I knew nothing about what was needed to build an extension—I just had to think to ask.

2.
Going from 0 to 0.7 is Fast. Going from 0.7 to 1.0 is Still Slow

The first draft extension was amazing, but it needed better functionality and design changes.

So I asked ChatGPT to make some changes. Each time it took a minute or so and then gave me a new .zip file to download.

Making these small changes with ChatGPT started to take time: writing what I wanted, downloading, extracting, testing, writing lengthy feedback, waiting for new files, downloading, extracting, testing...

At one point, something broke, and it stopped working. Asking it to undo provided another version that didn’t work, so I went back to a previously downloaded version and tried again. There was a lot of “It still doesn’t work.” I’m afraid to say I can get rather annoyed with our AI assistants.

The quick draft extension worked by checking an existing endpoint (like a service you can use) that an actual developer had created on my site to serve a random sketch, then scraping the page (reading the page’s code to find the information it needed) that loaded. I know from experience that web scraping is not very reliable—small changes to the page will break it, and it’s not very efficient for the small amount of information the extension needs: primarily a URL for the image.

So I switched to the Sketchplanations website codebase and used Cursor to create a new API endpoint just for the extension, returning just the information it needed. That required managing two codebases, so the extension would ask for a new sketch, and the Sketchplanations site would send it.

Because my first 365 sketches were all one a day in the first year, the older sketches are generally messier. I spent some time asking AI for simple ways to tweak the API response to skew towards newer sketches. Cursor was very smart at doing that.

Once this basic framework was in place, I still spent many hours, if not days, working on layout, styling, and additional features.

So, though AI cleared the first hurdles in a giant leap, getting over the finish line with a production-worthy product still took a long time.

3.
Plan Before Building

If you tried some coding with AI in the past year or so, you might have experienced making a suggestion, or even just asking a question, and the AI jumping on that and busying itself making code changes throughout your codebase. Undoing changes I have found, unless you have a clean point to reset to (a latest git commit or pull request), is not always easy—often unneeded code sticks around.

Cursor Plan Mode lets you share and discuss your ideas, and then Cursor will come up with a development plan. For any new feature, spending some time working on that plan, asking questions of it, considering edge cases (or asking Cursor to), and generally refining it before building was very worthwhile for me.

Iterating on a plan in plan mode helped me with everything that’s critical in software development that isn’t actually writing code. It helped me:

• Decide what I want

• Understand the approach and changes that were needed

• Learn how something is built

• Learn what belongs in a set of changes and what is best left to future changes

• Query the AI’s first approach and sometimes tweak it to match my future plans or the current codebase

• Minimise big sets of code changes that were hard to undo

4. Styling and Layout Sucks Time

One area where the AI really excels technically is presentation and layout. Its knowledge of CSS (Cascading Style Sheets)—code instructions for how things should look—is remarkable. Despite having worked with CSS for years, the AI regularly used functions and features that I didn’t even know existed.

However, the joy can be short-lived.

Good design requires considering multiple use cases, user journeys and screen sizes. You don’t expect a page to look the same on your desktop as on your phone. You might get lucky and, with a prompt, get a fully usable responsive design. But my experience is that you will need to test at different sizes, and you will likely need adjustments at each.

Getting this right was time-consuming and fiddly, even when working with a CSS genius.

Small changes to one area break another, and fixing that area breaks another. The AI often wants to write remarkably complex, interdependent rules that are very quickly hopeless to follow. It’s partly the nature of CSS with cascading and overlapping rules that, unless you’re careful, can quickly tie you in knots. Periodic requests to ‘Simplify and remove unused rules’ helped minimise clutter and reduce the risk of errors.

Good design also includes a lot of things that, as a user, you don’t tend to think of at first. Buttons and links might have hover, clicked, active, visited, and inactive states as well as transitions. They may behave or look differently at different screen sizes—changing size or hiding themselves in a menu, for example. They may need to invert colours in dark mode vs light mode, or show up better against a background they now find themselves on top of. As with all design and development, these subtleties are easy to forget and underestimate.

All in all, even in my very simple application, working with the AI on styling using CSS was the most painful part of the process.

5. Agents Don’t Work for My Model of Working, Yet

Agents are a promise of incredible productivity, like having a team of people working for you. The idea is that you can set agents to work on tasks in the background while you get on with something else. In principle, that sounds amazing. In practice, I find it difficult to use productively.

First, don’t underestimate the time it takes to give an agent good prompts. It’s tempting to think, “Ooh, I wonder if the site could have different themes,” and then pop that into a prompt and let it have at it. But in practice, there are always more decisions to make, and as I start to describe what I want, I think of more questions or more details that I need to describe. To stick with the themes example, you will quickly find you need to answer: