Website Design Audit: Comparing Against a Reference

You have a working site, and it is not bad, but next to the good sites in your industry it looks dull. When you ask where it falls short, nobody can give you a clear answer — including you. In this article I describe a method that turns that gap into concrete items: comparing your site against a reference you choose and producing a measurable difference report.

The method is based on the comparative audit shown in Jack Roberts's video Turn Claude into a Design Genius... Just Watch; this article summarizes and expands on it. The request skeleton, the measurement table, the prioritization and the limits of the audit are additions of this post.

Why can't you see the problem with your own site?

The problem is not seeing it, it is describing it. You can tell a design is good, but you cannot say why. What you are left holding are sentences like "it feels more spacious" and "it looks more professional."

Working with AI, that turns straight into a blocker: a model cannot fix what you cannot describe. Ask for "make it better" and you get random changes back, because there is no target.

That is exactly what a comparative audit solves. It turns your instinct into numbers.

Five axes that decide where the difference lives

The video argues that the tells of generic design cluster on five axes. The "unexplainable" difference between two sites usually shows up on one of them too:

• Typography — typeface choice, letter spacing, line height, the ratio between headline and body.
• Visual language — photography or illustration, generated or stock, consistent or scattered.
• Hierarchy — where the eye goes first, and where it goes second. On good sites that is not an accident.
• Color — palette width, contrast, how often the accent color is used.
• Spacing — breathing room between elements, gaps between sections, margins.

The job of the audit is to put the two sites side by side on these five axes.

How do you run a comparative audit?

Four steps:

1. Pick the right reference. Find a genuinely well-designed site from your own industry, or one aimed at a similar audience. Award-winning site galleries and design system archives are ideal for this. I covered building your own design system in the seven levels of Claude Design. Some sources, like the archive used in the video, analyze the site and hand you the color palette, the typographic scale and the design variables as well — which makes the comparison considerably easier.

2. Supply both sides. Give it your own URL and the reference's URL together. Do not just say "improve my site"; ask for a comparison.

3. Tell it to be brutal. Models are polite by default. Unless you explicitly say "be brutal, skip the politeness," you get generic praise with a few suggestions mixed in. If you want that brutal eye to be a permanent step rather than a one-off request, see the critic loop.

4. Ask for concrete output. What you want is not a list of "you could improve this"; it is values side by side. What is your letter spacing, what is theirs. How many pixels is your corner radius, how many is theirs. Asking for the report as a short, readable HTML page makes this easier.

How do you write the audit request?

The structure of the request decides the quality of the result. A skeleton that works has five parts:

1. Role and tone: "Look at this like an art director and be brutal." Without that sentence you get a polite, useless output.
2. Both sides: your URL and the reference's URL, with which is which clearly stated.
3. The list of axes: typography, visual language, hierarchy, color, spacing. Leave it open and the model fixates on random things.
4. Output format: "For each finding: the axis, my value, the reference's value, the impact." If you do not ask for measured values, you get opinions.
5. A scope limit: "At most eight findings, ordered by impact." Without a limit you get a forty-item list with no priorities.

The fourth point is the critical one. "How can I improve my site" gets you general advice; "measure the letter spacing values on both sites and write them side by side" gets you a number you can act on.

The concrete values to compare

These are the values to ask the audit to measure. You can drop this list straight into your request:

Axis	Value to measure
Typography	Headline/body size ratio, line height, letter spacing, number of fonts used
Spacing	Gap between sections, base scale value, page margin
Color	Palette width, text-to-background contrast ratio, how often the accent color appears
Depth	Number of distinct shadow values, number of corner radii
Hierarchy	Number of competing elements in the hero, number of primary calls to action

Once you have that table filled in, what you are holding is not something to debate but a list to fix.

What the audit typically finds

In the video's example, Roberts compares the site of Glido, a company he founded, against Linear's site, and the report finds three big gaps:

• Letter spacing is too wide. Especially on large headlines. The report shows the gap with an interactive slider between the two values; even a small change in that value visibly changes the look.
• There is no elevation scale. Shadows and layer depths are arbitrary; on good sites they come from a defined scale.
• The hero image competes with the product. The large visual up top pulls attention but drowns out the actual message.

