Coding agents like Claude or Warp are pretty good at basic web design. Nowhere near as good as a graphic designer, but honestly much better at graphic design than an average programmer. With a bit of nudging I can get results in ten minutes that are at least as good as I could manage after several hours of sweating through CSS files. But only if they have a good feedback loop.

The best tip I’ve discovered for turning them into a Minimum Viable Graphic Designer, is you want to teach them how to take screenshots. Remember, coding agents are only as good as the feedback they can gather. They become better programmers when you give them a compiler or a test suite, because they can see where they’ve gone wrong. And they become better designers when they can see what impact the changes had on the way the page renders.

So my top tip for working with AI and websites is, teach them how to take screenshots and insist they do! For this, I usually put a rule in the project along the lines of:

markdown
You can take screenshots of a webpage with `playwright screenshot --full-page $URL $OUTPUT_FILE`. For example:

```bash
playwright screenshot --full-page http://localhost:8000 screenshot.png
```

You must take a screenshot whenever you're finished making design changes. Take the screenshot and check it looks good, and matches what the user asked for.

(You’ll need to have Playwright installed of course.)

It’s a pretty simple instruction. The key is, it enables a feedback loop, and feedback loops make all the difference in the world.

Fun parting tip: You can also say, “Make it look like Apple’s website,” for example. With the ability to make screenshots, it can actually look at Apple’s website and use it as a design reference.