CC：从零搭建宣传页到接手遗留项目

Claude Code 实战指南：从零搭建宣传页到接手遗留项目

大家好啊，最近学习了Claude Code辅助编程，所以写下了这篇复习笔记，也分享给正在探索 AI 辅助编程的朋友。

---

一、Claude Code 是什么？

Claude Code（以下简称 cc）是 Anthropic 推出的命令行 AI 编程助手。它不是 IDE 插件，而是直接运行在终端里，能读代码、改文件、跑命令、管理 git，像一个真正坐在你旁边的程序员同事。

我用它完成了两件事，正好代表了两种最常见的开发场景：

场景	Demo	核心能力
从零搭建项目	吉马程序员宣传页	规划模式、组件拆分、样式生成
接手遗留项目	JavaScript Drum Kit	读代码、写 CLAUDE.md、加功能

下面以这两个实战案例为主线，聊聊 cc 的核心理念和使用技巧。

---

二、门禁卡思维：权限模型的哲学

在把项目交给 cc 之前，有一个细节让我印象深刻——你必须先给它"门禁卡"。

cc 的设计强调最小权限 + 安全边界：AI 默认不碰你的系统，只有你明确授权它才能干活。第一次让 cc 访问某个文件夹时，它会弹出权限确认：

"Claude Code 想要访问 E:/workspace/xxx，是否允许？"

这跟请程序员来公司同理——先得给他门禁卡，他才能进办公室看代码、改文件、跑命令。而且权限只限你授权给他的那个文件夹。

这不是技术限制，而是设计哲学：AI 不该默认拥有所有权限。这也解释了为什么 Anthropic 在 cc 的安全策略上如此坚持——宁可多一步确认，也不给 AI 越界的机会。

实际配置长这样（.claude/settings.local.json）：

{
  "permissions": {
    "allow": [
      "Bash(npm install *)",
      "Bash(npm run *)"
    ]
  }
}

你可以精细控制 cc 能执行哪些命令，比如只允许 npm install 和 npm run，不让它乱删文件。

---

三、从零建站：吉马程序员宣传页

3.1 规划模式（/plan）

第一个实战：帮"吉马程序员"做一个宣传网页。

以往用 AI 写代码，最大的瓶颈在提示词——你不知道该怎么描述需求，AI 也不知道你想怎样，结果就是来回拉扯。cc 的规划模式（/plan）解决了这个问题：

/plan 的核心思路：用对话代替提示词。你不需要一次性写出一段完美的 prompt，cc 会通过"问问题"帮你把模糊的想法变成清晰的需求。

比如我说："帮我做一个宣传吉马程序员的网页"。

cc 会追问：

• 网站类型？（单页宣传站 / 多页企业站 / 其他）
• 需要哪些板块？（课程介绍 / 学员案例 / 就业数据 / 联系方式）
• 用哪个技术栈？（纯 HTML / React / Vue）
• 设计风格偏好？（科技感 / 简约 / 活泼）

这些追问不是在套模板，而是在帮你梳理你脑子里那个"隐约知道但不清楚"的需求。确认后 cc 生成一个行动计划，你审阅通过，它才开始写代码。

这个流程对一个产品经理或初级程序员来说特别友好——门槛从"写得出 prompt"降低到了"答得出问题"。

3.2 从计划到代码

最终 cc 帮我搭建了一个完整的宣传站：

cc-demo/
├── index.html
├── src/
│   ├── main.jsx              # 入口
│   ├── App.jsx               # 页面骨架
│   ├── data/siteData.js      # 所有文案集中管理
│   └── components/
│       ├── Navbar/           # 导航栏
│       ├── Hero/             # 首屏大图
│       ├── Services/         # 课程服务
│       ├── Portfolio/        # 学员案例
│       ├── Employment/       # 就业数据
│       ├── Contact/          # 联系我们
│       └── Footer/           # 页脚
└── .claude/
    └── settings.local.json   # 权限配置

几个让我意外的点：

① 数据与视图分离。cc 把所有文案抽到 src/data/siteData.js，组件只负责渲染。这不是我要求的，是它自己做的工程判断。

export const EMPLOYMENT = {
  title: '就业数据',
  subtitle: '用数据说话，我们帮助每一位学员实现职业梦想',
  stats: [
    { value: '98.5%', label: '学员就业率' },
    { value: '12,000+', label: '平均月薪（元）' },
    { value: '200+', label: '合作企业' },
    { value: '5,000+', label: '累计学员' },
  ],
  partners: ['华为', '腾讯', '阿里巴巴', '字节跳动', '百度', '京东', '美团', '网易'],
};

② 组件拆分合理。Navbar、Hero、Services、Portfolio、Employment、Contact、Footer，职责清晰，没有过度抽象也没有一团乱麻。

③ 直接可运行。生成完代码，npm run dev 就能在浏览器看到效果，没有半成品。

这就是规划模式的价值：先想清楚再动手，而不是边写边改。

---

四、接手遗留项目：JavaScript Drum Kit

4.1 CLAUDE.md：项目的"说明书"

