Fix Website

---
name: fix-website
description: Audit an existing website and return a prioritised list of what to change so it stops looking AI-generated. Checks thirty giveaway patterns plus design quality, hierarchy, typography, layout, states and trust surface, then reports each finding with file and line and a specific fix. Use when asked why a site looks AI-made, to review a page before launch, or to check a template or competitor.
---

# Fix a website that looks AI-made

> Reads an existing site, works out what is giving it away, and returns an ordered list of
> things to change with the effort each one costs.
>
> The output is an **improvement plan**, not a rewrite. Find everything first, report it, then
> fix only what is asked for. Auditing and fixing in one pass leaves a half-audited,
> half-fixed page and no record of what was wrong.

---

## 0. What this checks

Two layers, because a page can fail either way and they need different fixes.

| Layer | What it catches | Where it comes from |
|---|---|---|
| **The thirty tells** | Specific giveaway patterns: gradient stripes, sparkle icons, fake testimonials, missing privacy policy | §4 |
| **Design quality** | Weak hierarchy, broken hero, repeated layouts, no states, unreadable CTAs, absent dark mode | §3 |

A site can pass every tell check and still look generated, because it has no hierarchy and
eight identical sections. A site can be beautifully composed and still look generated, because
the testimonials are invented and there is no privacy policy. Check both.

**Verdict.**

| Verdict | Condition |
|---|---|
| **FAIL** | Any Class A tell present, or any Class C requirement missing |
| **OVER BUDGET** | A and C clean, but more than 4 Class B tells, or 2 from one family |
| **NEEDS WORK** | Tells clean, but design-quality findings remain |
| **PASS** | Tells clean, budget respected, no blocking quality findings |

---

## 1. Procedure

### Step 1: scope it

- **A codebase.** Find the route tree: Next (`app/`, `pages/`), Vite or React (`src/routes`,
  `src/pages`), TanStack (`src/routes`), Astro (`src/pages`), plain HTML.
- **A live site.** Fetch the homepage, pricing, one product page and the footer. That covers
  most of it.
- **One page.** Audit that page **and the shared shell it renders inside**. Most tells live in
  the layout, not the page.

State what you scoped. An audit of one route that reports on the whole site is wrong.

### Step 2: mechanical pass

Run §2. Catches roughly eighteen of the thirty with certainty, in seconds. Collect file and
line for every hit. Do not judge yet, just gather.

### Step 3: reading pass

Read the hero, one feature section, the pricing block and the footer in full. Answer §3 and
§4.C. This is where invented testimonials, missing demos, negation copy and unearned bento
grids get caught.

### Step 4: render pass

Some things are only visible rendered: contrast failures, shadows stacking into mud, hover
states on static content, a hero that overflows, a nav that wraps. Screenshot the page, then
the other colour scheme, then mobile width. **If you cannot run the site, say so in the
report** rather than quietly skipping it.

### Step 5: report

Use §6. Order by severity, then by cheapness of fix.

---

## 2. Mechanical pass

Define the helper once, then run the patterns.

```bash
rgw() { rg -n -g '*.{tsx,jsx,ts,js,vue,svelte,astro,html,css,scss,mdx}' "$@" . </dev/null; }
```

**Three things that will bite you if you skip the helper.**

1. **Never put the glob in a plain variable.** `FILES='-g *.{tsx,jsx}'` then `rg $FILES` fails
   under zsh, because the shell brace-expands against the current directory before ripgrep
   sees it, and errors with `no matches found: *.jsx`.
2. **Always pass an explicit path.** With no path and no tty, ripgrep reads **stdin** and hangs
   forever. The helper passes `.` and closes stdin.
3. **Ripgrep is line-based.** Multi-line patterns need `-U`. Only A6 below does.

**If `rg` is missing**, fall back to grep. Note that in some agent runtimes `rg` exists only as
a shell function wrapping a bundled binary, so it works in the agent's shell and vanishes in a
subshell or script. Check with `type rg` first.

```bash
rgw() { grep -rnE --include='*.tsx' --include='*.jsx' --include='*.ts' --include='*.js' \
        --include='*.vue' --include='*.svelte' --include='*.astro' --include='*.html' \
        --include='*.css' --include='*.scss' --include='*.mdx' "$@" . </dev/null; }
```
BSD grep on macOS has no `\d` or `\s`. Use `[0-9]` and `[[:space:]]`, and drop the `-U` pattern
in favour of the hex-code check.

