Landing Page Code Generation

Purpose

This recipe produces a fully deployed, conversion-optimized landing page with responsive layout, passing Core Web Vitals, and structured sections (hero, social proof, features, pricing, CTA, FAQ, footer). The output is a live URL plus a source code repository ready for A/B testing and iteration — built using the tool path that matches the user's technical skill level and budget. [src2]

Prerequisites

• Value proposition and headline copy — clear headline, subheadline, and CTA text (from brand strategy or user-provided)
• Brand assets — logo (SVG preferred), brand colors (hex codes), and font choice
• Section content — text and images for hero, features (3-6 items), social proof, pricing (if applicable), FAQ (5-8 items)
• Node.js 18+ — installed for code-based paths (Paths A/B skip this)
• Git + GitHub account — for version control and deployment (code paths only)
• Deployment account — Vercel, Netlify, or Cloudflare Pages (free tier sufficient)

Constraints

• Hero section must communicate the value proposition within 3-5 seconds — above-the-fold real estate drives 73% of conversion decisions. [src5]
• Use a single primary CTA per viewport, repeated strategically: hero, mid-page, and final section. Multiple competing CTAs reduce conversion. [src2]
• All images require explicit width and height attributes to prevent CLS. Target CLS < 0.1. [src4]
• LCP must be under 2.5 seconds — preload hero images and inline critical CSS. Only 48% of mobile pages pass this threshold. [src4]
• AI-generated code (v0, bolt.new) produces UI scaffolding but requires manual review for accessibility, working forms, and real content before deploy. [src3]

Tool Selection Decision

Which path?
├── User is non-technical AND wants fast launch
│   └── PATH A: No-Code — Framer or Webflow
├── User is non-technical AND wants AI-assisted code ownership
│   └── PATH B: AI Generation — v0 or bolt.new → export to repo
├── User is developer AND wants full control + free stack
│   └── PATH C: Code from Scratch — Next.js + Tailwind + shadcn/ui
└── User is developer AND wants fastest production path
    └── PATH D: Template + Customize — Launch UI or Shipixen starter

Execution Flow

Step 1: Project Scaffolding

Duration: 5-15 minutes · Tool: Terminal (Paths C/D) or browser (Paths A/B)

Path A (No-Code): Sign up at framer.com or webflow.com. Select a landing page template in your industry. Skip to Step 3.

Path B (AI Generation): Go to v0.dev (or bolt.new). Enter a detailed prompt describing your page sections and style.

Path C (Code from Scratch):

npx create-next-app@latest my-landing-page \
  --typescript --tailwind --eslint --app --src-dir \
  --import-alias "@/*"

cd my-landing-page
npx shadcn@latest init -d
npx shadcn@latest add button card accordion badge separator

Path D (Template Starter):

# Launch UI (Next.js 15 + shadcn/ui + Tailwind)
git clone https://github.com/launch-ui/launch-ui.git my-landing-page
cd my-landing-page && npm install

Verify: npm run dev starts at localhost:3000 with no errors. · If failed: Check Node.js version (must be 18+). Delete node_modules and re-run npm install.

Step 2: Configure Brand Identity

Duration: 15-30 minutes · Tool: Code editor or visual editor

Set up global brand tokens — colors, typography, and spacing in tailwind.config.ts. Define brand-50 through brand-900 color scale, accent color for CTAs, and heading/body font families.

// tailwind.config.ts
colors: {
  brand: { 50: "#f0f7ff", 500: "#3b82f6", 600: "#2563eb", 700: "#1d4ed8" },
  accent: "#f59e0b"
},
fontFamily: {
  sans: ["Inter", "system-ui", "sans-serif"],
  heading: ["Cal Sans", "Inter", "sans-serif"]
}

Verify: Brand colors render correctly. Text contrast meets WCAG 4.5:1 minimum. · If failed: Check hex values. Use WebAIM contrast checker.

Step 3: Build the Hero Section

Duration: 30-60 minutes · Tool: Code editor

The hero section is the highest-impact element. Include: trust badge, benefit-driven headline, subheadline with proof point, single primary CTA with secondary ghost CTA, and social proof logos. [src5]

// src/components/hero.tsx
<section className="pt-24 pb-16 sm:pt-32">
  <Badge>Trusted by 2,000+ teams</Badge>
  <h1 className="text-4xl font-bold sm:text-6xl">
    Ship landing pages <span className="text-brand-600">10x faster</span>
  </h1>
  <p className="text-lg text-gray-600">Subheadline with proof point.</p>
  <Button size="lg">Start building free</Button>
  <Button variant="ghost">See examples &rarr;</Button>
  {/* Social proof logos with explicit width/height */}
