---
name: landing-page-designer
description: Senior landing page designer specializing in high-converting pages for SaaS, apps, and services. Use when building landing pages, hero sections, pricing pages, or any conversion-focused marketing page. Always researches current best practices via Perplexity before designing. Includes AI slop detection and cleaning.
---

# Landing Page Senior Designer Skill

## Overview

This skill transforms you into a senior landing page designer who combines conversion psychology, current industry research, and proven patterns to create high-converting landing pages.

**Two Critical Rules**:
1. ALWAYS research current best practices using Perplexity MCP before designing
2. ALWAYS run output through the AI Slop Detector before delivery

---

## AI SLOP DETECTOR & CLEANER

### What is AI Slop?

AI slop is generic, interchangeable content that signals "a robot wrote this" to visitors. It kills conversion because it feels hollow, untrustworthy, and forgettable.

### COPY SLOP: Banned Phrases

**NEVER use these words/phrases in landing page copy:**

#### Tier 1: Instant Delete (Always AI-sounding)
```
revolutionize / revolutionary
cutting-edge / state-of-the-art / next-generation
seamless / frictionless / streamlined
leverage / harness / utilize
unlock / unleash / tap into
empower / enable
game-changing / paradigm shift / disruptive
unprecedented / unparalleled / unmatched
holistic approach / end-to-end platform
scalable solutions
```

#### Tier 2: Red Flags (Replace with specifics)
```
innovative solutions / powerful solutions
tailored to your needs / customized solutions
drive growth / maximize efficiency / boost productivity
at the forefront of / at the heart of
in today's fast-paced world / digital landscape
navigate the complexities
transform your business
delve into / explore the possibilities
supercharge your workflow
robust platform
```

#### Tier 3: Structural AI Tells (Pattern problems)
```
- "In today's [adjective] world/landscape, businesses must..."
- Three identical paragraph lengths in a row
- "Moreover," "Furthermore," "Additionally" every few sentences
- Vague claims with no numbers or specifics
- Copy that works for ANY product (logo-swap test fails)
```

### COPY SLOP CLEANER: Replacement Strategy

When you catch slop, apply this transformation:

| AI Slop | Clean Replacement |
|---------|-------------------|
| "Revolutionize your workflow" | "Cut reporting time from 2 hours to 10 minutes" |
| "Cutting-edge platform" | "Built on [specific tech] with [specific capability]" |
| "Seamless integration" | "Connects to Slack in 2 clicks. No code." |
| "Leverage AI to unlock insights" | "See which deals will close this quarter" |
| "Empower your team" | "Your team ships 3x faster" |
| "Scalable solution" | "Handles 10 users or 10,000. Same price." |
| "In today's fast-paced world" | [DELETE ENTIRELY - start with the point] |
| "Innovative approach" | [Show, don't tell - describe what's different] |

**The Fix Formula:**
```
SLOP: [Abstract verb] + [Buzzword noun]
CLEAN: [Specific number] + [Concrete outcome] + [Timeframe or context]
```

### DESIGN SLOP: Patterns to Avoid

#### Visual Red Flags
```
❌ Abstract dashboards floating in space
❌ 3D blobs/orbs with random charts
❌ Faceless "productivity" scenes with laptops
❌ Flat SaaS characters with round heads, pastel limbs
❌ Vector people high-fiving or launching rockets
❌ Blue-purple / pink-purple / cyan-indigo gradients everywhere
❌ Full-bleed gradient backgrounds with white cards
❌ Three identical feature cards with generic icons
❌ Perfectly symmetrical, emotionally cold layouts
❌ Stock photography that could be any company
```

#### The "Logo Swap Test"
Ask: "Could I swap in any other SaaS logo and this page still makes sense?"
- If YES → You have design slop. Add specificity.
- If NO → You have a distinct page. Ship it.

### DESIGN SLOP CLEANER: Replacement Strategy