### 2.A Class A patterns

**A1 gradient stripe**
```bash
rgw 'h-\[?[0-9]px\]?.{0,80}bg-gradient|bg-gradient.{0,80}h-\[?[0-9]px|h-0\.5 .{0,60}gradient|h-1 .{0,60}gradient'
```

**A2 sparkle icons**
```bash
rgw -i 'sparkle|wandsparkles|wand-?2|autoawesome|auto_awesome|magicwand|<Stars\b'
rgw '✨|🪄|🌟'
```
False positives are common: `sparkle` matches `sparkler` and `sparkling` in body copy, so a
content-heavy site returns prose, not chrome. Confirm each hit is an **icon import or a
rendered glyph** before reporting it.

**A4 em-dashes**
```bash
rgw '—|–'
```
**The raw count always overstates this one.** Most hits on a real project are code comments
and JSDoc that no user ever sees. Only user-visible strings count: JSX text, rendered string
literals, content files, `alt` and `title`, meta descriptions. Report the visible count, not
the grep count. Then check content sources, since tells arrive via the CMS as often as via
code:
```bash
rg -n -g '*.{md,mdx,json,yaml,yml}' '—' . </dev/null
```

**A5 rainbow**
```bash
rgw 'from-\w+-\d{2,3}.{0,60}via-\w+-\d{2,3}.{0,60}to-\w+-\d{2,3}'
rgw 'linear-gradient\([^)]*,[^)]*,[^)]*,[^)]*\)'
```

**A6 fake terminal.** Needs `-U`, the three dots are almost always on three separate lines.
```bash
rgw '#ff5f56|#febc2e|#27c93f|#ff5f57|#28c840|#febc2f'
rgw -U 'bg-red-\d{3}[\s\S]{0,200}bg-yellow-\d{3}[\s\S]{0,200}bg-green-\d{3}'
```

**A8 purple on black**
```bash
rgw -i '#8b5cf6|#a855f7|#7c3aed|#6d28d9|#9333ea'
rgw '(violet|purple)-(500|600|700)'
```
Then check the page ground is near-black. Both together is the tell. A purple accent on a light
page is not A8, do not report it as one.

**A9 neon glow**
```bash
rgw 'shadow-\[0_0_\d+px|drop-shadow-\[0_0|box-shadow:\s*0\s+0\s+\d+px'
rgw 'text-shadow:[^;]*0\s+0\s+\d+px'
```

**A10 radial orbs**
```bash
rgw 'blur-\[?(6[4-9]|[7-9]\d|\d{3})px|blur-3xl'
rgw 'rounded-full.{0,120}blur-'
```

**A11 emoji chrome**
```bash
rgw '[\x{1F300}-\x{1FAFF}]|[\x{2600}-\x{27BF}]|[\x{1F000}-\x{1F02F}]'
```
Separate product content (a reactions feature) from chrome (an emoji in a heading).

### 2.B Class B patterns

**B3 pure white or black ground**
```bash
rgw '#fff\b|#ffffff|bg-white\b|#000\b|#000000'
```
`bg-white` on a card over an off-white page is fine. As the page ground it is the tell.

**B4 drop shadows.** Count matters more than presence. A handful is a system, forty is a
default.
```bash
rgw -c 'shadow-(sm|md|lg|xl|2xl)\b'
```

**B5 three-column grids**
```bash
rgw 'grid-cols-3|md:grid-cols-3|lg:grid-cols-3|repeat\(3,\s*(1fr|minmax)'
```

**B6 glassmorphism**
```bash
rgw 'backdrop-blur|backdrop-filter'
```

**B7 burned fonts**
```bash
rg -n -g '*.{tsx,jsx,ts,js,css,scss,html,json}' -i 'inter|geist|space.?grotesk|poppins|montserrat|dm.?sans|manrope|satoshi' . </dev/null
```
Expect noise: `inter` matches `interface`, `interval`, `internal`. Confirm against the actual
font declaration (`next/font`, `@font-face`, `font-family`) rather than counting raw hits.

**B9 checkmark bullets**
```bash
rgw -i '<Check\b|CheckIcon|CheckCircle|check-circle|✓|✔|☑'
```

