Web design auditor

Web Design Auditor

Compare a built site against the website-analysis that specifies its intended design system, and report where the build is faithful, where it drifted, and what to fix. This is the verification half of the analyze → create → build pipeline.

When to use

• A site has been built (filled from a template, hand-coded, or is a live URL) and you want to know if it actually embodies the analyzed design system.
• You want a feedback step that loops back into the analysis/template.

Inputs

1. The analysis (the contract) — a website-analysis note covering artistic decisions (typography, color, layout, imagery, motion, iconography, naming), philosophical decisions (mission, voice, theory of commerce, posture), and the named "one move." If it includes a "keep vs. fix" / posture section, treat that as authoritative for distinguishing intent from bugs.
2. The build (the subject) — one of: a directory of *.html/template files, a local dev server, or a live URL. If a URL, fetch read-only.

If either input is missing, ask for it before auditing. Never guess the contract.

Procedure

1. Extract the contract from the analysis into a checklist:

   • Palette (intended hexes / count of hues), type system (faces + how they're used), layout grammar(s), voice registers (and where each belongs), naming system, motion budget, iconography/props logic, and the one move.
   • Pull the keep-vs-fix posture: which "mess" is intentional, which is neglect.

2. Observe the build with evidence, not assumption:

   • Read the HTML/CSS (use file tools; for a URL, fetch). Record actual palette hexes, @font-face/linked fonts, layout structure, real copy (for voice), presence/absence of the one-move page or mechanism, and accessibility basics (alt, focus states, heading order, aria-hidden on ornament).
   • Cite the file + line or the rendered string for each observation.

3. Compare per dimension → verdict with evidence:

   • MATCH — build honors the contract.
   • DRIFT — present but off (wrong hue count, an elegant font pairing where a kit-bash was required, a softened voice).
   • MISSING — required element absent.
   • REGRESSION — a genuine defect (broken link, unlabeled image, legal page to nowhere).
   • POSTURE — looks like a defect but the analysis marks it intentional → do not flag as a bug.

4. Judge the one move explicitly. State whether it survived intact, was watered down, or is gone. If gone or diluted, that is the headline finding regardless of other scores.

5. Score and prioritize. Give each dimension 0–5 against the rubric, compute an overall, then emit a punch list ordered by severity (one-move and regressions first; cosmetic drift last). Every item: what, where (evidence), why it diverges, and the minimal fix.

Scoring rubric (per dimension, 0–5)

• 5 indistinguishable from the contract's intent
• 4 faithful, minor cosmetic drift
• 3 recognizable but noticeably off
• 2 present but contradicts the intent
• 1 token gesture only
• 0 absent

Dimensions: Palette · Typography · Layout grammar(s) · Imagery/art direction · Motion · Iconography/props · Naming · Voice registers · The one move (weight ×2) · Accessibility · Posture fidelity (kept intentional quirks, fixed real defects).

Report format

# Design Fidelity Audit — <site> vs <analysis>

## Verdict
<one paragraph: overall fidelity + the single most important finding>

## The one move
STATUS: intact | diluted | missing
<evidence + impact>

## Scorecard
| Dimension | Score | Verdict | Note |
| --------- | :---: | ------- | ---- |
| ...       | 4/5   | DRIFT   | ...  |
Overall: <n>/<max>

## Punch list (ordered by severity)
1. [REGRESSION] <what> — <file:line / evidence> — fix: <minimal change>
2. [MISSING]    ...
3. [DRIFT]      ...

## Correctly intentional (do NOT change)
- <posture items the build rightly preserved>

Rules

• Evidence over opinion. Every verdict cites a hex, a filename+line, or a rendered string. State what you inspected and what you couldn't (e.g. "cannot verify pixel rendering without a browser").
• Honor posture. Quirks the analysis marks intentional are not bugs. Flagging them is itself an error.
• The one move is load-bearing. Weight it double; lead with it if it's compromised.
• Be specific in fixes. "Use a kit-bash of the five named faces" not "improve typography."
• Don't rebuild. This skill reports; it does not edit the site unless the user asks.

Reference

See reference.md for a worked checklist derived from the re-animators.net analysis and a filled example scorecard.