Menu
演示文稿背后的概念框架 —— "从 Vibe Coding 到 Agentic Engineering"的含义、旅程为何如此结构化，以及每张幻灯片如何契合叙事弧线
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Basé sur la classification professionnelle SOC
创建一个 SVG 时间卡片，显示迪拜的当前时间。将 SVG 写入 agent-teams/output/dubai-time.svg 并更新 agent-teams/output/output.md。
AI 代理的浏览器自动化 CLI 工具。当用户需要与网站交互时使用，包括导航页面、填写表单、点击按钮、截取屏幕截图、提取数据、测试 Web 应用或自动化任何浏览器任务。触发条件包括"打开网站"、"填写表单"、"点击按钮"、"截取屏幕截图"、"从页面抓取数据"、"测试此 Web 应用"、"登录网站"、"自动化浏览器操作"或任何需要编程式 Web 交互的任务。
关于演示文稿幻灯片格式、权重系统、导航和章节结构的知识
关于演示文稿中 CSS 类、组件模式和语法高亮的知识
显示巴基斯坦标准时间（PKT，UTC+5）的当前时间。当用户询问当前时间、巴基斯坦时间或 PKT 时使用。
从 Open-Meteo API 获取迪拜当前天气温度数据的指令
| name | vibe-to-agentic-framework |
| description | 演示文稿背后的概念框架 —— "从 Vibe Coding 到 Agentic Engineering"的含义、旅程为何如此结构化，以及每张幻灯片如何契合叙事弧线 |
本技能教授演示文稿背后的概念模型。每张幻灯片和每个章节都在讲述一个故事：开发者如何从无结构的"vibe coding"（低级）逐步进阶到高级的 agentic engineering（高级）。
Vibe Coding（低级） 是指开发者在没有任何结构的情况下使用 Claude Code —— 没有项目上下文、没有约定、没有可复用的知识。每次提示都像抛硬币一样。Claude 可能会创建随机的端点、忽略现有模式、跳过测试，并生成不一致的代码。代码库在每次交互中都趋向混乱。
Agentic Engineering（高级） 是指 Claude Code 作为一个完全配置的工程系统运行。它了解项目架构（CLAUDE.md）、遵循作用域约定（Rules）、按需加载领域专业知识（Skills）、委派给专业工作者（Agents）、编排多步骤工作流（Commands）、自动化生命周期事件（Hooks），并连接外部工具（MCP Servers）。每次提示都能产生一致的、经过测试的、生产就绪的代码。
这两个极端之间的旅程是渐进且累积的。每个最佳实践都建立在前一个之上，演示文稿按照开发者应采用的顺序来教授它们。
演示文稿使用 4 级评分系统，而非百分比进度条：
| 级别 | 顺序 | 颜色 | 旅程条高度 | 描述 |
|---|---|---|---|---|
| Low | 1 | 红/橙色 (hsl(0, 70%, 45%)) | 25% | Vibe coding 地带 —— 无结构 |
| Medium | 2 | 黄色 (hsl(40, 70%, 45%)) | 50% | 结构化工作流，部分自动化 |
| High | 3 | 浅绿色 (hsl(80, 70%, 45%)) | 75% | 领域知识、Skills、自定义 Agents |
| Pro | 4 | 深绿色 (hsl(120, 70%, 45%)) | 100% | 完全的 agentic engineering，多代理团队 |
旅程条在第 1 张幻灯片（标题幻灯片）上隐藏，从第 2 张幻灯片开始显示。级别通过关键过渡幻灯片上的 data-level 属性设置，并被后续幻灯片继承，直到下一次级别变更。当级别变更时，.level-badge 通过 JS 注入到幻灯片的 h1 上（不要在 HTML 中硬编码这些）。
每项技术都在一个真实的全栈项目上进行演示。演示文稿展示了从普通项目（vibe coding）到具有完整 Claude Code 配置（agentic engineering）的项目的转变：
改造前（Vibe Coding）：
todoapp/
├── backend/ # FastAPI (Python)
│ ├── main.py
│ ├── routes/
│ ├── models/
│ └── tests/
└── frontend/ # Next.js (TypeScript)
├── components/
├── pages/
└── lib/
改造后（Agentic Engineering）：
todoapp/
├── .claude/ # Claude Code 配置
│ ├── agents/ # 自定义 Subagents
│ ├── skills/ # 领域知识
│ ├── commands/ # Slash Commands
│ ├── hooks/ # 生命周期脚本
│ ├── rules/ # 模块化指令
│ ├── settings.json # 团队设置
│ └── settings.local.json # 个人设置
├── backend/
│ └── CLAUDE.md # 后端指令
├── frontend/
│ └── CLAUDE.md # 前端指令
├── .mcp.json # 托管的 MCP 服务器
└── CLAUDE.md # 项目指令
为什么选择 TodoApp？ 它足够小，可以在幻灯片上展示，但又足够复杂，能演示真实问题：一个具有路由模式和测试约定的后端，一个具有组件层次结构和设计令牌的前端，以及一个 monorepo 结构，其中跨领域关注点（如添加新功能）需要两侧协调。
TodoApp 使 vibe coding 问题变得具体：没有结构时，要求 Claude "添加笔记功能"会产生一个随机的 /api/notes 端点，不遵循 routes/todos.py 的模式，一个没有侧边栏导航的独立页面，以及零测试。有了完整的 agentic 设置，相同的请求会产生遵循现有模式的路由、集成到侧边栏的页面，以及匹配 test_todos.py 风格的测试。
演示文稿遵循一个刻意设计的教学序列。每个章节解锁一个新的能力层：
目的： 铺垫。介绍 TodoApp，定义 vibe coding，并展示目标。
目的： 安装并运行 Claude Code。这纯粹是后勤工作 —— 还没有工程实践。
目的： 第一个真正的改进。即使没有任何项目配置，更好的输入也能产生更好的输出。
@files 给 Claude 它需要的代码。立即减少幻觉。/plan 强制在编码前思考。防止在错误方案上浪费精力。为什么是 Low 级别： 提示是基础但有限的。它改善单次交互但不会创建持久的项目知识。每次会话都从零开始。
目的： 从会话级知识到项目级知识的飞跃。Claude 现在可以跨会话记忆。
.claude/rules/ 中的路径作用域约定。Rules 是乘数 —— 它们自动应用于每个匹配的文件，无需开发者额外努力就能强制一致性。一个 backend-testing.md 规则就能确保每个测试永远遵循相同的模式。为什么是 Medium 级别： 项目记忆将 Claude 从无状态工具转变为上下文感知的协作者。但仅有知识并不能创建工作流。
目的： 防止浪费精力并提高执行质量的系统方法。
为什么仍然是 Medium 级别： 工作流很重要但概念相对简单。它们建立在第 3 部分的项目记忆之上，并更系统地使用它。跃升到 High 需要领域知识。
目的： 可复用的、按需的专业知识。Skills 是静态记忆（CLAUDE.md/Rules）和动态 Agents 之间的桥梁。
frontend-conventions 技能，教授 Tailwind 令牌、组件模式和侧边栏集成。context: fork 选项。为什么是 High 级别： Skills 是第一个"乘数"概念 —— 一个技能定义改善其领域内的每次未来交互。但 Skills 是被动知识；它们需要 Agents 才能变得主动。
目的： 本演示文稿涵盖的目标。自主的、专业的 Agents 协调构建端到端功能。
/add-feature 命令协调前端 + 后端 Agents，每个都有自己的 Skills，交付完整的功能。这是架构的巅峰。为什么是 High 级别： 本节涵盖本演示文稿中教授的最高价值实践。之前的一切都是为此做准备。编排和 agentic 工作流代表了本课程涵盖的天花板 —— 完整的 Pro（多代理团队、高级编排模式）超出了本演示文稿的范围。
庆祝时刻。展示完整的 TodoApp 配置：
目的： 参考材料。每个命令、设置和配置选项。无权重，因为这些是参考查询，不是旅程里程碑。包括：工具使用、所有 Slash Commands、提交/PR 工作流、自定义选项、调试技巧和黄金法则。
创建或修改幻灯片时，考虑：
这个概念在旅程中的位置？ 关于"提示中更好的错误消息"的幻灯片属于第 2 部分（提示，Low 级别）。关于"Agent 记忆作用域"的幻灯片属于第 6 部分（agentic，High 级别）。
前后对比是什么？ 每张重要幻灯片都应该隐式或显式地展示对比：在 Low 级别（vibe coding）时会发生什么 vs 使用此技术后会发生什么。使用 TodoApp 使其具体化。
级别分配是否合理？ 级别转换发生在 Part 章节边界。章节内的单张幻灯片继承该章节的级别。
是否建立在之前的基础上？ Skills 假设开发者已经了解 CLAUDE.md 和 Rules。Agents 假设他们了解 Skills。Commands 假设他们了解 Agents。不要在概念所属章节之前引用它。
使用 TodoApp。 抽象的解释会让观众失去兴趣。展示实际的 routes/todos.py 代码、实际的 Sidebar.tsx 组件、实际的 CLAUDE.md 内容。贯穿示例是使框架具体化的关键。
| 幻灯片 | 幻灯片名称 | data-level | 级别标签 |
|---|---|---|---|
| 10 | Better Prompting（章节分隔符） | data-level="low" | Low |
| 18 | Project Memory（章节分隔符） | data-level="medium" | Medium |
| 29 | Domain Knowledge（章节分隔符） | data-level="high" | High |
| 34 | Agentic Engineering（章节分隔符） | data-level="high" | High |
所有其他幻灯片继承在其之前设置的最后一个 data-level 属性的级别。幻灯片 1-9（介绍 + 前置准备）没有级别，旅程条保持隐藏，直到第 2 张幻灯片显示"Low"（幻灯片 2-9 位于第 10 张幻灯片的第一次级别转换之前，因此旅程条在第 10 张幻灯片之前显示为空/零）。
注意： 主演示文稿（presentation/index.html）最高到 High 级别 —— 不使用 data-level="pro"。Pro 标记在旅程条上作为理论天花板保持可见，但填充永远不会到达它。视频演示文稿（1-video-workflow.html）最高到 Medium 级别。