1. Write the brief before any design
Most AI landing pages look the same because the prompt was “make me a landing page”. The fix is boring: write the brief first. Who the page is for, the one action you want, and the three facts that must be on it. Claude turns a real brief into a real page; it turns a vibe into slop.
2. Get three directions, not one
Ask for three distinct visual directions as separate pages — name the aesthetic in each (e.g. spec sheet, editorial, terminal). Judging real pages beats imagining them; you’ll reject two in seconds and know exactly why.
This site went through the same fork: a loud retro direction lost to the calmer one you’re reading now.
3. Build the winner as a single file
Take the winning direction and have Claude build the full page as one HTML file with a small design-token block at the top. Tokens keep every later edit consistent:
:root{
--bg:#F6F6F2; --ink:#17191C; --accent:#2B55C8; /* change once, applies everywhere */
}
In Claude Code, keep the page in a project folder and let it edit the file directly:
claude "tighten the hero spacing and make the CTA row stack on mobile"
4. Iterate with screenshots
Open the file in a browser, screenshot what looks wrong, and paste the screenshot back with one sentence about what bothers you. Screenshots beat descriptions — Claude sees exactly what you see, and each round takes a minute.
5. Ship it
A single HTML file deploys anywhere — any static host, or your own VPS. No build pipeline means nothing to break when you edit it next month.