第二个实战场景更有趣——接手一个完全陌生的项目。

cc-demo2 是一个纯粹的 HTML/CSS/JS 鼓机，按键盘 A 到 L 就能触发不同的鼓声。这是一个知名的前端练习项目（来自 JavaScript30 系列）。

但问题来了：cc 怎么快速理解这个项目？

答案是 CLAUDE.md。这是一个放在项目根目录的 Markdown 文件，cc 每次启动时会自动读取，就像新入职的程序员先看项目 Wiki。

有两种方式创建它：

1. 手动写——适合你对项目已经很熟悉的情况
2. /init 命令——让 cc 自己读代码，把理解写入 CLAUDE.md

我用 /init 生成的 CLAUDE.md 长这样：

## 项目概述
"JavaScript Drum Kit" 是一个纯 HTML/CSS/JS 实现的键盘鼓机。
按下 A 到 L 键即可触发鼓声。

## 运行方式
无需构建步骤或服务器。直接在浏览器中打开 HTML 文件即可。

## 代码架构
按键映射：每个按键 div 和 audio 元素使用 data-key 属性对应键盘 keyCode

核心逻辑：
1. window 监听 keydown 事件 → playSound()
2. audio.currentTime = 0 允许快速重复触发同一声音
3. 添加 .playing 类触发 CSS transform 放大效果 + 黄色发光
4. 监听 transitionend → 过渡完成后移除 .playing 类

4.2 双文件模式

这个项目比较特别——提供了两个 HTML 文件：

• index-START.html：给学习者的空白模板（JS 部分是空的）
• index-FINISHED.html：完整的参考实现

cc 在读代码时不仅理解了功能逻辑，还识别出了这个教学模式，并在 CLAUDE.md 里特别标注："修改功能时，需要同时编辑 START 和 FINISHED 文件"。

4.3 核心代码解析

逐行理解一下这个鼓机的核心逻辑：

function playSound(e) {
  // 通过 keyCode 找到对应的 audio 元素和按键 div
  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
  const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
  if (!audio) return;  // 按的不是A-L就忽略

  key.classList.remove('playing');
  key.offsetHeight;  // 强制重排，让浏览器"忘记"已完成的过渡
  key.classList.add('playing');
  audio.currentTime = 0;  // 每次从头播放，允许连击
  audio.play();
}

这里面有一个很经典的前端黑魔法：

key.offsetHeight; // 强制重排

如果直接 remove 后立刻 add 同一个 class，浏览器会认为没有变化而不触发过渡动画。读取 offsetHeight 会强制浏览器重排（reflow），让浏览器"承认"class 确实被移除过了，再添加回来就能重新触发动画。

配合 CSS：

.key {
  transition: all .07s ease;  /* 0.07秒的过渡动画 */
}

.playing {
  transform: scale(1.1);     /* 放大到110% */
  border-color: #ffc600;     /* 黄色边框 */
  box-shadow: 0 0 1rem #ffc600;  /* 黄色发光效果 */
}

按键按下→放大变亮→0.07秒过渡结束→恢复原状。整个过程丝滑流畅。

---

五、实战心得

5.1 三个必知的 slash 命令

命令	作用	使用时机
/init	让 cc 分析项目并生成 CLAUDE.md	刚接手一个新项目
/plan	进入规划模式，先讨论再写码	要加新功能或从零搭建
/help	查看帮助	任何时候

5.2 从"写 prompt"到"对话"

传统的 AI 编程体验是 "你写出完美的 prompt → AI 给你一次性的输出"。如果结果不对，你改 prompt 再来一遍。

cc 的体验更像是 "你说个大概 → 它追问细节 → 达成共识 → 动手干活"。

这让编程从"单次问答"变成了"持续协作"。你不需要在 prompt 里预测所有边缘情况，因为 cc 会在执行中发现并问你。

5.3 CLAUDE.md 是 cc 的外挂记忆

cc 每次对话都会重新读取 CLAUDE.md。这意味着：

• 今天写的架构说明，下周 cc 还能记得
• 团队共享一份 CLAUDE.md，所有人用 cc 都能获得相同上下文
• 不需要在每次 prompt 里重复项目背景

把 CLAUDE.md 写好，相当于给 cc 装上了项目的"长期记忆模块"。

5.4 信任但确认

cc 很强大，但它也会犯错。和人类同事一样，你需要：

• 关键改动自己过一眼 diff
• 跑一下测试确保没炸
• 不理解的地方让它解释

它最擅长的是加速"已知的已知"——那些你懂但写起来费时间的事。而理解业务、做架构决策这些"已知的未知"，还是得你亲自把关。

---

六、总结

这次用 Claude Code 做了两个实战项目，最大的感受是：

AI 辅助编程的体验，从"我命令你"变成了"我和你商量"。

而 claude.md、/plan、权限模型这些机制，都是在为这种新的协作方式搭建信任基础。

如果说传统 IDE 是锤子和锯子，那 cc 更像一个坐在你旁边写代码的初级程序员——他需要你给他门禁卡、上下文和工作计划，但一旦准备好，他真的能干活。