Skip to main content

03-23-26

Let's critique and fix an AI design

I've been experimenting a lot with AI prompt structures for UI.

I've made really good progress coming up with a decent repeatable way to have AI help me to generate these prompts to then feed that AI-generated version back into a UI builder like Figma Make or Claude Code etc.

More on that soon...

But there's ALWAYS fine-tuning that needs to happen.

Here's a quick look at a recent example.

Below you can see the prompted AI build on the left and my manually fine-tuned version on the right.

Fig. 1

I experimented with a lot of different enhancements, but ultimately landed on 5 specific changes for this, so let me break them all down for you one by one.

Hopefully this will help you work through and sharpen your own designs.

1 – Image

It should go without saying, but you absolutely MUST use fantastic imagery in all of your designs when you have the chance, so let's swap out the C– photo for an A+.

Fig. 2

2 – Meta tags

Let's make these meta tags work harder by using a nicer color and a slightly larger font size.

Gluten free is more important health check than protein so let’s accent that bad boy.

Calories aren’t quite tag worthy, so let’s downplay them a bit.

Fig. 3

3 – Title & Price

The title and price are already much larger than the other type.

Because of this, we don't need to be so dramatic with both the size AND weight.

Let’s dial down the weight and tighten the line height on the title.

Fig. 4

4 – Body Copy

The tiny grey body copy is not pulling its weight in the design.

We want people to be able to read this, so let’s bump up the size, fix the line height, and go a little darker with the color.

Fig. 5

5 – CTA

Finally, the CTA.

It’s tempting to go super large with the font size here, but we can keep it relatively small and sized more inline with what we already have.

We do need to define a primary color that drives action.

One last little, bonus... we can fine-tune the corner radius of the card and the CTA to match better.

Fig. 6

And there you go.

5 steps to get your AI-builds wrangled with good design.

Practical design wisdom delivered weekly.