| Design Slop | Clean Replacement |
|-------------|-------------------|
| Floating dashboard mockup | Real product UI, one focused screen |
| Generic illustration characters | Your actual users/team photos, or no illustrations |
| Blue-purple gradient hero | Solid brand color + subtle texture/noise |
| Three identical feature cards | Information hierarchy with varied layouts |
| Stock "team collaboration" photo | Real screenshot of the thing working |
| Perfect 8px spacing everywhere | Intentional asymmetry, bold section intros |
| Default Inter/Outfit/DM Sans | One distinctive display font choice |
| Generic icon set | Custom icons or text-only (icons that mean nothing = slop) |

### AI SLOP AUDIT CHECKLIST

Before delivering ANY landing page, run this audit:

**Copy Audit:**
- [ ] Zero Tier 1 banned phrases
- [ ] All Tier 2 phrases replaced with specifics
- [ ] No structural AI tells (cookie-cutter intros, uniform paragraphs)
- [ ] Every claim has a number, example, or proof point
- [ ] Passes the "logo swap test" - copy is specific to THIS product
- [ ] Voice matches brand (not "polite robot at networking event")

**Design Audit:**
- [ ] Hero shows real product or real outcome (not abstract)
- [ ] No generic SaaS illustration characters
- [ ] Gradients are subtle accents, not the whole identity
- [ ] Layout has personality (not template-interchangeable)
- [ ] Typography has one distinctive choice
- [ ] Social proof uses real photos/names

**The Ultimate Test:**
Read the page aloud. Does it sound like a human who's genuinely excited about THIS specific product? Or does it sound like a press release from any company?

---

## Research-First Workflow

### Step 1: Discovery Questions

Before starting any landing page, gather these essentials:

1. **Product Type**: SaaS / Mobile App / Service / Physical Product / Agency
2. **Target Audience**: Who is the ideal customer? What's their pain?
3. **Value Proposition**: What's the ONE thing that makes this unique?
4. **Primary CTA**: What action should visitors take?
5. **Trust Signals**: What proof exists? (Users, revenue, testimonials)
6. **Brand Voice**: Casual/playful? Professional? Opinionated? Technical?

### Step 2: Research via Perplexity

**MANDATORY**: Use `mcp__perplexity__search` or `mcp__perplexity__reason` to research:

```
Query Template:
"Best practices for [PRODUCT_TYPE] landing page conversion 2024-2025.
Hero section patterns, social proof placement, pricing layouts,
and CTA strategies with highest conversion for [TARGET_AUDIENCE]."
```

Additional queries:
- "[PRODUCT_TYPE] landing page examples high conversion"
- "[COMPETITOR] landing page teardown"
- "Above the fold best practices [INDUSTRY]"

### Step 3: Apply Research + Run Slop Detector

After research:
1. Map findings to specific sections
2. Write copy with specificity (numbers, outcomes, timeframes)
3. Run the AI Slop Audit before showing anything
4. Explain WHY each element is included

---

## Conversion Psychology Framework

### AIDA Model
```
HERO SECTION          → Attention (5 seconds to hook)
PROBLEM/SOLUTION      → Interest (they feel understood)
BENEFITS/FEATURES     → Desire (they want the outcome)
SOCIAL PROOF          → Trust (others succeeded)
CTA SECTIONS          → Action (clear next step)
```

### PAS Framework (Problem → Agitate → Solution)
1. **Problem**: State their pain clearly
2. **Agitate**: Amplify consequences of not solving
3. **Solution**: Present your product as the answer

### Key Conversion Principles
1. **One Page, One Goal**: Every element drives toward primary CTA
2. **F-Pattern Reading**: Critical info top-left, CTA in natural eye flow
3. **Visual Hierarchy**: Size and contrast guide attention
4. **Cognitive Load**: Simple beats clever. Reduce decisions.
5. **Social Proof Proximity**: Place near CTAs to reduce friction

---

## Landing Page Section Templates

### 1. Hero Section (Above the Fold)

**Goal**: Hook in 5 seconds. Value prop + primary CTA.

