Build a landing page with Claude Code

You can ask Claude Code to write a landing page with no skill at all. What a skill adds is a fixed way of doing it: an art direction chosen up front, a page file that is checked before anything is written, and a browser check at four screen widths before you see the result. This guide follows the two whole-page skills from first install to a live page. Everything about them here comes from their own SKILL.md files and example pages. The landing page task page lists every skill for the job, including the animated hero sections.

Pick the skill

Three skills build a whole page; the other skills on the task page build the first screen only (see Pair a Motion Hero with a landing page below). The two this guide uses differ in look and in what they output.

Both say what they are not for: multi-page sites, blogs or docs, and pixel-matching an existing design file. Mono Editorial Landing also points you to Bento SaaS Landing when the page needs a grid of many product tiles. For a one-screen waitlist, the task page lists Waitlist Glow.

Install it

Open Claude Code in the project the page is for. Every skill page has a Copy install prompt button; paste it into Claude Code and approve the sign-in when it shows the link. Or run the command yourself:

curl -fsSL https://lookbk.dev/cli.js | node - add mono-editorial-landing

curl -fsSL https://lookbk.dev/cli.js | node - add bento-saas-landing

Inside Claude Code the installer writes to ~/.claude/skills. Type /skills to confirm it is there. Install a skill in Claude Code covers the ZIP route and the project folder. Both skills need Node.js 18 or newer and Chrome, Chromium or Edge for the checks; nothing else to install. Read the skill’s files before you run it, as Safety checks before running a skill explains.

Brief it

Say what the page is for in one sentence and name where your facts are. These are the prompts shown on the two skill pages:

Build a Mono Editorial landing page for quietly.example from our README, with a waitlist form.

Build a Bento SaaS landing page for our app from the README and docs, as a Next.js component, one tile per real feature.

What Claude Code does with a brief for Mono Editorial Landing

1. 1

   Step 1: Draft from the README

   It runs node <skill>/scripts/from-readme.mjs README.md page.json, where <skill> is the skill’s folder. The draft already builds: the name, the tagline as a first headline, the introduction, a Features list as columns and your install commands as a terminal figure.

2. 2

   Step 2: Decide what the hero asks for

   If the product is not launched, it asks which service collects the emails and sets the hero’s form. If it is out, the hero gets a primary button and an optional secondary one.

3. 3

   Step 3: Write the page

   It starts from the closer example, examples/quietly/page.json (a waitlist, light) or examples/galley/page.json (an open-source tool, dark), and replaces everything.

4. 4

   Step 4: Build

   It runs node <skill>/scripts/build.mjs page.json out, which lists every problem in page.json at once and writes nothing until they are fixed.

What Claude Code does with a brief for Bento SaaS Landing

1. 1

   Step 1: Collect the facts

   What the product does and for whom, 6 to 12 features each with a concrete detail, where sign-up and docs really live, and any proof. Customer names, quotes and company numbers must come from you or a source you point to.

2. 2

   Step 2: Plan the grid

   The grid has 6 columns and rows 160 px tall on desktop. Each tile is 2, 3, 4 or 6 columns wide and 1 to 3 rows tall, and every row must add up to 6.

3. 3

   Step 3: Write the page

   It starts from examples/relay/ (dark, an analytics product) or examples/fernway/ (light, a developer tool).

4. 4

   Step 4: Build

   It runs node <skill>/scripts/build.mjs page.json out, or adds --next for the Next.js files. The build refuses a grid with gaps and draws the layout so you can see them.

Review the output

The build ends with a list of what only you can confirm: the quote, the numbers, and the sample screens. For Mono Editorial Landing the README draft also ends with three lists to work through together: what to write by hand (always the headline), text it shortened, and README sections it left off the page. Then run the checks:

node <skill>/scripts/check.mjs out/index.html
node <skill>/scripts/try-form.mjs out/index.html      # Mono, with a waitlist form
node <skill>/scripts/screenshot.mjs out/index.html

