feat(slidev): add day3 course slides and module pages

新增第三天完整课程章节，包含规则体系演进、Token经济学、Commands与Skills、Agent团队、浏览器工具、复盘总结共6个模块页面，补充课程目录跳转

slidev/pages/day3/m1-rules-evolution.md

@@ -0,0 +1,134 @@
+# 模块 1：规则体系的演进
+
+<div class="mt-6 text-sm">
+
+AI 编程工具正在把“项目规矩”从个人经验，推进到可读取、可分层、可复用的工程资产。
+
+</div>
+
+<div class="grid grid-cols-4 gap-4 mt-8 text-sm">
+<div class="p-3 rounded-xl bg-blue-500/10 border border-blue-500/30 text-center">
+<div class="font-bold">.vscode</div>
+<div class="text-xs text-gray-400 mt-1">编辑器配置</div>
+</div>
+<div class="p-3 rounded-xl bg-emerald-500/10 border border-emerald-500/30 text-center">
+<div class="font-bold">.cursorrules / .mdc</div>
+<div class="text-xs text-gray-400 mt-1">AI 私有规则</div>
+</div>
+<div class="p-3 rounded-xl bg-amber-500/10 border border-amber-500/30 text-center">
+<div class="font-bold">.trae/rules</div>
+<div class="text-xs text-gray-400 mt-1">分层规则目录</div>
+</div>
+<div class="p-3 rounded-xl bg-purple-500/10 border border-purple-500/30 text-center">
+<div class="font-bold">AGENTS.md</div>
+<div class="text-xs text-gray-400 mt-1">跨工具约定</div>
+</div>
+</div>
+
+<!--
+第三天从规则体系演进开始。
+以前项目配置更多服务于编辑器和构建工具，现在规则开始服务于 AI 协作。
+Trae、Cursor、Claude Code、Codex 都需要读取项目规则，规则文件正在从个人提示词变成团队工程资产。
+-->
+
+---
+
+# 从散装规则到分层规则
+
+<div class="mt-6 text-sm">
+
+| 阶段 | 典型文件 | 核心价值 |
+|---|---|---|
+| 编辑器配置 | `.vscode/` | 统一格式化、插件、调试配置 |
+| AI 私有规则 | `.cursorrules`、`.mdc` | 告诉 AI 项目偏好 |
+| 工具规则目录 | `.trae/rules/` | 按场景拆分规则 |
+| 跨工具规则 | `AGENTS.md`、`CLAUDE.md` | 让多种 Agent 读取同一套约定 |
+
+</div>
+
+<!--
+这页讲清楚规则演进路径。
+企业团队最关心的点是规则能否长期维护。
+单文件规则容易越写越长，分目录规则可以按前端、后端、安全、测试、交付场景拆开。
+AGENTS.md 的价值在于跨工具复用，同一个仓库可以被多个 Agent 正确理解。
+-->
+
+---
+
+# Rules 的精细度升级
+
+<div class="grid grid-cols-2 gap-4 mt-6 text-sm">
+<div class="p-4 rounded-xl bg-blue-500/10 border border-blue-500/30">
+<div class="font-bold mb-2">生效方式</div>
+
+- 始终生效
+- 指定文件生效
+- 智能判断生效
+- 手动触发
+</div>
+<div class="p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/30">
+<div class="font-bold mb-2">适用场景</div>
+
+- 前端组件规范
+- 后端接口规范
+- 安全检查规范
+- 测试与交付规范
+</div>
+</div>
+
+<!--
+规则的价值来自精细度。
+全局规则负责基础约束，文件规则负责模块约束，智能规则负责按描述匹配场景，手动触发规则负责课堂演示和专项任务。
+这比一句“请用中文回答”更接近真实工程协作。
+-->
+
+---
+
+# 规则分层示例
+
+<div class="mt-5 text-sm">
+
+```
+.trae/
+└── rules/
+    ├── global.md
+    ├── frontend.md
+    ├── backend.md
+    ├── security.md
+    ├── testing.md
+    └── delivery.md
+```
+
+</div>
+
+<div class="mt-4 grid grid-cols-3 gap-3 text-sm">
+<div class="p-3 rounded-xl bg-blue-500/10 border border-blue-500/30">全局：输出格式、语言、证据要求</div>
+<div class="p-3 rounded-xl bg-emerald-500/10 border border-emerald-500/30">模块：React、Java、API、数据库</div>
+<div class="p-3 rounded-xl bg-amber-500/10 border border-amber-500/30">流程：审查、测试、发布、回滚</div>
+</div>
+
+<!--
+这页给一个可落地的目录示例。
+讲师可以强调：规则文件的组织方式要贴合团队工作边界。
+前端团队、后端团队、安全团队、测试团队都能维护自己负责的规则。
+-->
+
+---
+
+# 课堂产出：规则迁移清单
+
+<div class="mt-5 text-sm">
+
+| 旧资产 | 迁移目标 | 检查点 |
+|---|---|---|
+| `.cursorrules` | `AGENTS.md` 或 `.trae/rules/global.md` | 是否仍适用于全项目 |
+| `.mdc` | `.trae/rules/*.md` | 是否需要按文件范围拆分 |
+| 口头规范 | `security.md`、`testing.md` | 是否能写成触发条件 |
+| Review 经验 | `delivery.md` | 是否能形成验收标准 |
+
+</div>
+
+<!--
+第一个练习让学员把现有团队规则做一次迁移。
+目标是从散落在聊天记录、文档和个人经验里的规则，整理成 Agent 可读取的规则资产。
+-->

