Claude Code 改真实页面完整流程：从需求到验收

AI 编程最好的入门任务，不是新建一个宏大项目，而是修改一个真实页面。因为真实页面有现成结构、样式、数据和约束，结果也容易验收。

下面是一套适合 Claude Code、Cursor、Codex 等 AI 编程工具的流程。

1. 先写清楚需求

不要只说“帮我优化页面”。写成可验收的需求：

请修改文章详情页的相关推荐区域。
目标：让用户读完文章后更容易继续阅读。
要求：
1. 显示 3 篇相关文章。
2. 每篇包含标题、摘要、分类和阅读入口。
3. 移动端一列，桌面端三列。
4. 风格要和现有 ArticleCard 保持一致。
5. 不改接口结构，优先复用现有组件。
6. 完成后说明修改了哪些文件，以及如何验证。

这个需求包含目标、范围、响应式、风格、限制、验收。

2. 让 AI 先读代码，不要马上改

第一轮提示：

先不要修改代码。请阅读当前文章详情页、ArticleCard、相关文章获取逻辑和样式文件。
告诉我：
1. 当前页面结构是什么。
2. 哪些组件可以复用。
3. 需要修改哪些文件。
4. 你建议的实现方案。

这一步能防止 AI 直接乱改。

3. 控制修改范围

收到方案后，再确认：

按你刚才的方案实现，但只允许修改这些文件：____。
不要重构无关组件，不要改接口返回结构，不要删除现有逻辑。

AI 编程要限制范围，尤其是老项目。

4. 让 AI 边改边说明

要求它输出：

内容	要求
修改文件	列出路径
新增逻辑	说明为什么加
复用组件	说明复用了什么
风险点	哪些地方可能影响旧功能
验证方式	本地怎么测

5. 验收清单

改完后不要只看能不能启动。

检查项	标准
页面是否能打开	无报错、无白屏
数据是否正确	相关文章不是当前文章本身
空状态	没有相关文章时页面不崩
移动端	不挤压、不溢出
桌面端	对齐、间距、卡片一致
样式	和现有设计统一
性能	没有重复请求或死循环

6. 常见失败和追问

如果 AI 改坏样式：

当前样式和现有卡片不一致。请先对比 ArticleCard 的 className 和布局，只调整相关推荐区域，不要重写全局样式。

如果 AI 改了太多文件：

这次修改超出了范围。请说明每个文件为什么必须修改。如果不是必须，请恢复到最小改动方案。

如果接口不匹配：

请不要假设接口字段。先查看 Article 类型定义和相关文章接口返回，再修正字段访问。

7. 提交前让 AI 自检

请做一次代码审查，只关注：
1. 是否有未处理的空值。
2. 是否破坏现有路由和组件。
3. 是否有移动端布局问题。
4. 是否有 TypeScript 类型问题。
5. 是否存在无关重构。

8. 一个最小工作流

读代码 -> 给方案 -> 限范围 -> 实现 -> 本地启动 -> 浏览器验收 -> 修问题 -> 总结变更

AI 编程不是让 AI 随便写，而是你像产品经理和 reviewer 一样控制目标、范围和验收。这样它才适合真实项目。