The Agency Website Pre-Launch Review

By JB (Muke Johnbaptist) · July 2026. Run this after your agency site is built (or before a public relaunch) to audit it as a client-acquisition machine, not just a page. It borrows the format of a visual/UX design review but is scoped to agency and service-business sites: the goal isn't "does it look designed", it's "would a stranger trust this agency enough to book a call in under a minute".

Open your AI agent in the project root, paste the prompt below, and it runs style-guide-fidelity plus universal-design checks, layered with agency-specific ones — value proposition clarity, case-study credibility, trust signals, and conversion-path friction. It writes a Critical / High / Medium report, then fixes what you approve.

Best with a browser (Playwright MCP)

With a browser, the agent evaluates the rendered site — real load time, real contrast, real mobile layout — instead of guessing from source. If your agent doesn't already have browser access, install the Playwright MCP server first; it's what lets the agent open your site, take accessibility snapshots, hover the CTA, submit the contact form, and check mobile at 375px.

# Claude Code
claude mcp add playwright npx @playwright/mcp@latest
 
# VS Code CLI
code --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'

Or add the standard config directly (works for most MCP clients — Cursor, Windsurf, Cline, Goose, Codex, Copilot CLI):

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

If you skip this, the agent falls back to reviewing code only and asks you to paste screenshots — the review still works, just with less first-hand evidence.

The prompt — copy everything below

I need you to perform a senior agency-marketing-site review of my website. This is a
CONVERSION + DESIGN review, not a code-correctness review. An agency site has one job a
portfolio site doesn't: turn a stranger who has 30-60 seconds of attention into a booked
call or a submitted inquiry. Judge the site the way a busy prospective client would —
someone comparing 5-10 agencies in one sitting, skimming fast, and ready to bounce at the
first sign of genericness, friction, or unproven claims.

## HOW TO LOOK AT THE SITE (do this first)

1. Read `design-style-guide.md` in the project root if it exists — the source of truth for
   palette, type scale, spacing, radii, and component specs. If missing, say so.
2. Read `project-description.md` / any brief for who the agency serves and what it sells.
3. Start the site and, if you have the Playwright MCP browser, OPEN every key page below.
   Screenshot each. Exercise states: hover the primary CTA, submit the contact form empty,
   resize to mobile. Judge the RENDERED result, not the JSX.
4. Review at BOTH desktop (1280px) and mobile (375px).
5. Time the load. If the homepage isn't interactive in a couple of seconds, flag Critical.

Cover every distinct page: homepage (hero through footer), services, case studies/work +
one individual case study, about/team, pricing (if shown), contact/booking, blog index.

## THE CHECKLIST

### A. Hero & Value Proposition (highest-weighted)
- Within 5 seconds: who is this agency, who do they serve, what specific outcome? Vague
  copy ("We build digital experiences that drive growth") is Critical — flag any hero line
  that could be pasted onto a competitor's site unchanged.
- ONE dominant visual/message, not a slider of competing animated elements.
- Primary CTA ("Book a call") is the single most prominent element.
- If there's a niche/ICP, is it stated plainly (industry, stage, project type)?

### B. Services Presentation
- Described as client outcomes, not capability lists ("Ship a production MVP in 8 weeks"
  beats "We do full-stack development").
- Scannable: icon / short label / one-line description, not paragraphs.
- Clear next step from each service (case study or CTA).
- Flag services with zero supporting proof — they read as unproven.

### C. Case Studies / Proof of Work
- Shows ACTUAL work — screenshots, product shots, before/after, metrics — not just text. A
  case-study section with no visuals is the most common agency failure; High minimum.
- Each states a concrete outcome (a number, a launch, a client name).
- A path from "see the work" to "see the depth" (a full case-study page).

### D. Social Proof & Trust Signals
- Testimonials include name, role, and company — not anonymous "Great team!".
- Client logos are real, nameable clients.
- Quantifiable proof points (years, projects shipped, team size) near the CTA.

### E. Process / How We Work
- A simple 3-5 step "how it works" lowers perceived risk. Flag as a Recommendation if
  missing; flag as weak if it's a generic "Discover-Design-Develop-Deploy" with no substance.

### F. Team & About
- Real photos and specific roles, not stock photos or "our talented team of experts".
- Explains WHY this agency vs a competitor, not just restating services.

