jmsktm/landing-page-designer

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.

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)

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.

// ❌ 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)

// ❌ 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)

// ❌ 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

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

// 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

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