slidev/pages/day3/m2-token-cue-agent.md

@@ -0,0 +1,156 @@
+# 模块 2：Token 经济学
+
+<div class="mt-6 text-sm">
+
+AI 编程的成本判断正在变化：从逐句节省 token，转向设计稳定的上下文管道。
+
+</div>
+
+<div class="grid grid-cols-2 gap-6 mt-8 text-sm">
+<div class="p-4 rounded-xl bg-blue-500/10 border border-blue-500/30">
+<div class="font-bold mb-2">早期关注</div>
+
+- 上下文窗口小
+- 单次调用贵
+- Prompt 反复压缩
+- Agent 执行链短
+</div>
+<div class="p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/30">
+<div class="font-bold mb-2">现在关注</div>
+
+- 上下文组织
+- 工具调用效率
+- 任务拆解质量
+- 可验证交付物
+</div>
+</div>
+
+<!--
+早期大家对 token 很敏感，因为模型贵、窗口小、能力弱。
+现在模型能力提升后，关键问题变成如何组织上下文、如何减少无效循环、如何让 Agent 每一步都有证据。
+企业采购和培训也要从“省 token”转到“省返工”。
+-->
+
+---
+
+# 从个人用水到工业用水
+
+<div class="mt-8 text-center">
+<div class="inline-block p-5 rounded-xl bg-blue-500/10 border border-blue-500/30 px-10 text-lg font-bold">
+个人省水思维 → 工业管道思维
+</div>
+</div>
+
+<div class="grid grid-cols-3 gap-4 mt-8 text-sm">
+<div class="p-3 rounded-xl bg-white/5 border border-white/10 text-center">任务入口清楚</div>
+<div class="p-3 rounded-xl bg-white/5 border border-white/10 text-center">上下文流动顺畅</div>
+<div class="p-3 rounded-xl bg-white/5 border border-white/10 text-center">输出可验收</div>
+</div>
+
+<!--
+这个类比适合课堂表达。
+以前是个人用水，一滴一滴省。
+现在是工业用水，重点看管道、水压、阀门和验收。
+对应到 AI 编程，就是任务入口、上下文、工具调用和交付验收。
+-->
+
+---
+
+# Tab → Cue → Agent
+
+<div class="flex items-center justify-between mt-12 px-4 text-sm">
+<div class="text-center flex-1">
+  <div class="w-16 h-16 rounded-full bg-blue-900/50 border-2 border-blue-500 flex items-center justify-center mx-auto text-xl">1</div>
+  <div class="mt-3 font-bold">早期 Tab</div>
+  <div class="text-xs text-gray-400">单行补全</div>
+</div>
+<div class="text-blue-400 text-xl">→</div>
+<div class="text-center flex-1">
+  <div class="w-16 h-16 rounded-full bg-emerald-900/50 border-2 border-emerald-500 flex items-center justify-center mx-auto text-xl">2</div>
+  <div class="mt-3 font-bold">Cue Pro</div>
+  <div class="text-xs text-gray-400">多行、跨文件、智能导入</div>
+</div>
+<div class="text-blue-400 text-xl">→</div>
+<div class="text-center flex-1">
+  <div class="w-16 h-16 rounded-full bg-amber-900/50 border-2 border-amber-500 flex items-center justify-center mx-auto text-xl">3</div>
+  <div class="mt-3 font-bold">Agent 内置能力</div>
+  <div class="text-xs text-gray-400">计划、修改、验证、交付</div>
+</div>
+</div>
+
+<!--
+Cue 是 Trae 对补全能力的品牌化表达，全称 Context Understanding Engine。
+演进路径很清楚：早期 Tab 是补下一行，Cue Pro 是理解上下文做多行和跨文件修改，Agent 阶段把这些能力吸收进完整任务执行。
+课堂可以用自动驾驶类比：从辅助驾驶到全流程执行。
+-->
+
+---
+
+# Cue 的位置变化
+
+<div class="grid grid-cols-2 gap-6 mt-6 text-sm">
+<div class="p-4 rounded-xl bg-blue-500/10 border border-blue-500/30">
+<div class="font-bold mb-2">作为独立功能</div>
+
+- 写代码时出现建议
+- 帮你补全导入
+- 局部理解上下文
+</div>
+<div class="p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/30">
+<div class="font-bold mb-2">作为 Agent 能力</div>
+
+- 理解任务意图
+- 执行多文件修改
+- 结合工具验证结果
+</div>
+</div>
+
+<!--
+Cue 的能力并没有消失，它进入了更大的 Agent 工作流。
+当学员看到产品界面弱化某个独立入口时，应该理解为能力被整合到了更高级的执行形态里。
+-->
+
+---
+
+# 模型选择：务实路线
+
+<div class="mt-6 text-sm">
+
+| 场景 | 优先考虑 |
+|---|---|
+| 代码理解 | 上下文能力、检索质量、引用证据 |
+| 代码修改 | 编辑稳定性、工具调用、测试闭环 |
+| 文档生成 | 长文组织、风格一致、格式输出 |
+| 企业集成 | 成本、权限、审计、私有化 |
+
+</div>
+
+<div class="mt-4 p-3 rounded-xl bg-amber-500/10 border border-amber-500/30 text-sm">
+模型策略的目标是场景匹配：用合适模型处理合适任务。
+</div>
+
+<!--
+企业使用 AI 编程工具时，模型选择要务实。
+代码理解、代码修改、文档生成、企业集成关注点不同。
+统一模型管理有运维价值，按场景调度模型有成本和效果价值。
+-->
+
+---
+
+# 课堂产出：成本与任务匹配表
+
+<div class="mt-5 text-sm">
+
+| 任务类型 | 上下文需求 | 验收方式 | 适合模型策略 |
+|---|---|---|---|
+| 代码解释 | 中 | 文件与函数引用 | 快速模型 |
+| 多文件改造 | 高 | 测试与 diff | 强推理模型 |
+| 文档整理 | 高 | 结构与风格检查 | 长上下文模型 |
+| 自动 Review | 中 | 规则命中与证据 | 工具链集成模型 |
+
+</div>
+
+<!--
+这个练习帮助学员把 token 成本和任务价值放在一起看。
+企业里真正要管的是任务成本、返工成本和交付风险。
+-->