### G. Conversion Paths, CTAs & Contact
- A consistent, unmissable primary CTA repeated at logical points down the page.
- Low-friction booking (widget or short form), not a long qualification form as the ONLY
  option. A contact form that fails silently or has no success state is Critical.
- If pricing isn't shown, at least signal how pricing works so the prospect isn't guessing.

### H. Pricing (if shown)
- Clear on what's included per tier; consistent with the site's positioning.

### I. Interaction states (the eight-state contract)
Every interactive component defines default, hover, focus-visible, active, disabled,
loading, error, success. Audit the contact form and booking widget explicitly.

### J. Visual Hierarchy, Layout & Consistency
- ONE focal point per section; consistent grid, margins, and components across pages; at
  most two font families; same terminology throughout.

### K. Colour, Contrast & Imagery
- ONE accent colour for primary actions; WCAG AA contrast (body ≥4.5:1, large/UI ≥3:1).
- No generic AI-slop gradients or stock-photo clichés (handshake, "team high-fiving").
- Every image sized to prevent layout shift, with meaningful alt text. No broken images or
  lorem ipsum on a "done" page.

### L. Navigation & Footer
- Simple, scannable nav with an active state; a real footer with contact, socials, legal.
- Question, don't silently fix: is the nav the AI-default shape (wordmark-left, 4-5 centred
  links, one button-right, hairline border)? Flag it so the human decides.

### M. Technical Foundations
- Fast load; a custom OG image per key page; no horizontal scroll at 375px; touch targets
  ≥44×44px; `overflow-x: clip` on html and body; grid tracks use `minmax(0,1fr)`.

### N. Content & Copy Integrity (fabrication is Critical — it's a liability)
- Flag any quantitative/factual claim not verifiably supplied by the client: invented
  metrics, unverifiable social proof, fabricated testimonials, logos used without
  permission, guarantees/pricing not specified. Replace each with a visible placeholder
  (— + "metric to confirm") — never swap in a different invented number.

### O. Emotional Tone & Positioning (flag, don't silently fix)
- Could the copy and design be relabelled with any competitor's name with zero changes?
  Genericness is the biggest risk factor for an agency site failing to convert.

## SEVERITY RUBRIC
- Critical — fabricated claims; a contact form that fails silently; horizontal scroll or
  broken mobile layout; body text failing WCAG AA; multi-second time-to-interactive; a core
  flow not keyboard-operable.
- High — vague/generic hero; case studies with no visuals or outcome; anonymous
  testimonials; inconsistent components; missing hover/focus on the CTA or form.
- Medium — alignment drift, spacing rhythm, line length, generic stock imagery, missing
  process section.

## OUTPUT FORMAT
1. Executive Summary — count by severity + a one-paragraph verdict on whether a prospect
   would trust and convert, and how closely it follows `design-style-guide.md`.
2. Per-page findings.
3. Critical / High / Medium sections — each with page/section + file path, the principle
   violated, why it costs a lead, and the concrete fix using the project's design tokens.
4. Recommendations — higher-level moves that raise the conversion ceiling.

Be specific and visual. Every fix must respect existing design tokens and must never
introduce a fabricated claim to replace a flagged one. Write the findings to
`agency-site-review-report.md` at the project root.

After the review

1. Read agency-site-review-report.md carefully.
2. Fix every Critical first — a fabricated claim or a broken contact form costs you leads and credibility every day it's live.
3. Fix High before calling the site launch-ready — these are most directly tied to conversion.
4. Schedule Medium polish for the next pass.
5. Re-run after adding any new case study or major page, and once more before any relaunch or traffic push.

The 30-second agency self-audit

A fast gut-check without running the full prompt:

• Can a stranger tell who you serve and what outcome you deliver within 5 seconds?
• Is there ONE unmissable primary CTA, repeated at logical points down the page?
• Does at least one case study show real screenshots of the actual work?
• Does at least one testimonial include a real name, role, and company?
• Does the contact form actually work, validate, and show a success state?
• Is every quantitative claim something you can back up if a client asks?
• Does the site load fast enough that someone comparing 5 agencies wouldn't bounce?
• Could this site be relabelled with a competitor's logo and pass as theirs?
• Is there a visible next step after every section, or does the page dead-end?

Sites that convert vs. ones that don't