**B11 uniform soft radius**
```bash
rgw -c 'rounded-(lg|xl)\b'
```

**B12 dot grids**
```bash
rgw 'radial-gradient\([^)]*circle[^)]*\)[^;]*background-size|bg-\[radial-gradient|dot-?(grid|pattern)'
```

**B13 animated arrows**
```bash
rgw 'group-hover:translate-x|group-hover:rotate|animate-bounce.{0,80}(Arrow|Chevron)|ArrowRight.{0,120}transition'
```

**B14 hover on everything**
```bash
rgw -c 'transition-all'
rgw -c 'hover:scale-|hover:-translate-y|group-hover:'
```

**B15 pastels**
```bash
rgw '(bg|text|border)-(pink|purple|violet|indigo|sky|teal|emerald|amber|rose)-(50|100|200)\b'
```

### 2.C Class C, the required four

```bash
# C3 / C4 legal pages: the route must EXIST and be LINKED
rg -rln -i 'privacy' app/ src/ pages/ public/ 2>/dev/null
rg -rln -i 'terms|tos\b' app/ src/ pages/ public/ 2>/dev/null
rgw -i 'href=.{0,3}/(privacy|terms)'
```
A route file existing is not enough. It must be linked from the footer **and contain real
content**. Open it. Boilerplate describing data practices the app does not have is its own
finding.

```bash
# C2 loading states
rgw -i 'skeleton|<Suspense|isLoading|isPending|aria-busy'
```
This one inverts: **zero hits across a whole app is the tell.** A handful is not a pass either.
One `isLoading` in an app with thirty fetches means twenty-nine render nothing while waiting.
Compare the count of loading indicators against the count of data fetches.

### 2.D Quality patterns worth grepping

```bash
# Banned scroll listener
rgw "addEventListener\(['\"]scroll"
# h-screen instead of dvh, causes mobile jump
rgw 'h-screen'
# Hand-rolled icon paths
rgw '<path d="M' 
# Eyebrow count, compare against ceil(sections / 3)
rgw -c 'uppercase.{0,40}tracking'
# Filler verbs
rgw -i 'seamless|effortless|unleash|supercharge|elevate your|game.?chang|next.?gen|revolutioni'
# Placeholder people and brands
rgw -i 'john doe|jane doe|acme|lorem ipsum|example\.com'
# Dark mode present at all
rgw -c 'dark:|prefers-color-scheme'
```

---

## 3. Design-quality pass

Grep cannot see these. Read and look. Each is a real finding with a real fix.

**Hierarchy and type**
- Does the page have one clear focal point per screen, or does everything shout equally?
- Is hierarchy built from **weight and colour**, or only from size jumps?
- How many font families are loaded? More than two (three with a mono) is a finding. How many
  are actually *used*? Loaded-but-unused fonts are pure page weight.
- Is emphasis inside headlines done with a different *family*? That is the amateur move, it
  should be italic or weight of the same face.
- Body copy wider than about 65 characters?

**Colour**
- Count the accent colours. More than one is a finding.
- Does the accent stay consistent across every section, or does section seven get a different
  CTA colour?
- Does any section invert the theme mid-page?
- Is there a radius system, or a mix of `rounded-xl`, `rounded-full` and sharp with no rule?
- Pure `#fff` or `#000` as the page ground?

**Hero**
- Does it fit the viewport, or does the CTA sit below the fold?
- Headline over 2 lines, or subtext over 20 words?
- More than 4 text elements? Count the tagline under the CTAs, the trust strip, the pricing
  teaser.
- Top padding over `pt-24`, leaving content floating halfway down?
- Is there a real visual, or text on a gradient?

**Layout**
- Count layout families across all sections. Eight sections sharing two families is a finding.
- Three or more consecutive image-text splits?
- Count eyebrows. Over `ceil(sections / 3)` is a finding, and it is the single most violated
  rule in generated pages.
- Any bento grid with an empty or filler cell, or where every cell holds the same kind of
  content?
- Any list over five items rendered as `divide-y` rows?
- Does the nav fit on one line at 1024px? Is it under 80px tall?

**States and interaction**
- Loading, empty, error, disabled. Which exist? Which are missing?
- Does every CTA pass AA contrast against its own background? Check ghost buttons over images
  specifically.
