Day 11 | Claude Code 进阶：让AI帮你改代码、加功能

袁锐钦

发布于 2026-05-19 12:13:30

1010

开篇：50个页面的噩梦

你的工具站上线了，50个页面跑得好好的。

然后需求来了：加一下SEO元标签。

你打开代码库，50个HTML文件躺在那里。每个文件都要加<title>、<meta description>、<meta robots>、<link rel="canonical">、Open Graph标签……

你打开第一个文件，复制粘贴。第二个，复制粘贴。到第十个的时候，手指已经机械了，脑子开始走神。

这时候你想到：不是有AI吗？让Claude Code帮我写。

于是你输入："帮我写一个带SEO元标签的HTML页面模板。"

Claude Code唰唰唰生成了一段完美的代码。你看着它，陷入了沉默——它是从零写的，但你需要的是改现有的50个文件。

这就是大多数AI编程教程不会告诉你的真相：写新代码是表演，改旧代码才是日常。

第一节："从零写"模式在工具站迭代中的三大崩溃

我吃过这个亏。

刚开始用Claude Code的时候，每次需求都是"帮我写一个XXX"。新页面、新组件、新功能——AI生成，我复制粘贴，爽得不行。

直到工具站上线后，真正的迭代开始了。

真正的迭代，是在现有代码上动刀。

崩溃一：重复劳动地狱

工具站不是Demo，是产品。产品有50个页面，每个页面都要加同样的SEO标签。让AI"写一个带SEO的页面"，你只能得到一个模板。剩下的49个页面，还是得你自己复制粘贴。

更惨的是，如果后面要改——比如description里加个品牌名——你得改50次。

不是AI帮不了你，是你问错了问题。

崩溃二：上下文丢失

你让AI"写一个带Google Analytics的页面"，它给你生成了一段全新的代码。但你的项目里已经有自己的样式系统、有自己的组件库、有自己的构建流程。

AI从零写的代码，跟你的现有代码是两套体系。接进去？格式不对。重写？那用AI的意义在哪。

你花10分钟让AI写了一段代码，又花了1小时把它改成能接进项目的样子。

崩溃三：越改越乱

最可怕的不是改一次，是改十次。

第一次：加SEO标签。第二次：加统计代码。第三次：改国际化文案。第四次：调样式……

每次AI都从零写，每次你都在手动合并。十次之后，你的代码库变成了弗兰肯斯坦——每个文件长得都不一样，有的有SEO有的没有，有的用新组件有的用旧的。

这不是AI编程，这是AI制造技术债。

技术债不会消失，只会利滚利。三个月后你想重构，发现根本无从下手。

第二节：认知翻转——迭代式AI编程

问题的根源不是AI不够强，是你的用法错了。

大多数教程教的是"生成式AI编程"——让AI从零写新代码。但工具站开发的日常是"迭代式AI编程"——在现有代码基础上精准修改。

两者的区别，就像你请装修队：

• 生成式："帮我盖一栋新房子"
• 迭代式："在现有厨房里换个橱柜，颜色要跟客厅地板搭，水管和电路不要动"

迭代式AI编程的核心认知：不是给AI一个需求让它写代码，而是给AI一个代码库让它理解，然后告诉它改哪里、改成什么样。

这个认知翻转之后，Prompt策略完全不同。

第三节：CCSE框架——迭代场景重新定义

有一个框架叫CCSE：Context、Constraints、Specification、Example。

用在"生成新代码"场景里，它是这样工作的：

• Context：我要一个登录页面
• Constraints：用React，支持暗色模式
• Specification：包含邮箱、密码输入框，有表单验证
• Example：参考这个设计稿

但用在"改现有代码"场景里，四个要素要重新定义：

Context（上下文）→ 代码库现状 不是"我要什么"，而是"我现在有什么"。给AI看现有代码结构、技术栈、命名规范。让AI理解你的代码库，而不是从头想象。

Constraints（约束）→ 修改边界 不是"用什么技术"，而是"不能动什么"。明确告诉AI：只改SEO标签，不要动样式；只加统计代码，不要改页面结构。

Specification（规格）→ 精准修改指令 不是"做成什么样"，而是"把A改成B"。具体到行、具体到变量名、具体到插入位置。

Example（示例）→ 修改前后对比 不是"参考这个设计"，而是"第一个文件我已经改好了，后面49个照这个改"。

这个重新定义的CCSE框架，是迭代式AI编程的操作手册。它解决的核心问题：怎么让AI在不动现有代码的前提下，精准完成修改。

现在看五个真实场景。

第四节：五个出海工具站迭代场景（附Prompt模板）

以下五个场景，全部来自真实工具站开发中的脏活累活。每个场景都配可直接复制粘贴的Prompt模板。

场景一：批量加SEO元标签

需求：50个页面，每个都要加完整的SEO标签——title、description、robots、canonical、Open Graph。

注意：<meta name="keywords">已经废了。Google从2009年开始就不看这个标签，2024年再次确认。现在提keywords等于暴露你的SEO水平还停留在十年前。

Prompt模板：





这是我的项目代码库结构：[粘贴目录树]

技术栈：Next.js + Tailwind CSS

任务：给src/pages/下的所有页面组件添加SEO元标签。

约束：
- 只添加SEO相关标签，不要改动任何现有样式、组件逻辑或页面结构
- title格式："{页面功能} | {品牌名}"，品牌名统一用"ToolHub"
- description从页面主要内容自动生成，控制在150字符以内
- robots设为"index, follow"
- 每个页面添加canonical链接，指向当前页面URL
- 添加Open Graph基础标签：og:title、og:description、og:type="website"

示例：src/pages/convert.tsx我已经改好了，参考这个模式改其他文件。

[粘贴convert.tsx的修改前后对比]

