Beginner 10 min

CLAUDE.md: Your Project's Brain

Imagine hiring an assistant who starts every conversation by reading your project notes — your brand colors, your rules, your preferences. That's what CLAUDE.md does. It's a file that lives in your project folder and teaches Claude about your specific project before you say a word.

No more repeating yourself. No more "I told you this already." You write the rules once, and Claude follows them every time you work together.

The Problem CLAUDE.md Solves

Without CLAUDE.md, every conversation starts from zero. Claude doesn't know your brand, your preferences, or your project structure. It makes reasonable guesses — but they're still guesses. With CLAUDE.md, Claude reads your rules before you even type your first message.

Without CLAUDE.md
you: Build me a contact page
Claude builds something generic — random blue color scheme, Arial font, square corners. Looks nothing like the rest of your site.
With CLAUDE.md
you: Build me a contact page
Claude builds it with your brand colors, matching navigation, consistent typography, rounded corners — all without being told. It read CLAUDE.md first.

Same request. Completely different results. The only difference is that one project has a CLAUDE.md file and the other doesn't.

What Goes in CLAUDE.md

Think of CLAUDE.md as a short briefing document for a new team member. What would they need to know to start contributing without asking a dozen questions? Here are the key sections:

A Real Example

Here's what a CLAUDE.md looks like for a fictional coffee shop website. Notice how it's written in plain English — no code knowledge required. Just clear, specific instructions that anyone could write.

CLAUDE.md
1# CLAUDE.md — Brew & Bean Coffee Shop
2
3## Project Overview
4Website for Brew & Bean, a cozy neighborhood coffee shop
5in Portland. Target audience: locals aged 25-45 who value
6quality coffee and community.
7
8## Design Rules
9- Colors: Cream (#FFF8F0) background, espresso (#3C2415)
10 text, sage (#7B9E6B) accents
11- Font: Playfair Display for headings, Lato for body
12- Rounded corners (12px) on all cards and buttons
13- Warm, inviting photography — no generic stock photos
14- Mobile-first — most customers browse on phones
15
16## Voice & Tone
17- Friendly and warm, like a barista who remembers your name
18- Never corporate or stiff
19- Use "we" and "our" — it's a community place
20
21## Don'ts
22- No pop-ups or modal dialogs
23- No auto-playing anything
24- Never use Comic Sans (seriously)
25
26## File Structure
27- index.html — Home page with hero, featured drinks, hours
28- menu.html — Full menu with prices
29- about.html — Our story, the team, sourcing
30- images/ — All photos

Thirty lines. That's all it takes. Every page Claude builds for this project will use cream backgrounds, espresso-colored text, Playfair Display headings, and rounded corners — automatically.

How Claude Uses It

When you open Claude Code inside a project folder, Claude automatically reads the CLAUDE.md file before you say anything. Every request you make after that inherits the context. You don't need to reference it or load it manually — it just works.

Working with CLAUDE.md loaded
you: Add a new page for our events
Claude: I've created events.html with:
- Cream (#FFF8F0) background
- Espresso (#3C2415) text
- Playfair Display headings, Lato body text
- 12px rounded corners on event cards
- Navigation matching index.html, menu.html, about.html
- Mobile-responsive layout
Created events.html

You asked for an events page. You didn't mention colors, fonts, corners, or navigation. Claude knew all of that because it read CLAUDE.md first. This is the power of persistent project context — you focus on what you want, and Claude handles the how based on your rules.

Building Up Over Time

CLAUDE.md isn't a one-time thing you write and forget. It's a living document that grows with your project. The best approach: start small and add rules as situations come up.

Here's what that looks like in practice. Say Claude used a pop-up for the newsletter signup, and you hate pop-ups:

Updating CLAUDE.md after a bad result
you: I don't like that popup. Remove it and use an inline signup form instead. Also, add a rule to CLAUDE.md: never use popups or modals for any reason.
Claude: Done. Replaced the popup with an inline newsletter form in the footer.
Also added to CLAUDE.md under Don'ts:
- Never use popups or modals for any reason

Now Claude will never use a popup on this project again. Your CLAUDE.md just got smarter.

Pro Tip

Your CLAUDE.md doesn't need to be long. Even 10 lines of clear rules will dramatically improve consistency. Start small and grow it. A short, well-written CLAUDE.md beats a sprawling one that Claude has to parse through. Focus on the rules that matter most to you.

Try This

Create a CLAUDE.md for the recipe site you built in Lesson 4. Include:

  1. A project name and one-sentence description
  2. Your color palette (at least 3 colors with hex codes)
  3. Font preferences for headings and body text
  4. At least 2 "do" rules and 2 "don't" rules

Then ask Claude to add a new feature — like a "favorites" page or a search bar — and see if it follows your rules without being reminded.

Review Flashcards

Click each card to reveal the answer. Use the arrows to move between cards.

Card 1 of 5

Fill in the Blank

The section tells Claude what the project is and who it's for.

You should include color values as so Claude uses the exact shades you want.

CLAUDE.md is a that grows and evolves as your project develops.

Key Takeaways

Lesson 4: Multi-Page Sites Course Home Lesson 6: Images & Design