```typescript
interface HeroProps {
  headline: string           // Specific benefit, 6-10 words
  subheadline: string        // Who it's for + what they get
  primaryCTA: string         // Action verb + outcome
  secondaryCTA?: string      // Lower commitment option
  socialProof?: string       // Specific number: "10,847 teams"
  heroVisual: 'product-screenshot' | 'demo-video' | 'result-visual'
}

export function Hero({ headline, subheadline, primaryCTA, secondaryCTA, socialProof }: HeroProps) {
  return (
    <section className="min-h-[90vh] flex items-center">
      <div className="container mx-auto px-4 grid lg:grid-cols-2 gap-12 items-center">
        <div className="max-w-xl">
          {/* Headline - NO SLOP */}
          <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight">
            {headline}
          </h1>

          {/* Subheadline - Specific audience + outcome */}
          <p className="mt-6 text-xl text-gray-600 leading-relaxed">
            {subheadline}
          </p>

          {/* CTA Group */}
          <div className="mt-10 flex flex-col sm:flex-row gap-4">
            <button className="px-8 py-4 bg-brand-600 text-white font-semibold rounded-lg hover:bg-brand-700 transition-colors text-lg">
              {primaryCTA}
            </button>
            {secondaryCTA && (
              <button className="px-8 py-4 border-2 border-gray-300 font-semibold rounded-lg hover:border-gray-400 transition-colors text-lg">
                {secondaryCTA}
              </button>
            )}
          </div>

          {/* Social Proof - SPECIFIC numbers */}
          {socialProof && (
            <p className="mt-6 text-sm text-gray-500">
              {socialProof}
            </p>
          )}
        </div>

        {/* Visual - REAL product, not abstract */}
        <div className="relative">
          {/* Product screenshot with subtle shadow, not floating 3D mockup */}
        </div>
      </div>
    </section>
  )
}
```

**Headline Formulas (Slop-Free):**
```
❌ "Revolutionize Your Workflow"
✅ "Close Deals 40% Faster"

❌ "The Cutting-Edge Platform for Modern Teams"
✅ "Notion + Slack + Docs in One Tab"

❌ "Unlock Your Business Potential"
✅ "Find Your Next 10 Customers This Week"

❌ "Seamless Integration for Growth"
✅ "Connects to Stripe in 2 Minutes. No Code."
```

### 2. Logo Bar (Social Proof)

```typescript
export function LogoBar({ logos, metric }: {
  logos: { name: string; src: string }[]
  metric?: string  // "Trusted by 2,847 companies" - SPECIFIC number
}) {
  return (
    <section className="py-12 border-y border-gray-100">
      <div className="container mx-auto px-4">
        {metric && (
          <p className="text-center text-sm text-gray-500 mb-8">{metric}</p>
        )}
        <div className="flex flex-wrap justify-center items-center gap-8 md:gap-12">
          {logos.map((logo) => (
            <img
              key={logo.name}
              src={logo.src}
              alt={logo.name}
              className="h-8 opacity-70 grayscale hover:opacity-100 hover:grayscale-0 transition-all"
            />
          ))}
        </div>
      </div>
    </section>
  )
}
```

### 3. Problem Section

**Goal**: Make visitors feel understood. Be specific about THEIR pain.

```typescript
// ❌ SLOP VERSION:
// "In today's fast-paced business environment, teams struggle with inefficiencies"

// ✅ CLEAN VERSION:
// "Your team wastes 6 hours/week switching between 12 different tools"

export function ProblemSection({ problems }: {
  problems: { stat: string; pain: string; consequence: string }[]
}) {
  return (
    <section className="py-24 bg-gray-900 text-white">
      <div className="container mx-auto px-4">
        <h2 className="text-3xl md:text-4xl font-bold text-center">
          Sound familiar?
        </h2>

        <div className="mt-16 grid md:grid-cols-3 gap-8">
          {problems.map((problem, i) => (
            <div key={i} className="text-center">
              <div className="text-4xl font-bold text-red-400">
                {problem.stat}
              </div>
              <h3 className="mt-4 text-xl font-semibold">{problem.pain}</h3>
              <p className="mt-2 text-gray-400">{problem.consequence}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}
```

### 4. Benefits Section (Not Features)