</section>

Verify: Hero renders above the fold on mobile (375px) and desktop (1280px). CTA visible without scrolling. LCP < 2.5s. · If failed: Preload hero image. Convert to WebP.

Step 4: Build Conversion Sections

Duration: 60-90 minutes · Tool: Code editor

Build remaining sections following the proven conversion layout: features grid (3-6 cards), pricing table (highlight recommended plan), FAQ accordion, and final CTA. [src6]

// Features: 3-column grid with Card components
// Pricing: 3-tier with highlighted middle plan
// FAQ: Accordion from shadcn/ui
// Final CTA: Repeated primary action

Verify: All sections render in order. No horizontal scroll on mobile. All text readable. · If failed: Check for missing overflow-hidden. Ensure grid-cols-1 on mobile.

Step 5: Performance Optimization

Duration: 30-45 minutes · Tool: Code editor + Lighthouse

Optimize for Core Web Vitals: use Next.js font optimization (eliminates FOUT), preload hero image, set OG/Twitter meta tags, and verify bundle size under 100 KB. [src4]

# Image optimization
npx sharp-cli --input public/hero.png --output public/hero.webp --format webp --quality 80

# Bundle analysis
npx next build
# Target: First Load JS < 100 KB

Verify: Lighthouse Performance > 90, LCP < 2.5s, CLS < 0.1, INP < 200ms. · If failed: Check hero image size (< 200 KB as WebP). Audit imports with next build --analyze.

Step 6: Deploy and Verify

Duration: 10-20 minutes · Tool: Vercel CLI or platform dashboard

# Vercel (recommended for Next.js)
npm i -g vercel && vercel --prod

# Post-deploy verification
npx lighthouse https://yourdomain.com --only-categories=performance
# Test: mobile rendering, CTA links, OG image (opengraph.dev)

Verify: Page loads in under 2 seconds on 4G mobile. All CTA buttons work. OG image renders on social share. · If failed: Check next.config.js output mode compatibility with deployment platform.

Output Schema

{
  "output_type": "landing_page",
  "format": "deployed URL + git repository",
  "columns": [
    {"name": "url", "type": "string", "description": "Live deployed URL", "required": true},
    {"name": "repository", "type": "string", "description": "Git repository URL", "required": true},
    {"name": "framework", "type": "string", "description": "Framework used", "required": true},
    {"name": "sections", "type": "array", "description": "Sections included", "required": true},
    {"name": "lcp_score", "type": "number", "description": "LCP in seconds", "required": true},
    {"name": "cls_score", "type": "number", "description": "CLS score", "required": true},
    {"name": "lighthouse_score", "type": "number", "description": "Performance score", "required": true}
  ],
  "expected_row_count": "1",
  "sort_order": "N/A",
  "deduplication_key": "url"
}

Quality Benchmarks

If below minimum: Review Step 5 — most issues come from unoptimized images, render-blocking CSS, or oversized JS bundles. Convert images to WebP, inline critical CSS, and code-split with dynamic imports.

Error Handling

Cost Breakdown

Anti-Patterns

Wrong: Deploying AI-generated code without review

v0 and bolt.new produce visually appealing UI scaffolding, but the generated code often includes unnecessary dependencies, missing accessibility attributes, and placeholder text that looks real. Deploying without review means broken forms and bloated bundles. [src3]

Correct: Use AI for scaffolding, then manually review

Generate sections one at a time. Copy output into your project. Review for accessibility (aria labels, alt text), performance (unnecessary imports), and correctness (real URLs, working forms).

Wrong: Building custom components before checking libraries

Developers spend hours building custom accordions, modals, or pricing tables when shadcn/ui and Radix already provide accessible, tested versions. Custom components introduce accessibility bugs and maintenance burden. [src7]

Correct: Start with shadcn/ui or equivalent library

Install shadcn/ui components first. Customize with Tailwind classes. Only build custom components when no existing primitive fits your exact interaction pattern.

Wrong: Optimizing for desktop first

Over 60% of web traffic is mobile. Desktop-first pages break on mobile with horizontal scroll, tiny tap targets, and slow loading. [src4]

Correct: Mobile-first development

Start with grid-cols-1 and px-4. Add responsive breakpoints up: sm:grid-cols-2, lg:grid-cols-3. Test on a real mobile device before shipping. Use min-width media queries.

When This Matters

Use this recipe when an agent needs to produce a working, deployed landing page — not a wireframe, mockup, or content strategy document. It requires a clear value proposition (headline copy) and brand assets as inputs. The output is a live URL with source code, ready for A/B testing and conversion optimization.