A shareable quality gate for AI-built websites

No more AI template trash.

A practical SOP for building landing pages that have a real buyer, real references, a hero-first gate, agent review, visual QA, and verified deployment.

Read the SOPJump to checklist
SOP

The only acceptable build path

01 Briefbuyer / offer / CTA
02 Referencesreal design direction
03 Hero First5-second clarity gate
04 Agent Reviewcopy / design / QA
05 Full Buildresponsive + polished
06 Visual QAmobile / contrast / trust
07 Deploy200 OK or it didn't ship

“A good site is not HTML with gradients. A good site makes the right buyer understand, trust, want, and act.”

The workflow

01

Extract the brief

Define target buyer, pain/desire, offer, CTA, proof, tone, and what it must not look like.

02

Use real references

Pick a named aesthetic: Linear, Stripe, Apple, Vercel, Framer, Sentry, Webflow, or a user-provided URL/screenshot.

03

Hero-first gate

Do not build the full page until the first screen answers what it is, who it is for, why now, why trust, and what to click.

04

Agent / role review

Use copy, design, visual brand, and QA lenses before shipping. If real agents are blocked, simulate the roles and disclose it.

05

Full build standards

Build buyer-specific copy, proof, problem, solution, process, CTA repetition, strong typography, mobile responsiveness, and semantic design tokens.

06

Visual QA

Check mobile, contrast, CTA visibility, spacing, visual coherence, reduced motion, and whether the design matches the reference direction.

Hero gate

The first screen must answer

  • What is this?
  • Who is it for?
  • Why should I care now?
  • Why should I trust it?
  • What do I click?

Stop condition

If the hero is weak, generic, vague, cramped, or could fit any business, stop. Fix the hero before building the rest.

Red flags — stop and fix

Generic AI pageLooks like it came from a template prompt.
Vague CTA“Get Started” without a specific outcome.
No proofNothing creates trust above or below the fold.
No design direction“Modern clean” is not enough.
Hidden mobile CTAMobile nav destroys conversion.
Emoji iconsStructural icons must be SVG/text, not emoji.
Random effectsGradients, blur, shadows with no system.
No QAIf it was not visually checked, it did not ship.

QA standard

Mobile

  • 375px width does not break
  • No horizontal scroll
  • CTA visible and tappable
  • Buttons stack cleanly
  • Hero does not eat the whole page

Accessibility / UX

  • Body text contrast around 4.5:1
  • Touch targets at least 44px
  • Reduced motion supported
  • No layout-shifting focus/hover states
  • No tiny body text

Visual quality

  • One clear visual system
  • No random gradients/effects
  • No inconsistent radii/shadows
  • No cramped headlines
  • Matches selected reference direction

Copy/paste checklist

PREMIUM LANDING PAGE SOP

[ ] Target buyer defined
[ ] Pain/desire defined
[ ] Offer defined
[ ] Primary CTA names the outcome
[ ] Proof/trust signal identified
[ ] Must-not-look-like examples listed
[ ] Named design direction chosen
[ ] Real reference URL/template/screenshot used
[ ] Hero answers: what, who, why now, why trust, what click
[ ] Hero approved before full page build
[ ] Copy reviewed
[ ] Design/frontend reviewed
[ ] Mobile QA done at 375px
[ ] CTA visible on mobile
[ ] Contrast checked
[ ] Reduced motion supported
[ ] No emoji structural icons
[ ] No generic AI SaaS sludge
[ ] Deployed URL verified 200 OK
[ ] Required phrases verified in deployed HTML

Build slower at the start. Ship better at the end.

Use this SOP before any AI-generated page build, redesign, dashboard, or client-facing Vercel artifact.

Use the checklistReview workflow