```typescript
// ❌ Feature (boring): "Real-time collaboration"
// ✅ Benefit (compelling): "See your teammate's cursor. Ship together, not separately."

export function BenefitsSection({ benefits }: {
  benefits: {
    before: string      // The old way (pain)
    after: string       // The new way (outcome)
    proof: string       // Specific result
    visual: string      // Real screenshot
  }[]
}) {
  return (
    <section className="py-24">
      <div className="container mx-auto px-4">
        <div className="space-y-24">
          {benefits.map((benefit, i) => (
            <div key={i} className="grid lg:grid-cols-2 gap-12 items-center">
              <div className={i % 2 === 1 ? 'lg:order-2' : ''}>
                <div className="text-sm font-medium text-gray-500 uppercase tracking-wide">
                  Before: {benefit.before}
                </div>
                <h3 className="mt-2 text-2xl font-bold">
                  Now: {benefit.after}
                </h3>
                <p className="mt-4 text-lg text-gray-600">
                  {benefit.proof}
                </p>
              </div>
              <div className={i % 2 === 1 ? 'lg:order-1' : ''}>
                <img src={benefit.visual} alt="" className="rounded-xl shadow-lg" />
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}
```

### 5. Testimonials (Specific, Not Generic)

```typescript
// ❌ SLOP: "Great product! Really helped our team."
// ✅ CLEAN: "We closed $847K in Q3 directly from leads Acme surfaced. ROI was 47x."

interface Testimonial {
  quote: string         // Specific outcome with numbers
  metric?: string       // "47x ROI" / "+340% leads"
  author: string
  role: string
  company: string
  avatar: string        // REAL photo, not stock
}

export function TestimonialsSection({ testimonials }: { testimonials: Testimonial[] }) {
  return (
    <section className="py-24 bg-gray-50">
      <div className="container mx-auto px-4">
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {testimonials.map((t, i) => (
            <div key={i} className="bg-white p-8 rounded-xl shadow-sm">
              {t.metric && (
                <div className="text-3xl font-bold text-green-600 mb-4">
                  {t.metric}
                </div>
              )}
              <blockquote className="text-gray-700 leading-relaxed">
                "{t.quote}"
              </blockquote>
              <div className="mt-6 flex items-center gap-4">
                <img src={t.avatar} alt={t.author} className="w-12 h-12 rounded-full" />
                <div>
                  <div className="font-semibold">{t.author}</div>
                  <div className="text-sm text-gray-500">{t.role}, {t.company}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}
```

### 6. Pricing Section

```typescript
interface PricingTier {
  name: string
  price: string
  period: string
  description: string       // WHO this is for, specifically
  features: string[]        // What they GET, not vague capabilities
  cta: string
  highlighted?: boolean
}

export function PricingSection({ tiers }: { tiers: PricingTier[] }) {
  return (
    <section className="py-24">
      <div className="container mx-auto px-4">
        <div className="text-center">
          <h2 className="text-3xl md:text-4xl font-bold">
            Simple pricing. No surprises.
          </h2>
          {/* ❌ SLOP: "Flexible plans tailored to your needs" */}
          {/* ✅ CLEAN: Specific guarantee */}
          <p className="mt-4 text-xl text-gray-600">
            Cancel anytime. No questions asked.
          </p>
        </div>

        <div className="mt-16 grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
          {tiers.map((tier, i) => (
            <div
              key={i}
              className={`bg-white rounded-2xl p-8 ${
                tier.highlighted ? 'ring-2 ring-brand-600 shadow-xl' : 'shadow-sm border'
              }`}
            >
              <h3 className="text-xl font-semibold">{tier.name}</h3>
              <p className="mt-2 text-gray-600">{tier.description}</p>

              <div className="mt-6">
                <span className="text-4xl font-bold">{tier.price}</span>
                <span className="text-gray-500">/{tier.period}</span>
              </div>

              <ul className="mt-8 space-y-3">
                {tier.features.map((feature, j) => (
                  <li key={j} className="flex items-start gap-3">
                    <svg className="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                    </svg>
                    <span>{feature}</span>
                  </li>
                ))}
              </ul>

              <button className={`mt-8 w-full py-3 rounded-lg font-semibold transition-colors ${
                tier.highlighted
                  ? 'bg-brand-600 text-white hover:bg-brand-700'
                  : 'bg-gray-100 text-gray-900 hover:bg-gray-200'
              }`}>
                {tier.cta}
              </button>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}
```

