built.with.claude
Home › Chapter 07
Chapter 07

Prompts for Claude.

The literal text I paste, organized by stage. Plus the meta-tips that make the difference between "Claude built me a generic page" and "Claude built me exactly what I had in my head."

How to read this chapter

The prompts below are templates. Copy them, fill in the brackets with your project's specifics, and paste into Claude Code (or claude.ai). Most are written assuming you have a brand guide, sitemap, and look book ready from earlier chapters.

The meta-tips at the end of each section explain why the prompt is shaped this way, so you can adapt them to situations I didn't think to cover.

The shape of a good prompt

Every good prompt for a website build has three parts:

  1. Context

    What this project is. Brand, audience, goals. Either a few sentences or a paste of the strategy doc/brand guide.

  2. The ask

    What you want Claude to do, specifically. "Build the home page hero." "Add a testimonial section after the about." Specific, scoped, one chunk at a time.

  3. The constraints

    What to avoid. "Don't change the navigation." "Use the existing color tokens, don't introduce new ones." "Mobile-first." Constraints prevent over-engineering.

If your prompt has all three, Claude has what it needs. If it's missing context, you'll get generic. If it's missing constraints, Claude will rewrite half your site to "improve" it.

Stage 01 · Setup

Starting a new project.

Run claude inside an empty project folder. The first prompt orients Claude to what you're building. There are two ways to do it — pasting everything inline (works for any setup), or pointing Claude at files in your folder (faster, less typing). Use whichever fits.

Option A: paste everything inline

Prompt
I'm building a website for [CLIENT NAME]. Here's the brand guide and sitemap. Use this as the foundation for everything we build.

BRAND GUIDE:
[paste the full brand guide — colors, fonts, voice, do's and don'ts]

SITEMAP & CONTENT MATRIX:
[paste your content matrix — page goals, primary CTAs, must-have sections]

TECH:
Plain HTML, CSS, and JS. No build step. Mobile-first responsive. [Note any libraries: GSAP, Tailwind, etc.]

For now, just confirm you've read this and ask me any clarifying questions. Don't build anything yet.

Option B (better): drop the files in a folder and let Claude read them

Save all your project files into the project folder before you run claude. Brand guide doc, sitemap, content matrix, look book screenshots, client copy drafts, photos, anything you'd otherwise be pasting in. Folder layout might look like:

my-project/ ├── brand-guide.md ├── sitemap.md ├── content-matrix.md ├── look-book/ │ ├── reference-01.png │ └── ... ├── client-copy/ │ └── about-page-draft.docx └── photos/ └── (or use Cloudinary — see Chapter 06)

Then your first prompt is much shorter:

Prompt
I'm building a website for [CLIENT NAME]. All my files for this project are in the [FOLDER NAME] folder on my computer — go read through them (brand guide, sitemap, look book, content drafts, whatever's in there). Once you've got the picture, confirm you understand the project and ask anything that's unclear before we build.

Tech: plain HTML, CSS, and JS. No build step. Mobile-first responsive. [Note any libraries.]

Once Claude has read everything and answered any questions, kick off the build incrementally — one page at a time. Start with the index page.

Follow-up
Cool. Let's start with the home page (index.html). Build the simplest version that hits the structure in the sitemap and the visual notes from the look book. Don't build any other pages yet.
Why this works

Asking Claude to not build yet is the move. It forces context-loading without commitment. Claude will surface gaps you didn't notice — "what's the donate platform — Stripe? PayPal? Both?" — and you fix them before any code is written.

Option B (files in a folder) keeps your prompts short and your reference material organized in one place. When you come back to the project two months later for an update, everything you need is still there in the folder. No hunting through chat history.

Stage 02 · The first page

Building the home page.

Once Claude is oriented, build one page at a time. Start with the home page since it tells you what your design system looks like.

Prompt
Build the home page (index.html) and a shared style.css.

STRUCTURE (from sitemap):
- Hero: full-width, headline + subhead + primary CTA. [Photo/video/abstract — your call from look book]
- Brief mission section, two columns (text left, image right) on desktop, stacked on mobile
- Three impact stats in a row
- Event callout block
- Donate CTA
- Footer

DESIGN REFERENCES (from look book):
- [Reference 1 URL] — I like the way the headline overlaps the image without becoming illegible
- [Reference 2 URL] — I like the soft shadow under the cards and the spacing between sections

