Building a landing page with Claude, step by step

Step 1: Write a one-paragraph brief

Before any prompt, answer four questions in plain words: who is the page for, what should they do, why should they trust you, and what should it feel like. This takes five minutes and saves an hour of back-and-forth.

Ledgerly is bookkeeping software for freelancers and small studios.
Visitors should start a free trial.
Trust: 4,200 studios use it; it closes the books automatically each month.
Feel: precise and calm, like a Swiss train timetable. Show the real product on the first screen.

Step 2: Plan the sections

A landing page has one job, so every section should push toward it. A reliable order:

1. 01Hero: the promise in one line, a primary button, and proof (the product, a number or a face).
2. 02Social proof: logos, a count, or one strong quote.
3. 03How it works or features: three to six concrete benefits, each with a visual.
4. 04Pricing or offer: the decision, made easy.
5. 05FAQ: the objections people actually have.
6. 06Final call to action and a footer.

Write the real copy for each section now. It does not have to be perfect, but it has to be real.

Step 3: Turn the brief into a prompt

Combine the brief, the sections and a design system into one prompt. If you need the full structure, see how to write a Claude prompt for a website design. Here is a compact version for a landing page:

Build a "Ledgerly SaaS Landing Page" React component.

CONCEPT: Bookkeeping software for freelancers and small studios. It must show the actual product on the first screen and convert to a free trial. It should feel precise and calm, like a Swiss timetable.

LAYOUT & CONTENT:
- Nav: logo 'Ledgerly', links Product / Pricing / Customers, 'Sign in' and red 'Start free' button.
- Hero: headline 'Books that close themselves.' left; right a product card with this month's income, expenses, a bar chart and 3 recent transactions.
- Logo strip: 'Trusted by 4,200 studios' with 6 wordmarks.
- Features: 3x2 grid, each with a small UI fragment instead of an icon.
- Pricing: two plans (Solo $12, Studio $29) with a monthly/yearly toggle.
- FAQ: 4 questions. Final CTA band. Footer.

INTERACTIONS: transactions slide in one by one on load; chart bars grow when in view; toggle animates with a spring.

DESIGN SYSTEM — Swiss International:
- White #FFFFFF, ink #0B0B0C, grey #6B6B70, hairline #E6E6E8, one signal red #E30613 only for the primary button and key numbers.
- Strict 12-column grid, Inter Tight 700/800 with tight tracking, IBM Plex Mono for figures.
- No gradients, no glassmorphism, no generic icon cards.

OUTPUT: one self-contained React component (Tailwind CSS, framer-motion, lucide-react), default export, no external images, semantic HTML, keyboard accessible, responsive down to 360px.

This is close to the real prompt behind Ledgerly. You can open it and copy the full version.

Step 4: Refine it as an artifact

In Claude's apps, a React component like this usually opens as an artifact: a live preview next to the chat. This is the cheapest place to iterate, because every change is visible in seconds. Work top to bottom and change one thing per message.

The hero headline wraps badly at tablet width. Make it clamp(2.5rem, 6vw, 5.5rem) and keep it to two lines.

The feature grid feels generic. Replace each icon with a tiny UI fragment: an invoice line, a bank sync badge, a tax estimate.

Check the page at 375px wide: stack the hero card under the headline, make the nav a simple menu button.

Read the page as a first-time visitor and list the three weakest sentences. Then rewrite them.

That last prompt is underrated. Asking Claude to critique its own output before you ask for changes often finds the real problems.

Step 5: Move the code into a real project

When the artifact looks right, copy the code into a project you control. Next.js is a good default, and it is what this site uses. On your computer, with Node.js installed:

npx create-next-app@latest my-landing --js --tailwind --app
cd my-landing
npm install framer-motion lucide-react

Save the component as app/Landing.jsx, add "use client"; as its first line, and render it from app/page.js:

import Landing from "./Landing";

export const metadata = {
  title: "Ledgerly: books that close themselves",
  description: "Bookkeeping for freelancers and small studios. Start free.",
};

export default function Page() {
  return <Landing />;
}

Run npm run dev and open the local address it prints. If something breaks, paste the exact error back into Claude. Most first-run problems are a missing package or a font import.

Step 6: Make it a real website

An artifact is a demo. A website needs a few things the preview never asked for:

• A working form. Connect the signup or contact button to a real destination: a form service, an email, or your CRM.
• Metadata. A unique title and description, and a share image.
• Real images. Replace placeholders with your own photos, compressed, with alt text.
• Analytics. Something simple, so you know whether the page works.
• A last check on a phone. Tap every button with your thumb.

You can ask Claude for each of these. For example: “Add a contact form that posts to /api/contact and a route handler that forwards it to my email.”

Step 7: Deploy

Push the project to GitHub and import it into a host such as Vercel or Netlify. Both detect Next.js and give you a public URL within minutes; every later push updates the site. Then connect your own domain in the host's settings.

Where people get stuck

• Endless polishing in the artifact. Once it is 90% right, move it into the project. The last 10% is easier with the real content and real images.
• One huge file. Fine for the first version. When you start adding pages, ask Claude to split it into components.
• Skipping the brief. If the page feels unfocused, the brief usually was too.

If you want a head start, every full website design in the library is a working landing page with its prompt. Pick one, change the brief, and you are already at step 4.