Skill Landingpage Claude Opus

Landing Page Architect

Build high-converting, psychologically-optimized landing pages as single-file, production-ready HTML with embedded CSS and minimal JS. Prioritize conversion rate above aesthetics, clarity above cleverness.

Phase 0 — Gather Context (before writing any code)

Ask the user for the following if not already provided. Collect all answers in one shot; do not ask one question at a time.

If the user says "just build it" or provides a brief, infer reasonable defaults and state assumptions clearly at the top of your response.

Phase 1 — Strategy Brief (output before writing code)

Before the first line of HTML, output a compact brief:

STRATEGY BRIEF
──────────────
Audience      : [who they are + core pain]
Promise       : [headline value proposition in one sentence]
Primary CTA   : [exact button label + action]
Urgency lever : [real scarcity or manufactured? which type?]
Proof type    : [testimonials / numbers / logos / case study]
Tone          : [e.g. authoritative, empathetic, urgent, playful]
Design anchor : [color palette seed + font pairing decision]

Phase 2 — Page Architecture

Build sections in this exact order. Never skip sections; collapse into minimal variants if content is unavailable.

1. HERO

• Headline: Outcome-focused, ≤ 10 words. Speak the transformation, not the tool. Use the user's own language.
• Subheadline: One sentence expanding the promise. Address the primary pain.
• Primary CTA button: High-contrast, action verb + benefit (e.g. "Start My Free Trial", "Get Instant Access").
• Trust micro-copy directly below CTA: e.g. "No credit card required · Cancel anytime · 2,400+ customers"
• Hero visual: Describe what image/illustration to use; output a placeholder <div> with alt text and aspect-ratio if no image URL is provided.

2. PROBLEM AWARENESS

• 3 short paragraphs or a 3-column icon grid.
• Mirror the user's internal monologue. Use "You know that feeling when…" structure.
• End with a pivot sentence: "There's a better way."

3. SOLUTION BRIDGE

• One-paragraph narrative: product as the bridge from pain → outcome.
• Avoid feature lists here; focus on the transformation.

4. BENEFITS (Outcome-focused)

• 4–6 bullets. Format: Bold outcome — supporting detail sentence.
• Lead with the most emotionally resonant benefit.
• No feature names; translate every feature into a user result.

5. SOCIAL PROOF — Block A

• 3 testimonials minimum. Each must contain:
  • Verbatim quote (or placeholder in [BRACKETS])
  • Name, title, company (real or placeholder)
  • Star rating (⭐⭐⭐⭐⭐ or SVG stars)
  • Optional avatar placeholder
• Position immediately after benefits to validate the promise just made.

6. HOW IT WORKS

• Exactly 3 steps. Numbered. Icon + title + one-sentence description.
• Use active verbs: "Connect", "Configure", "Launch" — not "Step 1: …"
• Optional: animated progress indicator (CSS-only).

7. OFFER DETAILS / VALUE STACK

• List everything included. Use ✓ checkmarks.
• Show total perceived value with strikethrough prices if applicable: ~~R$1.200~~ Incluído gratuitamente
• Anchor the price visually against the value stack.

8. SOCIAL PROOF — Block B (near CTA)

• 1 featured case study or standout metric: "We increased conversions by 312% in 30 days" — [Name, Company]
• Or a logo strip if B2B: "Trusted by teams at [Logo] [Logo] [Logo]"

9. OBJECTION HANDLING / FAQ

• 5–7 questions. Use <details><summary> accordion pattern.
• Answer the real objection, not the surface question.
• Final FAQ entry must be a risk-reversal guarantee.

10. GUARANTEE BLOCK

• Prominent badge or callout box.
• Specific: "30-day money-back guarantee, no questions asked."
• Include a trust badge icon (SVG inline).

11. FINAL CTA SECTION

• Restate the core promise in 1 sentence.
• Repeat the primary CTA button (identical label, same style).
• Add urgency trigger: countdown timer (JS) or scarcity copy.
• Repeat trust micro-copy from hero.

Phase 3 — Behavioral Psychology Checklist

Apply every trigger. Mark each as implemented in a comment block at end of file.

Phase 4 — UX & Design System Rules

Typography

• Display font: distinctive, character-rich (e.g. Fraunces, Instrument Serif, Syne, Familjen Grotesk). Never Inter, Roboto, or Arial.
• Body font: high-readability companion (e.g. DM Sans, Plus Jakarta Sans, Outfit).
• Scale: --text-xs 12px → --text-6xl 72px (8-step scale, 1.25 ratio).
• Line height: 1.15 for headlines, 1.65 for body.

Color System (CSS custom properties)

:root {
  --color-brand:   /* primary — high saturation */;
  --color-accent:  /* CTA — maximum contrast against brand */;
  --color-bg:      /* page background */;
  --color-surface: /* card / section background */;
  --color-text:    /* body text — min 4.5:1 contrast ratio */;
  --color-muted:   /* secondary text */;
  --color-border:  /* subtle dividers */;
}

Spacing Scale

Use --space-{n} tokens: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128px.

CTA Button Standards

• Background: var(--color-accent)
• Padding: 16px 40px desktop, 14px 28px mobile
• Border-radius: 8px (rounded but not pill unless brand demands it)
• Font-weight: 700
• Text-transform: none (sentence case converts better than ALL CAPS)
• Hover: brightness(1.1) + translateY(-2px) + box-shadow
• Transition: all 0.2s ease
• Min tap target: 44×44px