Build the simplest version that hits these structural and visual notes. Don't add fancy animations yet — we'll layer those in later. Use CSS variables for all colors and font sizes so they're easy to adjust.
Why this works

Show, don't tell. URLs paired with one-sentence reasons give Claude something concrete to capture. "Make it modern" gives Claude nothing.

"Build the simplest version" is critical. AI tools love to over-engineer — adding parallax, scroll snap, animations you didn't ask for. Tell it to ship the basics first.

Stage 03 · Iterating

Tweaking what's there.

Once a page exists, you'll want to adjust it. Specific, surgical prompts beat broad ones.

Good iteration prompt
The hero feels too tall on desktop. Reduce the padding by about 25%. Don't change anything else.
Better iteration prompt
The hero feels too tall on desktop and the headline is competing with the photo. Reduce the hero vertical padding by about 25%, and bump the headline weight from 600 to 700. Leave everything else alone.
Bad iteration prompt
Make the hero better.
Why this works

Specificity = control. Claude can change one thing as easily as ten things. The narrower your ask, the more predictable the result.

"Don't change anything else" is a magic phrase. Without it, Claude will sometimes "fix" things it perceives as related — and you'll spend twenty minutes finding what changed.

Stage 04 · Adding pages

Building the rest of the site.

Once the home page is solid, you have your design system. Other pages should reuse the existing tokens, components, and patterns.

Prompt
Build the About page (about.html).

STRUCTURE:
- Photo hero with the org's mission statement as a centered quote-style headline
- "The problem we solve" section (two columns, image and copy)
- "What we do" (three feature cards in a row)
- Founders preview section linking to a separate Founders page
- Donate CTA

Reuse the navigation, footer, color tokens, and component patterns from index.html. Don't introduce any new visual concepts unless I ask. Mobile-first.
Why this works

"Reuse the existing patterns" keeps the site consistent. Without that line, Claude will sometimes design page two as if it's a totally different site, with new fonts, new spacing, new card styles. You don't want a Frankenstein site.

Stage 05 · Adding interactivity

Animations and transitions.

Once the structure is solid across all pages, layer in the polish.

Prompt
Now let's add scroll-reveal animations across the site. When a section enters the viewport, it should fade in and slide up by about 24px over 600ms. Use IntersectionObserver — no GSAP needed for this. Apply to: section headlines, paragraph blocks, card grids, image blocks.

Don't apply to: the navigation, the hero (it should be visible immediately), or the footer.

Add a prefers-reduced-motion override that disables the animations for users who don't want motion.
Why this works

Saying where to apply and where not to prevents Claude from animating things that should be visible immediately. The reduced-motion request is a small thing that signals "I care about accessibility" and Claude will follow that pattern elsewhere too.

Stage 06 · Bug fixing

When something's broken.

Describe the symptom, not the diagnosis. Let Claude figure out the cause.

Prompt
On mobile, the buttons in the hero are stretching to full screen width and look oversized. They look fine on desktop. What's happening? Show me the rule that's causing it before changing anything.
Why this works

"Show me the rule before changing anything" is huge. It forces Claude to explain its reasoning, which catches misdiagnoses early. Sometimes Claude will identify a rule, you'll see it, and realize the problem is actually somewhere else — without losing time on a wrong fix.

Stage 07 · Cleanup & pre-launch

The final passes.