- Does any CTA label wrap to two lines at desktop?
- Do two CTAs share an intent ("Get in touch" and "Let's talk")?
- Forms: labels above inputs, error below, placeholder not used as label, focus rings visible
  and contrasting?

**Motion**
- For each animation, can you state its purpose in one sentence?
- Is `prefers-reduced-motion` honoured?
- Any `transition-all`? Any hover effect on non-interactive content?
- More than one marquee?

**Images**
- Classify every image: real screenshot, real recording, live component, generated
  illustration, stock photo, div reconstruction, abstract decoration.
- Is there a div-based fake product UI, dashboard or terminal?
- Hand-rolled decorative SVG?
- Does the logo wall use real marks, or styled text wordmarks?

---

## 4. Reading pass, the judgement calls

**A3 fabricated testimonials.** For each quote: does the named person exist? Is the company
real? Is there a link, a handle, a case study? A full name with no trace anywhere is invented.
So is a wall of quotes that all share one sentence rhythm.

**A7 negation copy.** Read every headline and subhead. Flag "it's not X, it's Y", "X but for
Y", "the last X you'll ever need", "X, reimagined", "more than just a X".

**B8 bento earned or not.** Do the cells hold different *kinds* of content, or the same kind at
different sizes? Any filler cell? Do at least two cells carry something other than text?

**B10 pricing tiers.** Do the tiers map to nameable segments? Do the splits reflect real cost
or value boundaries? Does the enterprise contact route go anywhere?

**C1 real product demo.** The important one. If nothing on the page is a real screenshot,
recording or live component, this fails, and it is the most expensive finding available.

**Copy audit.** Re-read every visible string. Flag anything grammatically broken, with unclear
referents, with cute-but-wrong wordplay, or that reads like a model trying to sound thoughtful.
Flag fake-precise numbers (`92%`, `4.1x`) that come from nowhere.

**The operator test.** Find one thing on the page that only a real operator could have written.
A specific number with a date. A named customer. A changelog entry. An admitted limitation. A
monitored support address. **If nothing on the page could only have come from someone who runs
this business, say so plainly.** It is usually the most useful sentence in the whole report.

---

## 5. Severity and ordering

1. **Class C missing.** Costs money and trust immediately. A missing privacy policy and a
   missing product demo are the two most expensive findings available.
2. **Class A present.** Each one individually marks the page as machine-made.
3. **Blocking quality failures.** Hero does not fit, CTA fails contrast, nav wraps, no states.
   These are broken, not merely generic.
4. **Class B over budget.** Cumulative. One is invisible, five is a costume.
5. **Quality polish.** Hierarchy, layout repetition, eyebrow count, type refinement.

Within a tier, order by **cheapness of fix**. Deleting a sparkle icon takes a minute, shooting
a product demo takes a day. Both belong in the report, cheap first, so someone can act today.

---

## 6. Report format

