Create high-converting, visually distinctive landing pages. Use when building marketing pages, product launches, SaaS homepages, or any single-page conversion-focused website. Guides section-by-section composition with anti-AI-slop principles.
Create high-converting, visually distinctive landing pages. Use when building marketing pages, product launches, SaaS homepages, or any single-page conversion-focused website. Guides section-by-section composition with anti-AI-slop principles.
Landing Page Design
Overview
Build landing pages that convert AND captivate. This skill combines conversion-focused structure with distinctive visual design to create pages that stand out in an AI-saturated world. The goal: pages worth $50-100 that you'd be proud to sell.
MANDATORY: Vibe Discovery (Do This First)
BEFORE writing any code, you MUST run the Vibe Discovery process. This isn't a lookup table - it's a creative prompt that generates a UNIQUE aesthetic direction every time.
The goal: No two landing pages should look alike, even for similar products.
The Vibe Discovery Process
Ask the user these questions, then SYNTHESIZE a unique direction. Don't just map answers to presets.
Step 1: Gather Context (Ask These)
Q1: What's one real-world place or object this brand would be?
Not "what industry" - an actual specific thing. A Tokyo convenience store at 2am. A grandmother's kitchen. A brutalist parking garage. A coral reef. The cockpit of a 747. A flea market in Marrakech. A 1970s recording studio.
Q2: What's the ONE emotion someone should feel in the first 3 seconds?
What's ONE signature motion that defines this page?
Step 3: Write Your Vibe Spec
Before coding, write this out explicitly:
VIBE NAME: [Invent a 2-3 word name]
REFERENCE: [The place/object from Q1]
EMOTION: [From Q2]
COLLISION: [From Q3]
ANTI-PATTERNS: [From Q4]
COLORS:
- Primary: [hex] - [why this color]
- Secondary: [hex] - [why]
- Background: [hex] - [why]
- Accent: [hex] - [why]
- Palette name: [evocative name]
TYPOGRAPHY:
- Display: [specific font name] - [why it fits]
- Body: [specific font name] - [why]
- Character: [describe the voice]
LAYOUT:
- Density: [sparse/balanced/dense]
- Shapes: [sharp/rounded/organic/mixed]
- Signature element: [one unusual layout choice]
MOTION:
- Level: [still/subtle/moderate/dynamic/chaotic]
- Signature animation: [one specific animation that defines this]
WILDCARD:
- One unexpected detail that doesn't "match" but makes it memorable
Step 4: The Freshness Check
Before proceeding, verify:
I did NOT reuse hex codes from my last 3 projects
I did NOT default to my "comfortable" fonts (check: am I using Inter? Nunito? Space Grotesk? If yes, find something else)
The collision from Q3 is actually visible in my choices
Someone could NOT mistake this for my previous landing pages
I included a wildcard that surprises even me
Example Vibe Discovery
Q1 - Place/Object: "A Japanese train station at rush hour"
Q2 - Emotion: "Confident"
Q3 - Collision: "Transit signage + haute couture"
Q4 - Never mistaken for: "A meditation app, anything whimsical, startup-bro tech"
Generated Vibe Spec:
VIBE NAME: Shinjuku Runway
REFERENCE: Japanese train station at rush hour
EMOTION: Confident
COLLISION: Transit signage + haute couture
ANTI-PATTERNS: No soft gradients, no playful illustrations, no rounded friendly shapes
COLORS:
- Primary: #1a1a1a - the black of train doors
- Secondary: #f5f5f0 - platform concrete, worn smooth
- Background: #fafaf8 - fluorescent-lit white
- Accent: #e60012 - JR line red, commanding attention
- Palette name: "Platform Edge"
TYPOGRAPHY:
- Display: Darker Grotesque - confident, slightly condensed, European edge
- Body: Noto Sans JP - clean utility, transit-inspired
- Character: Authoritative but not cold. Clear. Directional.
LAYOUT:
- Density: Rich but organized - like a station map
- Shapes: Sharp with intentional rounded exceptions (like train windows)
- Signature element: Strong horizontal bands that divide sections like train schedules
MOTION:
- Level: Subtle but precise
- Signature animation: Elements slide in from the side like arriving trains - horizontal, smooth, with exact timing
WILDCARD:
- One element uses a fabric-like texture overlay - the haute couture collision
Inspiration Starters (When Stuck on Q1)
Spaces:
Night market in Bangkok | Empty museum at closing | Airport lounge at 4am |
Vintage record store | Hospital waiting room | Casino floor |
Greenhouse in winter | Subway platform | Observatory dome |
Abandoned factory | Luxury yacht interior | 24-hour laundromat |
Library rare books room | Auto body shop | Space station module
Eras/Movements:
Soviet constructivism | Memphis design | Swiss international |
Art nouveau | Bauhaus | De Stijl |
Googie architecture | Streamline moderne | Brutalism |
Japanese metabolism | Scandinavian modernism | Italian futurism
The Anti-Convergence Rules
No hex code memory - Generate colors fresh from the reference, don't recall "my usual blue"
Font rotation required - Cannot use the same display font in consecutive projects
Collision must show - If someone can't see BOTH influences from Q3, push harder
Wildcard is mandatory - Every vibe needs one element that doesn't "fit" but makes it unique
Name it - An unnamed vibe becomes generic. A named vibe has identity.
Quick Context Questions (Minimal Version)
If the user just says "make me a landing page" with no context, ask:
"What's one place or object that captures this brand's energy?"
"What emotion should dominate?"
"What should this NEVER look like?"
Then synthesize a vibe from those three answers.
The 50% Rule
Spend 50% of your time on the hero section. It's the cover image for social media, the first impression, the hook. Everything else flows from getting the hero right.
Section Composition (Top to Bottom)
1. Hero Section (Primary Focus)
The make-or-break element. Must contain:
Headline: Sharp, benefit-driven hook (reference H1 Gallery for inspiration)
Subheadline: Supporting context, 1-2 sentences max
Replace placeholder images with real/quality assets
Optimize animations for performance
Test all interactive elements
Phase 5: Presentation
Create cover screenshot with infinity canvas layout
Show hero prominently
Include mobile and desktop views
Add subtle background (blurred gradient, pattern)
Prompt Patterns
Hero Generation
Create a hero section for [PRODUCT TYPE].
Change text, names, and numbers to fit [BRAND].
Use Iconify Solar icons (duotone style).
Use [FONT] for headlines.
Add vertical container-size grid lines.
Add 01, 02, 03 step indicators for sophistication.
Use [COLOR] as primary, dark mode.
Section Addition
Adapt a new [SECTION TYPE] section.
Match the hero's color scheme and typography.
Use marquee animation for logos.
Add fade-in blur-in entrance animation.
Keep the hero exactly as is.
Animation Enhancement
Add beam animation to the primary button border.
The beam should be 1px, continuously traveling around the pill shape.
Add a subtle hover-lift effect to feature cards.
Negative Prompts (What NOT to change)
Don't change the hero section.
Keep the navbar exactly as is.
Don't modify the existing animations.