Prompt
Pre-launch audit. Look at the entire site and report on:
- Missing alt text on any images
- Hardcoded colors not using CSS variables
- Any inconsistent spacing (sections that should be equal padding but aren't)
- Any text contrast issues against backgrounds
- Any broken links

Don't fix anything yet. Just give me the punch list and I'll prioritize.
Why this works

Pre-launch audits catch the small things that pile up across a project. The "don't fix yet" framing keeps you in control of what gets touched right before launch — last-minute "improvements" are how bugs get introduced.

Reminders to bake into your prompts

Claude is good at making things, but Claude has blind spots. There are a handful of things Claude will skip or do inconsistently unless you specifically ask. Add a line about each of these to your prompts — especially during the first page build and any iteration that touches multiple sections.

  • "Make this fully responsive and mobile-friendly." Claude defaults to desktop-first thinking unless you push. Be explicit. "Mobile-first" is the magic phrase.
  • "Keep margins and spacing consistent across the page." Claude will sometimes use 40px padding on one section and 56px on another for no reason. Tell it to use a single spacing rhythm and stick to it.
  • "Use the existing color tokens. Don't introduce new colors." Otherwise you'll find a stray hex code that doesn't match your brand showing up halfway down the page.
  • "Use semantic HTML." <header>, <nav>, <main>, <section>, <footer> instead of generic <div> everywhere. Better for SEO and accessibility.
  • "Add descriptive alt text to every image." Not "image of a thing." Real descriptions of what's in the image.
  • "Check text contrast against backgrounds — WCAG AA minimum." Light text on light backgrounds is the most common silent regression.
  • "Optimize for SEO basics." Page title, meta description, one h1 per page, headings in order (h2, then h3, not h2 then h4). Mention this on the home page prompt — Claude will then do it on the rest.
  • "Make this UX-friendly." Vague but useful. Translate to: clear primary action, no surprise behaviors, hover states on clickables, focus states for keyboard users, links that look like links.
  • "Don't break what's already there." Especially during iteration. "Update the hero, don't change anything else" beats just "update the hero."

You can paste a chunk of these into every meaningful prompt. Or, save them as a reusable prompt snippet you tack on at the end:

Reminders for this build: mobile-first responsive, consistent spacing, use existing color tokens, semantic HTML, alt text on every image, AA contrast, one h1 per page, headings in order. Don't change anything I didn't ask about.

What to check after Claude builds

Claude can write code. Claude can't tell whether the result feels right. That's your job. After every meaningful build session, run through a quick check before you move on:

  1. Open it on your phone

    Not just a narrow browser window. Your actual phone, on the actual site. Things look different.

  2. Click every link and button

    Make sure they all go where they should. Make sure forms actually submit. Buttons that do nothing are a quiet but common bug.

  3. Check spacing and alignment across pages

    Switch between pages and look for inconsistencies. Section padding the same? Line lengths the same? Type sizes the same? If anything feels off, it usually is.

  4. Open the browser console

    Right-click any page → Inspect → Console tab. Red errors mean something's broken even if the page looks fine. Tell Claude what the errors say and ask for fixes.

  5. Tab through the page with your keyboard

    Hit Tab and walk through every interactive element. You should see clear focus indicators on every link, button, and form field. If focus disappears, that's an accessibility bug.

  6. Read the page out loud

    Catches awkward copy. Catches headlines that don't actually say anything. Catches "thing one / thing two / thing three" placeholder text that escaped to production.

If something's wrong, prompt Claude to fix it specifically. If many things are wrong, you may have moved too fast — slow down, fix one thing at a time.

Universal meta-tips

  • Give visual references whenever possible. A URL with a "why" beats five paragraphs of description.
  • Constrain scope or Claude will over-engineer. "Don't add anything I didn't ask for" is your friend.
  • Iterate, don't replace. "Make the headline 20% larger" beats "redo the hero."
  • Ask for the simplest version first. You can always add complexity. Removing it is slower.
  • Show your work, then ask Claude to extend it. Once you have one good section, ask Claude to "use the same pattern" for the next.
  • If you're stuck in a loop, start fresh. Sometimes Claude gets attached to a wrong direction. Open a new chat (or in Claude Code, run /clear) and re-prompt with cleaner context.
  • Save prompts that work. A prompts file in your project folder. Future you will thank you.
ACF Example

The first prompt for ACF

Here's the actual first prompt for the ACF build, paraphrased. The brand guide and sitemap got pasted in full.

I'm building a website for Advancing Communities Forward, a 501(c)(3) nonprofit serving foster youth in Sacramento. Here's the brand guide and sitemap.

[brand guide pasted — colors, Plus Jakarta Sans + DM Sans typography, voice attributes, do's and don'ts]

[sitemap pasted — 7 pages with goals and primary CTAs]

TECH: Plain HTML/CSS/JS. GSAP + ScrollTrigger via CDN for scroll animations. Cloudinary for images. Stripe Checkout for donations. No build step.

Confirm you've read this. Then we'll start with the home page.

From there, every page got its own prompt with the look book references and section list. Total build was about 12 working sessions across 3 weeks.

What's next

You have prompts for every stage. Next chapter: a small showcase of UI elements I've used or built — text effects, frames, buttons — with the actual code, so you have real reference patterns to point Claude at.