slidev/pages/day3/m3-commands-skills-mcp.md

@@ -0,0 +1,172 @@
+# 模块 3：从 Commands 到 Skills
+
+<div class="mt-6 text-sm">
+
+Commands 把常用话术封装成快捷入口，Skills 把完整能力封装成可复用资产。
+
+</div>
+
+<div class="grid grid-cols-2 gap-6 mt-8 text-sm">
+<div class="p-4 rounded-xl bg-blue-500/10 border border-blue-500/30">
+<div class="font-bold mb-2">Commands</div>
+
+- `.trae/commands/`
+- Markdown 定义
+- 斜杠触发
+- 适合固定提示词
+</div>
+<div class="p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/30">
+<div class="font-bold mb-2">Skills</div>
+
+- `.trae/skills/`
+- 描述按需加载
+- 可带脚本、模板、示例
+- 适合完整工作流
+</div>
+</div>
+
+<!--
+Commands 是第一代封装，核心是把常说的话存起来。
+Skills 是第二代封装，核心是把完成任务所需的说明、脚本、模板和示例放在一起。
+这页让学员建立两个概念的关系。
+-->
+
+---
+
+# Commands 适合什么？
+
+<div class="mt-6 text-sm">
+
+| 场景 | 示例 |
+|---|---|
+| 固定问法 | 总结当前 PR |
+| 固定格式 | 生成 commit message |
+| 固定检查 | 跑一次代码审查 |
+| 固定输出 | 生成日报、周报、变更说明 |
+
+</div>
+
+<div class="mt-4 p-3 rounded-xl bg-blue-500/10 border border-blue-500/30 text-sm">
+Command 的关键价值是降低重复输入成本。
+</div>
+
+<!--
+Commands 很适合固定流程。
+比如每次都要总结 PR、写 commit message、生成日报，就可以做成命令。
+它的边界也清楚：主要封装 prompt，适合轻量场景。
+-->
+
+---
+
+# Skills 的两个升级
+
+<div class="grid grid-cols-2 gap-6 mt-8 text-sm">
+<div class="p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/30">
+<div class="font-bold mb-2">按需加载</div>
+
+Agent 先扫描 skill 描述，任务相关时再读取完整说明。
+</div>
+<div class="p-4 rounded-xl bg-amber-500/10 border border-amber-500/30">
+<div class="font-bold mb-2">可携带资源</div>
+
+Skill 可以包含脚本、模板、示例、参考文件和检查清单。
+</div>
+</div>
+
+<!--
+Skills 的两个升级非常关键。
+按需加载能减少上下文干扰，可携带资源能把经验固化成工具包。
+所以 Skill 更适合企业培训后的标准化落地。
+-->
+
+---
+
+# Skill 的两种气质
+
+<div class="grid grid-cols-2 gap-6 mt-6 text-sm">
+<div class="p-4 rounded-xl bg-purple-500/10 border border-purple-500/30">
+<div class="font-bold mb-2">文科型 Skill</div>
+
+- 品牌风格
+- 文档结构
+- 设计规范
+- 沟通口径
+</div>
+<div class="p-4 rounded-xl bg-cyan-500/10 border border-cyan-500/30">
+<div class="font-bold mb-2">理科型 Skill</div>
+
+- 自动化脚本
+- 构建命令
+- 测试流程
+- 数据处理工具链
+</div>
+</div>
+
+<!--
+这个分类方便学员理解。
+文科型 Skill 主要封装风格、结构和判断标准。
+理科型 Skill 主要封装工具、脚本和执行流程。
+企业团队通常两类都需要。
+-->
+
+---
+
+# MCP 的价值
+
+<div class="mt-6 text-sm">
+
+MCP 的历史价值是推动工具面向 AI 开放接口，让 Agent 能连接浏览器、数据库、文件系统、设计工具和内部平台。
+
+</div>
+
+<div class="grid grid-cols-3 gap-4 mt-8 text-sm">
+<div class="p-3 rounded-xl bg-blue-500/10 border border-blue-500/30 text-center">打开连接可能性</div>
+<div class="p-3 rounded-xl bg-emerald-500/10 border border-emerald-500/30 text-center">统一工具描述方式</div>
+<div class="p-3 rounded-xl bg-amber-500/10 border border-amber-500/30 text-center">推动工具生态改造</div>
+</div>
+
+<!--
+MCP 要讲它的历史功绩。
+它让很多原本封闭的工具开始考虑给 AI 使用的接口。
+对企业来说，MCP 的意义是把内部工具、流程系统和 Agent 连接起来。
+-->
+
+---
+
+# MCP 与 CLI 思维
+
+<div class="mt-5 text-sm">
+
+| 接入方式 | 适合场景 | 课堂判断 |
+|---|---|---|
+| CLI | 命令稳定、脚本成熟、团队已有运维习惯 | 优先做轻量封装 |
+| MCP | 需要交互式工具、长连接、结构化能力描述 | 适合平台化接入 |
+| Skill | 需要把使用方法、模板、脚本一起交付 | 适合团队复用 |
+
+</div>
+
+<!--
+底层理念是：只要工具能被命令行或接口驱动，Agent 就能接入。
+MCP 是一种协议形态，CLI 是一种通用执行方式，Skill 是一种知识和流程封装方式。
+课堂里要帮助学员选接入方式。
+-->
+
+---
+
+# 课堂产出：能力封装决策表
+
+<div class="mt-5 text-sm">
+
+| 需求 | 推荐封装 | 理由 |
+|---|---|---|
+| 每天生成日报 | Command | 固定话术、固定格式 |
+| 代码审查流程 | Skill | 需要规则、模板、示例 |
+| 内部平台查询 | CLI 或 MCP | 取决于现有接口形态 |
+| 设计规范落地 | Skill | 需要风格、样例、检查清单 |
+
+</div>
+
+<!--
+这个练习让学员判断同一个需求适合 command、skill、CLI 还是 MCP。
+判断标准是任务复杂度、资源依赖、团队复用和工具接入方式。
+-->

