🛠️ Build Your First Mini App with Claude Code · Week 1: From Zero to Your First Live Web Page

How to Write CLAUDE.md: Make Claude Code Remember Your Project Rules (Template + Anti-Patterns)

Write it once, and it reads it on every launch

一句话先懂 · TL;DR

CLAUDE.md is the project file Claude Code reads every time it starts. Write down the tech stack, common commands, hard rules, and what's out of scope, and it stops repeating the same mistakes. Includes a copy-paste template and three common ways people get it wrong.

Why It Keeps Forgetting

Today you tell it "no frameworks, just one html file". Tomorrow you relaunch and it installs a pile of stuff again. It's not dumb. Every launch is a brand-new conversation, and it doesn't remember what you said yesterday.

The fix is a CLAUDE.md file in your project folder. It reads this file first on every launch and treats the rules inside as the default assumptions.

🔆CLAUDE.md is the "team rules" sheet taped to the intern's desk: which tools to use, how to run the tests, which things are absolutely off-limits. The new hire doesn't need you to repeat it every day.

What a Minimal CLAUDE.md Looks Like

Type /init in Claude Code and it will scan your project and generate a first draft. Then check and fill in these three sections: tech stack, common commands, hard rules.

# 待办清单网页

## 技术栈
- 单个 index.html,原生 HTML/CSS/JS,不引入任何框架和外部库
- 数据存浏览器 localStorage

## 怎么跑
- 直接用浏览器打开 index.html
- 改完先在手机竖屏(或窄窗口)看一遍

## 红线
- 不要新增文件,所有代码留在 index.html 里
- 界面文字全部中文
- 改功能前先说明会动哪些部分,等我确认

## 这次不做
- 登录、多用户、云同步

What to Write, and What Not To

The test in one sentence: if it's still true a month from now, write it. If it only applies today, don't.

- ✅ "All UI text in Chinese": still true in a month.
- ✅ "Explain the scope of a change and wait for my confirmation before editing": a stable way of working together.
- ❌ "Finish the delete button today": expires tomorrow, and will mislead it if left in.
- ❌ Pasting in the whole requirements document: too long, it has to read it every time, and the important parts drown.

⚠️The longer CLAUDE.md gets, the less useful it is. If it's more than one screen, ask yourself which parts are temporary and which it already knows anyway.

自测 · 学完检查一下

想真正动手做题、记进度、攒连胜?到互动课里练。

Every time Zhao launches Claude Code he has to say again "UI in Chinese, no external libraries". What's the real fix?

答案:Write both rules into the project's CLAUDE.md, which it reads automatically on every launch

Stable, unchanging rules belong in CLAUDE.md. Copy-pasting is doing by hand what a file should do. Switching models doesn't fix the mechanism of "a new conversation has no memory". Never closing the terminal isn't realistic, and a conversation that runs too long makes it more likely to drift anyway.

What are the three sections a minimal usable CLAUDE.md must have?

答案:Tech stack, how to run it (common commands), hard rules

These three answer the three questions it asks most: what to build with, how to verify, and what not to touch. Task lists are temporary and don't belong here. It reads the code itself, so there's no need to copy it in.

Which of these least belongs in CLAUDE.md?

答案:"Finish the Excel export feature by this Wednesday"

That's a task with a deadline, expired by next week. Putting it among long-term rules only confuses it. The amount unit, the test command, and the protected directory are all rules that still hold a month from now, which is exactly what CLAUDE.md is for.

True or false: to give the AI the fullest picture, you should paste the entire 30-page requirements document into CLAUDE.md.

答案:False

It has to read all of CLAUDE.md on every launch, and 30 pages will drown a key rule like "don't add new files". Keep the requirements in a separate file and write one line in CLAUDE.md: "Requirements are in docs/requirements.md; read the relevant section before building a feature".

Liu's CLAUDE.md only has the tech stack. Every time the AI finishes editing it just says "done", and he has to guess how to verify. Which section should he add?

答案:"How to run": spell out how to open it and the verification steps, and it will self-test the same way when done

If it doesn't know how to verify, all it can say is "done". Write in "open index.html in a browser, check in phone portrait mode" and it will run through that itself after each change, catching the obvious problems before they reach you.

想边练边学,而不只是读?

到互动课里答题、记进度、攒连胜——游客即可试学,无需注册。

进入互动课程 →

Learn something new — don't miss updates

New courses, features and learning tips. Occasional emails, unsubscribe anytime.