Build a Landing Page with Claude Code, Step by Step

You can build a simple landing page with Claude Code by installing it, opening an empty project folder, and giving it a written brief that covers your audience, offer, sections, and brand. Ask for a plain static page (HTML and CSS), review it in your browser, and iterate in small steps. Then check it on mobile, add analytics, and upload the files to a static host.

Key facts (as of October 2026)

• Claude Code needs a Claude Pro, Max, Team, or Enterprise subscription, a Claude Console account, or access through a supported cloud provider (Claude Code Docs).
• The recommended install is one command for macOS/Linux/WSL or Windows PowerShell. Run claude --version afterward to confirm it worked (Claude Code Docs).
• Anthropic’s docs: “You’re responsible for reviewing proposed code and commands for safety before approval” (Claude Code Docs).
• WCAG 2.2 asks for a text contrast ratio of at least 4.5:1 for normal text at Level AA (W3C).

Step 1: Install Claude Code and sign in

Open a terminal and run the install command for your system. These come from Anthropic’s quickstart (Claude Code Docs).

macOS, Linux, or WSL:

curl -fsSL https://claude.ai/install.sh | bash

Windows PowerShell:

irm https://claude.ai/install.ps1 | iex

Anthropic also documents Homebrew (brew install --cask claude-code) and WinGet (winget install Anthropic.ClaudeCode). Those two don’t auto-update, so you’ll need to upgrade them yourself.

When the installer finishes, open a new terminal window and check the install:

claude --version

You should see a version number. If your shell says claude isn’t found, the quickstart links to a page on fixing your PATH.

Next, start Claude Code by typing claude. On first use, it asks you to log in. Follow the prompts to finish in your browser. To switch accounts later, type /login inside a running session.

On native Windows, Anthropic recommends installing Git for Windows so Claude Code can use its Bash tool. Without it, Claude Code uses PowerShell instead.

Step 2: Start a project folder

Create an empty folder for the page and start Claude Code inside it:

mkdir my-landing-page
cd my-landing-page
claude

Claude Code works on the folder you start it in. Starting in a dedicated folder keeps it away from your other files.

It also helps to set up git before you begin. Then you can see every change and undo it. Claude Code has its own checkpoints, which you can open with /rewind, but Anthropic notes they only track edits made through Claude’s file tools and are “not a replacement for git” (Claude Code Docs). You can ask Claude to do this for you: “initialize a git repository and make a first commit.”

Step 3: Write a brief before you ask for code

The brief does most of the work. Anthropic’s best-practices page puts it simply: “The more precise your instructions, the fewer corrections you’ll need” (Claude Code Docs).

Write the brief in a file called BRIEF.md in your project folder. Cover these points:

Part of the brief	What to write	Example
Audience	Who visits, and what they already know	Owners of small cafés who have never run online ads
Offer	What you’re selling and the one action you want	A free 30-minute ads review. Action: book a call
Sections	The blocks, in order	Hero, problem, how it works, what you get, FAQ, final call to action
Copy	Real headlines and text, or notes for each section	Paste your own text. Mark gaps with [TBD]
Brand	Colors (hex codes), fonts, tone, logo file	#1F3A5F and #F4F1EA, friendly but plain
Constraints	What to avoid	No stock-photo people, no pop-ups, no countdown timers

Write your own copy where you can. If you let the AI invent claims, prices, or testimonials, you’ll have to remove them later. Never publish a testimonial you didn’t receive.

Step 4: Ask for a static page

A static page is plain HTML, CSS, and maybe a little JavaScript. It needs no server code or database. That makes it cheap to host and easy to review.

You can use plan mode first so Claude reads and plans without changing files. Press Shift+Tab until the status bar shows plan mode, or start with claude --permission-mode plan (Claude Code Docs).

Then send a prompt like this:

Read BRIEF.md. Build a single static landing page from it.
Use one index.html and one styles.css. No frameworks, no build step,
no external scripts. Use semantic HTML (header, main, section, footer),
a mobile-first layout, and system fonts. Use only the copy in the brief.
Where copy is missing, insert a visible [TBD] placeholder instead of
writing your own claims. Show me the plan before you write files.

Read the plan. If it adds something you didn’t ask for, say so before you approve it. When you’re happy, approve the plan and let Claude write the files.

Step 5: Review the page and iterate

Open index.html in your browser by double-clicking it. Read every word on the page. Check that each claim came from your brief.

Then change one thing at a time. Small, specific requests work better than “make it better.” Anthropic’s docs show the difference: a vague request like “make the dashboard look better” works worse than pasting a screenshot and asking Claude to compare and fix the differences (Claude Code Docs).

