Menu
演示文稿背后的概念框架 —— "从 Vibe Coding 到 Agentic Engineering"的含义、旅程为何如此结构化，以及每张幻灯片如何契合叙事弧线
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
创建一个 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 级别。