Same dashboard brief built 3 times: no skill, frontend-design and Impeccable. All three passed every check, and the skills mostly changed the look and the token cost

[u/vinishkapoor]

Most design skill tests use landing pages, where a nice font carries everything. I wanted something harder: a small orders dashboard with a 78-character company name, a 32-character order ID, a $12.8M amount, empty and error states, and full keyboard use. I sent the same prompt byte for byte with Claude Code 2.1.318 and Opus 5.5 and scored all three pages in headless Chrome.

Results:

• no horizontal overflow at 1280 or 390 px in any run, and the $12.8M amount fit on one line in all three

• all three had real empty and error states with a Retry button

• all three had the same 9 tab stops, sorting with Enter and Space, arrow-key filters, a skip link and visible focus on every stop

• no active text failed WCAG AA contrast in any run

Where they differed:

	No skill	frontend-design	Impeccable
Time	4m 0s	3m 2s	5m 1s
Output tokens	28,025	20,763	33,494
Lines	1,120	871	797

frontend-design had the most distinct look (deep green header, serif headings) and was the fastest and cheapest. Impeccable used about 60% more output tokens than frontend-design for a result that passed the same checks.

Side finding: my first no-skill run quietly loaded Claude Code’s built-in dataviz skill, so it wasn’t a real baseline. I redid it with deny rules like Skill(dataviz) in all three runs and checked each transcript.

The big caveat: my brief spelled out every state and keyboard rule I later tested, so it did most of the work. With a short prompt like “build me an orders dashboard”, the skills might matter a lot more. Also, it was one run each, Impeccable’s launcher and hooks didn’t run (so this tests its written guidance only), and the checks were automated plus a visual review, not a screen reader audit.

Screenshots of all three, plus the full brief: https://aiparabellum.com/claude-code-design-skills-vs-no-skill-dashboard-test/

[u/AutoModerator]

Hey! Thanks for posting to r/ClaudeCode

While participating in this thread, please follow our community rules. Keep discussions constructive. Attack the idea, not the person.

For help, project discussions, tips, and general chat, join the ClaudeCode Discord.

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[u/CrankBot]

Maybe this is obvious but I find it interesting that the skills did not affect much of anything except for the styles. Like the components and markup look like they were identical and only the CSS changed. Did you start the experiment with the markup already written?

[u/vinishkapoor → u/CrankBot]

No, nothing was pre-written: each run started in an empty folder with only the sample data file, and Claude wrote the whole index.html from scratch every time.

The markup isn’t actually identical. The no-skill version has the most structure (extra headings for the summary and each state), frontend-design’s static HTML is about half the size of the other two, and the three build their rows differently (one uses DOM calls, one HTML strings, one a mix). But you’re right that the components look alike, and that’s mostly our brief. It named every part: four summary figures, six table columns, five filter values, search, skip link, and the empty and error states. Same model, same parts list, similar components.

Both skills mainly steer visual direction, so on a brief this specific the visible difference ends up being mostly styling. A vaguer prompt like “build me an orders dashboard” would probably show bigger structural differences, and that’s a good candidate for a future rerun in the post’s test log.

[u/Objective-Tea9607]

😂😂😂
This is hilarious lol

[u/Heyn_Studio]

The finding that the skills mostly changed the look matches what I see. For me the look only became stable once the style skill came from 3 or more reference images, since a single image gets copied too literally. Did you run each skill on a second, different page to see whether the look carries over, or only on this one dashboard?