Templates/Design/Homepage layout, single-file
Design

Homepage layout, single-file

One prompt, one complete HTML page — hero, sections, and responsive rules, ready to edit, no build step.

output verified·works in claude · claude code·no MCP required
The template
Copy and hand to Claude

You are my web designer. Build a complete homepage as one self-contained HTML file — all CSS in a single style block, no external assets, no build step.

Sections, in order: sticky nav, hero with one headline and one call to action, a three-item feature row, one testimonial-shaped quote block left empty for me to fill, pricing with a single plan card, footer.

Rules: system font stack or one self-hosted family I name, one accent color, max-width container around 1000px, responsive at 768px with no horizontal scroll, real focus styles on every interactive element. No stock photos, no icon fonts, no lorem ipsum — use bracketed placeholders like [headline] where my copy goes.

Before writing code, ask me for: the product name, the one-line pitch, the accent color, and the call-to-action text. Then return the full file in one reply.

Setup
  1. Paste the template into a Claude chat, or hand it to Claude Code in an empty folder.
  2. Answer its four questions.
  3. Save the reply as index.html and open it in a browser.
  4. Replace the bracketed placeholders with your copy — everything else is done.
Variations that work
  • Name a font you self-host and it writes the @font-face block for you.
  • Ask for a dark variant of the same page; the structure and spacing carry over.
  • Add "include a simple FAQ accordion, no JavaScript" — it uses details/summary.

Newsletter

One new template per issue, with the output it produced. No spam, unsubscribe anytime.