第30期 | 模块三复盘：AI工具使用红线

🎯 今天你将学会

• 明确知道什么该让 AI 做、什么不该
• 理解过度依赖 AI 的三个风险，以及如何避免
• 建立一份个人 AI 使用准则——你的「AI 使用宪法」
• 回顾模块三全部知识，完成能力自检

📖 核心知识

AI 的能力边界：一张决策地图

在过去 10 期中，我们深度使用了各种 AI 工具。现在到了一个关键问题：哪些事情该让 AI 做，哪些不该？

我把前端开发中的常见任务分为三个区域：

✅ 绿区：放心交给 AI（你审查即可）
⚠️ 黄区：AI 辅助，你主导（AI 提供选项/初稿，你决策/修改）
🔴 红区：你自己做，不让 AI 染指

绿区（放心交给 AI）：

任务	原因
标准 UI 组件生成（表单、列表、卡片）	有成熟模式，AI 输出质量高
测试用例生成	重复性高，AI 擅长覆盖边界
文档撰写（API文档、README）	重复性高，AI 从代码自动生成
CSS 样式调整	视觉类任务，AI 生成后你微调
代码格式化/重构建议	机械性任务，AI 不会引入逻辑错误
Bug 报错解读	AI 解读报错信息比人快
Git 操作	标准流程，AI 按规范执行

黄区（AI 辅助，你主导）：

任务	原因
业务逻辑实现	AI 不理解你的业务规则，需要你告诉它
状态管理设计	有多种方案，AI 提供选项你决策
组件架构设计	AI 能给出建议，但你的项目有独特需求
性能优化	AI 提出方案，但验证需要你实测
技术选型	AI 提供对比，但最终选择取决于项目约束
学习新概念	AI 解释概念，但理解需要你自己验证

红区（你自己做）：

任务	原因
产品需求定义	AI 不理解用户真实痛点
技术架构决策	架构影响项目全局，必须人来权衡
安全审计	AI 审查常见问题，但深层安全需要专业判断
数据库设计	数据完整性约束复杂，AI 容易遗漏
用户交互设计	UX 需要对用户心理的理解，AI 做不好
团队代码规范制定	规范要平衡团队偏好，不是技术问题
生产环境部署关键步骤	一步错全盘崩，不能让 AI 自动执行

过度依赖 AI 的三个风险

风险1：技能退化

如果你让 AI 写所有代码，你自己的编码能力会退化。这不是理论——是实际发生的：

技能	过度依赖 AI 后	正常使用 AI
CSS 布局	记不住 Flexbox 属性，不会手写	AI 写你审查，你仍然理解原理
组件设计	不会拆分组件，依赖 AI 生成	AI 提供架构建议，你做决策
Bug 定位	不会看 DevTools，不会追踪链路	AI 加速定位，你确认根因
新框架学习	不会自己读文档，依赖 AI 解释	AI 解释难点，你自己读基础

防护措施：

• 每周至少有 1 天不用 AI 写代码（纯手写）
• AI 给你代码后，花 5 分钟理解每行——不要只是 Accept
• 遇到 Bug 先自己定位 5 分钟，再问 AI

风险2：理解盲区

AI 生成的代码你审查了，但你是否真正理解了？

测试方法：不看 AI 生成的代码，用白板画出这个组件的：

• 状态流转图（state 如何变化）
• 数据流向图（数据从哪来、到哪去）
• 渲染逻辑图（什么条件下渲染什么）

如果你画不出来 → 你没有真正理解，只是「看着代码觉得没问题」。

防护措施：

• 每个 AI 生成的组件，画一张状态流转图
• 解释给同事（或假装解释）——你能解释清楚 = 你理解了
• 修改 AI 生成的代码时，不要只改表面——理解为什么 AI 那样写

风险3：责任转移

「这段代码是 AI 写的，出了问题不是我的责任。」——这个想法是危险的。

现实：

• 代码在你的项目中运行 → 出了问题影响你的用户
• 你 Accept 了 AI 的代码 → 你同意这段代码进入项目
• Git commit 是你做的 → 代码进入版本库是你的决定

AI 是你的工具，不是你的同事。工具产出的质量，使用工具的人负责。

防护措施：

• 每个 AI 生成的 PR，commit message 标注 [ai-assisted]
• 严重的 Bug 如果来自 AI 代码，在复盘时问：我审查时为什么没发现？
• 不要因为「AI 生成的」就降低审查标准——审查标准不变

建立你的「AI 使用准则」

这是一份你个人的规则文档，类似 .cursorrules 但适用于所有 AI 工具：

