A bare agent versus the same agent with a design skill: seven pairs, measured

6 min read

Eduardo Calvo

Eduardo CalvoWrote the skill and the detector this post measures with

Claims about design quality are cheap. So here is the setup, and you can open both sides.

The method

Seven surfaces: a landing page, a freight console, a CLI reference, a sign-in screen, a cosmetics product page, a restaurant, a rooftop-solar site. One casual prompt each — the kind a real person types, not an agency brief. The same model, a single pass, no iteration, output as one self-contained HTML file with nothing loading off the network.

Every prompt ends with “light theme”. Without it the bare agent hides its defaults behind a dark coat of paint and the comparison stops meaning anything.

The only difference between the two versions of a pair is whether the agent read the skill before writing code.

The result

Pair Without With
Landing page 2 errors, 17 warnings 0
Freight console 4 errors, 16 warnings 0
Product page 9 errors, 10 warnings 0
Restaurant 5 errors, 7 warnings 0
Services landing 4 errors, 9 warnings 0
Sign in 2 errors, 4 warnings 0
CLI reference 0 errors, 1 warning 0

Ninety-four findings against zero, from a detector that reads source and takes no opinion on taste.

What the findings actually are

Not “it could be prettier”. The list is dominated by: hover states with no keyboard equivalent; text under the contrast bar; tables that break under 320px; headings that skip a level; transition: all; six identical cards in a row; emoji standing in for icons; images with no dimensions, causing layout shift.

In other words, most of the gap is not decoration. It is the part of design that has a right answer.

Where it does not help

The CLI reference pair is nearly even — 1 finding against 0. A dense reference page is mostly text in a column, and a bare agent does that competently. The skill’s value shows up where there are decisions to make: composition, hierarchy, colour commitment, motion.

Honest version of the claim: the skill does not make an agent a designer. It removes the defects that make its output legible as generated, and it makes the good decisions available.

Open the pairs — both versions are live pages, so you can tab through them.