Ship a SaaS Landing Page in 7 Prompts

From blank Figma to a production-ready Next.js landing page in under two hours, using Claude Opus 4.7 for code, ChatGPT Images V2 for visuals, and a single hosted preview.

Marketing intermediate 90 min
Claude Code or Cursor ChatGPT Images V2 Vercel / Netlify

  1. 1. Brief Generator

    Act as a positioning strategist. Given the product description below, produce a one-page brief covering: target customer, primary pain, core value prop, three key benefits, headline (8-12 words), subhead (one sentence), three reasons to believe.\n\nProduct: [DESCRIBE]

  2. 2. Section Outline

    Based on the brief, produce a 7-section landing page outline: hero, social proof, problem, solution, features (3 cards), testimonial, pricing, CTA. For each section, give the headline and a 1-sentence content brief.

  3. 3. Hero Image (Images V2)

    Generate a 1920x900 hero illustration: isometric scene of [PRODUCT IN USE], soft pastel palette dominated by [BRAND COLOR], clean modern style. No text in the image. Leave the left 40% as negative space for headline copy.

  4. 4. Component Code

    Write a Next.js 14 (App Router) page using TailwindCSS that implements the outline. Use shadcn/ui primitives. Mobile-first. Pull copy from a single content.ts file so non-devs can edit without touching JSX.

  5. 5. Schema.org JSON-LD

    Generate Organization, WebSite (with SearchAction), and Product schemas as JSON-LD blocks for this landing page. Include all recommended fields.

  6. 6. Meta and OG

    Generate the <head> contents: title (50-60 chars), meta description (140-160), canonical, OG tags, Twitter card, primary keyword: [KEYWORD]. Include preconnect hints for Vercel font and image CDN.

  7. 7. Deploy & QA

    Provide a checklist for shipping: image asset paths verified, schema validated at validator.schema.org, Lighthouse score targets (90+ on all four), accessibility (axe-core clean), and an A/B variant of the headline to launch alongside.