# 我的 AI 使用准则

## 基本原则
1. AI 是工具，不是同事——我负责 AI 产出的质量
2. 每次使用 AI 前想清楚：这个任务在绿区/黄区/红区？
3. 绿区：AI 主导，我审查。黄区：我主导，AI 辅助。红区：我自己做。

## 绿区规则
- 审查每个 AI 输出，不 Accept All
- 测试代码 AI 生成后，运行确认全部通过
- 文档 AI 生成后，检查关键信息是否准确

## 黄区规则
- 先自己思考方案，再让 AI 提供选项
- 不盲从 AI 的第一个建议——至少对比 2 个方案
- AI 提供的架构/设计建议，我自己画图验证

## 红区规则
- 产品需求我自己定义，不让 AI 猜测
- 架构决策我自己做，可以问 AI 获取信息但不能让 AI 决定
- 生产环境部署我自己执行，AI 只提供建议

## 每日习惯
- 每周至少 1 天不依赖 AI（纯手写代码）
- 每天回顾今天 AI 帮了什么、我自己做了什么
- 遇到 Bug 先自己定位 5 分钟，再问 AI

## 审查标准
- AI 代码审查标准 = 手写代码审查标准，不降低
- 安全问题、性能问题、边界情况——这三个维度必须手动检查
- 代码理解检查：能画出状态流转图才算理解

模块三知识地图回顾

模块三：AI工具链深度实践（第21-30期）

21. AI编程工具全景图
    ├─ Cursor/Copilot/Claude Code 三大工具横评
    ├─ 选型决策框架
    └─ .cursorrules 配置

22. Cursor深度使用
    ├─ 三层能力模型：Tab/Inline/Composer
    ├─ 上下文引用：@文件/@Codebase/@Web
    └─ 迭代式协作：方向→精度→打磨

23. Prompt Engineering
    ├─ CRISP 框架：Context/Role/Instruction/Specification/Proof
    ├─ 上下文分层：L0永久/L1任务/L2迭代/L3查询
    ├─ 6个前端Prompt模板
    └─ 三轮迭代法

24. AI辅助调试与代码审查
    ├─ 调试三层：看表象/追链路/防隐患
    ├─ 多维度审查：6维度Code Review
    ├─ 性能分析Prompt
    └─ 先分析再修复的方法论

25. AI生成UI
    ├─ v0.dev 文字→React组件
    ├─ 截图转代码三步流程
    ├─ Figma AI + 设计Token映射
    └─ AI生成UI的80/20法则

26. AI写测试与文档
    ├─ 测试生成CRISP Prompt
    ├─ 测试质量5标准
    ├─ API/组件/README文档生成
    └─ 文档代码同步原则

27. AI辅助学习
    ├─ AI陪学 > AI教你
    ├─ 三步循环：学习→问AI→实践
    ├─ 源码学习/文档提炼/迁移映射
    └─ 知识索引系统

28. MCP与AI Agent
    ├─ MCP协议原理
    ├─ MCP Server配置
    ├─ Agent工作流程
    └─ 安全红线5原则

29. 实战：AI驱动开发全流程
    ├─ 五阶段：需求→方案→实现→测试→文档
    ├─ AI参与度记录
    └─ 效率分析（4.1x提升）

30. 模块三复盘：AI使用红线
    ├─ 绿区/黄区/红区决策地图
    ├─ 过度依赖三风险
    └─ 个人AI使用准则

能力自检清单

能力	自检标准	✅/❌
Cursor 三层能力	能根据任务选择 Tab/Inline/Composer
.cursorrules 配置	项目有 .cursorrules 且内容跟实际规范一致
CRISP Prompt	写 Prompt 时自然使用 CRISP 结构
上下文管理	给 AI 引用时只引用相关文件，不过多不过少
三轮迭代	不期望一次完美，自然走方向→精度→打磨
AI 调试	Bug 先收集信息再给 AI，先确认分析再修复
AI Code Review	按 6 维度审查，不只看表面
AI 生成 UI	知道 AI 只做 80%，手动补 20%
AI 生成测试	测试能跑 + 覆盖关键行为
AI 生成文档	文档与代码保持同步
AI 辅助学习	用迁移映射学新框架，建立知识索引
MCP 配置	能配置 MCP Server，让 AI 操作开发环境
Agent 协作	有 AGENT.md，能安全地让 Agent 执行任务
效率记录	能记录 AI 参与度，量化效率提升
AI 使用准则	有个人准则文档，知道什么让 AI 做什么不让

达标线： 15 项中至少 12 项 ✅。如果有 3 项以上 ❌，回去复习对应的期数。

