built.with.claude
A teaching repo by Michelle

Make beautiful websites without being a developer.

A practical, opinionated playbook for building real sites for real clients using Claude. Discovery, planning, design, build, and publish — start to finish, with one nonprofit case study running through every chapter.

How this works

Read in order. Each chapter builds on the last.

This isn't a reference dump. It's a workflow. The chapters follow the chronological order you'd actually use to build a site: get the client's input, plan the pages, gather visual inspiration, set up your tools, build, publish, then maintain.

Start at Chapter 01 →
The chapters

The whole journey, one click each.

  1. 01

    Start Here

    Discovery, the client intake form, brand input, and reference site research.

    →
  2. 02

    Sitemap & Content

    Decide what pages exist, what's on each one, and where the conversions live.

    →
  3. 03

    The Look Book

    How to gather visual inspiration before you build, and why "why I like it" matters more than "what I like."

    →
  4. 04

    Set Up Claude Code

    Install on Mac or Windows, set up your project folder, get ready to actually build.

    →
  5. 05

    The Design Kit

    The tools and sites I actually use. Inspiration, components, fonts, color, animation.

    →
  6. 06

    Images & Media

    Where to source photos, video, and frames. Cloudinary setup, and how not to get billed.

    →
  7. 07

    Prompts for Claude

    The literal prompts I paste, organized by stage. Plus the meta-tips for talking to AI.

    →
  8. 08

    UI Showcase

    A handful of polished elements with code — text effects, frames, buttons, animations.

    →
  9. 09

    Publishing

    GitHub Pages vs. Netlify, custom domains, and a plain-English breakdown of what you'll be charged.

    →
  10. 10

    Common Traps

    What goes wrong: overage charges, broken builds, cached images, and how to dodge them.

    →
  11. 11

    Build Your Own Tools

    Once you have the basics, you can build little AI-powered tools for your workflow.

    →
The case study

One real client. One real outcome. Threaded through every chapter.

Every chapter shows how the work looked for Advancing Communities Forward, a Sacramento nonprofit serving foster youth. From their intake form responses to the live site at advancingcommunitiesforward.com. Same workflow you'll use, with real artifacts at every step.

See ACF live ↗
About this repo

This is a teaching repo, not a product.

Built and maintained by Michelle, a freelance marketing pro who taught herself to build sites alongside Claude. Released under the MIT license, which means you can copy, modify, and share anything in here for your own work. The methodology is mine, but the tools, links, and credits all belong to the original makers — see CREDITS.

If something here helps you ship a site you're proud of, that's the whole point. Tell me about it.