• check.mjs loads the page at 390, 768, 1024 and 1440 px and must say ok at each: nothing wider than the screen or cut off, readable contrast, alt text, a labelled form field, one h1.
• try-form.mjs signs up with test@example.com in headless Chrome against a stand-in for the form service, so nothing reaches the real one, and must end with The form works.
• screenshot.mjs saves out/screens/desktop.png and mobile.png. Open both: does the first screen say what the product is, does a headline break badly, is a tile or spread lopsided or mostly empty?

When check.mjs reports a problem, change page.json and build again, rather than editing the HTML, so the next build does not undo your fix. For Bento SaaS Landing, “content is N px taller than its box and is cut off” means the tile’s text does not fit: shorten it, drop a list item, or make the tile taller or wider and rebalance the row.

Two finished examples

Both skills ship complete example pages, and the previews on Lookbk are built from them. The companies, people and figures in them are made up for the examples.

Pair a Motion Hero with a landing page

The Motion Heroes on the landing page task page build the first screen of a page: a headline, a line of introduction, buttons, and an animation beside them. Each writes out/index.html, a whole page in one file, and out/embed.html, the same section to paste into a site you already have. Two of them have example pages that show what the settings produce:

• Cursor Tour Hero, Ostra: a release desk. The headline is “Software that answers back.”, and beside it a product window has a “Pre-flight checklist” of four rows, two switches, a “Rollout” choice and the button “Ship v2.4”. Its prompt on the skill page is: “Build a Cursor Tour hero for our release desk: the window checks off our four pre-flight steps, turns on launch notifications, picks a 100% rollout and ships v2.4, then record the launch video.”
• Sunrise Pitch Hero, Halcyra: a bedside sunrise lamp raising a Series A. The headline is “Bring the dawn indoors.” beside a five-slide deck named “Halcyra — Series A”.

How to combine one with a whole-page skill depends on what you already have:

• You have a site already. Build the hero and paste out/embed.html into it, above your existing sections.
• You have no site yet. Use a page skill alone. Each one draws its own first screen: Mono Editorial Landing’s holds the headline, the introduction and the form or buttons, and Bento SaaS Landing’s a gradient headline with buttons.

Cursor Tour Hero needs Node.js 18 or newer, Chrome for the checks and, for the video, ffmpeg. The copy is yours to supply: its SKILL.md says every claim, number, price and date in the copy and in the window must come from you.

Put it live

Upload out/index.html and the out/assets/ folder, if there is one, to any static host: Netlify, Vercel, Cloudflare Pages, GitHub Pages or S3. Mono Editorial Landing loads its fonts from Google Fonts, and falls back to system fonts without internet.

• A waitlist: sign up once on the live page with your own address and confirm it reaches the service, and link a privacy policy from footer.links when the page collects emails.
• Next.js: with --next, copy out/next/BentoLanding.tsx and out/next/bento-landing.module.css into a components folder, out/next/page.tsx to the route, and out/next/public/landing/ into your public/landing/. This is for an App Router project on Next 13.2 or newer.
• Changing it later: keep page.json in the repository. Edit it, then run the build and the checks again.

When it goes wrong

• build: fix page.json first

  Each line names the field or tile and the limit. Fix them all and build again.

• points at nothing on the page (Mono)

  A nav or button link to #something that is not an id on the page. The page’s own are #join, #highlights, #faq and #closing.

• The live form fails but try-form.mjs passes

  The service rejected it. Check the Formspree form ID, the endpoint’s CORS and status code, or that the Netlify site was deployed after the form was added.

• A tile looks empty (Bento)

  It is bigger than its content. Lower its height, or swap it with a neighbor of the same width.

• The page is in a system font

  Google Fonts could not be reached. Install the families locally and set "fonts": "".

• Claude Code does not use the skill

  Call it by name with /mono-editorial-landing or /bento-saas-landing. More in Skill not working?.