How to Debug and Refine an AI-built Website

Refining the website

OK, that was quick. Your site escaped the confines of your imagination, pen and paper. It’s time to make better - not perfect, but good enough.

A fair warning: refining your website can go on and on. It’s tempting to keep polishing for days on end, until we end up making a completely different website than we started with. If you’ve planned your website well, that is your anchor and northern star.

We’re going to escape the temptation of getting lost in the sauce, the details - by going back to pen and paper. I’m sorry. I’m tying you to the mast of the ship so you’re not tempted to steer toward the siren’s call of endless tinkering. Remember the outset, and purpose of your website.
 The goal of this chapter is to bring your site to a level of polish that matches your site’s purpose, and make sure the site functions as the typical user might expect.

Let’s systematically catch bugs & changes

You can use your @site-map.md for this, to make sure you really stay on track. (Maybe there can be a bug/change list based around the site map, incl. categories like “layout/margins”, “behaviour” etc. that the user can fill in)

Go through each page of the site map and ask yourself:
Is the content on this page easy to read? Why not? Does the layout/margins look alright? No? How should they be changed? Do all the buttons and elements behave the way I expected? If not, how should they be changed?

Make sure to note each change you identify in @Site-changes.md under the appropriate page, or under site wide for anything that would affect the whole website.

Mobile testing

Once you’ve gone through each page, do it once more, but using the mobile mode (explain this) in your web browser to emulate the experience for phone users. Go through the questions above again, and note each change per page, but under the mobile section of @Site-changes.md.

Refresher on using the Inspect tool in your browser As described in Crash course in Web Design, the Inspect tool lets you identify elements, CSS properties etc.

Common issues

• “It doesn’t move/orient/place things as I expected”
• ...

Troubleshooting with AI

Switching agents

Clean slate - when to throw things out

Have another LLM assess whether you’re communicating in a way that LLMs are likely to understand