### 7. FAQ Section

```typescript
// FAQ answers should handle REAL objections, not softballs
// ❌ SLOP Q: "What makes your platform unique?"
// ✅ REAL Q: "What if I've already tried 3 other tools and they all failed?"

export function FAQSection({ faqs }: { faqs: { question: string; answer: string }[] }) {
  const [openIndex, setOpenIndex] = useState<number | null>(0)

  return (
    <section className="py-24">
      <div className="container mx-auto px-4 max-w-3xl">
        <h2 className="text-3xl font-bold text-center">
          Questions? Answers.
        </h2>

        <div className="mt-12 space-y-4">
          {faqs.map((faq, i) => (
            <div key={i} className="border rounded-lg overflow-hidden">
              <button
                onClick={() => setOpenIndex(openIndex === i ? null : i)}
                className="w-full px-6 py-4 flex items-center justify-between text-left font-medium"
              >
                {faq.question}
                <ChevronDown className={`w-5 h-5 transition-transform ${openIndex === i ? 'rotate-180' : ''}`} />
              </button>
              {openIndex === i && (
                <div className="px-6 pb-4 text-gray-600">{faq.answer}</div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}
```

### 8. Final CTA Section

```typescript
export function FinalCTA({
  headline,
  subheadline,
  cta,
  guarantee
}: {
  headline: string      // Restate the core promise
  subheadline: string   // Handle final objection
  cta: string          // Same as primary CTA
  guarantee?: string   // Risk reversal
}) {
  return (
    <section className="py-24 bg-brand-600 text-white">
      <div className="container mx-auto px-4 text-center">
        <h2 className="text-3xl md:text-4xl font-bold">{headline}</h2>
        <p className="mt-4 text-xl opacity-90 max-w-2xl mx-auto">{subheadline}</p>

        <button className="mt-10 px-8 py-4 bg-white text-brand-600 font-semibold rounded-lg hover:bg-gray-100 transition-colors text-lg">
          {cta}
        </button>

        {guarantee && (
          <p className="mt-6 text-sm opacity-75">{guarantee}</p>
        )}
      </div>
    </section>
  )
}
```

---

## Industry-Specific Patterns

### SaaS Landing Pages
- Free trial CTA (low friction)
- Real product UI in hero
- Logo bar with recognizable companies
- ROI calculator or savings estimate
- Security badges (SOC 2, GDPR)

### Mobile App Landing Pages
- App store badges prominent
- Phone mockup with real screenshot
- Star rating + review count
- "Featured in" press logos
- QR code for instant download

### Service/Agency Landing Pages
- Case study results with metrics
- Before/after visuals
- Process explanation (how it works)
- Team photos (real people)
- Consultation booking CTA

---

## Conversion Checklist

### Above the Fold
- [ ] Value prop clear in <5 seconds
- [ ] Primary CTA visible without scrolling
- [ ] Visual shows real product/result
- [ ] Social proof present with specific numbers

### Copy (Slop-Free)
- [ ] Zero banned buzzwords
- [ ] Every claim has a number or proof point
- [ ] Passes logo-swap test
- [ ] Sounds like a human, not a press release

### Design (Slop-Free)
- [ ] Real product screenshots, not floating mockups
- [ ] No generic SaaS illustrations
- [ ] One distinctive typography choice
- [ ] Layout has personality

### Trust
- [ ] Testimonials are specific with outcomes
- [ ] Real names, roles, and photos
- [ ] Guarantees/refunds mentioned
- [ ] Easy to find support/contact

---

## When to Use This Skill

Invoke this skill when:
- Building a new landing page from scratch
- Redesigning for better conversion
- Creating hero sections
- Writing landing page copy
- Designing pricing pages
- Need to audit existing page for AI slop

**Remember**:
1. ALWAYS research via Perplexity first
2. ALWAYS run the AI Slop Audit before delivery
3. Specificity beats abstraction every time