slidev/pages/day3/m4-agent-teams-product-shape.md

@@ -0,0 +1,192 @@
+# 模块 4：从单 Agent 到 Agent Teams
+
+<div class="mt-6 text-sm">
+
+Agent 协作正在从单个助手，发展成有角色、有边界、有交付流程的团队形态。
+
+</div>
+
+<div class="flex items-center justify-between mt-12 px-4 text-sm">
+<div class="text-center flex-1">
+  <div class="w-16 h-16 rounded-full bg-blue-900/50 border-2 border-blue-500 flex items-center justify-center mx-auto text-xl">1</div>
+  <div class="mt-3 font-bold">单 Agent</div>
+  <div class="text-xs text-gray-400">一个 Agent 处理全部任务</div>
+</div>
+<div class="text-blue-400 text-xl">→</div>
+<div class="text-center flex-1">
+  <div class="w-16 h-16 rounded-full bg-emerald-900/50 border-2 border-emerald-500 flex items-center justify-center mx-auto text-xl">2</div>
+  <div class="mt-3 font-bold">SubAgent</div>
+  <div class="text-xs text-gray-400">主 Agent 拆分子任务</div>
+</div>
+<div class="text-blue-400 text-xl">→</div>
+<div class="text-center flex-1">
+  <div class="w-16 h-16 rounded-full bg-amber-900/50 border-2 border-amber-500 flex items-center justify-center mx-auto text-xl">3</div>
+  <div class="mt-3 font-bold">Agent Teams</div>
+  <div class="text-xs text-gray-400">多角色协作交付</div>
+</div>
+</div>
+
+<!--
+这页讲多智能体的演进。
+单 Agent 适合小任务。
+SubAgent 适合并行搜索、审查、整理。
+Agent Teams 适合有角色分工的复杂交付，比如设计、开发、测试、部署、审查。
+-->
+
+---
+
+# Agent Teams 的两种形态
+
+<div class="grid grid-cols-2 gap-6 mt-6 text-sm">
+<div class="p-4 rounded-xl bg-blue-500/10 border border-blue-500/30">
+<div class="font-bold mb-2">长期型</div>
+
+- 固定测试 Agent
+- 固定文档 Agent
+- 固定审查 Agent
+- 固定部署 Agent
+</div>
+<div class="p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/30">
+<div class="font-bold mb-2">短期型</div>
+
+- 针对一次复杂任务临时分工
+- 多路搜索与验证
+- 汇总后统一交付
+- 交付完成即结束
+</div>
+</div>
+
+<!--
+长期型 Agent 像团队里的固定岗位，适合稳定流程。
+短期型 Agent 像项目小组，适合复杂任务的一次性并行处理。
+Trae 保留智能体作为一等概念，为后续团队协作形态留下空间。
+-->
+
+---
+
+# Trae Solo 的协作信号
+
+<div class="mt-6 text-sm">
+
+Trae Solo 把设计、开发、部署等能力做成独立执行单元，已经体现出多智能体协作的产品方向。
+
+</div>
+
+<div class="grid grid-cols-3 gap-4 mt-8 text-sm">
+<div class="p-4 rounded-xl bg-blue-500/10 border border-blue-500/30 text-center">
+<div class="font-bold">设计能力</div>
+<div class="text-xs text-gray-400 mt-1">界面、布局、交互</div>
+</div>
+<div class="p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/30 text-center">
+<div class="font-bold">开发能力</div>
+<div class="text-xs text-gray-400 mt-1">代码、依赖、调试</div>
+</div>
+<div class="p-4 rounded-xl bg-amber-500/10 border border-amber-500/30 text-center">
+<div class="font-bold">部署能力</div>
+<div class="text-xs text-gray-400 mt-1">构建、发布、验证</div>
+</div>
+</div>
+
+<!--
+产品上未必直接叫 Agent Teams，但能力拆分已经出现。
+设计、开发、部署的职责不同，输入输出也不同。
+这会让全托管模式更接近真实研发团队。
+-->
+
+---
+
+# 产品形态分化
+
+<div class="mt-5 text-sm">
+
+| 形态 | 定位 |
+|---|---|
+| Trae IDE | 面向专业开发者的桌面编辑器 |
+| Trae Solo | IDE 内的全托管 Agent 模式 |
+| Trae Work | 屏蔽技术细节，面向任务结果 |
+| 移动端 | 随时触发、查看、确认 |
+| Trae CLI 企业版 | 嵌入飞书、钉钉、GitLab、GitHub、CI/CD |
+
+</div>
+
+<!--
+Trae 的产品形态正在分化。
+IDE 适合专业开发者。
+Solo 适合在 IDE 内进行完整任务托管。
+Work 适合屏蔽技术细节的任务交付。
+CLI 适合企业流程集成。
+-->
+
+---
+
+# IDE 之外的触发入口
+
+<div class="grid grid-cols-2 gap-6 mt-6 text-sm">
+<div class="p-4 rounded-xl bg-purple-500/10 border border-purple-500/30">
+<div class="font-bold mb-2">协作平台</div>
+
+- 飞书
+- 钉钉
+- Slack
+- 企业微信
+</div>
+<div class="p-4 rounded-xl bg-cyan-500/10 border border-cyan-500/30">
+<div class="font-bold mb-2">研发流程</div>
+
+- GitHub / GitLab
+- CI/CD
+- Issue / PR
+- 发布系统
+</div>
+</div>
+
+<!--
+Agent 能力成熟后，触发入口会从 IDE 扩展到协作平台和研发流程。
+研发人员可以在 PR、Issue、群聊、流水线里触发 Agent。
+这对企业落地很关键，因为很多任务天然发生在代码编辑器之外。
+-->
+
+---
+
+# AI 时代付费模式
+
+<div class="mt-6 text-sm">
+
+| 版本 | 适合用户 | 核心价值 |
+|---|---|---|
+| 免费版 | 体验与轻度使用 | 建立使用习惯 |
+| 个人付费版 | 高频开发者 | 更强模型与更多额度 |
+| 企业版 | 团队与组织 | 权限、合规、审计、私有化、集成 |
+
+</div>
+
+<div class="mt-4 p-3 rounded-xl bg-amber-500/10 border border-amber-500/30 text-sm">
+AI 产品的每次调用都有真实计算成本，企业落地需要分层计费与用量治理。
+</div>
+
+<!--
+传统互联网产品边际成本下降明显，AI 产品每次调用都有计算成本。
+所以企业版的价值会集中在用量治理、模型管理、权限审计、私有化和系统集成。
+这也是管理层需要理解的商业现实。
+-->
+
+---
+
+# 课堂产出：Agent 分工表
+
+<div class="mt-5 text-sm">
+
+| 角色 | 输入 | 输出 | 验收 |
+|---|---|---|---|
+| 需求 Agent | Issue、会议纪要 | 任务拆解 | 范围清楚 |
+| 开发 Agent | 代码库、规则 | 代码 diff | 测试通过 |
+| 测试 Agent | diff、用例 | 测试报告 | 覆盖关键路径 |
+| Review Agent | PR、rules | 审查意见 | 有证据、有优先级 |
+
+</div>
+
+<!--
+这个练习让学员把 Agent Teams 落到职责表。
+每个 Agent 都要定义输入、输出和验收方式。
+角色边界清楚后，多智能体协作才有工程意义。
+-->

