Two weeks ago, this site was an empty repo. Today it is 27 pages live. Lighthouse 98 desktop. Mozilla Observatory 110 out of 100. WCAG 2.2 AA. Clean Bing URL inspection. Sub-second load on a cold cache. Built with Claude. No framework. No build step except CSS minification. Hosted on Netlify free tier. The methodology fits in a single prompt. We published it.

What the prompt actually does

Six briefing rounds before any code gets written. Business. Content. Style (five sub-rounds). Stack. Constraints. Scoring goals. Each round forces a specific answer to a specific question, in a specific order. Thin answers get pushed back on. That is the design.

After round three, Claude generates a BRAND.md file. Hex codes. Type scale. Spacing tokens. Component patterns. Voice rules. Twelve sections, all in one place. Every subsequent page reads from it. Nothing drifts across 27 pages because nothing has the chance to drift.

After round six, Claude proposes an architecture: site map, page-build order, exact scoring rubric. You approve. Then you build pages one at a time, and every page scaffolding starts by re-reading BRAND.md.

That last part is the entire trick.

The prompt is not the value. The structure is.

You could read the prompt, throw it away, and reproduce most of the value just by following the briefing pattern. Business, then content, then style, then stack, then constraints, then scoring goals. Generate the brand file before building anything. Force every page to read from it. That is the methodology in one sentence.

The prompt just makes it automatic.

BRAND.md is architecture, not design

Most "design systems" are component libraries. BRAND.md is a token registry. Twelve sections: identity, color, typography, spacing, layout, components, motion, imagery, voice, accessibility, brand assets, change log. You write it once. Every page reads from it. If a page needs a new color, the change goes into BRAND.md first, then propagates. Six months from now, when you want to swap the accent color or update the body type, you change one file. The site updates itself.

AI does the scaffolding. You do the taste.

Claude is exceptional at:

  • Writing semantic HTML with the right schema.org markup
  • Calculating SHA-256 hashes for the Content Security Policy
  • Generating four image sizes from one source headshot
  • Producing 200 lines of CSS that all use the same custom properties
  • Catching when a button does not have an accessible label

Claude is not great at:

  • Knowing when 4.3 contrast is fine vs. when it has to be 4.5
  • Deciding whether the headline should be "Apple-event ambitious" or "editorial quiet"
  • Catching that a word sounds like 2018 deck-speak
  • Noticing the orange you picked is too saturated when applied across the whole nav
  • Telling you the third draft of the about page is still not the story

The decisions Claude cannot make are the ones that determine whether the site is good. The decisions Claude can make are the ones that determine whether the site is built at all.

What we did not have to build

The recipe ships with the boring stuff already decided:

  • Strict Content Security Policy with SHA-256 hashes for every inline script
  • Full security header set (HSTS, X-Frame-Options, Permissions-Policy, Cross-Origin-Opener-Policy)
  • Schema.org JSON-LD on every page (Organization, Service, AboutPage, Article, Person)
  • Self-hosted woff2 fonts with preload and font-display: swap
  • sitemap.xml, robots.txt, 404 page
  • IndexNow automation that pings Bing, Yandex, Naver, Seznam, and Yep on every push
  • Mobile favicon set: apple-touch-icon, 32x32, 192x192, webmanifest, theme-color
  • Skip link, semantic landmarks, focus-visible styles, prefers-reduced-motion honored
  • Open Graph + Twitter cards on every page

Most of those produce zero visible difference to the visitor. But every single one moves a score. Lighthouse SEO 100 requires the schema and the OG card. Mozilla A+ requires the security headers and the CSP. Accessibility 100 requires the labels and the focus states. None of these are interesting to debate. All of them are mandatory if you want the scores. The prompt makes them defaults.

What we cut

This is what we tried and removed before shipping:

  • A draft of the homepage hero that used four colors. We were down to two by the next morning.
  • A scroll choreography that revealed every section individually. Looked great. Killed Lighthouse Performance by 6 points. Cut it.
  • A pricing table on the engagement page that listed eight options. Replaced with three published tiers and a "bigger work moves through proposals" note. Confidence reads better than completeness.
  • An off-focus blog post that drifted from the modernization positioning. Killed.

Cuts are the part you cannot prompt. They require you to have an opinion about what the site is.

What this prompt is and is not for

It is for marketing, agency, consulting, professional services, portfolio, and small e-commerce sites where content is mostly static. Vanilla HTML, CSS, and JavaScript. No framework. No build step.

It is not for SaaS products with user accounts, real-time data, or heavy client-side logic. If your site needs React, the prompt is the wrong tool. If your site is a brochure with a contact form and proof of work, this is the right tool.

Take the prompt

The prompt is on its own page. Free. No email gate. No sign-up. Copy it. Share it. Run it on your own business. If you bring the taste, the prompt brings the structure.

The Claude prompt that built this site

Six briefing rounds. A generated BRAND.md style document. The methodology behind dadosconsulting.com. Free to use, free to share.

Open the prompt