feat(slidev): add day3 course slides and module pages
新增第三天完整课程章节，包含规则体系演进、Token经济学、Commands与Skills、Agent团队、浏览器工具、复盘总结共6个模块页面，补充课程目录跳转
This commit is contained in:
Xinbao
@@ -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 可读取的规则资产。
|
||||||
|
-->
|
||||||
@@ -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 成本和任务价值放在一起看。
|
||||||
|
企业里真正要管的是任务成本、返工成本和交付风险。
|
||||||
|
-->
|
||||||
@@ -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。
|
||||||
|
判断标准是任务复杂度、资源依赖、团队复用和工具接入方式。
|
||||||
|
-->
|
||||||
@@ -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 都要定义输入、输出和验收方式。
|
||||||
|
角色边界清楚后，多智能体协作才有工程意义。
|
||||||
|
-->
|
||||||
@@ -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 改完前端之后，浏览器验证会成为标准动作。
|
||||||
|
-->
|
||||||
@@ -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 工作方式。
|
||||||
|
最终目标是让学员从单次对话体验，走向真实研发流程中的持续使用。
|
||||||
|
-->
|
||||||
@@ -96,3 +96,33 @@ src: ./pages/day2/m9-rules-check.md
|
|||||||
---
|
---
|
||||||
src: ./pages/day2/m10-summary.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
|
||||||
|
---
|
||||||
|
|||||||
Reference in New Issue
Block a user