slidev/pages/day3/m5-browser-docs-index.md

@@ -0,0 +1,199 @@
+# 模块 5：Browser Preview 与 Browser Use
+
+<div class="mt-6 text-sm">
+
+浏览器能力分成两层：人在 IDE 里看效果，AI 驱动浏览器完成验证。
+
+</div>
+
+<div class="grid grid-cols-2 gap-6 mt-8 text-sm">
+<div class="p-4 rounded-xl bg-blue-500/10 border border-blue-500/30">
+<div class="font-bold mb-2">Browser Preview</div>
+
+- IDE 内预览页面
+- 快速看前端效果
+- 减少窗口切换
+- 服务于视觉反馈
+</div>
+<div class="p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/30">
+<div class="font-bold mb-2">Browser Use</div>
+
+- AI 点击、输入、跳转
+- 表单填写与流程验证
+- 自动截图与回归检查
+- 服务于任务验收
+</div>
+</div>
+
+<!--
+Browser Preview 和 Browser Use 要分开讲。
+Preview 解决人看页面的问题。
+Browser Use 解决 AI 操作页面和验证结果的问题。
+前端研发里，这两层能力都会进入标准工作流。
+-->
+
+---
+
+# 浏览器驱动的技术路线
+
+<div class="mt-5 text-sm">
+
+| 路线 | 特点 | 适合场景 |
+|---|---|---|
+| Playwright 脚本 | 稳定、可复现、工程化强 | 自动测试与回归 |
+| Agent Browser | 专用环境、集成度高 | 复杂网页任务 |
+| 指针模拟 | 接近真人操作 | 视觉任务与临时验证 |
+
+</div>
+
+<!--
+浏览器驱动还在快速演进。
+Playwright 工程化强，适合稳定测试。
+专用 Agent Browser 集成度高，适合复杂任务。
+指针模拟更接近真人操作，适合临时验证和视觉任务。
+课堂里关注能力边界即可。
+-->
+
+---
+
+# 从浏览器到设备模拟
+
+<div class="mt-6 text-sm">
+
+同样的驱动理念可以迁移到更多环境：手机模拟器、桌面应用、IoT 设备、终端和内部系统。
+
+</div>
+
+<div class="grid grid-cols-4 gap-3 mt-8 text-sm">
+<div class="p-3 rounded-xl bg-blue-500/10 border border-blue-500/30 text-center">网页</div>
+<div class="p-3 rounded-xl bg-emerald-500/10 border border-emerald-500/30 text-center">移动端</div>
+<div class="p-3 rounded-xl bg-amber-500/10 border border-amber-500/30 text-center">桌面端</div>
+<div class="p-3 rounded-xl bg-purple-500/10 border border-purple-500/30 text-center">IoT</div>
+</div>
+
+<!--
+这页回扣 MCP 和 CLI 思维。
+只要目标环境能被脚本、接口或本地服务驱动，Agent 就可以接入。
+浏览器只是最先成熟的场景之一。
+-->
+
+---
+
+# 代码库索引：两种路线
+
+<div class="grid grid-cols-2 gap-6 mt-6 text-sm">
+<div class="p-4 rounded-xl bg-blue-500/10 border border-blue-500/30">
+<div class="font-bold mb-2">向量化索引</div>
+
+- 语义搜索能力强
+- 适合大仓库概念查找
+- 需要关注索引更新
+</div>
+<div class="p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/30">
+<div class="font-bold mb-2">关键词搜索</div>
+
+- 实时性强
+- 结果可解释
+- 适合定位文件、函数、配置
+</div>
+</div>
+
+<!--
+向量化索引和关键词搜索各有位置。
+向量搜索适合语义层面的发现。
+关键词搜索适合精确定位，尤其代码实时变化时很可靠。
+课堂里可以提醒学员：让 AI 给结论时，最好要求它回到文件、函数和调用点。
+-->
+
+---
+
+# 代码智能管理方向
+
+<div class="mt-6 text-sm">
+
+未来的关键能力是跨文件类型理解同一份业务逻辑。
+
+</div>
+
+<div class="mt-6 text-sm">
+
+| 文件类型 | 需要理解的内容 |
+|---|---|
+| `.vue` | template、script、style、路由和状态 |
+| `.java` | Controller、Service、权限注解、事务 |
+| `.sql` | 表结构、字段含义、约束关系 |
+| `.yaml` | 环境配置、开关、外部依赖 |
+
+</div>
+
+<!--
+代码索引的下一步是智能管理。
+比如一个 Vue 文件里同时有模板、脚本和样式，一个业务功能横跨前端、接口、数据库和配置。
+AI 工具要从文件后缀继续深入到功能边界。
+-->
+
+---
+
+# 文档格式：MD 优先
+
+<div class="mt-6 text-sm">
+
+Markdown 是 AI 时代的一等文档格式：结构清楚、轻量、易读写、易版本管理。
+
+</div>
+
+<div class="grid grid-cols-3 gap-4 mt-8 text-sm">
+<div class="p-3 rounded-xl bg-blue-500/10 border border-blue-500/30 text-center">结构化</div>
+<div class="p-3 rounded-xl bg-emerald-500/10 border border-emerald-500/30 text-center">可 diff</div>
+<div class="p-3 rounded-xl bg-amber-500/10 border border-amber-500/30 text-center">可转换</div>
+</div>
+
+<!--
+Markdown 很适合 AI 读写。
+它轻量、结构清晰、版本管理友好。
+企业里可以把 AI 生成的核心内容先放在 Markdown，再转换成 Word、PDF、网页或知识库格式。
+-->
+
+---
+
+# 水合与脱水
+
+<div class="mt-6 text-sm">
+
+| 动作 | 说明 |
+|---|---|
+| 脱水 | 从 Word、PDF、PPT 中抽出结构、模板、样式要求 |
+| 生成 | 让 AI 用 Markdown 组织正文内容 |
+| 水合 | 把 Markdown 内容注入模板，输出目标格式 |
+
+</div>
+
+<div class="mt-4 p-3 rounded-xl bg-emerald-500/10 border border-emerald-500/30 text-sm">
+推荐流程：AI 用 Markdown 思考和生产，最后一步做格式转换。
+</div>
+
+<!--
+水合和脱水是处理复杂文档格式的实用思路。
+先把格式拆成模板，再让 AI 生成结构化内容，最后注入模板。
+这比直接让 AI 在复杂格式里自由编辑更稳定。
+-->
+
+---
+
+# 课堂产出：前端验证清单
+
+<div class="mt-5 text-sm">
+
+| 检查项 | 验收方式 |
+|---|---|
+| 页面能打开 | Browser Preview 或本地浏览器访问 |
+| 主流程可操作 | Browser Use 点击、输入、提交 |
+| 视觉无明显错位 | 截图检查关键视口 |
+| 代码结论可追溯 | 标注文件、函数、选择器、接口 |
+
+</div>
+
+<!--
+这个练习把浏览器能力落到前端交付验收。
+学员要理解：AI 改完前端之后，浏览器验证会成为标准动作。
+-->

