| name | Build Landing Page |
| slug | build-landing-page |
| description | The ultimate landing page builder. Through a conversational interview, autonomously produces a complete, deployable Next.js landing page with TypeScript, Tailwind CSS, SEO metadata, JSON-LD structured data, and conversion-optimized copy. Consolidates intelligence from landing-page-designer, copywriting, page-cro, form-cro, schema-markup, seo-audit, layout-designer, ab-test-designer, and more. Use when the user says "build a landing page," "create a landing page," "I need a landing page for," or "build me a page for [product]." For optimizing an EXISTING landing page, use landing-page-optimizer or page-cro instead.
|
| category | full-pipeline |
| complexity | advanced |
| version | 1.0.0 |
| author | ID8Labs |
| triggers | ["build landing page","build a landing page","create landing page","create a landing page","build me a page","landing page for","new landing page","make a landing page"] |
| tags | ["landing-page","conversion","copywriting","seo","cro","next.js","full-pipeline"] |
| dependencies | ["landing-page-designer","copywriting","page-cro","schema-markup","seo-audit","layout-designer","ab-test-designer"] |
Build Landing Page — The Ultimate Pipeline
Core Workflows
Workflow 1: Primary Action
- Analyze the input and context
- Validate prerequisites are met
- Execute the core operation
- Verify the output meets expectations
- Report results
Overview
This skill transforms you into a full-pipeline landing page builder. Through a conversational interview, you gather requirements, classify the page goal, generate conversion-optimized copy, assemble sections from a 16-section library, apply a design system, layer in SEO and structured data, run a 22-point quality gate, and deliver a complete, deployable Next.js page.
Three Guarantees
- Zero AI Slop — Every word passes the banned phrase detector and Logo Swap Test
- Conversion-Engineered — Section order, copy frameworks, and CTA placement backed by research
- Production-Ready — TypeScript strict, accessible, SEO-complete, Core Web Vitals optimized
The Pipeline
Interview (4 phases, 12 questions)
-> Page Goal Classification (6 archetypes)
-> Copy Engine (framework selection + voice modulation)
-> Section Selection + Ordering (from 16-section library)
-> Design Token Resolution (Factory-Inspired default or custom)
-> Component Generation (Next.js + Tailwind + TypeScript)
-> SEO + Schema Layer (metadata, JSON-LD, OpenGraph)
-> Quality Gate (22 checks across 4 categories)
-> Delivery + A/B Test Suggestions
When to Use This Skill vs. Others
| Situation | Use This Skill | Use Instead |
|---|
| Build a landing page from scratch | YES | - |
| Optimize an existing page's conversion | No | page-cro |
| Rewrite just the copy on a page | No | copywriting |
| Add schema markup to existing page | No | schema-markup |
| Full technical SEO audit | No | seo-audit |
| Design a layout without copy/SEO | No | layout-designer |
| Build a full web app, not a landing page | No | nextjs-project-manager |
AI SLOP DETECTOR
What is AI Slop?
AI slop is generic, interchangeable content that signals "a robot wrote this." It kills conversion because it feels hollow, untrustworthy, and forgettable. Every piece of output from this pipeline must pass through this detector.
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
| 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
NEVER: Abstract dashboards floating in space
NEVER: 3D blobs/orbs with random charts
NEVER: Faceless "productivity" scenes with laptops
NEVER: Flat SaaS characters with round heads, pastel limbs
NEVER: Vector people high-fiving or launching rockets
NEVER: Blue-purple / pink-purple / cyan-indigo gradients everywhere
NEVER: Full-bleed gradient backgrounds with white cards
NEVER: Three identical feature cards with generic icons
NEVER: Perfectly symmetrical, emotionally cold layouts
NEVER: Stock photography that could be any company
The Logo Swap Test
Ask: "Could I swap in any other company logo and this page still makes sense?"
- If YES: You have design slop. Add specificity.
- If NO: You have a distinct page. Ship it.
CONVERSATIONAL INTERVIEW PROTOCOL
CRITICAL: Do NOT hand the user a form with brackets. Interview conversationally using AskUserQuestion for structured choices and natural follow-ups for open-ended fields.
Phase 1: Product & Audience (Questions 1-4)
Q1: Product Type
Use AskUserQuestion:
question: "What type of product or service is this landing page for?"
header: "Product"
options:
- label: "SaaS / Web App"
description: "Software as a service, web-based tool or platform"
- label: "Mobile App"
description: "iOS, Android, or cross-platform mobile application"
- label: "Service / Agency"
description: "Professional service, consulting, or agency offering"
- label: "Physical Product"
description: "E-commerce, DTC, or physical goods"
Q2: Product Name & One-Liner
Natural follow-up: "What's the product called, and can you describe it in one sentence? Think: what does it DO for people?"
Q3: Target Audience
Natural follow-up: "Who is your ideal customer? What role are they in, and what problem keeps them up at night?"
Q4: Differentiation
Natural follow-up: "What makes this different from alternatives? If a customer asked 'why you and not [competitor]?' what would you say?"
Phase 2: Goals & Proof (Questions 5-8)
Q5: Primary CTA
Use AskUserQuestion:
question: "What's the ONE action you want visitors to take?"
header: "Goal"
options:
- label: "Start Free Trial"
description: "Self-serve signup with free tier or trial period"
- label: "Request Demo"
description: "Book a call or demo with your team"
- label: "Join Waitlist"
description: "Collect emails for upcoming launch"
- label: "Purchase / Download"
description: "Direct purchase, download, or app install"
Q6: Trust Signals
Natural follow-up: "What proof do you have? Users, revenue, testimonials, logos, press mentions? Specific numbers are gold — even rough ones."
Q7: Stage & Urgency
Use AskUserQuestion:
question: "What stage is the product in?"
header: "Stage"
options:
- label: "Pre-launch"
description: "Building, collecting waitlist signups"
- label: "Early"
description: "Launched, < 100 users, finding PMF"
- label: "Growing"
description: "100+ users, product-market fit, scaling"
- label: "Established"
description: "1000+ users, proven product, expanding"
Q8: Existing Assets
Natural follow-up: "Do you have any existing copy, screenshots, testimonials, or brand guidelines I should work from?"
Phase 3: Brand & Design (Questions 9-11)
Q9: Brand Voice
Use AskUserQuestion:
question: "How should this page sound?"
header: "Voice"
options:
- label: "Casual & Bold"
description: "Confident, direct, maybe a bit irreverent"
- label: "Professional & Clear"
description: "Trustworthy, straightforward, no fluff"
- label: "Technical & Precise"
description: "Data-driven, detail-oriented, credibility-first"
- label: "Warm & Approachable"
description: "Friendly, human, empathetic"
Q10: Design Preference
Use AskUserQuestion:
question: "Which design direction fits your brand?"
header: "Design"
options:
- label: "Factory-Inspired (Recommended)"
description: "Near-black + near-white, orange accents, Geist font, no shadows/gradients"
- label: "Light & Clean"
description: "White backgrounds, soft grays, subtle colors, airy spacing"
- label: "Bold & Colorful"
description: "Strong brand colors, high contrast, energetic feel"
- label: "Custom"
description: "I'll provide my own brand colors and fonts"
Q11: Custom Brand (conditional — only if Q10 = Custom)
Natural follow-up: "Share your brand colors (hex codes), fonts, and any design constraints."
Phase 4: Content (Question 12)
Q12: Pricing
Use AskUserQuestion:
question: "Should the page include a pricing section?"
header: "Pricing"
options:
- label: "Yes, show pricing"
description: "Display pricing tiers on the page"
- label: "No, too early"
description: "Skip pricing — we're pre-launch or enterprise-only"
- label: "Contact for pricing"
description: "Show a 'Contact Sales' CTA instead of prices"
Smart Defaults Table
If the user says "just build it" or provides minimal info, apply these defaults:
| Field | Default |
|---|
| Product Type | SaaS |
| CTA | Start Free Trial |
| Voice | Professional & Clear |
| Design | Factory-Inspired |
| Pricing | No, too early |
| Stage | Early |
| Sections | Archetype default (see Section Order Algorithm) |
PAGE GOAL CLASSIFICATION ENGINE
Based on interview answers, classify into one of 6 archetypes. Each archetype determines the copy framework, section selection, and section order.
The 6 Archetypes
1. SaaS Trial
Trigger signals: Product Type = SaaS + CTA = Start Free Trial
Copy framework: AIDA
Section count: 10-12
Key sections: Hero (Product Screenshot), Logo Bar, Problem, Solution, Benefits, How It Works, Feature Grid, Testimonials, Pricing, FAQ, Final CTA
Tone emphasis: Clarity, speed-to-value, low friction
2. SaaS Demo
Trigger signals: Product Type = SaaS + CTA = Request Demo
Copy framework: PAS + StoryBrand
Section count: 9-11
Key sections: Hero (Demo CTA), Logo Bar, Problem, Solution, How It Works, Case Study, Testimonials, Comparison, FAQ, Final CTA
Tone emphasis: Authority, trust, enterprise-ready
3. Mobile App
Trigger signals: Product Type = Mobile App
Copy framework: AIDA (compact)
Section count: 8-10
Key sections: Hero (App Screenshot), Logo Bar, Benefits, How It Works, Feature Grid, Testimonials, FAQ, Final CTA (App Store badges)
Tone emphasis: Visual, quick, download-focused
4. Service/Agency
Trigger signals: Product Type = Service/Agency
Copy framework: StoryBrand
Section count: 9-11
Key sections: Hero (Results), Logo Bar, Problem, Solution, How It Works, Case Study, Testimonials, Comparison, Pricing, FAQ, Final CTA
Tone emphasis: Credibility, process, results
5. Waitlist/Launch
Trigger signals: CTA = Join Waitlist OR Stage = Pre-launch
Copy framework: PAS (compact)
Section count: 6-8
Key sections: Hero (Waitlist), Problem, Solution, Benefits, FAQ, Final CTA
Tone emphasis: Excitement, exclusivity, urgency
6. E-commerce
Trigger signals: Product Type = Physical Product + CTA = Purchase
Copy framework: FAB (Features-Advantages-Benefits)
Section count: 8-10
Key sections: Hero (Product Image), Benefits, How It Works, Feature Grid, Testimonials, Comparison, FAQ, Final CTA
Tone emphasis: Tactile, visual, trust
COPY ENGINE
Framework Definitions
AIDA (Attention-Interest-Desire-Action)
Hero -> Attention: Hook in 5 seconds with specific outcome
Problem -> Interest: They feel understood, lean in
Benefits -> Desire: They want the outcome you describe
CTA -> Action: Clear, low-friction next step
PAS (Problem-Agitate-Solution)
Problem -> State their pain clearly and specifically
Agitate -> Amplify consequences of NOT solving
Solution -> Present your product as the answer
StoryBrand
Hero -> Customer is the hero, not your product
Problem -> External, internal, and philosophical problems
Guide -> Your product as the guide (empathy + authority)
Plan -> Simple 3-step plan
CTA -> Direct CTA + transitional CTA
Success -> Paint the success outcome
Failure -> Paint the failure outcome (stakes)
FAB (Features-Advantages-Benefits)
Feature -> What it IS (specs, materials, capabilities)
Advantage -> What it DOES better than alternatives
Benefit -> What it MEANS for the customer's life
15 Headline Formulas (Slop-Free)
Every headline must pass the Logo Swap Test. Use these formulas:
1. [Achieve outcome] without [pain point]
"Close deals 40% faster without hiring another rep"
2. [Achieve outcome] in [timeframe]
"Ship your MVP in 2 weeks, not 2 months"
3. The [opposite of usual] way to [outcome]
"The laziest way to keep your books perfect"
4. Never [unpleasant thing] again
"Never miss a sales opportunity again"
5. [Feature] for [audience] to [use case]
"An online whiteboard for teams to ideate together"
6. [Number] [people] use [product] to [outcome]
"12,847 founders use Acme to track their metrics"
7. Stop [pain]. Start [pleasure].
"Stop guessing. Start knowing."
8. [Question highlighting pain]
"Tired of chasing approvals across 5 different tools?"
9. [Input] -> [Output]
"Turn customer calls into product decisions"
10. [Product] that [key differentiator]
"The CRM that actually predicts which deals close"
11. [Specific benefit] — [Proof point]
"3x faster deploys — used by Stripe and Vercel"
12. Your [thing] is [problem]. Fix it in [time].
"Your onboarding is leaking users. Fix it in a day."
13. What if [desired state]?
"What if every lead got a response in under 60 seconds?"
14. [Audience]: [Imperative action]
"Founders: Stop burning runway on tools that don't talk to each other"
15. [Outcome], not [common approach]
"Real-time insights, not quarterly reports"
Voice Modulation
Based on interview Q9 (Brand Voice), modulate ALL copy through these filters:
| Voice Trait | Casual & Bold | Professional & Clear | Technical & Precise | Warm & Approachable |
|---|
| Contractions | Always (you'll, we're) | Sometimes | Rarely | Always |
| Sentence length | Short. Punchy. | Medium, clear | Longer, structured | Medium, flowing |
| Humor | Yes, irreverent | Subtle at most | No | Gentle, relatable |
| Numbers | Round ("~10K") | Specific ("10,847") | Very specific ("10,847.3") | Rounded ("over 10,000") |
| CTAs | "Let's go" / "Try it" | "Start Free Trial" | "Begin Implementation" | "Get Started Today" |
| Problem framing | "This sucks" | "This is costing you" | "The data shows" | "We've been there" |
| Proof style | Social ("everyone's using it") | Metrics ("47% improvement") | Data ("p < 0.05") | Stories ("Here's Sarah's story") |
| Exclamation marks | Sparingly | Never | Never | Occasionally |
SECTION LIBRARY (16 Sections)
Each section includes: purpose, when to include, copy framework, and component specification.
Section 1: Navigation
Purpose: Global navigation with primary CTA in nav bar.
Include: Always (every archetype).
interface NavProps {
logo: { text: string; href: string }
links: { label: string; href: string }[]
cta: { label: string; href: string }
}
Design rules:
- Sticky on scroll (not fixed from start — reveal on scroll-up)
- CTA button in nav, right-aligned, uses primary accent color
- Mobile: hamburger menu, CTA remains visible
- Max-width container, consistent with page sections
- No dropdown menus on a landing page — keep navigation flat
Section 2: Hero — Product Screenshot Variant
Purpose: Hook in 5 seconds. Value prop + primary CTA + social proof.
Include: SaaS Trial, SaaS Demo, Mobile App (with app mockup)
Copy framework: Headline formula + subheadline + CTA + social proof badge
interface HeroProductProps {
headline: string
subheadline: string
primaryCTA: { label: string; href: string }
secondaryCTA?: { label: string; href: string }
socialProof?: string
productImage: { src: string; alt: string }
}
Layout: Split layout (60% text / 40% image) on desktop, stacked on mobile.
Copy rules: Headline from formula list. Subheadline expands with audience + outcome. Social proof uses exact numbers.
Section 3: Hero — Results Variant
Purpose: Lead with the outcome, not the product.
Include: Service/Agency, E-commerce
interface HeroResultsProps {
headline: string
subheadline: string
primaryCTA: { label: string; href: string }
secondaryCTA?: { label: string; href: string }
metrics: { value: string; label: string }[]
socialProof?: string
}
Layout: Centered text with metric cards below headline.
Section 4: Hero — Waitlist Variant
Purpose: Capture emails with urgency and exclusivity.
Include: Waitlist/Launch
interface HeroWaitlistProps {
headline: string
subheadline: string
waitlistCount?: string
emailPlaceholder: string
ctaLabel: string
}
Layout: Centered, single-column focus. Email input + CTA button inline.
This section requires 'use client' for form handling.
Section 5: Logo Bar
Purpose: Instant social proof. Recognizable names build trust.
Include: SaaS Trial, SaaS Demo, Service/Agency, Mobile App (as "Featured In"), E-commerce
Skip: Waitlist/Launch (unless you have press logos)
interface LogoBarProps {
heading?: string
logos: { name: string; src: string }[]
metric?: string
}
Design rules: Grayscale logos, full color on hover. Single row with wrap. Subtle top/bottom borders.
Section 6: Problem
Purpose: Make visitors feel understood. Be specific about THEIR pain.
Include: SaaS Trial, SaaS Demo, Service/Agency, Waitlist/Launch, E-commerce
Copy framework: PAS (Problem-Agitate-Solution) for the Problem step
interface ProblemProps {
headline: string
problems: {
stat: string
pain: string
consequence: string
}[]
}
Copy rules:
- NEVER start with "In today's fast-paced world..."
- Use second person ("you" / "your team")
- Each problem has a specific stat, pain, and consequence
- Problems should resonate immediately — use customer language
Section 7: Solution
Purpose: Bridge from problem to your product. Transition moment.
Include: SaaS Trial, SaaS Demo, Service/Agency, Waitlist/Launch
interface SolutionProps {
headline: string
description: string
keyPoints: string[]
visual?: { src: string; alt: string }
}
Section 8: Benefits
Purpose: Show outcomes, not features. Before/after transformation.
Include: All archetypes (core section)
interface BenefitItem {
before: string
after: string
proof: string
visual?: { src: string; alt: string }
}
interface BenefitsProps {
headline: string
benefits: BenefitItem[]
}
Layout: Alternating rows (image-text, text-image) for visual rhythm.
Copy rules: Every benefit has a before/after and a proof point with a number.
Section 9: How It Works
Purpose: Reduce perceived complexity. Show the path to value.
Include: SaaS Trial, SaaS Demo, Service/Agency, Mobile App, E-commerce
interface HowItWorksProps {
headline: string
steps: {
number: number
title: string
description: string
}[]
}
Design rules: Numbered steps with connecting line/arrows. Horizontal on desktop, vertical on mobile.
Section 10: Feature Grid
Purpose: Show specific capabilities for visitors who want detail.
Include: SaaS Trial, SaaS Demo, Mobile App, E-commerce
Skip: Waitlist/Launch (too early for feature depth), Service/Agency (use Case Study instead)
interface FeatureGridProps {
headline: string
features: {
title: string
description: string
icon?: string
}[]
}
Copy rules: Each feature title is specific (not "Advanced Analytics" — say "See which deals close this quarter"). Description connects feature to outcome.
Section 11: Testimonials
Purpose: Social proof with specific outcomes. Real people, real results.
Include: SaaS Trial, SaaS Demo, Service/Agency, E-commerce, Mobile App
interface TestimonialItem {
quote: string
metric?: string
author: string
role: string
company: string
avatar?: string
}
interface TestimonialsProps {
headline?: string
testimonials: TestimonialItem[]
}
Copy rules: NEVER use generic testimonials like "Great product!" Every quote must include a specific outcome or number. If the user has no testimonials, skip this section and use Logo Bar or metrics instead.
Section 12: Case Study
Purpose: Deep proof. One customer story with measurable results.
Include: SaaS Demo, Service/Agency
Skip: All others unless user provides case study data
interface CaseStudyProps {
headline: string
company: string
challenge: string
solution: string
results: { metric: string; label: string }[]
quote?: { text: string; author: string; role: string }
logo?: string
}
Section 13: Comparison
Purpose: Address "how is this different?" objection directly.
Include: SaaS Demo, Service/Agency, E-commerce
Optional: SaaS Trial (if competitive landscape is crowded)
interface ComparisonProps {
headline: string
product: string
competitors: string[]
features: {
label: string
product: boolean | string
competitors: (boolean | string)[]
}[]
}
Design rules: Table format on desktop, card-based on mobile. Your product column highlighted.
Section 14: Pricing
Purpose: Make the decision easy. Clear tiers, clear value.
Include: When user said "Yes, show pricing" (Q12)
Skip: Pre-launch, enterprise-only, "Contact for pricing"
interface PricingTier {
name: string
price: string
period: string
description: string
features: string[]
cta: { label: string; href: string }
highlighted?: boolean
}
interface PricingProps {
headline: string
subheadline?: string
tiers: PricingTier[]
billingToggle?: boolean
}
Copy rules:
- Tier descriptions say WHO it's for: "For solo founders just getting started"
- Features list concrete things: "Up to 5 team members" not "Team collaboration"
- Recommended tier uses
highlighted: true
- NEVER use "Contact us for pricing" as a tier — that goes in a separate CTA
Section 15: FAQ
Purpose: Handle objections. Reduce support burden. Boost SEO with FAQPage schema.
Include: All archetypes (critical for SEO and objection handling)
This section requires 'use client' for accordion behavior
interface FAQProps {
headline: string
faqs: { question: string; answer: string }[]
}
Copy rules for FAQ content:
- Questions should be REAL objections, not softballs
- NEVER: "What makes your platform unique?" (softball)
- INSTEAD: "What if I've already tried 3 other tools and they all failed?" (real objection)
- Answers should be direct, specific, and honest
- Include at least one pricing/refund FAQ if relevant
- Include at least one "Is this right for me?" FAQ
FAQ generates FAQPage JSON-LD automatically — see SEO section.
Section 16: Final CTA
Purpose: Last chance to convert. Restate the promise. Handle final objection.
Include: All archetypes
interface FinalCTAProps {
headline: string
subheadline: string
primaryCTA: { label: string; href: string }
guarantee?: string
}
Copy rules: Headline mirrors Hero but from a slightly different angle. If Hero said "Close deals 40% faster," Final CTA says "Start closing more deals today." Always include a guarantee or risk reversal.
Section 17: Footer
Purpose: Legal, navigation, and secondary links.
Include: Always
interface FooterProps {
logo: { text: string; href: string }
columns: {
title: string
links: { label: string; href: string }[]
}[]
social?: { platform: string; href: string }[]
legal: string
}
SECTION ORDER ALGORITHM
Each archetype has a default section order. The algorithm also applies insertion rules for CTA repetition and social proof distribution.
Default Orders by Archetype
SaaS Trial (10-12 sections):
- Nav
- Hero (Product Screenshot)
- Logo Bar
- Problem
- Solution
- Benefits
- How It Works
- Feature Grid
- Testimonials
- Pricing (if included)
- FAQ
- Final CTA
- Footer
SaaS Demo (9-11 sections):
- Nav
- Hero (Product Screenshot)
- Logo Bar
- Problem
- Solution
- How It Works
- Case Study
- Comparison
- Testimonials
- FAQ
- Final CTA
- Footer
Mobile App (8-10 sections):
- Nav
- Hero (Product Screenshot — app mockup)
- Logo Bar ("Featured In")
- Benefits
- How It Works
- Feature Grid
- Testimonials
- FAQ
- Final CTA (App Store badges)
- Footer
Service/Agency (9-11 sections):
- Nav
- Hero (Results)
- Logo Bar
- Problem
- Solution
- How It Works
- Case Study
- Testimonials
- Pricing (if included)
- FAQ
- Final CTA
- Footer
Waitlist/Launch (6-8 sections):
- Nav
- Hero (Waitlist)
- Problem
- Solution
- Benefits
- FAQ
- Final CTA
- Footer
E-commerce (8-10 sections):
- Nav
- Hero (Results — product image)
- Benefits
- How It Works
- Feature Grid
- Testimonials
- Comparison
- FAQ
- Final CTA
- Footer
Insertion Rules
- CTA Repetition: Insert a mid-page CTA after the Benefits or How It Works section if the page has 10+ sections. Use a simple centered CTA block, not a full Final CTA.
- Social Proof Distribution: If testimonials come late (position 8+), insert a single inline testimonial quote after the Problem or Solution section.
- Serial Position Effect: The most important conversion arguments go in positions 2-4 (primacy) and the last 2 sections before footer (recency). The middle is for detail/depth.
DESIGN SYSTEM LAYER
Factory-Inspired (Default)
This is the id8Labs design system. Applied by default unless user chooses otherwise.
const factoryTokens = {
colors: {
background: '#020202',
foreground: '#eeeeee',
muted: '#737373',
border: '#262626',
accent: '#ef6f2e',
accentSecondary: '#f59e0b',
accentTertiary: '#4ecdc4',
surface: '#0a0a0a',
},
typography: {
fontFamily: {
sans: "'Geist', system-ui, -apple-system, sans-serif",
mono: "'Geist Mono', 'SF Mono', 'Fira Code', monospace",
},
fontWeight: {
normal: 400,
medium: 500,
semibold: 600,
},
letterSpacing: {
tight: '-0.02em',
normal: '-0.01em',
},
},
spacing: {
section: 'py-20 md:py-28',
container: 'max-w-6xl mx-auto px-6',
},
rules: [
'NO shadows',
'NO gradients',
'NO glow effects',
'NO border-radius larger than 8px (rounded-lg max)',
'NO decorative elements that serve no function',
'Borders: 1px solid, subtle',
'Cards: surface background + border, no shadow',
'Buttons: solid fill, no gradients, sharp or slightly rounded',
],
}
Light & Clean Preset
const lightTokens = {
colors: {
background: '#ffffff',
foreground: '#1a1a1a',
muted: '#6b7280',
border: '#e5e7eb',
accent: '#2563eb',
accentSecondary: '#7c3aed',
surface: '#f9fafb',
},
}
Bold & Colorful Preset
const boldTokens = {
colors: {
background: '#0f172a',
foreground: '#f8fafc',
muted: '#94a3b8',
border: '#334155',
accent: '#f43f5e',
accentSecondary: '#8b5cf6',
surface: '#1e293b',
},
}
Custom Override System
When user selects "Custom" and provides brand colors/fonts:
- Map provided colors to the token system (background, foreground, accent, etc.)
- If fewer than 3 colors provided, fill gaps from nearest preset
- Generate Tailwind config extension with custom colors
- Apply custom font via
next/font or CDN import
- Validate contrast ratios: accent-on-background must be WCAG AA (4.5:1 minimum)
COMPONENT ARCHITECTURE
File Structure
app/
page.tsx # Main landing page (Server Component)
layout.tsx # Root layout with metadata
globals.css # Tailwind + custom tokens
components/
nav.tsx # Navigation (Server Component)
hero.tsx # Hero variant (Server Component)
logo-bar.tsx # Logo bar (Server Component)
problem.tsx # Problem section (Server Component)
solution.tsx # Solution section (Server Component)
benefits.tsx # Benefits section (Server Component)
how-it-works.tsx # How It Works (Server Component)
feature-grid.tsx # Feature grid (Server Component)
testimonials.tsx # Testimonials (Server Component)
case-study.tsx # Case study (Server Component)
comparison.tsx # Comparison table (Server Component)
pricing.tsx # Pricing (Server Component)
faq.tsx # FAQ accordion ('use client')
final-cta.tsx # Final CTA (Server Component)
footer.tsx # Footer (Server Component)
mobile-nav.tsx # Mobile hamburger ('use client')
waitlist-form.tsx # Waitlist email form ('use client')
Server/Client Component Boundaries
Server Components (default): All content sections. Landing pages are content-heavy — server rendering is correct for performance and SEO.
Client Components (only when interactive):
faq.tsx — Accordion open/close statemobile-nav.tsx — Hamburger menu togglewaitlist-form.tsx — Email form submission (Waitlist archetype only)pricing.tsx — Only if billing toggle is included
Conventions
- All components are functional, TypeScript strict
- Props interfaces exported alongside components
- No
any types
- Tailwind only — no CSS modules or styled-components
next/image for all images with explicit width/heightnext/font for font loading (Geist from geist package)next/link for internal links- Semantic HTML elements:
<nav>, <main>, <section>, <article>, <footer>
- Each section wrapped in
<section> with descriptive id for anchor links
SEO & STRUCTURED DATA LAYER
Metadata Template
Generated in layout.tsx using Next.js Metadata API:
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: '[Product Name] — [Core Value Prop in 5-8 words]',
description: '[150-160 char meta description with primary keyword, value prop, and CTA hint]',
keywords: ['primary keyword', 'secondary keyword', 'brand name'],
openGraph: {
title: '[Product Name] — [Value Prop]',
description: '[Same as meta description or slightly varied]',
url: 'https://[domain]',
siteName: '[Product Name]',
type: 'website',
images: [
{
url: '/og-image.png',
width: 1200,
height: 630,
alt: '[Product Name] — [Brief description of what's shown]',
},
],
},
twitter: {
card: 'summary_large_image',
title: '[Product Name] — [Value Prop]',
description: '[Meta description]',
images: ['/og-image.png'],
},
robots: {
index: true,
follow: true,
},
alternates: {
canonical: 'https:
},
}
JSON-LD Structured Data
Generate as a <script type="application/ld+json"> in layout.tsx.
Always include:
{
"@context": "https://schema.org",
"@graph": [
{
"@type": "Organization",
"name": "[Company Name]",
"url": "https://[domain]",
"logo": "https://[domain]/logo.png",
"sameAs": ["[social URLs]"]
},
{
"@type": "WebSite",
"name": "[Product Name]",
"url": "https://[domain]"
}
]
}
Conditional schemas:
- SaaS / Mobile App: Add
SoftwareApplication with applicationCategory, operatingSystem, offers
- E-commerce: Add
Product with offers, aggregateRating (if available)
- FAQ section present: Add
FAQPage with all Q&A pairs from the FAQ section
- Pricing section present: Add
offers to the appropriate type
FAQPage schema (auto-generated from FAQ section):
{
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "[question text]",
"acceptedAnswer": {
"@type": "Answer",
"text": "[answer text]"
}
}
]
}
Semantic HTML Rules
- One
<h1> per page (the Hero headline)
<h2> for each section headline<h3> for sub-section headers within sections- Never skip heading levels (h1 -> h3)
- Use
<main> wrapper around all content sections
- Use
<nav> for navigation
- Use
<footer> for footer
- Use
<blockquote> for testimonials
- Use
<ul> / <ol> for lists (not divs with dashes)
- All images have descriptive
alt text
- All interactive elements are keyboard-accessible
PERFORMANCE & ACCESSIBILITY
Core Web Vitals Targets
| Metric | Target | Strategy |
|---|
| LCP | < 2.5s | Server Components, optimized images, next/font preload |
| INP | < 200ms | Minimal client JS, no heavy event handlers |
| CLS | < 0.1 | Explicit image dimensions, font display: swap, no layout shifts |
Performance Rules
- Images: Always use
next/image with explicit width and height. Use priority on hero image only. Use loading="lazy" on all below-fold images.
- Fonts: Load via
next/font/google or next/font/local for Geist. Subset to latin. Use display: swap.
- JavaScript: Minimal. Only FAQ accordion, mobile nav, and waitlist form need client JS. No animation libraries.
- CSS: Tailwind utility classes only. No unused CSS. Purge in production build.
WCAG 2.1 AA Requirements
- Color contrast: 4.5:1 for normal text, 3:1 for large text (18px+ or 14px+ bold)
- Focus states: Visible focus ring on all interactive elements (buttons, links, form fields)
- Keyboard navigation: All interactive elements reachable via Tab. Logical tab order.
- Screen reader: Semantic HTML, proper heading hierarchy, descriptive alt text, ARIA labels on icon-only buttons
- Reduced motion: Respect
prefers-reduced-motion — no animations for users who opt out
- Touch targets: Minimum 44x44px on mobile
QUALITY GATE
All 22 checks must pass before delivery. Any failure gets explained and fixed.
Copy Quality (6 checks)
| # | Check | How to Verify |
|---|
| C1 | Zero Tier 1 banned phrases | Scan all text for Tier 1 words |
| C2 | All Tier 2 phrases replaced with specifics | Scan for Tier 2, verify replacements have numbers |
| C3 | No structural AI tells | Check for cookie-cutter intros, uniform paragraphs, transition word abuse |
| C4 | Every claim has a number, example, or proof | Read each benefit/feature claim — must have specificity |
| C5 | Passes Logo Swap Test | Read hero + benefits — could this be any product? |
| C6 | Voice matches brand (from Q9) | Read aloud — does it match the voice modulation table? |
Design Quality (5 checks)
| # | Check | How to Verify |
|---|
| D1 | No design slop patterns | Check against the 10-item design slop list |
| D2 | Color contrast WCAG AA | Verify accent-on-background ratio >= 4.5:1 |
| D3 | Consistent design tokens | All colors, fonts, spacing from the selected token set |
| D4 | Layout has personality | Fails if three identical card rows or perfectly symmetrical everything |
| D5 | Mobile-responsive | All sections work at 375px width |
Technical Quality (6 checks)
| # | Check | How to Verify |
|---|
| T1 | TypeScript strict — no errors | npx tsc --noEmit passes |
| T2 | Build succeeds | npm run build passes |
| T3 | One <h1>, proper heading hierarchy | Scan HTML output for heading tags |
| T4 | All images have alt text | Scan for <img> and next/image — all have alt |
| T5 | JSON-LD validates | Check structured data syntax |
| T6 | Server/Client boundaries correct | Only FAQ, mobile nav, and forms use 'use client' |
Conversion Quality (5 checks)
| # | Check | How to Verify |
|---|
| V1 | Primary CTA visible above fold | Hero section has CTA without scrolling |
| V2 | CTA repeated at least 3 times | Nav CTA + Hero CTA + Final CTA minimum |
| V3 | Social proof within 2 scrolls of CTA | Logo bar or testimonial near top and bottom CTAs |
| V4 | Objections addressed (FAQ covers real concerns) | FAQ has genuine objections, not softballs |
| V5 | Risk reversal present | Guarantee, free trial, or "cancel anytime" messaging exists |
Quality Gate Procedure
- After generating all components, run each check sequentially
- For any failure: explain what failed, why it matters, and fix it
- Re-run the failed check after fixing
- Report final gate status:
QUALITY GATE: PASSED (22/22)
- Copy: 6/6
- Design: 5/5
- Technical: 6/6
- Conversion: 5/5
- If build/typecheck fails, fix and re-run until passing
DELIVERY & A/B TEST SUGGESTIONS
Delivery Checklist
After the quality gate passes, deliver:
- All component files in the file structure specified above
- Quality gate results showing 22/22
- A/B test suggestions (3 testable hypotheses)
- Next steps for the user
A/B Test Suggestion Generator
For every page, generate 3 testable hypotheses using this format:
HYPOTHESIS [1-3]:
If we [specific change],
then [primary metric] will [increase/decrease] by [estimated %],
because [rationale from conversion psychology].
TEST: [What to change — Control vs. Variant]
METRIC: [Primary metric to measure]
PRIORITY: [High/Medium/Low using ICE scoring]
Default test ideas by archetype:
SaaS Trial:
- Headline A vs. Headline B (outcome-focused vs. specificity-focused)
- Hero with product screenshot vs. hero with demo video
- Pricing section present vs. "See Pricing" CTA that links to separate page
SaaS Demo:
- Single CTA ("Request Demo") vs. dual CTA ("Request Demo" + "Watch 2-min Video")
- Case study above testimonials vs. below
- Comparison table included vs. excluded
Waitlist/Launch:
- Waitlist count shown vs. hidden
- "Join Waitlist" vs. "Get Early Access" CTA copy
- Problem section included vs. hero-only minimal page
QUICK REFERENCE
Trigger Table
| User Says | This Skill Does |
|---|
| "Build a landing page for X" | Full pipeline: interview -> generate -> deliver |
| "Create a landing page" | Full pipeline with smart defaults |
| "I need a page for my SaaS" | Full pipeline, pre-classified as SaaS |
| "Landing page for [product name]" | Full pipeline |
| "Build me a page" | Full pipeline with smart defaults |
When to Use Other Skills Instead
| Situation | Use This Instead |
|---|
| "Optimize this existing page" | page-cro or landing-page-optimizer |
| "Rewrite the copy" | copywriting |
| "Add schema markup" | schema-markup |
| "Full SEO audit" | seo-audit |
| "Design a layout" | layout-designer |
| "Build a React component" | ui-builder |
| "A/B test this page" | ab-test-designer + ab-test-setup |
| "Optimize this form" | form-cro |
Pipeline Shortcut Commands
- Full pipeline: "Build a landing page for [product]" — runs all phases
- Skip interview: "Build a landing page for [product]. SaaS trial, professional voice, factory design." — skips to generation
- Specific archetype: "Build a waitlist page for [product]" — pre-classifies and runs
Consolidates intelligence from: landing-page-designer, copywriting, page-cro, form-cro, signup-flow-cro, schema-markup, seo-audit, layout-designer, ab-test-designer, ui-builder, and 50+ research sources on conversion psychology, CRO, and design.
