# Landing Page Design Plugin

## Overview

This plugin provides a comprehensive workflow for creating high-converting, visually distinctive landing pages. It emphasizes the "anti-AI-slop" approach - avoiding the generic patterns that plague AI-generated designs.

## Skills Included

| Skill | Trigger | Purpose |
|-------|---------|---------|
| landing-page-design | "landing page", "marketing page", "product launch page", "SaaS homepage" | Full landing page design workflow with Vibe Discovery |

## Core Philosophy

### The Problem This Solves

AI-generated landing pages tend to converge on the same patterns:
- Purple gradients everywhere
- Inter/Roboto fonts
- Lucide icons
- Generic bento grids
- Same animation patterns

This skill forces UNIQUE design direction for every project through the **Vibe Discovery** process.

### The Discovery Mandate

**BEFORE any code, you MUST run TWO parallel processes:**

**Vibe Discovery (aesthetic):**
1. Ask the 4 context questions
2. Synthesize a unique aesthetic direction
3. Write out a Vibe Spec
4. Pass the Freshness Check

**Copy Strategy (words/conversion):**
1. Discover top 3 buying objections
2. Write headline using Value Prop + Hook formula
3. Pass the litmus test (would someone know what you sell from headline alone?)
4. Define CTA as narrative continuation of headline
5. Write out a Copy Strategy Spec

No shortcuts. No "I'll figure out the style/copy as I go."

## Key Patterns

### The Conversion Equation
`Purchase Rate = Desire - (Labor + Confusion)`. Every copy decision should increase desire or decrease labor/confusion.

### The 50% Rule
Spend half your time on the hero section. It's the social media preview, the first impression, the hook. Everything else flows from the hero.

### Headline Litmus Test
If a visitor sees ONLY the headline and nothing else, will they know exactly what you sell? If not, rewrite it.

### CTA Narrative Rule
CTAs continue the hero's story. "Find food near me" not "Get started." "Start designing" not "Request demo."

### Anti-Convergence Rules
1. **No hex code memory** - Generate colors fresh from reference
2. **Font rotation required** - Can't reuse display fonts across projects
3. **Collision must show** - Both influences from Q3 must be visible
4. **Wildcard is mandatory** - Every vibe needs one "doesn't fit" element
5. **Name it** - Unnamed vibes become generic

### Section Order
1. Hero (primary focus)
2. Features/Benefits
3. Social Proof
4. How It Works
5. Pricing (if applicable)
6. Final CTA
7. Footer

## Anti-AI-Slop Checklist

**Fonts to AVOID:**
- Inter
- Roboto
- Open Sans
- Lato

**Icons to AVOID:**
- Lucide (overused)

**Colors to AVOID:**
- Purple gradients
- The "Stripe palette"
- Generic blue-to-purple

**Use INSTEAD:**
- Fonts: Newsreader, Playfair Display, Clash Display, Outfit, Manrope, Satoshi
- Icons: Iconify Solar, Heroicons, Phosphor
- Colors: Derive from the real-world reference in Q1

## Animation Vocabulary

**Entrance:** fade-in, blur-in, slide-in, scale-in, stagger

**Continuous:** marquee, beam, pulse, float, rotate

**Interactive:** hover-lift, hover-glow, hover-reveal, click-ripple

**Decorative:** grid lines, noodles/curves, gradient orbs, grain texture

## Implementation Phases

1. **Research & Collect** - Gather references, choose fonts/icons/colors
2. **Hero Development** - Build and iterate until distinctive
3. **Section Build-Out** - Add sections one at a time
4. **Polish** - Responsive, performance, accessibility
5. **Presentation** - Cover screenshot with infinity canvas layout

## Quality Gates

Before considering a landing page complete:

**Visual Distinction:**
- [ ] No generic purple gradients
- [ ] Non-default icon set
- [ ] Distinctive font pairing
- [ ] At least one "memorable" element
- [ ] CSS variables for color system

**Technical:**
- [ ] Mobile responsive
- [ ] All images loading
- [ ] Performant animations
- [ ] Accessible contrast
- [ ] Fast initial load

**Conversion:**
- [ ] Headline passes litmus test (someone knows what you sell from headline alone)
- [ ] Primary CTA uses narrative continuation (not "Get Started")
- [ ] Top 3 objections addressed on page
- [ ] Social proof present (or intentionally omitted, never faked)
- [ ] Feature copy ties back to hero value prop
- [ ] Logical hierarchy
- [ ] No friction to action

## Resources

**Inspiration:**
- superhero.design - Hero section gallery
- Dribbble - Search "hero section"
- Awwwards - Award-winning designs
- H1 Gallery - Headline inspiration

**Assets:**
- Google Fonts / Fontshare - Typography
- Iconify - Unified icon API
- Simple Icons - Brand logos

## Development Workflow

When this skill triggers:

1. **Run Vibe Discovery + Copy Strategy in parallel** - Aesthetic questions + objection discovery
2. **Write both specs** - Vibe Spec + Copy Strategy Spec before any code
3. **Pass Freshness Check** - Verify visual uniqueness
4. **Pass Litmus Test** - Verify headline clarity
5. **Build hero first** - 50% of effort here (both design AND copy)
6. **Add sections incrementally** - One at a time, each feature ties to hero value prop
7. **Polish and validate** - Run through all checklists
8. **User test** - 6-question feedback framework with both reviewer types