Website craft: do not ship a site that looks generated

The user, 2026-09-06: "All 30 of these are things that make a website obviously vibecoded, and that cant be the case for these websites."

Two axes, two skills, and they do not overlap:

A site can pass all 20 and still be instantly recognisable as generated. That is what this skill is for.

Run the detector first

node ~/.claude/skills/website-craft/scripts/detect.mjs <dir> [--json] [--only id,id] [--severity high]

It walks the tree, skips node_modules/.next/public, and prints file:line per finding grouped by rule. Exit code 1 when anything HIGH is present, so it gates a deploy.

Three severities, and the third is the honest one:

• HIGH: reads as machine-made on sight. Fix before ship.
• MED: contributes to the look. Fix when touching that surface.
• LOOK: no regex can decide this. Whether a testimonial is real, whether a

demo exists, whether pricing matches what you sell. The detector points at the place; a human decides. It never auto-fails these, because a detector that pretends to judge them is lying and a lying detector gets switched off.

Aggregate rules only fire when they saturate. One bg-white card is a choice; 223 of them is the tell. pure-white, uniform-radius, pastel and em-dash carry thresholds so a single deliberate use is not a finding.

The 30

Numbers are the user's, in his order. "Instead" is the move, not just the ban.

Colour and surface

1. 1Harsh gradients: two saturated stops from different hue families. Instead: single-hue ramp, near-tone shift, or flat fill.
2. 2Lucide icons: the default AI icon set. Instead: a set with a POV (Phosphor, Remix), or draw the handful you need.
3. 3Pure white background: #fff is the default nobody chose. Instead: warm or cool it (#FAFAF8, #FCFCFD) so the page has a temperature.
4. 4Rainbow coloring: 3+ hue families in one element. Instead: one accent, earn the second.
5. 5Drop shadows: generic elevation. Instead: hairline border, background step, or spacing.
6. 6Purple and black (20): the house palette of generated UI. Instead: a palette tied to the actual brand.
7. 7Neon colors (29): saturated cyan/lime/fuchsia. Instead: drop the chroma or change the hue.
8. 8Basic pastel colors (30): -50/-100 on every chip. Instead: tint plus matching darker text, or go solid.

Layout

1. 13 feature cards in a row (6): the canonical AI landing block. Instead: break symmetry with different weights, a list, or prose that earns the space.
2. 2Bento grids (13): mixed-span mosaic for its own sake. Instead: the layout the content asked for.
3. 3Colored left stripe (11): thick accent border down a card edge. Instead: carry the accent in the type.
4. 4Soft corner radius (19): one rounded-xl on everything flattens hierarchy. Instead: vary radius by element weight, or commit to sharp.
5. 5Radial orbs (22): blurred circle behind the hero. Instead: delete it; let layout carry depth.
6. 6Dot grids (23): the default "techy" texture. Instead: flat ground or real material.
7. 7Liquid glass (8): backdrop-blur over translucent fill. Instead: opaque surface with real hierarchy.
8. 8Terminal window (14): traffic-light dots, fake $ prompt. Instead: show the real product.

Type and copy

1. 1Inter / Geist / Space Grotesk (10): the three fonts every generated site ships. Instead: a face with a voice, paired deliberately.
2. 2Em dashes (9): the clearest LLM tell in prose. Instead: two sentences, a colon, or parentheses. (Same rule as the house writing rules.)
3. 3"It's not X, it's Y" (15). Instead: say the thing directly.
4. 4Emojis (7): emoji as iconography reads as placeholder. Instead: real icons, or nothing.
5. 5Sparkle icons (24): the universal "AI" sticker. Instead: if it is AI, say what it does.
6. 6Checkmark bullets (16): green ticks down a feature list. Instead: plain list, or show the feature working.

Motion

1. 1Hover animations (28): every card lifting 2px. Instead: reserve motion for things that actually change.
2. 2Animated arrows (25): chevron sliding on hover. Instead: let the label do the work.

Substance: the ones that are about honesty, not taste

1. 1Fake testimonials (12): invented praise with a stock headshot. Every quote needs a real attributable person or it comes out.
2. 2No real product demos (18): a page asking for trust it has not earned. Ship a video, a screenshot, or an interactive demo.
3. 33 pricing tiers (17): Good/Better/Best with a highlighted middle. Price what you actually sell.
4. 4No TOS (26) / 29. No privacy policy (27): anything taking a signup or an email needs both, as real routes.
5. 5No skeleton loaders (21): a fetch with no skeleton is a white flash. Ship one that matches the real layout.

Next.js App Router: the skeleton belongs in loading.tsx beside page.tsx, not inside the page, and a parent segment's loading.tsx covers its children. The detector walks up the tree and stays quiet when it finds one, so it will NOT flag a page covered only by a distant ancestor. That is correct about the white flash and blind to the thing worth checking next: a skeleton shaped like a different page is its own fault. It makes the layout jump when the real content lands, and for the half second it is up it tells the reader they are somewhere they are not. Look at the skeleton beside the page it stands in for; no rule can do that part.

Design tools wired up

The user asked for these on 2026-09-06. Only one is an MCP; the rest are resources.

Also already available: chrome-devtools MCP (measure the real rendered page), firecrawl (pull a reference site), impeccable (58 complementary detector rules; run it too, it catches easing, contrast and broken-image issues this detector does not).

Order of work

1. 1detect.mjs on the tree. Fix HIGH first, and read the LOOK items yourself.
2. 2npx impeccable detect <dir> for the overlapping craft rules.
3. 3[[web-app-baseline]] for the 20 correctness checks; a browser is required for most of them; a screenshot at 1280px and 390px catches the bulk.
4. 4Screenshot the result and look at it before saying it is done (look at it before shipping, every time).

What this skill will not do

It will not tell you a design is good. It removes the tells that make a design look unauthored; taste is still yours. When the brief calls for one of these deliberately (a terminal window on a developer tool, a glass panel because the brand is glass), the brief wins. Note the exception and move on.