请逐个处理剩余文件，每改完一个告诉我改了什么。

效率对比：手写50个页面≈3小时，AI迭代修改≈15分钟。

省下的2小时45分钟，不是让你刷手机的。去写真正需要人脑的代码——比如那个用户转化率优化方案。

场景二：加Article结构化数据

需求：让Google更好地理解页面内容，提升搜索展示效果。

注意：FAQPage rich results已经在2024年9月被Google限制，仅限医疗和政府网站显示。普通工具站应该用Article结构化数据替代，强化E-E-A-T信号。

Prompt模板：





任务：给博客文章页面添加Article结构化数据（JSON-LD）。

技术栈：Next.js + Tailwind CSS

约束：
- 使用Schema.org的Article类型
- 必须包含：headline、author、datePublished、dateModified、publisher（含logo）
- author用Organization类型，name统一为"ToolHub Team"
- publisher logo用绝对URL：https://toolhub.com/logo.png
- 不要改动文章正文内容或样式
- 只在<head>内添加<script type="application/ld+json">标签，内容动态生成

示例页面：src/pages/blog/[slug].tsx

[粘贴当前代码]

请先给出JSON-LD结构，我确认后再插入代码。

场景三：改国际化文案

需求：工具站要支持多语言，所有用户可见文案需要提取到i18n配置。

Prompt模板：





任务：把src/components/下的硬编码中文文案提取到国际化配置。

技术栈：next-i18next

约束：
- 不要改动组件逻辑，只替换文案部分
- 文案key命名规范：{组件名}_{元素}_{含义}，如"header_title_convert"
- 先提取英文作为默认语言，中文作为fallback
- 保留原有的动态插值逻辑（如"已处理{count}个文件"）

示例：src/components/Header.tsx我已经改好了。

[粘贴修改前后对比]

请处理src/components/下的其他组件，优先处理用户高频交互的组件。

场景四：加统计代码与广告位

需求：接入Google Analytics 4和Google AdSense，需要在特定位置插入代码。

Prompt模板：





任务：接入GA4和AdSense。

GA4配置：
- 测量ID：G-XXXXXXXXXX
- 需要在所有页面加载gtag.js
- 在关键交互点添加自定义事件：文件上传完成、转换成功、付费点击

AdSense配置：
- 客户ID：ca-pub-XXXXXXXXXX
- 在文章页底部和侧边栏各加一个广告位
- 广告尺寸：文章页底部用"fluid"，侧边栏用300x250

约束：
- GA4代码放在<head>内，使用next/script的strategy="afterInteractive"
- AdSense代码不要阻塞页面渲染
- 不要改动任何现有功能逻辑
- 在开发环境禁用广告展示（判断process.env.NODE_ENV）

[粘贴当前_app.tsx代码]

请给出修改方案，先改GA4，确认后再改AdSense。

场景五：重构页面组件（提取公共Header/Footer）

需求：50个页面各自维护Header和Footer，改一次要改50个文件。需要提取成公共组件。

Prompt模板：





任务：提取公共Header和Footer组件。

现状：src/pages/下的每个页面都内联了完整的Header和Footer代码。

目标：
- 新建src/components/layout/Header.tsx和Footer.tsx
- 新建src/components/layout/Layout.tsx作为统一布局包裹组件
- 所有页面改用<Layout>包裹，移除内联的Header/Footer

约束：
- 提取过程中保持现有样式和功能完全一致
- Header中的导航链接数据提取到src/data/navigation.ts
- Footer中的社交链接提取到src/data/social.ts
- 每改完一个页面运行npm run build验证没有报错
- 先处理3个页面作为试点，确认无误后再批量处理剩余页面

[粘贴src/pages/index.tsx的当前代码]

请先给出重构方案，我确认后再开始执行。

第五节：避坑指南——改代码时的三个常见错误

错误一：给AI的上下文不够

症状：AI改了代码，但改出来的风格跟现有代码完全不一致。

原因：你没有给AI看现有代码的规范。AI不知道你的命名习惯、不知道你的组件库、不知道你的状态管理方式。

解决：改之前先让AI"读"代码库。输入"请先阅读src/目录下的代码结构，理解项目的技术栈和编码规范"，等AI回复确认理解后再给修改指令。

一个小技巧：让AI先总结它理解的代码规范，你检查一遍再让它动手。很多时候AI"以为"它理解了，其实理解错了。

错误二：约束条件不清晰

症状：AI"顺手"改了不该改的东西——比如加SEO标签的时候把样式也改了。

原因：你没有明确划定修改边界。AI会"过度热心"，觉得"既然都改了，不如一起优化"。

解决：Prompt里必须加"约束"段落，明确列出"不要改动"的清单。越具体越好："不要改动任何CSS类名""不要修改函数签名""不要添加新的依赖"。

错误三：没有验证就批量执行

症状：AI一口气改了20个文件，你直接提交，结果线上报错。

原因：AI不是神，它会犯错。批量修改时，一个错误会复制到所有文件。

解决：试点策略。先让AI改1-2个文件，你人工检查确认没问题，再让它改剩下的。Prompt里明确说："先改src/pages/convert.tsx作为试点，我确认后再处理其他文件。"

如果改的是关键文件，建议先用Git创建一个新分支。改坏了能回滚，不污染主分支。

第六节：效率杠杆——数据说话

我统计过一个工具站迭代的估算数据（基于实际开发经验）：

任务	手写时间	AI迭代时间	效率提升
50个页面加SEO标签	3小时	15分钟	12x
提取国际化文案（20个组件）	4小时	30分钟	8x
接入GA4 + AdSense	2小时	20分钟	6x
重构公共组件（50个页面）	6小时	1小时	6x
加Article结构化数据	1.5小时	10分钟	9x