🎨

Design Skill Shootout

Three design skills, one real site. Enter hub password to continue.

That's not right. Try again.

🎨 Skill Comparison

Three Design Skills, One Site

Compiled July 9, 2026 · impeccable vs ui-ux-pro-max vs design-sync, each run faithfully on restormedicalspa.com

← Back to Hub

📌

What we tested and why

Setup

You wanted the skill that can read a real website's design, layout, and animation and turn it into a reusable profile you can apply elsewhere. Three candidates were in the running, so we ran all three on the same live site, restormedicalspa.com (a Colorado medical spa), each in its own isolated agent, each grounded in an actual capture of the page so nothing was invented.

The short answer: they are not three flavors of the same tool. One genuinely critiques the pixels, one matches a category template, and one does not read URLs at all. Here is how they actually behaved.

📊

Head-to-head capability matrix

Scorecard

Capability	impeccable	ui-ux-pro-max	design-sync
Reads the actual live site	Yes	No*	No
Critiques the real pixels	Yes	No	No
Heuristic scoring (Nielsen 10)	Yes, 28/40	No	No
Contrast / WCAG math	Yes	No	No
Persona stress-tests	Yes	No	No
Extracts palette + fonts	Yes	Generic**	No
Builds a reusable design profile	Partial	Template	Yes***
Applies a system to other sites	No	No	Yes

* ui-ux-pro-max classifies from keywords you type, not from the page. ** It recommends a category template, not the site's real colors. *** design-sync syncs a component library you already built; it never ingests a URL.

🏆

impeccable — the clear winner

1st

impeccable was the only one that looked at the real page and told the truth about it. It scored the site 28/40 on Nielsen's 10 heuristics ("Good, bottom edge"), ran an AI-slop detector (verdict: not AI-generated, a genuinely tasteful identity), did contrast math, and stress-tested the page against three personas (a first-timer, a distracted mobile user, a skeptic).

How it works: it is a router skill with ~30 sub-commands (audit, critique, polish, colorize, typeset, optimize, distill...). It picks a "register" first (design-IS-the-product vs design-SERVES-the-product) and correctly landed on the brand register for a medspa marketing page. It hands back priority-ranked issues, each mapped to a follow-up fix command.

Honest weakness

It is built for a local codebase with a PRODUCT.md. Pointed at a bare external URL it runs in a self-declared "degraded" mode: its deterministic markup scanner can't run, and it can't build you a portable, reusable design profile. It critiques beautifully; it does not extract-and-repackage.

📋

ui-ux-pro-max — a template, not a critique

2nd

This one is a local lookup engine: it searches flat data files (161 palettes, 57 font pairings, 161 product types) and assembles a best-practice bundle for whatever category you name. It never fetched the page, never read the CSS, never saw a screenshot.

The tell: it classified the site as a "Beauty/Spa/Wellness Service" and recommended a generic hot-pink #EC4899 palette with Lora + Playfair fonts. But the real Restor site runs a far more upscale system: a high-contrast Didot serif paired with Gill Sans, in muted taupe (#84764f) and navy (#112337) with blush used sparingly on white. The skill described the label, not the site.

Where it shines

As a generative starting point for a brand-new build (tokens, font pairings, a checklist, anti-patterns), it is fast and concrete. As a review of an existing site, it is blind to the actual design.

🔌

design-sync — a different category entirely

3rd

design-sync does not read URLs at all. It is a bridge between a local component library and a claude.ai/design system project, moving components and tokens one at a time through a permission gate. Point it at a website and it has nothing to consume.

Its real job is the step after extraction: once you have built components worth reusing, design-sync makes them portable and canonical so other projects can inherit them. It is a library-distribution tool, not a design-extraction tool, so it never competed with the other two on this task. That is not a failure; it is just answering a different question.

🔍

Bonus: what impeccable actually found on the site

Real intel

Since impeccable did the real work, here is the useful residue, a genuine audit of a live medspa site (relevant to Vitalency competitive intel):

Zero <h1>, thirty-nine <h2>. No document title landmark, and it forfeits the strongest on-page SEO signal for a competitive local term.
2.37 MB of CSS across 30 stylesheets (834 media blocks, mostly unused Elementor scaffolding). Punishing on mobile load and LCP.
Contrast on the edge. Brand taupe #84764f on white computes to ~4.48:1 (borderline); dusty-rose #dc7474 as text fails at ~3.1:1.
A 6-tab "aging" selector with no default, labeled by clinical taxonomy. Over the 4-choice working-memory rule, and a first-timer can't tell which tab is theirs.
Duplicated promo blocks and a reused hero image that read as page-builder filler.
The good: a genuinely classy Didot + Gill Sans identity and a well-placed "5280 Readers' Choice 2026" trust badge. Not AI-slop, real taste dragged down by template bloat.

High-leverage fixes it recommends: /impeccable typeset (heading hierarchy), /impeccable optimize (the CSS payload), /impeccable distill (deduplicate).

🔭

Round two: challengers for the extraction job

Complete

impeccable won round one, but it only critiques; it does not extract a site into a portable, reusable profile. So we found challengers, security-reviewed them, installed the safe ones, and ran them on the same Restor site to test that missing capability. Results:

Challenger	Reads live URL	What it produced
ui-cloner 🏆	Yes	The richest reusable profile: real hex, Didot + Gill Sans with the 130px scale, radii/shadows, a full 16-block layout skeleton, and the animation library stack (jQuery/Swiper/Elementor). Most build-ready of all.
dembrandt	Yes	The best pure-token extractor: one command gives a real DESIGN.md + JSON with WCAG, motion, and breakpoints. Security-clean. Caveats: over-promotes neutrals (crowned gray as "primary," demoted the taupe) and its framework detector false-positived Radix/Foundation on what is plainly WordPress + Elementor. Trust its tokens, not its role labels.
taste-skill	Yes	The only tool that outputs design RATIONALE (the why + trade-offs), and it got the taupe-as-CTA-accent hierarchy right where dembrandt missed it. Needs a browser; tokens are hand-derived, not exhaustive. Best for design judgment to feed an AI builder.
extract-design-system	Yes	One command, URL to tokens. Its raw layer nailed Didot + Gill Sans + blush, but its final tokens.json is lossy: it dumps a single mislabeled gray as "primary," drops Gill Sans and blush, and never saw the taupe or navy. Superseded by dembrandt.
ux-ui-agent-skills	No	Can't read a live URL by design. It's a 241-file authoring + lint kit that audits your own local HTML. Produced a real WCAG audit only after we manually saved the page and installed Playwright.
uxaudit	Skipped	Closest audit rival, but installing it auto-fires a bash-only hook every session (300MB download) that won't run natively on Windows. Held by choice.

The clean conclusion: critique vs extraction

impeccable owns the critique job (scores, personas, fixes). Extraction, the thing you originally wanted, is best served by a trio, not one winner: dembrandt for the exhaustive token layer, taste-skill for the design rationale (the why), and ui-cloner for the full structural clone (layout skeleton + animation stack). They stack, they don't compete.

Honest caveat on ui-cloner: it captured the animation library stack and keyframe names, but exact runtime reveal timing needs a real interactive browser (its intended claude --chrome mode), not the headless pass we ran.

For the full landscape of every cloning tool (Claude skills, AI design-to-code, and full-site mirror tools), see the companion map: How to Clone a Website: The Complete Toolkit Map.

Compiled July 9, 2026 · Private · ← Hub