Claude Code prompt to build a landing page
Landing pages generated in one shot tend to arrive as a single unreviewable file. This prompt has Claude Code split each section into its own file, keep JavaScript out unless a section earns it, then run the production build and report the real payload numbers from your terminal before you commit anything.
Last updated
Build a single-file-per-section landing page in this repo for {{resource}}. Sections, in order: hero with one headline and one call to action, a three-item feature row, a code or product snippet block, a social proof placeholder, and a footer with real nav links. Constraints: semantic HTML landmarks, no client-side JavaScript unless a section needs it, all images with explicit width and height to prevent layout shift, and a single accent color defined once as a CSS variable. Mobile first; the layout must work at 320px wide. When done, run the production build, report the total CSS and JS payload from the build output, and run any link checker or HTML validator available in the repo. List each section file created and flag any copy you invented as placeholder so I can replace it.Customize it
Runs in your browser. Nothing you type here is sent anywhere.
Build a single-file-per-section landing page in this repo for users. Sections, in order: hero with one headline and one call to action, a three-item feature row, a code or product snippet block, a social proof placeholder, and a footer with real nav links. Constraints: semantic HTML landmarks, no client-side JavaScript unless a section needs it, all images with explicit width and height to prevent layout shift, and a single accent color defined once as a CSS variable. Mobile first; the layout must work at 320px wide. When done, run the production build, report the total CSS and JS payload from the build output, and run any link checker or HTML validator available in the repo. List each section file created and flag any copy you invented as placeholder so I can replace it.
Same task in other tools
Questions about this prompt
The agent cannot see the page it built. How do I review the visual result?
Ask it to start the dev server and open the URL yourself. Because every section is its own file, feedback like tighten the hero or drop the third feature maps to one file per change, which keeps follow-up edits small.
How do I get my real copy in without regenerating the page?
The prompt makes the agent flag invented copy as placeholder. Paste your actual messaging and ask it to rewrite only the flagged strings, or edit the section files directly since text and structure are not tangled together.
It pulled in a CSS framework I never asked for. How do I prevent that?
State the styling stack in the first line, plain CSS only, or name your existing Tailwind setup. Claude Code follows repo conventions when they exist, so an empty repo is where you must be explicit.