```
AUDIT: <target>
Scope: <routes and files audited>    Render pass: <run | skipped, reason>

VERDICT: FAIL
  Class A     2 / 11 present
  Class C     2 / 4 present
  Class B     6 spent, budget 4     [2 from background-filler family]
  Quality     4 blocking, 6 polish

── FIX FIRST: MISSING REQUIREMENTS ──────────────────────────
C3  No privacy policy                                    ~1 hour
    Footer has Product / Company / Resources, no legal column.
    No route matches /privacy anywhere in app/.
    Fix: real page at /privacy naming the entity, what you collect,
         why, and how to delete it. Link from the global footer.

C1  No real product demo                                 ~half day
    9 homepage images: 4 abstract gradients, 3 icon illustrations,
    2 stock photos. Zero frames of the product.
    hero.tsx:42 is a div reconstruction of the dashboard.
    Fix: one real screenshot in the hero. If pre-launch, say so and
         show a walkthrough recording instead.

── CLASS A PRESENT ──────────────────────────────────────────
A2  Sparkle icons                     3 occurrences      ~5 min
    components/hero.tsx:18            <Sparkles /> beside "AI-powered"
    components/feature-card.tsx:31    <Sparkles /> on the generate button
    app/pricing/page.tsx:76           ✨ in the Pro tier label
    Fix: remove. Name the action: "Generate 12 variants".

A10 Radial glow orbs                  2 occurrences      ~5 min
    components/hero.tsx:12            bg-purple-500/30 blur-[120px]
    components/hero.tsx:14            bg-blue-500/20 blur-3xl
    Fix: delete both. The C1 screenshot goes here instead.

── BLOCKING QUALITY ─────────────────────────────────────────
Hero does not fit the viewport                           ~20 min
    Headline runs 4 lines at 1440px, CTA sits below the fold.
    hero.tsx:28 starts at text-7xl with a 9-word headline.
    Fix: drop to text-5xl lg:text-6xl, or cut the headline to 5 words.

CTA fails contrast                                       ~10 min
    header.tsx:44 bg-white/10 with text-white over a photo, 2.1:1.
    Fix: solid fill or a scrim behind it. AA needs 4.5:1.

── CLASS B OVER BUDGET (6 spent, 4 allowed) ─────────────────
Keep (pick 4):
  B7  typography        Geist as display face             layout.tsx:8
  B5  grid layout       3 equal feature cards             features.tsx:24
  B11 container         rounded-xl on 34 surfaces         (34 hits)
Cut:
  B12 background filler dot grid behind hero              hero.tsx:9
  B15 background filler ← second from same family, automatic fail
  B14 motion            transition-all on 41 elements

  Cheapest cut: B12 and B15 are one line each, and the same family as
  the A10 orbs already being removed.

── POLISH ───────────────────────────────────────────────────
Eyebrow count 7, ceiling is 3 (9 sections)               ~20 min
8 sections use only 2 layout families                    ~2 hours
3 font families loaded, 1 unused                         ~10 min
No dark mode anywhere                                    ~3 hours

── OPERATOR TEST ────────────────────────────────────────────
FAIL. Nothing here could only have been written by someone running
this business. No dates, no named customers, no real numbers, no
changelog, no support address.

── DO THIS IN ORDER ─────────────────────────────────────────
1. Add /privacy and /terms                  1 hr    unblocks buyers
2. Delete sparkles, orbs, dot grid          15 min  6 findings gone
3. Fix the hero scale and the CTA contrast  30 min  page stops looking broken
4. Real screenshot in the hero              half d  biggest single lift
5. Choose 4 Class-B spends, cut the rest    1 hr
6. Polish list above                        ongoing
```

---

## 7. Rules for the auditor

**Report what is there, not what you would have built.** "I would have used a serif" is not a
finding. "Three font families are loaded and one is never used" is.

**Every finding needs a location.** File and line for code, a section name for a live page. A
finding nobody can navigate to is a complaint.

**Every finding needs a fix and an effort estimate.** One sentence, specific, actionable today.

**Count, do not just detect.** `shadow-md` once is a decision. Forty times is a default. The
number is the finding.

**Do not inflate.** If a page is clean, say so and keep the report short. An auditor who always
finds twelve problems is not measuring the page, and the next audit gets ignored.

**Do not fix during the audit.** Report, then fix on request. When asked to fix, work the
ordered list top down and re-run the mechanical pass afterwards to confirm the count moved.

**Separate the tell from the taste.** The thirty are specific. Genuine design problems outside
them go in the quality section, not smuggled in as tells.

**To rebuild rather than repair**, hand off to the `make-website` skill, which carries the full
build order and the same thirty tells.

---

## 8. The thirty, condensed

**Class A, banned (11).** A1 gradient stripe · A2 sparkle icons · A3 fabricated testimonials ·
A4 em-dashes · A5 rainbow colouring · A6 fake terminal window · A7 "it's not X it's Y" ·
A8 purple on black · A9 neon glow · A10 radial glow orbs · A11 emoji chrome.

**Class B, budgeted, 4 max, one per family (15).** B1 harsh gradients · B2 loose side icons ·
B3 pure white · B4 drop shadows everywhere · B5 three feature cards · B6 liquid glass ·
B7 Inter/Geist/Space Grotesk · B8 bento grid · B9 checkmark bullets · B10 three pricing tiers ·
B11 soft corner radius · B12 dot grids · B13 animated arrows · B14 hover on everything ·
B15 pastels.

**Families.** background filler (B1, B3, B12, B15) · container styling (B4, B6, B11) · grid
layout (B5, B8) · motion (B13, B14) · typography (B7) · conversion (B9, B10) · iconography (B2).

**Class C, required (4).** C1 real product demo · C2 loading, empty and error states ·
C3 privacy policy · C4 terms of service.