# 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 Vibe Discovery Mandate

**BEFORE any code, you MUST:**
1. Ask the 4 context questions
2. Synthesize a unique aesthetic direction
3. Write out a Vibe Spec
4. Pass the Freshness Check

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

## Key Patterns

### 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.

### 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:**
- [ ] Clear value prop above fold
- [ ] Primary CTA visible
- [ ] Social proof present
- [ ] 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. **Start with Vibe Discovery** - Ask the 4 questions
2. **Create Vibe Spec** - Write it out before any code
3. **Pass Freshness Check** - Verify uniqueness
4. **Build hero first** - 50% of effort here
5. **Add sections incrementally** - One at a time
6. **Polish and validate** - Run through all checklists