# Landing Page Design Skill

Build landing pages that compete with Linear, Vercel, and Stripe — not generic template sites. The bar is **A+ from the first build**, not "good enough to ship."

---

## Quality Standard: A+ or Don't Ship

> ⚠️ **The output should look like it was designed by a senior designer and built by a senior developer.** If it looks like "AI made this," it's not done.

### Internal Iteration (CRITICAL)

**"A+ from the first prompt" does NOT mean one iteration internally.**

Before presenting anything to the user:
1. Build the section
2. Screenshot it / evaluate it honestly
3. Ask: "Would this fit on Godly.website?"
4. If NO → iterate, improve, rebuild
5. Repeat until the answer is YES
6. THEN present to the user

**Never ship B-grade work and ask "is this okay?"** The user should only see your best work, not your first draft. Iterate internally as many times as needed. The user doesn't need to see your process — they need to see A+ results.

### What A+ Looks Like

| Element | ❌ B-Grade (AI Slop) | ✅ A+ Grade |
|---------|---------------------|-------------|
| **Hero imagery** | Placeholder icons, mockup dashboards | Real product screenshots, custom photography |
| **Avatars/photos** | Colored circles, generic stock | Real photos with depth, or high-quality stylized illustrations |
| **Social proof** | "500+ users", fake testimonials | Specific numbers, real names, real companies, linked sources |
| **Icons** | Lucide/Heroicons defaults | Custom icon set, or curated icons that match brand personality |
| **Typography** | Inter everywhere | Intentional font pairing — display font for headlines, readable sans for body |
| **Color depth** | Flat backgrounds | Subtle gradients, noise textures, layered shadows, glass effects |
| **Animation** | Basic fade-in | Scroll-triggered reveals, parallax, micro-interactions on hover, staggered timing |
| **Illustrations** | None, or generic | Custom illustrations, 3D elements, or high-quality photography |
| **Feature sections** | Icon + title + paragraph | Visual demonstrations, product screenshots, interactive elements |
| **Overall feel** | "Template site" | "Someone designed this with intention" |

### The Linear/Vercel Test

Before considering a landing page done, ask:

1. **Would this fit on Godly.website?** If not, it needs more work.
2. **Does it have a signature moment?** One thing that makes someone say "that's cool."
3. **Is every placeholder gone?** No colored circles, no "Lorem ipsum", no fake company names.
4. **Does it feel alive?** Motion, depth, interactivity — not a static poster.
5. **Would the founder be proud to share this?** Not "it's fine," but actually proud.

---

## Imagery Requirements (Non-Negotiable)

### Real Product Imagery

**The product screenshot is the most important visual on the page.**

- If the product exists: Use actual screenshots, styled with shadows and device frames
- If the product is in development: Create high-fidelity mockups that show real UI patterns
- If it's a pre-launch: Show wireframes or prototypes, but style them beautifully

**Never:** Fake dashboards with placeholder data that look nothing like the actual product.

### Photography

For human elements (testimonials, team, users):

- **Best:** Real photos of actual users/team members
- **Good:** High-quality stock that feels authentic (Unsplash, not generic corporate stock)
- **Acceptable for MVP:** Stylized illustrations or avatars (but make them distinctive, not colored circles)

### Custom Visuals

Every A+ landing page has at least one of:

- Custom illustrations (hero graphic, section dividers, empty states)
- 3D elements (product mockups, abstract shapes, icons)
- Motion graphics (animated hero, logo animations, scroll effects)
- High-quality photography (product shots, lifestyle imagery)

**Source options:**
- Unsplash/Pexels for photography
- unDraw, Storyset for illustrations (customize colors)
- Spline, Vectary for 3D
- Midjourney/DALL-E for custom imagery (then refine)

---

## Visual Depth (The "Craft" Layer)

Flat designs look like templates. Add depth through:

### Shadows and Elevation

```css
/* Don't: Single flat shadow */
box-shadow: 0 4px 6px rgba(0,0,0,0.1);

/* Do: Layered, realistic shadows */
box-shadow: 
  0 1px 2px rgba(0,0,0,0.05),
  0 4px 6px rgba(0,0,0,0.05),
  0 12px 24px rgba(0,0,0,0.1);
```

### Gradients and Texture

- Subtle radial gradients in backgrounds (not harsh linear gradients)
- Noise/grain overlay (2-5% opacity) for tactile feel
- Glassmorphism for floating cards (blur + transparency)

### Borders and Separators

- Subtle borders (1px, low opacity) create definition
- Gradient borders for accent elements
- Dividers with purpose, not just horizontal lines

---

## Animation Standards

### Hierarchy of Animation Quality

1. **Basic (B grade):** Fade-in on scroll
2. **Good (A grade):** Staggered fade-in with blur, parallax backgrounds
3. **Excellent (A+ grade):** Scroll-linked animations, 3D transforms, interactive hover states, micro-interactions

### Required Animations (minimum)

