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的核心思路用对话代替提示词。你不需要一次性写出一段完美的 promptcc 会通过问问题帮你把模糊的想法变成清晰的需求。比如我说“帮我做一个宣传吉马程序员的网页”。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组件只负责渲染。这不是我要求的是它自己做的工程判断。exportconstEMPLOYMENT{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 Kit4.1 CLAUDE.md项目的说明书第二个实战场景更有趣——接手一个完全陌生的项目。cc-demo2 是一个纯粹的 HTML/CSS/JS 鼓机按键盘 A 到 L 就能触发不同的鼓声。这是一个知名的前端练习项目来自 JavaScript30 系列。但问题来了cc 怎么快速理解这个项目答案是CLAUDE.md。这是一个放在项目根目录的 Markdown 文件cc 每次启动时会自动读取就像新入职的程序员先看项目 Wiki。有两种方式创建它手动写——适合你对项目已经很熟悉的情况/init命令——让 cc 自己读代码把理解写入 CLAUDE.md我用/init生成的 CLAUDE.md 长这样## 项目概述 JavaScript Drum Kit 是一个纯 HTML/CSS/JS 实现的键盘鼓机。 按下 A 到 L 键即可触发鼓声。 ## 运行方式 无需构建步骤或服务器。直接在浏览器中打开 HTML 文件即可。 ## 代码架构 按键映射每个按键 div 和 audio 元素使用>4.2 双文件模式这个项目比较特别——提供了两个 HTML 文件index-START.html给学习者的空白模板JS 部分是空的index-FINISHED.html完整的参考实现cc 在读代码时不仅理解了功能逻辑还识别出了这个教学模式并在 CLAUDE.md 里特别标注“修改功能时需要同时编辑 START 和 FINISHED 文件”。4.3 核心代码解析逐行理解一下这个鼓机的核心逻辑functionplaySound(e){// 通过 keyCode 找到对应的 audio 元素和按键 divconstaudiodocument.querySelector(audio[data-key${e.keyCode}]);constkeydocument.querySelector(div[data-key${e.keyCode}]);if(!audio)return;// 按的不是A-L就忽略key.classList.remove(playing);key.offsetHeight;// 强制重排让浏览器忘记已完成的过渡key.classList.add(playing);audio.currentTime0;// 每次从头播放允许连击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 更像一个坐在你旁边写代码的初级程序员——他需要你给他门禁卡、上下文和工作计划但一旦准备好他真的能干活。
CC：从零搭建宣传页到接手遗留项目
发布时间：2026/5/22 7:43:09
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的核心思路用对话代替提示词。你不需要一次性写出一段完美的 promptcc 会通过问问题帮你把模糊的想法变成清晰的需求。比如我说“帮我做一个宣传吉马程序员的网页”。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组件只负责渲染。这不是我要求的是它自己做的工程判断。exportconstEMPLOYMENT{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 Kit4.1 CLAUDE.md项目的说明书第二个实战场景更有趣——接手一个完全陌生的项目。cc-demo2 是一个纯粹的 HTML/CSS/JS 鼓机按键盘 A 到 L 就能触发不同的鼓声。这是一个知名的前端练习项目来自 JavaScript30 系列。但问题来了cc 怎么快速理解这个项目答案是CLAUDE.md。这是一个放在项目根目录的 Markdown 文件cc 每次启动时会自动读取就像新入职的程序员先看项目 Wiki。有两种方式创建它手动写——适合你对项目已经很熟悉的情况/init命令——让 cc 自己读代码把理解写入 CLAUDE.md我用/init生成的 CLAUDE.md 长这样## 项目概述 JavaScript Drum Kit 是一个纯 HTML/CSS/JS 实现的键盘鼓机。 按下 A 到 L 键即可触发鼓声。 ## 运行方式 无需构建步骤或服务器。直接在浏览器中打开 HTML 文件即可。 ## 代码架构 按键映射每个按键 div 和 audio 元素使用>4.2 双文件模式这个项目比较特别——提供了两个 HTML 文件index-START.html给学习者的空白模板JS 部分是空的index-FINISHED.html完整的参考实现cc 在读代码时不仅理解了功能逻辑还识别出了这个教学模式并在 CLAUDE.md 里特别标注“修改功能时需要同时编辑 START 和 FINISHED 文件”。4.3 核心代码解析逐行理解一下这个鼓机的核心逻辑functionplaySound(e){// 通过 keyCode 找到对应的 audio 元素和按键 divconstaudiodocument.querySelector(audio[data-key${e.keyCode}]);constkeydocument.querySelector(div[data-key${e.keyCode}]);if(!audio)return;// 按的不是A-L就忽略key.classList.remove(playing);key.offsetHeight;// 强制重排让浏览器忘记已完成的过渡key.classList.add(playing);audio.currentTime0;// 每次从头播放允许连击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 更像一个坐在你旁边写代码的初级程序员——他需要你给他门禁卡、上下文和工作计划但一旦准备好他真的能干活。