slidev/pages/day3/m6-plan-review-summary.md

@@ -0,0 +1,169 @@
+# 模块 6：Agent 参与度光谱
+
+<div class="mt-6 text-sm">
+
+用户可以按任务风险和信任程度，选择 AI 参与到哪个深度。
+
+</div>
+
+<div class="mt-6 text-sm">
+
+| 纯手工 | AI Copilot 辅助 | 手动触发全托管 | Loops 全托管 |
+|---|---|---|---|
+| 人自己写 | AI 辅助补全和解释 | 人给目标，AI 执行 | AI 自主循环，人审阅 |
+
+</div>
+
+<div class="mt-4 p-3 rounded-xl bg-blue-500/10 border border-blue-500/30 text-sm">
+从左到右，Agent 参与度递增，人类需要更强的验收和边界设计。
+</div>
+
+<!--
+这页讲 Agent 参与度光谱。
+企业落地时，团队可以根据任务风险选择停在哪个位置。
+低风险重复任务可以提高自动化程度，高风险任务需要更清楚的计划、审查和人工确认。
+-->
+
+---
+
+# Plan 模式：先计划，再执行
+
+<div class="grid grid-cols-2 gap-6 mt-6 text-sm">
+<div class="p-4 rounded-xl bg-blue-500/10 border border-blue-500/30">
+<div class="font-bold mb-2">计划阶段</div>
+
+- 理解目标
+- 划定范围
+- 列出步骤
+- 标注风险
+</div>
+<div class="p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/30">
+<div class="font-bold mb-2">执行阶段</div>
+
+- 修改文件
+- 运行检查
+- 汇报 diff
+- 给出验证结果
+</div>
+</div>
+
+<!--
+Plan 模式把“想清楚再动手”显性化。
+它让用户能在代码修改前审阅目标、范围、步骤和风险。
+对企业研发来说，这是控制 Agent 风险的关键交互。
+-->
+
+---
+
+# Plan 模式适合的场景
+
+<div class="mt-6 text-sm">
+
+| 场景 | 计划里必须写清 |
+|---|---|
+| 多文件改造 | 文件范围、模块边界、测试方式 |
+| 权限相关修改 | 前端权限、后端权限、审计日志 |
+| 依赖升级 | 版本影响、兼容性、回滚方式 |
+| 生产缺陷修复 | 根因、最小改动、验证路径 |
+
+</div>
+
+<!--
+Plan 模式最适合高风险和多步骤任务。
+尤其是权限、依赖、生产缺陷、跨模块改造。
+这些任务都需要先把边界和验证方式说清楚。
+-->
+
+---
+
+# 三方智能体：Git 工作流里的 Agent
+
+<div class="mt-6 text-sm">
+
+Cursor BugBot、Codex Connect Review 代表了独立代码审查 Agent 的方向：它们挂在 PR 和代码流转环节上。
+
+</div>
+
+<div class="grid grid-cols-3 gap-4 mt-8 text-sm">
+<div class="p-3 rounded-xl bg-blue-500/10 border border-blue-500/30 text-center">PR 审查</div>
+<div class="p-3 rounded-xl bg-emerald-500/10 border border-emerald-500/30 text-center">CI/CD 检查</div>
+<div class="p-3 rounded-xl bg-amber-500/10 border border-amber-500/30 text-center">发布前验收</div>
+</div>
+
+<!--
+Agent 的位置会从 IDE 扩展到 Git 工作流。
+代码进入 PR 后，可以由独立审查 Agent 做规则检查、风险提示和测试建议。
+Trae CLI 企业版也可以嵌入流水线，形成类似能力。
+-->
+
+---
+
+# 自动 Review 的输入输出
+
+<div class="mt-5 text-sm">
+
+| 输入 | 输出 | 验收 |
+|---|---|---|
+| PR diff | 风险点 | 有文件和行号 |
+| 项目 rules | 规则命中 | 能解释触发原因 |
+| 测试结果 | 缺口建议 | 能对应关键路径 |
+| 历史问题 | 回归提醒 | 能指向相似案例 |
+
+</div>
+
+<!--
+自动 Review 要结构化。
+输入包括 diff、rules、测试结果和历史问题。
+输出要能落到文件、行号、规则和验证建议。
+这样审查 Agent 才能进入团队流程。
+-->
+
+---
+
+# 第 3 天交付物
+
+<div class="grid grid-cols-2 gap-3 mt-6 text-sm">
+<div class="p-3 rounded-xl bg-blue-500/10 border border-blue-500/30">01 规则迁移清单</div>
+<div class="p-3 rounded-xl bg-blue-500/10 border border-blue-500/30">02 Token 成本与任务匹配表</div>
+<div class="p-3 rounded-xl bg-emerald-500/10 border border-emerald-500/30">03 Command / Skill / MCP 决策表</div>
+<div class="p-3 rounded-xl bg-emerald-500/10 border border-emerald-500/30">04 Agent 分工表</div>
+<div class="p-3 rounded-xl bg-amber-500/10 border border-amber-500/30">05 前端浏览器验证清单</div>
+<div class="p-3 rounded-xl bg-amber-500/10 border border-amber-500/30">06 Plan 与 Review 验收清单</div>
+</div>
+
+<!--
+第三天的交付物偏能力体系和工作方式。
+它承接前两天的代码理解、上下文工程和规则资产化，把 Trae 的产品能力映射到企业研发流程。
+-->
+
+---
+layout: center
+class: text-center
+---
+
+# 三天课程闭环
+
+<div class="grid grid-cols-3 gap-4 mt-8 text-left max-w-5xl mx-auto text-sm">
+<div class="p-4 rounded-xl bg-blue-500/10 border border-blue-500/30">
+<div class="font-bold mb-2">第 1 天</div>
+用 TRAE 看懂真实代码库
+</div>
+<div class="p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/30">
+<div class="font-bold mb-2">第 2 天</div>
+让 TRAE 按团队规则参与研发
+</div>
+<div class="p-4 rounded-xl bg-amber-500/10 border border-amber-500/30">
+<div class="font-bold mb-2">第 3 天</div>
+把 TRAE 能力接入 Agent 工作方式
+</div>
+</div>
+
+<br/>
+
+> **最终能力：读得懂 · 问得准 · 查得实 · 改得稳 · 接得上流程**
+
+<!--
+三天课程形成闭环。
+第一天训练代码理解，第二天训练上下文和规则，第三天训练能力体系和 Agent 工作方式。
+最终目标是让学员从单次对话体验，走向真实研发流程中的持续使用。
+-->

slidev/slides.md

@@ -96,3 +96,33 @@ src: ./pages/day2/m9-rules-check.md
 ---
 src: ./pages/day2/m10-summary.md
 ---
+
+---
+layout: new-section
+---
+
+# 第 3 天：TRAE 能力体系与 Agent 工作方式
+
+---
+src: ./pages/day3/m1-rules-evolution.md
+---
+
+---
+src: ./pages/day3/m2-token-cue-agent.md
+---
+
+---
+src: ./pages/day3/m3-commands-skills-mcp.md
+---
+
+---
+src: ./pages/day3/m4-agent-teams-product-shape.md
+---
+
+---
+src: ./pages/day3/m5-browser-docs-index.md
+---
+
+---
+src: ./pages/day3/m6-plan-review-summary.md
+---