Layout

• Mobile-first. Breakpoints: 375px → 768px → 1280px.
• Max content width: 1100px, centered with margin: 0 auto.
• Section vertical padding: clamp(64px, 10vw, 128px).
• No horizontal scrolling on any viewport.

Phase 5 — Performance Requirements

• Zero external CSS frameworks (no Bootstrap, no Tailwind CDN bloat).
• Inline all critical CSS in <style> inside <head>.
• Defer all non-critical JS with defer or type="module".
• Use loading="lazy" on all images below the fold.
• Use <picture> + webp with jpg fallback for hero images.
• Font loading: font-display: swap; load max 2 font families.
• No jQuery. Vanilla JS only.
• Cumulative Layout Shift (CLS) < 0.1: set explicit width and height on all media elements.

Phase 6 — Analytics & Tracking Template

Insert the following placeholder blocks in the correct positions:

<!-- HEAD: Google Tag Manager -->
<!-- Replace GTM-XXXXXXX with real container ID -->
<script>(function(w,d,s,l,i){...})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>

<!-- HEAD: Meta Pixel -->
<script>!function(f,b,e,v,n,t,s){...}('YOUR_PIXEL_ID');</script>

<!-- BODY open: GTM noscript fallback -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"...></iframe></noscript>

<!-- FORM: conversion event on submit -->
<script>
  document.getElementById('lead-form').addEventListener('submit', () => {
    gtag('event', 'generate_lead', { event_category: 'form' });
    fbq('track', 'Lead');
  });
</script>

Phase 7 — Form Engineering

• Minimum fields: name + email only (default). Add phone only if explicitly required.
• autocomplete attributes on every input.
• Real-time inline validation (no alert boxes).
• Submit button: show spinner on click, disable to prevent double-submit.
• Success state: replace form with confirmation message inline (no redirect unless required).
• Error state: field-level error copy in red below the input.
• Submission target: use fetch() POST to action URL or webhook.

<form id="lead-form" novalidate>
  <input type="text"  name="name"  autocomplete="given-name"  required>
  <input type="email" name="email" autocomplete="email"        required>
  <button type="submit" id="cta-submit">
    <span class="btn-label">Get Instant Access</span>
    <span class="btn-spinner" aria-hidden="true" hidden>⟳</span>
  </button>
  <p class="form-microcopy">🔒 Your data is safe. We never spam.</p>
</form>

Phase 8 — Sticky CTA Bar (optional, recommended for long pages)

<div id="sticky-cta" class="sticky-bar" aria-label="Call to action bar">
  <p class="sticky-bar__copy"><!-- restate core benefit in 6 words --></p>
  <a href="#lead-form" class="btn btn--accent">Get Started Now</a>
</div>

Show after 600px scroll. Hide when primary hero CTA is visible (use IntersectionObserver). CSS position: fixed; bottom: 0; width: 100%.

Phase 9 — Countdown Timer (urgency)

function startCountdown(targetDate) {
  const el = document.getElementById('countdown');
  const tick = () => {
    const diff = targetDate - Date.now();
    if (diff <= 0) { el.textContent = 'Offer expired'; return; }
    const h = Math.floor(diff / 3.6e6);
    const m = Math.floor((diff % 3.6e6) / 60000);
    const s = Math.floor((diff % 60000) / 1000);
    el.textContent = `${h}h ${m}m ${s}s remaining`;
    setTimeout(tick, 1000);
  };
  tick();
}
// Usage: startCountdown(new Date('2025-12-31T23:59:59'));

If no real deadline exists, use a session-based timer (expires when tab closes). Never fake a permanent countdown that resets — it destroys trust.

Phase 10 — SEO Baseline

<title>[Primary Keyword] — [Benefit Statement] | [Brand]</title>
<meta name="description" content="[130–160 chars: who it's for + core benefit + CTA]">
<link rel="canonical" href="https://yourdomain.com/landing-page-slug">
<meta property="og:title"       content="...">
<meta property="og:description" content="...">
<meta property="og:image"       content="https://...1200x630.jpg">
<meta property="og:type"        content="website">
<script type="application/ld+json">
  { "@context": "https://schema.org", "@type": "Product", ... }
</script>

Output Format

Deliver the final result in this order:

1. Strategy Brief (plain text block, see Phase 1)
2. Complete single-file HTML — all CSS in <style>, all JS in <script defer> before </body>, no external dependencies except Google Fonts @import.
3. CRO Notes — 3–5 bullet points of specific optimizations applied and why.
4. A/B Test Suggestions — 2–3 hypotheses to test (headline variants, CTA copy, hero image).

Quality Gate

Before returning output, verify:

• One and only one primary CTA per above-the-fold viewport
• No navigation links (they leak conversions)
• CTA button appears in Hero, after Benefits, after FAQ, and in Final section
• All images have alt text and width/height attributes
• Color contrast ≥ 4.5:1 for body text, ≥ 3:1 for large text
• Page renders correctly at 375px, 768px, and 1280px
• Zero console.error from inline JS
• <html lang="pt-BR"> (or correct locale) is set
• Behavioral psychology checklist comment block present at end of file