Claude landing page prompts

Let the hero be the test

A landing page fails or passes on its first screen, and you can judge a first screen in seconds. Asking Claude Code to stop after the hero turns a twenty-minute build into a two-minute one with a decision at the end of it. If the headline size or the accent is off, you correct two values in the tokens file and every later section inherits the fix.

Say what "stop" means: run the build, say the hero is ready, and wait. Otherwise the stop is a sentence in the middle of a longer answer.

Keep the copy in copy.md

Write the headline, the subline, the feature names, the plans and the questions in one Markdown file, in page order. Tell Claude to use it word for word and to report any section with no copy. This also gives you one place to edit later: change a line in the file and ask Claude Code to pick up the change.

Draft in chat, build in Claude Code

If you have not decided the look, the chat app is a quick place to find it. Ask for the hero alone as one HTML file, look at the preview, and change values until it is right. Then carry the decided values into the Claude Code prompt as numbers. The chat draft is a sketch; do not try to grow it into the site. Claude chat or Claude Code covers the hand-over.

What a Claude landing page prompt should contain

• The one action and the exact button label.
• Where the copy is, and an order to use it unchanged.
• Two passes: tokens, header and hero, then stop; the rest after your go.
• The hero's layout in columns, ratios and degrees, not adjectives.
• The later sections in order, each with what it holds.
• A check after each pass: build, two widths, a list of what overflows.

A prompt to start from

Build a landing page for [product], a [what it is] for [who it's for]. The one action is "[button label]". All the copy is in ./copy.md: use it word for word, and if a section has no copy, tell me instead of writing your own.

Work in two passes. Pass 1: tokens, header and hero only, then stop and wait. Pass 2, after I say go: the remaining sections, using only the tokens from pass 1.

Stack: Vite + React + TypeScript, plain CSS with custom properties in src/tokens.css. No UI library and no icon set.

Look: ground #fbfaf7, ink #14130f, muted #6d6a61, one accent #1f5c4a for the button and nothing else. [Typeface] for headlines, 80px desktop / 42px phone, weight 500, tracking -0.02em. Body 18px / 1.55, lines no longer than 62 characters. Sections 144px apart on desktop, 80px on phones. Buttons 52px tall, radius 26px.

Hero: headline on the left across 7 of 12 columns. On the right, a 5:4 panel showing [the product screen] tilted 6°; it straightens to 0° over the first 400px of scroll.

Sections after the hero, in order: one line of proof; three steps numbered 01 to 03 in 14px mono; four features in a 2 × 2 grid, each with a 4:3 image slot; plans; six questions as a disclosure list; a closing line with the button.

Motion: only the hero panel's tilt and a 0.2s colour change on the button. With prefers-reduced-motion the panel sits flat.

Phones: one column, the panel goes under the headline, and the button is fixed to the bottom edge, 16px from each side.

After each pass, run npm run build, open the page at 390px and 1440px, and list anything that overflows or wraps badly.

Written for this page as a starting point; swap the parts in [brackets] for your own. The full prompt of each uberdesigner template is longer and specific to one finished design, and it is tested by rebuilding the template from the prompt alone.

Keep reading

• How to prompt Claude for designThe working method for design work with Claude and Claude Code: brief, plan first, build, run and look, then correct with specifics.
• Claude chat or Claude Code for design workWhich to use for what: the Claude chat app for one HTML file to look at, Claude Code for a real project. How to move a draft from one to the other.

• Whole sites
• Components
• Artifacts
• Redesigns
• Dashboards
• Animation