- **Hero:** Staggered entrance (badge → headline → subtext → CTA)
- **Cards/features:** Reveal on scroll with stagger
- **Buttons:** Hover state that feels responsive (scale, glow, color shift)
- **Navigation:** Smooth scroll, maybe sticky with background blur

### Signature Animations (pick at least one)

- Beam border (light tracing button outline)
- Marquee logos (smooth infinite scroll)
- Parallax depth (elements at different scroll speeds)
- Interactive 3D (hover-responsive rotation)
- Typewriter/counter effects
- Cursor-following elements

---

## Social Proof Standards

### Testimonials

**Fake testimonials are obvious and damage trust.**

| ❌ Fake-looking | ✅ Authentic |
|-----------------|-------------|
| "Great product!" — John D. | Specific outcome with context |
| Colored circle avatar | Real photo or stylized illustration with personality |
| Generic title | Real company name, linked if possible |
| One-liner | 2-3 sentences with a specific story |

**Template for authentic testimonial:**
> "[Specific outcome]. [Context of their situation]. [Emotional hook]."
> — **Full Name**, Role at **Real Company** (with link)

### Stats and Numbers

- Use real numbers, not round estimates
- "2,847 teams" > "2000+ teams"
- Show growth: "Used by 500 teams → 2,847 in 6 months"
- Link to source if claiming industry stats

### Logos

- **Use Iconify for company logos** → https://icon-sets.iconify.design/?category=Logos
- NEVER just write company names as text — always use actual logo SVGs
- Get permission or use companies that publicly use your product
- Style consistently (monochrome, sized equally)
- Animated marquee > static grid

**Logo implementation:**
```tsx
// Install: npm install @iconify/react
import { Icon } from '@iconify/react';

// Usage
<Icon icon="logos:notion-icon" className="h-8 w-auto" />
<Icon icon="logos:figma" className="h-8 w-auto" />
<Icon icon="logos:stripe" className="h-8 w-auto" />
```

---

## Workflow Overview

Follow these phases in order. Do not skip to full-page generation.

1. **Gather visual references** (most important)
2. **Build the hero section first** (spend ~50% of effort here)
3. **Lock in typography, icons, and visual details**
4. **Add animations and micro-interactions**
5. **Iterate via conversational prompts**
6. **Extend with feature sections**
7. **Add real imagery and polish**
8. **Quality check against A+ standards**
9. **Handle responsive design**
10. **Create social media assets**

---

## Phase 1: Gather Visual References

> ⚠️ **THIS IS THE MOST IMPORTANT PHASE.** Do not rush through this. Your design output is only as good as your reference quality. Solid references = solid design. Weak references = generic AI slop.

Before writing any code or prompts, collect screenshot references from curated design galleries. Screenshots are more effective than text descriptions because they capture fonts, colors, layout, icons, and structure all at once.

### ❌ DO NOT Just Screenshot Homepages

**Wrong approach:**
- Go to a gallery site
- Screenshot the first landing page you see
- Move on

**Right approach:**
- Browse THROUGH each site that catches your eye
- Look at their inner pages, feature sections, pricing layouts, testimonials
- Find specific elements that match YOUR product's needs
- Screenshot those specific sections/patterns

### Reference Sources

**Primary galleries (curated landing pages):**

| Source | URL | Best for |
|--------|-----|----------|
| Godly | https://godly.website/ | Premium, award-winning designs |
| Land-book | https://land-book.com/ | High-quality landing page gallery |
| Lapa Ninja | https://www.lapa.ninja/ | Curated landing pages by category |
| SiteInspire | https://www.siteinspire.com/ | Diverse styles and industries |
| Httpster | https://httpster.net/ | Trendy, modern designs |
| Supercreative 1000 | https://supercreative.design/1000-inspiring-websites | Massive curated collection |

**Best-in-class references to study:**

| Site | Why it's A+ |
|------|-------------|
| linear.app | Dark theme perfection, product-led, sophisticated animation |
| vercel.com | Clean typography, real product integration, signature visual style |
| stripe.com | Depth, polish, custom illustrations, interactive demos |
| notion.so | Approachable, playful while professional, real product shots |
| arc.net | Bold, distinctive, memorable hero |
| raycast.com | Dark theme, feature-rich, great motion design |

**Section-specific inspiration:**

| Source | URL | Best for |
|--------|-----|----------|
| Supahero | supahero.io | Hero section inspiration |
| Bento Grids | bentogrids.com | Card and feature layout patterns |
| CTA Gallery | cta.gallery | Call-to-action section ideas |
| Mobbin | mobbin.com | Real-world site sections |

### Reference Quality Checklist

Before moving to Phase 2, verify:

- [ ] You have 5-10 references from A+ sites (not B-grade templates)
- [ ] References match the product's industry/tone
- [ ] You have hero-specific references
- [ ] You have section-specific references (features, testimonials, CTA)
- [ ] You've identified one "signature moment" to adapt

