CCClaude Code中文喂饭教程

实战：让 CC 新增一个页面

新增页面不是只让 CC 写一个文件。要先确认路由、导航入口、页面内容、SEO 信息、样式复用和验收方式，再让 CC 做最小实现。

新增页面是很适合练习 Claude Code 的任务：目标清楚、风险可控、能看到结果。但它也容易失控，比如 CC 顺手改导航、重构样式、引入新组件库。

正确流程是：

确认页面目标 -> 确认路由和入口 -> 复用现有样式 -> 最小实现 -> 运行查看 -> 检查链接和 SEO

新增页面前先把页面类型说清楚：

页面类型重点
营销页首屏、CTA、SEO、移动端视觉
文档页标题、目录、学习路线、站内链接
后台页权限、表格、筛选、空状态、错误状态
表单页校验、提交、成功和失败反馈
详情页路由参数、数据加载、缺省状态

第 1 步：先让 CC 只读分析项目路由

/plan

请帮我新增一个页面，但先不要修改文件。

页面目标：
【这个页面给谁看，展示什么内容】

请先只读分析：
1. 当前项目页面或路由在哪里。
2. 现有页面是怎么组织的。
3. 导航入口在哪里维护。
4. 是否有 SEO title、description 或 metadata 规则。
5. 新页面最适合放在哪里。
6. 预计需要修改哪些文件。

如果 CC 没有说明路由和导航入口，就不要让它开始写。

如果项目是静态站，继续补一句：

如果这是静态站，请额外确认：
1. 页面源文件在哪里。
2. 构建产物路径是什么。
3. 是否使用 clean URL。
4. sitemap 和 robots 是否需要更新。
5. 导航和学习路线是否需要同步。

第 2 步：明确页面范围

新增页面最怕从“加一个页面”变成“顺手改全站设计”。

请把新增页面范围收窄。

允许：
1. 新增目标页面。
2. 必要时增加导航入口。
3. 复用现有样式和组件。
4. 增加页面 title 和 description。

禁止：
1. 不重构全站布局。
2. 不引入新 UI 库。
3. 不修改无关页面文案。
4. 不改变现有路由结构。

页面内容先写清楚

新增页面不是只有路由，还要有内容结构：

请先设计这个页面的信息结构，不要写代码。

页面目标：
【说明页面解决什么】

请输出：
1. 页面 H1。
2. 页面 description。
3. 主要章节。
4. 每个章节要回答的问题。
5. 页面 CTA 或下一步链接。
6. 移动端需要注意什么。

第 3 步：让 CC 做最小实现

可以开始新增页面。

页面信息：
- 页面标题：
- 页面路径：
- 页面内容：
- 导航入口：

要求：
1. 只修改计划中确认的文件。
2. 复用现有样式。
3. 不新增依赖。
4. 修改后解释每个文件为什么变动。
5. 给出本地预览和验收方式。

如果 CC 要新增组件或样式，先让它解释必要性：

如果你需要新增组件或样式，请先说明：
1. 为什么不能复用现有组件。
2. 新增内容是否只服务这个页面。
3. 是否会影响其他页面。
4. 有没有更小的实现方式。

第 4 步：验收页面

/verify

请验收新增页面。

检查：
1. 页面 URL 是否能打开。
2. 导航入口是否能跳转。
3. 页面 title 和 description 是否正确。
4. 桌面端和移动端是否没有明显错位。
5. 是否没有改动无关页面。
6. 是否需要更新 sitemap、学习路线或文档索引。

如果是静态站，还要确认构建产物：

请检查新增页面是否进入静态构建结果。

要求：
1. 构建是否成功。
2. 生成路径是否正确。
3. clean URL 是否能访问。
4. sitemap 是否包含新页面。
5. 站内链接是否没有 404。

常见错误

新页面上线后还要看什么

新增页面不是构建成功就结束。还要确认：

如果是商业化入口页，还要确认 CTA 是否清楚、外链是否新窗口打开、公众号或主站链接是否自然。

新增页面收尾

请给出新增页面收尾报告。

请说明：
1. 新页面路径是什么。
2. 导航入口在哪里。
3. SEO 信息是否已设置。
4. 哪些链接已经检查。
5. 桌面端和移动端是否已验证。
6. 是否需要更新学习路线、sitemap 或索引。

如果页面属于教程正文，收尾报告里必须写清它应该放在学习路线的哪个位置。否则文章虽然存在，但用户学习路径会断。

验收结果

下一篇：修后端接口 Bug