Other findings that often come up in comparisons like this:

• Line height is too tight. The body text feels cramped and reading it is tiring.
• The accent color is used too often. If the emphasis is everywhere, there is no emphasis anywhere.
• The spacing scale is inconsistent. Gaps between sections come out as unrelated values like 40, 56 and 72.

None of these require redesigning anything from scratch. They are all fixes at the level of values, and together they can make a serious difference.

How do you prioritize the findings?

The report usually comes out long, and trying to apply all of it at once is a mistake. The order I recommend:

1. Typography. The highest impact-to-effort ratio is here. Fix the typeface, the scale and the line height and the site already looks like a different site.
2. The spacing scale. Moving to a consistent scale on its own cleans up most of the messiness.
3. Hierarchy. Simplify until a single main message is left on each screen.
4. Color and shadow. Last. These are polish; polish does not help while the layer underneath is broken.

And remember: you do not have to apply every item in the report. Some differences are deliberate brand decisions. The reference being better does not make every one of its decisions right for you.

One variable at a time

Applying the findings in a batch is the most common mistake. Change eight things at once and even if the result improves, you do not know which change did it — and if it gets worse, you do not know which one to undo.

The method I recommend: change one axis, take a screenshot, put it next to the previous one, decide. It looks slow but it is faster overall, because the rounds of undoing disappear.

One more thing: look at the site again a few hours after a change. Right after an edit everything looks good; the real judgment happens once your eye has reset.

What to watch for when choosing a reference

• Do not lock onto a single reference. Compare against two or three sources, otherwise the audit drags you towards being a copy of that one site.
• Keep the scale comparable. Comparing a giant product's site with a brand-new business's site can be misleading; they are solving different problems.
• Take the principle, not the asset. Taking the spacing rhythm and the approach to contrast is legitimate; taking the palette, the typography and the visual identity together is copying. I discussed that line in detail in what AI slop is.

What the audit cannot catch

This method is good at measuring visual difference, but it does not evaluate your whole site. Four areas fall outside its scope and you need to look at them separately:

• Performance. The reference site may be using heavier images. When you copy the design, you do not want to copy the load time.
• Accessibility. Contrast ratio makes it into the audit, but keyboard navigation, focus indicators and screen reader support do not.
• Mobile. The comparison is usually done in a desktop view. If most of your traffic is mobile, run the audit again on a narrow screen.
• Content strategy. Which sections belong on the page is not a design question. The audit tells you how the existing sections look, not which ones are missing.

In short, the audit answers "how does it look?" It does not answer "is it showing the right thing?" That second one is still your job.

In short

The feeling of "something's missing but I don't know what" is the biggest brake on progress in design. A comparative audit turns that feeling into measurable items — and every problem that becomes an item becomes solvable. Start with typography, move on to spacing, and look at color last.

Frequently Asked Questions

How often should I run this audit?

Before and after a major update is enough. Auditing constantly means changing constantly, and consistency is the very thing you are trying to build.

Should I only audit the home page?

Start with the home page, but add the pricing and product pages. Inconsistencies usually turn up on the inner pages, not on the home page.

Can I apply the values in the report directly?

You can, but not blindly. The reference's 1.6 line height may look different in your own typeface. Take the value, then verify it by eye in your own typography.

Who is going to apply the values the audit produces?

Because the values are concrete, applying them is usually simple: changing the type scale, the line height and the spacing values is a few lines in a stylesheet. The one place it gets complicated is the hierarchy findings — there you may need to rearrange the sections, and that is a design decision.

Does this replace a designer?

No. This method is very good at spotting the difference, but not at making brand decisions. You decide what you want to look like; the audit only measures how far from that you currently are.

Source

• Jack Roberts, Turn Claude into a Design Genius... Just Watch (YouTube, August 2026). The five axes, pulling a design system from a reference archive, and the three findings of the Glido-versus-Linear comparison are based on this video; the request skeleton, the measurement table, the prioritization and the FAQ are additions of this article.