常见误区

误区1：「AI 什么都能做」
看上面的红区列表——产品需求、架构决策、安全审计、UX 设计，这些 AI 做不好。认清边界才能高效协作。

误区2：「我审查了所以没问题」
审查了 ≠ 理解了。能画出状态流转图才算真正理解 AI 生成的代码。

误区3：「AI 用越多越好」
不是。绿区多用、黄区适度、红区不用。过度使用导致技能退化和理解盲区。

🤖 AI协作实战

实战：评估你的 AI 使用现状

我给 AI 的 prompt：

分析我过去一周的 AI 使用记录（我描述给你），
评估我是否在以下三个方面有风险：
1. 技能退化：哪些技能我过度依赖 AI？
2. 理解盲区：哪些 AI 生成的代码我没有真正理解？
3. 责任转移：哪些 AI 代码我没有充分审查？

我的使用记录：
- 周一：用 Cursor Composer 写了一个完整的用户管理模块（4个组件+store）
- 周二：用 AI 生成了 20 个测试用例，全部 Accept
- 周三：用 v0 生成了 Dashboard 页面，手动调整了间距
- 周四：纯手写了一个复杂的拖拽排序组件（没用 AI）
- 周五：用 AI Review 审查了同事的 PR

AI 分析：

风险评估：

1. 技能退化：
   🟡 中风险：用户管理模块完全由 AI 写——你自己能不借助 AI 写类似的模块吗？
   建议：每周安排 1 天纯手写，保持基础编码能力不退化。

2. 理解盲区：
   🔴 高风险：20 个测试用例全部 Accept——你是否理解每个测试测的是什么？
   建议：至少花 10 分钟读每个测试的描述，确认覆盖了关键行为而非只覆盖了代码行。
   确认你能回答：如果这个组件的行为变了，哪些测试应该跟着变？

3. 责任转移：
   🟢 低风险：Dashboard 手动调整了间距 = 你确实审查了。
   🟡 中风险：AI Review 审查同事 PR——AI 发现的问题你确认了吗，还是直接转发？
   建议：AI Review 的每个问题你都应该独立验证。

总体评价：你的 AI 使用偏向「AI 主导」，需要增加「你主导」的比例。
特别是测试和审查——这两个环节你应该更深入参与。

我的行动计划：

1. 每周 1 天纯手写代码（不用 AI）→ 保持编码能力
2. AI 生成的测试逐个阅读，确认理解每个测试的目的 → 消除理解盲区
3. AI Review 的问题独立验证后再转发 → 不转移审查责任

学到了什么： AI 能帮你分析你自己的 AI 使用习惯——这是一种「元层面」的协作。让 AI 成为你的 AI 使用教练，帮你发现过度依赖的风险。

💻 动手练习

练习1（简单）：完成能力自检清单

对照上面的 15 项能力自检清单，逐项评估 ✅/❌。如果有 ❌ 的项目，标注需要复习的期数。

练习2（中等）：写你的「AI 使用准则」文档

根据本期的模板，写一份你个人的 AI 使用准则。包含：

• 绿区/黄区/红区的具体任务列表
• 每个区域的规则
• 每日习惯
• 审查标准

保存为 my-ai-guidelines.md，以后每次使用 AI 前看一眼。

练习3（挑战）：一周 AI 使用实验

下一周，严格按你的 AI 使用准则工作：

• 绿区任务让 AI 主导
• 黄区任务你主导 AI 辅助
• 红区任务完全自己做
• 每天记录 AI 参与度
• 一周后做复盘：准则是否合理？需要调整什么？

📌 本期要点

1. 绿区/黄区/红区决策地图： 标准组件/测试/文档放绿区，业务逻辑/架构/选型放黄区，需求/架构决策/安全/UX 放红区
2. 过度依赖三风险： 技能退化（不再手写代码）、理解盲区（审查了但不理解）、责任转移（AI 写的不是我的责任？错！）
3. 个人 AI 使用准则： 每个开发者都需要一份——规则明确才能高效协作而不迷失
4. AI 是工具不是同事： 工具产出的质量，使用工具的人负责
5. 每周 1 天纯手写： 保持编码能力不退化，这是底线

🔗 下期预告

从下一期开始进入模块四——AI应用开发！这是你的核心竞争力。第31期我们先看全景：前端如何与 LLM 交互、主流架构模式是什么、AI 应用的技术栈怎么选。
如果你没有苹果电脑，需要上传ios到APPStore可以访问以下网站
iPA上传工具 - IPA解析与AppStore提交