Design QA — Why Your UI Looks Like a Template
A senior designer's visual pass over your UI — the specific reasons it looks unfinished, and the exact values to change.
Free
Works with the AI tools you already use
Claude Code
Cursor
Codex CLI
GitHub Copilot
Gemini CLI+20 moreClaude CodeCursorCodex CLIGitHub CopilotGemini CLI
OpenClaw
Manus
Grok+17 agentsDesign QA — Why Your UI Looks Like a Template
Example session with this skill installed
Design QA this signup page. It works but it looks like every other AI-generated landing page and I can't figure out why.
<section class="py-16 bg-gradient-to-br from-indigo-500 to-purple-600">
<div class="max-w-6xl mx-auto px-4 text-center">
<h1 class="text-5xl font-bold text-white mb-4">Start Building Today</h1>
<p class="text-sm text-indigo-100 mb-6">The all-in-one platform for modern teams to collaborate seamlessly and ship faster than ever before.</p>
<button class="bg-white text-indigo-600 px-6 py-3 rounded-lg font-semibold focus:outline-none">Get Started</button>
</div>
</section>
<section class="py-16">
<div class="max-w-6xl mx-auto px-4 grid grid-cols-3 gap-4 text-center">
<div class="p-4 rounded-lg border"><div class="text-3xl mb-2">🚀</div><h3 class="font-bold mb-2">Fast</h3><p class="text-sm text-gray-500">Lightning fast performance</p></div>
<div class="p-4 rounded-lg border"><div class="text-3xl mb-2">🔒</div><h3 class="font-bold mb-2">Secure</h3><p class="text-sm text-gray-500">Enterprise grade security</p></div>
<div class="p-4 rounded-lg border"><div class="text-3xl mb-2">✨</div><h3 class="font-bold mb-2">Simple</h3><p class="text-sm text-gray-500">Intuitive by design</p></div>
</div>
</section>
- Read your context and instructions
- Compiled the design qa
- Generated the app files
Design QA — Signup page
Reviewed: source (Tailwind) · Context: marketing landing page
If you only do three things
- Kill the indigo→purple gradient. It is the single most recognisable generated-page signature.
- Body copy is
text-sm(14px) across a 1152px container — 160+ characters per line. Settext-lg max-w-[60ch] mx-auto. - Add a focus ring.
focus:outline-nonewith no replacement locks out keyboard users.
Findings
1. Purple-to-blue gradient hero · Choice · Colour
Now: from-indigo-500 to-purple-600
Change to: a flat brand colour, or a single-hue gradient under 15° of hue shift
Why: this exact ramp ships on thousands of generated pages, so it reads as "made in five minutes" before anyone reads a word. Put the visual interest in the typography instead.
2. Line length unreadable · Wrong · Type
Now: text-sm (14px) inside max-w-6xl (1152px) → ~160 characters per line
Change to: text-lg max-w-[60ch] mx-auto → 17px, ~60 characters
Why: comfortable line length is 45–75 characters. At 160 the eye loses its place returning to the next line.
3. No focus indicator · Wrong · States
Now: focus:outline-none
Change to: focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-indigo-500
Why: removing the outline with no replacement makes the page unusable by keyboard. The offset colour matters — a white ring on the gradient needs the offset to stay visible.
4. Three equal feature cards with emoji · Choice · Layout
Now: grid-cols-3 with 🚀 🔒 ✨
Change to: real icons (Lucide, Heroicons) at 20–24px, and vary the card weights — make one card wider, or drop to two cards with more substance
Why: emoji render differently on every platform, carry no brand, and are the clearest signal that no designer touched this. The rigid three-equal-card row is the second clearest.
5. Section padding identical, no rhythm · Wrong · Spacing
Now: both sections py-16 (64px); card gap gap-4 (16px); card padding p-4 (16px)
Change to: hero py-24 md:py-32, features py-20; gap-6 (24px); card padding p-6 (24px)
Why: inner padding (16px) currently equals the gap between cards (16px), so the cards read as one undifferentiated block. Gap between groups should be ≥ 2× gap within a group.
6. Everything centred · Choice · Alignment
Now: text-center on both sections
Change to: keep the hero centred, left-align the feature cards
Why: centred paragraphs are hard to scan because every line starts in a different place. Centring works for a headline and a single CTA, not for body copy in a card.
7. Contrast failure on subhead · Wrong · Colour
Now: text-indigo-100 (#E0E7FF) on indigo-500→purple-600 — ~2.9:1 at the darker end
Change to: text-white/90 → 4.8:1
Why: below the 4.5:1 AA minimum for body text, and it fails harder as the gradient darkens toward the right.
8. Generic CTA · Choice · Copy
Now: "Get Started"
Change to: the actual outcome — "Create your workspace" or "Start free trial"
Why: "Get Started" appears on nearly every generated landing page and tells the visitor nothing about what happens on click.
9. Uniform border radius · Choice · Surface
Now: rounded-lg (8px) on both the button and the cards
Change to: 8px on the button, 12px on the cards
Why: radius should scale with element size. Identical radius on a 44px button and a 200px card is a small tell that adds up with the others.
10. Copy describes features, not outcomes · Choice · Copy
Now: "Lightning fast performance", "Enterprise grade security", "Intuitive by design"
Change to: what the user gets — "Pages load in under 400ms", "SOC 2 Type II, SSO included", "No training required"
Why: adjective-only feature copy is unfalsifiable, so readers skip it.
States check
| State | Present | Note |
|---|---|---|
| Hover | ❌ | No hover on the CTA or the cards |
| Focus visible | ❌ | Explicitly removed |
| Active | ❌ | |
| Disabled | n/a | |
| Long content | ❌ | A 3-word headline and a 2-word one will look very different — no min-h on cards |
Responsive check
| Width | Result |
|---|---|
| 390px | ❌ grid-cols-3 never collapses — three 100px cards. Add grid-cols-1 sm:grid-cols-3. |
| 390px | ❌ text-5xl (48px) headline does not scale. Use text-3xl md:text-5xl. |
| 768px | ⚠ Cards cramped |
| 1280px+ | ✅ |
Contrast failures
| Element | Foreground | Background | Ratio | Required | Nearest passing |
|---|---|---|---|---|---|
| Subhead | #E0E7FF | #9333EA | 2.91:1 | 4.5:1 | #FFFFFF @ 90% → 4.83:1 |
| Card body | #6B7280 | #FFFFFF | 4.83:1 | 4.5:1 | ✅ passes |
Template/AI tells present
- #7 Purple-to-blue gradient → flat colour or single-hue ramp
- #2 Three equal cards → vary count or weight
- #19 Emoji as icons → real icon set
- #1 Centred everything → vary alignment
- #24 "Get Started" → name the outcome
- #23 Feature-not-outcome copy → specifics
- #25 No hover states → add them
Not changed
max-w-6xl mx-auto px-4 is a sound container pattern — keep it, but raise the gutter to px-6 on mobile for a bit more breathing room at 390px.
design-qa-why-your-ui-looks-like-a-templ-app.zip
ZIP · project files
Example file from a real run - the skill writes it into your workspace.
Connects securely to your tools. The creator never sees your data.
About this skill
The problem
Your app works. It also looks like every other generated interface — and you can't say why. You try adding whitespace, you try a different font, and it still reads as unfinished. The gap between "functional" and "designed" is made of about fifteen specific decisions, and nobody tells you which ones.
What it does
- Runs a structured pass over spacing, type, colour, alignment, hierarchy, states and responsive behaviour — in the order that matters, because fixing spacing changes what else you find.
- Returns findings with a current value and a target value. Not "inconsistent spacing" — "card padding 12px, section gap 16px, change to 24px and 48px."
- Separates what's wrong (contrast failures, missing focus states) from what's a choice you might make differently, so you know what's optional.
- Checks the states everyone skips: hover, focus, disabled, loading, empty, error, and what happens with a 60-character name.
- Names the specific template and AI tells present — the purple-to-blue gradient, the three equal feature cards, the identical border radius on every element — and gives the replacement for each.
Why this beats prompting it yourself
Ask an AI to review your design and you get generic advice you already knew. This runs a fixed checklist with real numbers behind it: a 4px spacing scale, a 1.25 type ratio, WCAG contrast minimums, and a 30-item list of the patterns that make an interface read as generated. The output is ranked by visual impact and capped at 15 findings, so it's a task list rather than an essay.
Use cases
- Before a demo, a launch, or showing work to a client
- When a stakeholder says "it looks off" and can't explain why
- Auditing a build that came out of an AI coding tool
- Checking a component library implementation against its design
Known limitations
Screenshot-only reviews estimate measurements rather than measuring them — source code gives far better results. It reviews; it doesn't redesign.
How to install
Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.
- 1
Download the ZIP
Free skills download straight away. Paid skills unlock right after purchase.
- 2
Unzip into your skills folder
Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.
- 3
Ask your agent to use it
Restart the agent if it was already running. It picks the skill up automatically - no config needed.
Skills folder by agent
Click the path to copy it. Create the folder if it does not exist yet.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill passes our trust checks below.
Security scanned
Passed our 8-point scan before listing
1 install
Downloaded by developers to date
Free forever
No account required to browse
Trust & safety
Security scanned
Verified clean 7 days ago
- Free to download with an account