Landing page

Run it in Claude Code

1. Install its skills

   One prompt installs the 8 skills it uses and skips the ones you already have.

   Copy install prompt

2. Add the playbook skill

   Save it as .claude/skills/playbook-landing-page/SKILL.md in your project. It runs the stages in order, asks before each new stage, and keeps its progress in .playbooks/landing-page.md.

   Download SKILL.md

3. Add it to CLAUDE.md, if you like

   A short block listing each stage and its skills, so every session knows the order.

   Copy CLAUDE.md block

Then ask Claude Code:

Stages

1. 1
   1

   Discovery

   Know who the page is for, what it offers and the one action it asks for.

   1. Grill Me

      Questions the audience, the offer and the goal until each has one answer.

      grill me
   2. Marketing Skills

      Writes the positioning document the copy and SEO skills read later.

      /product-marketing

   Done when: The audience, the offer and the page's single goal are written down and you agree with them.

2. 2
   2

   Design

   A look of its own, decided before the page is built.

   1. Design ExtractOptional

      Pulls the colors, type and spacing out of a site you want to learn from.

      When: A reference site should guide the look.

      /extract <url>
   2. design-taste-frontend

      Designs and builds the page so that it does not look like a template.

      /design-taste-frontend <brief>
   3. UI/UX Pro MaxOptional

      Finds palettes, type pairings and styles to choose from.

      When: You want options for colors and fonts before deciding.

      python3 scripts/search.py "<query>"

   Done when: You have approved the page's design, on a phone and on a desktop.

3. 3
   3

   Build

   A fast page, checked against Vercel's rules when it uses React or Next.js.

   1. Vercel Agent Skills

      Checks the page against Vercel's React and Next.js performance rules.

      When: The page is built with React or Next.js.

      Help me optimize this Next.js page

   Done when: The page works locally, on a phone and on a desktop.

4. 4
   4

   Verify

   See the page load fast and its call to action work in a real browser.

   1. Chrome DevTools MCP

      Records how the page loads and points at what slows it down.

      performance_start_trace / performance_stop_trace
   2. Dev Browser

      Clicks through the call to action and any form, as a visitor would.

      dev-browser --headless

   Done when: The page loads fast, the call to action works, and the console shows no errors.

5. 5
   5

   Launch

   Copy that converts and a page search engines can read.

   1. Marketing Skills

      A last pass over the headline, the sections and the call to action.

      /copywriting
   2. Marketing Skills

      Finds technical SEO problems while they are still cheap to fix, before launch.

      /seo-audit

   Done when: You approve the final copy and the audit's critical issues are fixed.