**If your references are B-grade, your output will be B-grade. Stop and find better references.**

---

## Phase 2: Hero Section First

**Rule: Never start by generating a full landing page.** Build the hero section in isolation first.

**Why this matters:**
- The hero is the most important section
- It becomes the social media cover, the first impression
- Iterating on a hero is fast; iterating on a full page is slow
- Once the hero is locked in, it sets the visual language for everything else

**Hero requirements:**
- Headline that makes you stop scrolling
- Subheadline that explains value in one sentence
- Primary CTA that's impossible to miss
- Visual that demonstrates the product or creates emotion
- Trust signal (logos, stats, or social proof teaser)

---

## Phase 3: Typography, Icons, and Details

### Typography

**Font pairing is mandatory.** Using one font everywhere = template look.

| Use Case | Recommendation |
|----------|---------------|
| Headlines | Display or serif font with personality (DM Serif Display, Fraunces, Cabinet Grotesk) |
| Body | Clean sans-serif (Inter, Geist, Space Grotesk) |
| Accent | Mono for code/technical, or a distinctive display font for callouts |

### Icons

**Don't use default Lucide/Heroicons if you want to stand out.**

Alternatives:
- Phosphor Icons (flexible weights)
- Iconoir (clean European style)
- Solar Icons (modern, distinctive)
- Custom icons (even simple ones make a difference)

### Anti-Slop Details

These small things separate A+ from B:

- Numbered steps with zero-padding (01, 02, 03)
- Subtle grid/measurement lines as design elements
- Custom cursor interactions
- Micro-copy with personality
- Loading states and transitions
- Empty state design
- Hover effects on everything interactive

### AI Slop Patterns (NEVER DO THESE)

**Colored icon containers with white icons:**
```
❌ NEVER: Rounded square background + white icon on top
   (e.g., green rounded-xl box with white Users icon)
   
   This screams "AI made this." Linear, Vercel, Factory don't do it.
```

**What to do instead:**
- Icons with subtle color, no container
- Icons that match the text color (gray/muted)
- If you need emphasis: subtle background same hue as icon, very low opacity
- Or just... no icon. Good typography doesn't need icons everywhere.

**Rule: If Linear/Vercel/Factory don't do it, neither should you.**

---

## Phase 4: Animations

Reference the Animation Standards section above. At minimum:

- [ ] Hero has staggered entrance animation
- [ ] Scroll reveals on sections (not just instant appear)
- [ ] Buttons have hover states
- [ ] At least one "signature" animation moment

---

## Phase 5: Iterate and Refine

Use conversational prompts to push quality:

- "This looks too template-y, what would make it more distinctive?"
- "How would Linear's design team approach this section?"
- "What's the one thing that would make someone screenshot this?"

---

## Phase 6: Add Real Imagery

**This is where B-grade becomes A+.**

Before this phase, you might have placeholders. Now replace every single one:

1. **Product screenshots** — Take real screenshots, add device frames, style with shadows
2. **Testimonial photos** — Get real photos or use high-quality alternatives
3. **Illustrations** — Generate or source custom visuals for empty spaces
4. **Photography** — Add contextual imagery that reinforces the story

**No colored circles. No placeholder dashboards. No fake stats.**

---

## Phase 7: Quality Check

Run through this checklist before considering it done:

### Structure
- [ ] Hero makes an immediate impression
- [ ] Clear visual hierarchy throughout
- [ ] Sections flow logically
- [ ] CTAs are prominent and repeated

### Visuals
- [ ] All imagery is real (no placeholders)
- [ ] Color depth exists (gradients, shadows, not flat)
- [ ] Typography is intentionally paired
- [ ] Icons are consistent and on-brand

### Motion
- [ ] Hero has entrance animation
- [ ] Scroll interactions exist
- [ ] Hover states feel responsive
- [ ] No animation is jarring or slow

### Polish
- [ ] Would this fit on Godly.website? 
- [ ] Is there a signature moment?
- [ ] Does it feel alive, not static?
- [ ] Would you be proud to share this?

**If any answer is "no," keep iterating.**

---

## Phase 8: Responsive Design

Check at tablet and mobile breakpoints.

**Primary issues to catch:**
- Horizontal scrolling (most common)
- Text overflow
- Touch targets too small
- Images scaling poorly

---

## Phase 9: Social Media Assets

Turn the finished landing page into promotional graphics. A great landing page should be screenshot-worthy.

---

## Core Principles

1. **A+ is the minimum.** Don't ship B-grade work. Keep iterating until it's genuinely impressive.
2. **Real > Fake.** Real screenshots, real testimonials, real numbers. Placeholders are for prototypes, not production.
3. **Depth > Flat.** Shadows, gradients, motion, texture. Make it feel crafted, not generated.
4. **Build section by section.** Never prompt for a full page in one shot.
5. **References are your foundation.** Weak references = weak output. Study the best, then make it yours.
6. **One signature moment.** Every great landing page has one thing that makes you go "that's cool."
