From 604e7e68d7061058861fca7b62695d9b8377960d Mon Sep 17 00:00:00 2001 From: Xinbao Date: Sat, 13 Jun 2026 08:19:10 +0800 Subject: [PATCH] feat(slidev): add day3 course slides and module pages MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 新增第三天完整课程章节，包含规则体系演进、Token经济学、Commands与Skills、Agent团队、浏览器工具、复盘总结共6个模块页面，补充课程目录跳转 --- slidev/pages/day3/m1-rules-evolution.md | 134 ++++++++++++ slidev/pages/day3/m2-token-cue-agent.md | 156 ++++++++++++++ slidev/pages/day3/m3-commands-skills-mcp.md | 172 +++++++++++++++ .../day3/m4-agent-teams-product-shape.md | 192 +++++++++++++++++ slidev/pages/day3/m5-browser-docs-index.md | 199 ++++++++++++++++++ slidev/pages/day3/m6-plan-review-summary.md | 169 +++++++++++++++ slidev/slides.md | 30 +++ 7 files changed, 1052 insertions(+) create mode 100644 slidev/pages/day3/m1-rules-evolution.md create mode 100644 slidev/pages/day3/m2-token-cue-agent.md create mode 100644 slidev/pages/day3/m3-commands-skills-mcp.md create mode 100644 slidev/pages/day3/m4-agent-teams-product-shape.md create mode 100644 slidev/pages/day3/m5-browser-docs-index.md create mode 100644 slidev/pages/day3/m6-plan-review-summary.md diff --git a/slidev/pages/day3/m1-rules-evolution.md b/slidev/pages/day3/m1-rules-evolution.md new file mode 100644 index 0000000..e5a413f --- /dev/null +++ b/slidev/pages/day3/m1-rules-evolution.md @@ -0,0 +1,134 @@ +# 模块 1：规则体系的演进 + +
+ +AI 编程工具正在把“项目规矩”从个人经验，推进到可读取、可分层、可复用的工程资产。 + +
+ +
+
+
.vscode
+
编辑器配置
+
+
+
.cursorrules / .mdc
+
AI 私有规则
+
+
+
.trae/rules
+
分层规则目录
+
+
+
AGENTS.md
+
跨工具约定
+
+
+ + + +--- + +# 从散装规则到分层规则 + +
+ +| 阶段 | 典型文件 | 核心价值 | +|---|---|---| +| 编辑器配置 | `.vscode/` | 统一格式化、插件、调试配置 | +| AI 私有规则 | `.cursorrules`、`.mdc` | 告诉 AI 项目偏好 | +| 工具规则目录 | `.trae/rules/` | 按场景拆分规则 | +| 跨工具规则 | `AGENTS.md`、`CLAUDE.md` | 让多种 Agent 读取同一套约定 | + +
+ + + +--- + +# Rules 的精细度升级 + +
+
+
生效方式
+ +- 始终生效 +- 指定文件生效 +- 智能判断生效 +- 手动触发 +
+
+
适用场景
+ +- 前端组件规范 +- 后端接口规范 +- 安全检查规范 +- 测试与交付规范 +
+
+ + + +--- + +# 规则分层示例 + +
+ +``` +.trae/ +└── rules/ + ├── global.md + ├── frontend.md + ├── backend.md + ├── security.md + ├── testing.md + └── delivery.md +``` + +
+ +
+
全局：输出格式、语言、证据要求
+
模块：React、Java、API、数据库
+
流程：审查、测试、发布、回滚
+
+ + + +--- + +# 课堂产出：规则迁移清单 + +
+ +| 旧资产 | 迁移目标 | 检查点 | +|---|---|---| +| `.cursorrules` | `AGENTS.md` 或 `.trae/rules/global.md` | 是否仍适用于全项目 | +| `.mdc` | `.trae/rules/*.md` | 是否需要按文件范围拆分 | +| 口头规范 | `security.md`、`testing.md` | 是否能写成触发条件 | +| Review 经验 | `delivery.md` | 是否能形成验收标准 | + +
+ + diff --git a/slidev/pages/day3/m2-token-cue-agent.md b/slidev/pages/day3/m2-token-cue-agent.md new file mode 100644 index 0000000..45ad979 --- /dev/null +++ b/slidev/pages/day3/m2-token-cue-agent.md @@ -0,0 +1,156 @@ +# 模块 2：Token 经济学 + +
+ +AI 编程的成本判断正在变化：从逐句节省 token，转向设计稳定的上下文管道。 + +
+ +
+
+
早期关注
+ +- 上下文窗口小 +- 单次调用贵 +- Prompt 反复压缩 +- Agent 执行链短 +
+
+
现在关注
+ +- 上下文组织 +- 工具调用效率 +- 任务拆解质量 +- 可验证交付物 +
+
+ + + +--- + +# 从个人用水到工业用水 + +
+
+个人省水思维 → 工业管道思维 +
+
+ +
+
任务入口清楚
+
上下文流动顺畅
+
输出可验收
+
+ + + +--- + +# Tab → Cue → Agent + +
+
+
1
+
早期 Tab
+
单行补全
+
+
→
+
+
2
+
Cue Pro
+
多行、跨文件、智能导入
+
+
→
+
+
3
+
Agent 内置能力
+
计划、修改、验证、交付
+
+
+ + + +--- + +# Cue 的位置变化 + +
+
+
作为独立功能
+ +- 写代码时出现建议 +- 帮你补全导入 +- 局部理解上下文 +
+
+
作为 Agent 能力
+ +- 理解任务意图 +- 执行多文件修改 +- 结合工具验证结果 +
+
+ + + +--- + +# 模型选择：务实路线 + +
+ +| 场景 | 优先考虑 | +|---|---| +| 代码理解 | 上下文能力、检索质量、引用证据 | +| 代码修改 | 编辑稳定性、工具调用、测试闭环 | +| 文档生成 | 长文组织、风格一致、格式输出 | +| 企业集成 | 成本、权限、审计、私有化 | + +
+ +
+模型策略的目标是场景匹配：用合适模型处理合适任务。 +
+ + + +--- + +# 课堂产出：成本与任务匹配表 + +
+ +| 任务类型 | 上下文需求 | 验收方式 | 适合模型策略 | +|---|---|---|---| +| 代码解释 | 中 | 文件与函数引用 | 快速模型 | +| 多文件改造 | 高 | 测试与 diff | 强推理模型 | +| 文档整理 | 高 | 结构与风格检查 | 长上下文模型 | +| 自动 Review | 中 | 规则命中与证据 | 工具链集成模型 | + +
+ + diff --git a/slidev/pages/day3/m3-commands-skills-mcp.md b/slidev/pages/day3/m3-commands-skills-mcp.md new file mode 100644 index 0000000..6cd2f64 --- /dev/null +++ b/slidev/pages/day3/m3-commands-skills-mcp.md @@ -0,0 +1,172 @@ +# 模块 3：从 Commands 到 Skills + +
+ +Commands 把常用话术封装成快捷入口，Skills 把完整能力封装成可复用资产。 + +
+ +
+
+
Commands
+ +- `.trae/commands/` +- Markdown 定义 +- 斜杠触发 +- 适合固定提示词 +
+
+
Skills
+ +- `.trae/skills/` +- 描述按需加载 +- 可带脚本、模板、示例 +- 适合完整工作流 +
+
+ + + +--- + +# Commands 适合什么？ + +
+ +| 场景 | 示例 | +|---|---| +| 固定问法 | 总结当前 PR | +| 固定格式 | 生成 commit message | +| 固定检查 | 跑一次代码审查 | +| 固定输出 | 生成日报、周报、变更说明 | + +
+ +
+Command 的关键价值是降低重复输入成本。 +
+ + + +--- + +# Skills 的两个升级 + +
+
+
按需加载
+ +Agent 先扫描 skill 描述，任务相关时再读取完整说明。 +
+
+
可携带资源
+ +Skill 可以包含脚本、模板、示例、参考文件和检查清单。 +
+
+ + + +--- + +# Skill 的两种气质 + +
+
+
文科型 Skill
+ +- 品牌风格 +- 文档结构 +- 设计规范 +- 沟通口径 +
+
+
理科型 Skill
+ +- 自动化脚本 +- 构建命令 +- 测试流程 +- 数据处理工具链 +
+
+ + + +--- + +# MCP 的价值 + +
+ +MCP 的历史价值是推动工具面向 AI 开放接口，让 Agent 能连接浏览器、数据库、文件系统、设计工具和内部平台。 + +
+ +
+
打开连接可能性
+
统一工具描述方式
+
推动工具生态改造
+
+ + + +--- + +# MCP 与 CLI 思维 + +
+ +| 接入方式 | 适合场景 | 课堂判断 | +|---|---|---| +| CLI | 命令稳定、脚本成熟、团队已有运维习惯 | 优先做轻量封装 | +| MCP | 需要交互式工具、长连接、结构化能力描述 | 适合平台化接入 | +| Skill | 需要把使用方法、模板、脚本一起交付 | 适合团队复用 | + +
+ + + +--- + +# 课堂产出：能力封装决策表 + +
+ +| 需求 | 推荐封装 | 理由 | +|---|---|---| +| 每天生成日报 | Command | 固定话术、固定格式 | +| 代码审查流程 | Skill | 需要规则、模板、示例 | +| 内部平台查询 | CLI 或 MCP | 取决于现有接口形态 | +| 设计规范落地 | Skill | 需要风格、样例、检查清单 | + +
+ + diff --git a/slidev/pages/day3/m4-agent-teams-product-shape.md b/slidev/pages/day3/m4-agent-teams-product-shape.md new file mode 100644 index 0000000..80c1043 --- /dev/null +++ b/slidev/pages/day3/m4-agent-teams-product-shape.md @@ -0,0 +1,192 @@ +# 模块 4：从单 Agent 到 Agent Teams + +
+ +Agent 协作正在从单个助手，发展成有角色、有边界、有交付流程的团队形态。 + +
+ +
+
+
1
+
单 Agent
+
一个 Agent 处理全部任务
+
+
→
+
+
2
+
SubAgent
+
主 Agent 拆分子任务
+
+
→
+
+
3
+
Agent Teams
+
多角色协作交付
+
+
+ + + +--- + +# Agent Teams 的两种形态 + +
+
+
长期型
+ +- 固定测试 Agent +- 固定文档 Agent +- 固定审查 Agent +- 固定部署 Agent +
+
+
短期型
+ +- 针对一次复杂任务临时分工 +- 多路搜索与验证 +- 汇总后统一交付 +- 交付完成即结束 +
+
+ + + +--- + +# Trae Solo 的协作信号 + +
+ +Trae Solo 把设计、开发、部署等能力做成独立执行单元，已经体现出多智能体协作的产品方向。 + +
+ +
+
+
设计能力
+
界面、布局、交互
+
+
+
开发能力
+
代码、依赖、调试
+
+
+
部署能力
+
构建、发布、验证
+
+
+ + + +--- + +# 产品形态分化 + +
+ +| 形态 | 定位 | +|---|---| +| Trae IDE | 面向专业开发者的桌面编辑器 | +| Trae Solo | IDE 内的全托管 Agent 模式 | +| Trae Work | 屏蔽技术细节，面向任务结果 | +| 移动端 | 随时触发、查看、确认 | +| Trae CLI 企业版 | 嵌入飞书、钉钉、GitLab、GitHub、CI/CD | + +
+ + + +--- + +# IDE 之外的触发入口 + +
+
+
协作平台
+ +- 飞书 +- 钉钉 +- Slack +- 企业微信 +
+
+
研发流程
+ +- GitHub / GitLab +- CI/CD +- Issue / PR +- 发布系统 +
+
+ + + +--- + +# AI 时代付费模式 + +
+ +| 版本 | 适合用户 | 核心价值 | +|---|---|---| +| 免费版 | 体验与轻度使用 | 建立使用习惯 | +| 个人付费版 | 高频开发者 | 更强模型与更多额度 | +| 企业版 | 团队与组织 | 权限、合规、审计、私有化、集成 | + +
+ +
+AI 产品的每次调用都有真实计算成本，企业落地需要分层计费与用量治理。 +
+ + + +--- + +# 课堂产出：Agent 分工表 + +
+ +| 角色 | 输入 | 输出 | 验收 | +|---|---|---|---| +| 需求 Agent | Issue、会议纪要 | 任务拆解 | 范围清楚 | +| 开发 Agent | 代码库、规则 | 代码 diff | 测试通过 | +| 测试 Agent | diff、用例 | 测试报告 | 覆盖关键路径 | +| Review Agent | PR、rules | 审查意见 | 有证据、有优先级 | + +
+ + diff --git a/slidev/pages/day3/m5-browser-docs-index.md b/slidev/pages/day3/m5-browser-docs-index.md new file mode 100644 index 0000000..57616c8 --- /dev/null +++ b/slidev/pages/day3/m5-browser-docs-index.md @@ -0,0 +1,199 @@ +# 模块 5：Browser Preview 与 Browser Use + +
+ +浏览器能力分成两层：人在 IDE 里看效果，AI 驱动浏览器完成验证。 + +
+ +
+
+
Browser Preview
+ +- IDE 内预览页面 +- 快速看前端效果 +- 减少窗口切换 +- 服务于视觉反馈 +
+
+
Browser Use
+ +- AI 点击、输入、跳转 +- 表单填写与流程验证 +- 自动截图与回归检查 +- 服务于任务验收 +
+
+ + + +--- + +# 浏览器驱动的技术路线 + +
+ +| 路线 | 特点 | 适合场景 | +|---|---|---| +| Playwright 脚本 | 稳定、可复现、工程化强 | 自动测试与回归 | +| Agent Browser | 专用环境、集成度高 | 复杂网页任务 | +| 指针模拟 | 接近真人操作 | 视觉任务与临时验证 | + +
+ + + +--- + +# 从浏览器到设备模拟 + +
+ +同样的驱动理念可以迁移到更多环境：手机模拟器、桌面应用、IoT 设备、终端和内部系统。 + +
+ +
+
网页
+
移动端
+
桌面端
+
IoT
+
+ + + +--- + +# 代码库索引：两种路线 + +
+
+
向量化索引
+ +- 语义搜索能力强 +- 适合大仓库概念查找 +- 需要关注索引更新 +
+
+
关键词搜索
+ +- 实时性强 +- 结果可解释 +- 适合定位文件、函数、配置 +
+
+ + + +--- + +# 代码智能管理方向 + +
+ +未来的关键能力是跨文件类型理解同一份业务逻辑。 + +
+ +
+ +| 文件类型 | 需要理解的内容 | +|---|---| +| `.vue` | template、script、style、路由和状态 | +| `.java` | Controller、Service、权限注解、事务 | +| `.sql` | 表结构、字段含义、约束关系 | +| `.yaml` | 环境配置、开关、外部依赖 | + +
+ + + +--- + +# 文档格式：MD 优先 + +
+ +Markdown 是 AI 时代的一等文档格式：结构清楚、轻量、易读写、易版本管理。 + +
+ +
+
结构化
+
可 diff
+
可转换
+
+ + + +--- + +# 水合与脱水 + +
+ +| 动作 | 说明 | +|---|---| +| 脱水 | 从 Word、PDF、PPT 中抽出结构、模板、样式要求 | +| 生成 | 让 AI 用 Markdown 组织正文内容 | +| 水合 | 把 Markdown 内容注入模板，输出目标格式 | + +
+ +
+推荐流程：AI 用 Markdown 思考和生产，最后一步做格式转换。 +
+ + + +--- + +# 课堂产出：前端验证清单 + +
+ +| 检查项 | 验收方式 | +|---|---| +| 页面能打开 | Browser Preview 或本地浏览器访问 | +| 主流程可操作 | Browser Use 点击、输入、提交 | +| 视觉无明显错位 | 截图检查关键视口 | +| 代码结论可追溯 | 标注文件、函数、选择器、接口 | + +
+ + diff --git a/slidev/pages/day3/m6-plan-review-summary.md b/slidev/pages/day3/m6-plan-review-summary.md new file mode 100644 index 0000000..08dd8f6 --- /dev/null +++ b/slidev/pages/day3/m6-plan-review-summary.md @@ -0,0 +1,169 @@ +# 模块 6：Agent 参与度光谱 + +
+ +用户可以按任务风险和信任程度，选择 AI 参与到哪个深度。 + +
+ +
+ +| 纯手工 | AI Copilot 辅助 | 手动触发全托管 | Loops 全托管 | +|---|---|---|---| +| 人自己写 | AI 辅助补全和解释 | 人给目标，AI 执行 | AI 自主循环，人审阅 | + +
+ +
+从左到右，Agent 参与度递增，人类需要更强的验收和边界设计。 +
+ + + +--- + +# Plan 模式：先计划，再执行 + +
+
+
计划阶段
+ +- 理解目标 +- 划定范围 +- 列出步骤 +- 标注风险 +
+
+
执行阶段
+ +- 修改文件 +- 运行检查 +- 汇报 diff +- 给出验证结果 +
+
+ + + +--- + +# Plan 模式适合的场景 + +
+ +| 场景 | 计划里必须写清 | +|---|---| +| 多文件改造 | 文件范围、模块边界、测试方式 | +| 权限相关修改 | 前端权限、后端权限、审计日志 | +| 依赖升级 | 版本影响、兼容性、回滚方式 | +| 生产缺陷修复 | 根因、最小改动、验证路径 | + +
+ + + +--- + +# 三方智能体：Git 工作流里的 Agent + +
+ +Cursor BugBot、Codex Connect Review 代表了独立代码审查 Agent 的方向：它们挂在 PR 和代码流转环节上。 + +
+ +
+
PR 审查
+
CI/CD 检查
+
发布前验收
+
+ + + +--- + +# 自动 Review 的输入输出 + +
+ +| 输入 | 输出 | 验收 | +|---|---|---| +| PR diff | 风险点 | 有文件和行号 | +| 项目 rules | 规则命中 | 能解释触发原因 | +| 测试结果 | 缺口建议 | 能对应关键路径 | +| 历史问题 | 回归提醒 | 能指向相似案例 | + +
+ + + +--- + +# 第 3 天交付物 + +
+
01 规则迁移清单
+
02 Token 成本与任务匹配表
+
03 Command / Skill / MCP 决策表
+
04 Agent 分工表
+
05 前端浏览器验证清单
+
06 Plan 与 Review 验收清单
+
+ + + +--- +layout: center +class: text-center +--- + +# 三天课程闭环 + +
+
+
第 1 天
+用 TRAE 看懂真实代码库 +
+
+
第 2 天
+让 TRAE 按团队规则参与研发 +
+
+
第 3 天
+把 TRAE 能力接入 Agent 工作方式 +
+
+ +
+ +> **最终能力：读得懂 · 问得准 · 查得实 · 改得稳 · 接得上流程** + + diff --git a/slidev/slides.md b/slidev/slides.md index fc88a45..073ce01 100644 --- a/slidev/slides.md +++ b/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 +---