Examples of good follow-up prompts:

• “Make the hero headline shorter so it fits on two lines at 375px wide.”
• “Move the FAQ above the final call to action.”
• “The button color fails contrast on the dark background. Fix it using the brand colors.”

If something goes wrong, press Esc to stop Claude mid-action. To go back to an earlier state, press Esc twice or run /rewind. If you’ve corrected the same problem more than twice, Anthropic suggests running /clear and starting fresh with a better prompt (Claude Code Docs).

Commit to git after each version you’re happy with.

Step 6: Check mobile and accessibility

Most visitors from ads and social posts arrive on a phone. Check the page in three ways.

Device mode in Chrome. Open Chrome DevTools and click Toggle device toolbar. Google calls this “a first-order approximation” of a phone and recommends testing on a real device when in doubt (Chrome for Developers). Open the page on your own phone too.

Lighthouse. Lighthouse is built into Chrome DevTools and audits performance, accessibility, SEO, and more (Chrome for Developers). Open the Lighthouse panel, run an audit, and fix the accessibility items first.

A manual pass. Automated tools miss things. Check these yourself:

• Text contrast is at least 4.5:1 for normal text, and 3:1 for large text (W3C).
• Every meaningful image has alt text that describes it. Decorative images have empty alt text.
• You can reach every link and button with the Tab key, and you can see where focus is.
• Headings go in order (one H1, then H2s), and the button text says what happens (“Book a call”, not “Click here”).
• The page works with zoom at 200%.

You can ask Claude to fix what you find: “Run through the page for WCAG 2.2 AA issues: contrast, alt text, focus states, heading order. List them, then fix them.”

Step 7: Add analytics

If you use Google Analytics 4, first create a web data stream. In Analytics, go to Admin > Data Streams, click Add stream, choose Web, enter your site URL, and create the stream (Google Analytics Help).

Google says to paste the Google tag “immediately after the <head> on each page of your website”. Your Measurement ID starts with G-. Data can take up to 30 minutes to start, and you can confirm it in the Realtime report.

Paste the tag into index.html yourself, or ask Claude to add it and show you the diff. Don’t let the AI guess your Measurement ID. Copy it from your own Analytics account.

If you plan to send ad or email traffic to the page, use consistent UTM tags. See UTM Parameters: A Naming Convention That Stays Clean in GA4.

Analytics and cookies can bring privacy and consent rules, depending on where your visitors are. Check what applies to you before you launch. This article doesn’t cover legal requirements.

Step 8: Choose where to deploy

A static page can live on almost any host. Here are three common routes, with what each vendor’s docs say:

Option	How it works	Note from the docs
Netlify Drop	Drag your project folder onto the Netlify Drop page	No build step needed for a pre-built folder. Drag and drop creates one-off deploys, not continuous deployment (Netlify Docs)
GitHub Pages	Publish HTML, CSS, and JavaScript files from a GitHub repository	Not for sites “primarily directed at” commercial transactions, and not for sending passwords or card numbers. Published sites can be up to 1 GB (GitHub Docs)
Cloudflare	Upload prebuilt files or connect a Git repository	Cloudflare now says to “Start new projects with Workers” rather than Pages (Cloudflare Docs)

If you already pay for shared hosting with cPanel, you can upload the two files there. For an automated setup, see Deploy Astro to Shared Hosting with GitHub Actions. The same idea works for plain HTML.

Whichever host you pick, connect your own domain and make sure HTTPS is on before you share the link.

What can go wrong?

• Invented content. The AI fills gaps with plausible claims, numbers, or quotes. The [TBD] rule in Step 4 makes gaps visible instead.
• External scripts you didn’t ask for. Check index.html for any <script src> you don’t recognize.
• A form that goes nowhere. A static page can’t process a form by itself. If you add one, decide where submissions go and test it.
• Broken links and placeholder text. Search the files for [TBD], #, example.com, and “Lorem”.
• Approving changes without reading them. Read each diff, especially anything that touches files outside the project folder.

Before you publish: checklist

• Every claim, price, and number on the page comes from you, not the AI
• No [TBD], placeholder text, or dead links remain
• The page works on a real phone, not only in device mode
• Lighthouse accessibility issues are fixed, and contrast meets 4.5:1
• The call-to-action button or link works and goes to the right place
• Analytics shows your own visit in the Realtime report
• Your title tag and meta description are written for this offer
• HTTPS works on your custom domain
• The final version is committed to git so you can roll back

If you want a review step before launch, you can also run /security-review in Claude Code for a security pass over the changes on your branch (Claude Code Docs). For when AI-built projects need more than a landing page, read What Vibe Coding Is, and Where It Breaks.