Claude, Build Me a Website

A One-Prompt Landing Page Experiment

Well, actually, it took one sneaky meta-prompt and a lazy cut-and-paste to pull this off.

Here's the real prompt that spawned my experimental webpage. Fair warning: it looks intimidating, like something a wizard would chant, and honestly... it kind of is. But here's the plot twist: I didn't write that scary prompt myself. I ethically cheated by using a simple meta-prompt to generate it for me. Then I just copied the result over to Claude, hit enter, and boom: index.html, built while I did absolutely nothing productive. What actually happened here is I used AI to write my specification, then used AI to build against it. Little did I know it is basically spec-driven AI development with extra laziness, until I attended a workshop by IBM in Cambridge on Spec Coding with OpenRAG (Thanks, David Jones-Gilardi, for elucidating the concept for me!)

Steps:

1. I chose an existing website for context. I used adsconsult.us as a reference.

2. Wrote the meta-prompt below to generate the prompt, also below, as the task.

3. Pasted the prompt back into Claude to generate the webpage, after review.

The Meta-prompt

“tell me how to prompt for creating an index.html page for my business called "JF Financial Services" that provides Financial services. It should have a style sheet similar to adsconsult.us”

The Prompt (generated)

Create a single-page index.html for a business called "JF Financial Services"

that provides financial services (e.g., financial planning, investment

advisory, tax consulting, retirement planning).

Style and structure requirements (inspired by adsconsult.us):

- Clean, modern, minimalist single-page layout

- Dark hero section at top with a bold headline and a short terminal/code-style

  visual element (e.g., a mock "financial-health-check" script output)

- Sans-serif typography, generous whitespace, one accent color (e.g., navy blue

  or green for finance)

- Sections in this order:

  1. Hero: headline + subheadline + contact email + CTA button

  2. "The Problem": 3 short pain-point cards specific to financial services

     clients (e.g., poor retirement planning, tax inefficiency, lack of

     personalized advice)

  3. "About Us": founder/advisor bio, credentials, years of experience,

     trust stats (e.g., "X years experience", "1:1 client access",

     "free consultation")

  4. "Our Process": 3-step numbered process (e.g., Book a consultation →

     Get a tailored financial plan → Ongoing advisory)

  5. "Services": grid of 6-8 service cards (e.g., Retirement Planning,

     Tax Strategy, Investment Advisory, Estate Planning, Wealth Management,

     Risk Assessment)

  6. Client testimonial block

  7. "Pricing": transparent pricing table with service tiers and rates

  8. Comparison section: "With JF Financial Services" vs "Without proper

     financial guidance" (two-column bullet list)

  9. Final CTA: "Book a free consultation" with contact button

Technical requirements:

- Use a single embedded <style> block or a linked style.css file (specify

  which you prefer)

- Fully responsive (mobile-first, use CSS flexbox/grid, media queries)

- Semantic HTML5 (header, section, footer tags)

- No external JS frameworks — vanilla HTML/CSS only

- Include placeholder text and my email as [your email]

- Comment the CSS sections for easy editing later

The Landing Page

A screenshot of the landing page. Reader can generate the html file from the prompt.

Why This Matters

Here's the part I glossed over while pretending to be lazy: the hard part of "AI-assisted building" has never really been the building. Claude can generate a landing page in seconds and that's table stakes now. The hard part is knowing what to ask for, in enough detail that the output doesn't need six more rounds of "no, not like that" to become usable. In other words, good specs.

That's exactly what the meta-prompt solved for me. Instead of freestyling a request and iterating my way to something decent (the classic "vibe coding" loop: prompt, react, prompt again, repeat until it looks right), I let AI write the specification first: the sections, the order, the constraints, the styling references. Then I reviewed the specifications and made sure the future maintainability of the output is baked in. This is an opportunity replace the placeholders with actual data, like [your email] with the right email address, which is a lot easier than changing it in the html file it produces. Only then did I hand it off to build. The difference sounds subtle, but it's the difference between improvising a website and building one against a blueprint, even if I outsourced writing the blueprint too.

The result is a page that came out structurally complete on the first pass, with the right sections, right order, right constraints. This is not because I'm a great prompt engineer, but because I made the AI do the specifying before it did the building, although Google's TCREI prompt framework training helped. The real trick here is that it's repeatable for basically anything you'd want Claude, or any coding agent, to build for you. Ask it to help you write the spec first, then build against that. Turns out laziness and discipline aren't opposites. They're just two ends of the same prompt.