← → Space
VC
AI Engineering Workshop — 2026
Vibe Coding
完全指南
面向产品/设计团队的 AI 编程实战手册
Workshop
Shawn Wu
7 Chapters
01
Chapter 01
什么是
Vibe Coding
Origin — 2025.02
"There's a new kind of coding I call 'vibe coding', where you fully give in to the vibes, embrace exponentials, and forget that the code even exists."
— Andrej Karpathy
完全顺从 AI 的感觉，不对抗，不细看，让 AI 做，你只管感觉对不对。
这个词迅速引爆社区——它说出了很多人已经在做但没有名字的事情。
Evolution
人和 AI 的分工如何转移
| 时间 | 工具 | 人的角色 | AI 的角色 |
|---|
| 2022 | GitHub Copilot | 写代码的人 | 补全下半句 |
| 2023-24 | Cursor | 审代码的人 | 结对伙伴 |
| 2025- | Claude Code / Codex | 给指令的人 | 独立工程师团队 |
变的不是技术有多先进，而是你和 AI 之间的关系。
Key Insight
Vibe Coding
不是放弃控制
是控制点上移。
从控制每一行代码，变成控制需求质量和验收标准。
- Copilot — 你是写代码的人，AI 是你的输入法
- Cursor — 你是审代码的人，AI 是你的结对伙伴
- Claude Code — 你是给指令的人，AI 是你的独立工程师团队
你的价值不再是"怎么写"，
而是"写什么"和"写得对不对"。
Real Cases
这不是营销，是正在发生的现实
01
AppStore 付费榜 Top 1
花叔从未手写过一行代码。所有产品都用 AI 完成，全程只做两件事：说清楚要什么，验证结果。
02
一个下午，想法到原型
Anthropic PM Cat Wu：上午做策略讨论，下午用 Claude Code 把 spec 变成可跑的 demo。
03
PM 开始提交代码
Ramp CPO：2025 年底 50% 代码由 AI 生成。PM 自己写代码、提 PR、上功能，不再等排期。
Real Cases
更多真实案例
04
一人推进十几个任务
Claude Code 创始人 Boris Cherny 同时运行 5 个实例。47 天里有 46 天没手写代码，最长单次 session 跑了 1 天 18 小时 50 分钟。
05
非技术 PM 的第一个产品
一位没有编程背景的 PM，用 Claude Cowork 自然语言描述需求，2 小时完成第一个版本。整个过程没有写过一行代码。
Tool 01
Claude Code
终端里的独立工程师。直接在终端运行，你描述需求，它自己规划、读写代码、跑测试、操作 Git。
GA 后仅 6 个月 ARR 达 10 亿美元
| 维度 | IDE Agent | 终端 Agent |
|---|
| 运行环境 | 编辑器内嵌 | 终端原生 |
| 自主度 | 需要确认 | 可无人值守 |
| 记忆 | 隐式索引 | 显式 CLAUDE.md |
| 并行 | 单实例 | 多实例并行 |
Tool 02
Codex
OpenAI 对标 Claude Code 的产品。
两者可以组合使用——生态在融合，不是零和竞争。
Tool 03
OpenClaw
"别再给 AI 配工具了，给它一台电脑。"
不是让 AI 调 API，而是给 AI 完整的工作环境——文件系统 + Shell + 浏览器 + 工作区。
门槛从"会写 MCP"降到"会说话"。
03
Chapter 03
底层架构
大模型 · Agent · Skill · Context
Concepts
用一个类比说清楚
Agent
员工
有目标、行动力、记忆，执行多步任务
CTX
血液
连接三者。没有好的上下文，再强的大脑也帮不上忙
核心原则：给 Agent 看到它解决当前问题所需的上下文，不是整个项目的百科全书。
Memory System
CLAUDE.md
每次对话自动读取。不是说明书，是你和 AI 之间的契约。
- Boris 团队只有 ~2500 tokens / 100 行
- 从护栏开始，别写手册
- 每次 Claude 犯错就加一条规则
Flywheel
飞轮机制
Agent 犯错
→ 记录到 CLAUDE.md / Skill
→ 下次不再犯
→ 错误率持续降低
三个月后，你养出来的 CLAUDE.md 是你最有价值的 AI 资产。
Prerequisites
不是学编程，是不被 AI 带偏
- 文件系统基础 — 文件夹结构、路径写法
- Git 基本概念 — commit、branch、PR，理解 AI 在做什么
- 运行环境基础 — 前端/后端/数据库，本地 vs 线上
- API 基本概念 — 能看懂简单的 API 文档
- 错误信息基础 — 能把报错完整复制给 AI
判断标准：能用一句话描述"出了什么问题"，AI 大概率能帮你解决。
First Task
入场券任务
找一件满足以下条件的事作为起点：
- 你已经知道结果应该是什么样
- 原来需要花 1-3 小时
- 失败了没有大影响
Examples
- 竞品调研笔记 → 结构化报告
- 5 个用户访谈录音 → insight 列表
- 团队日常报告模板化，一键生成
先从这里开始，
不要从"做一个完整产品"开始。
Core Loop
五步循环
描述需求
→
审查方案
→
确认执行
→
验证结果
→
迭代改进
不管项目大小，底层模式都是这五步。
你始终只做两件事：说清楚要什么，判断做得对不对。
Prompting Principles
三条提问原则
01
具体
文件名、行号、函数名、期望行为——能给就给，越具体越精准
02
指向
"像那个一样做"比"做一个漂亮的"有效 100 倍。把写得好的部分指给 AI 看
03
克制
一次只做一件事。任务大就分步来，每步确认后再下一步
推荐
在 Header.tsx 导航栏添加搜索框，用 Fuse.js 做模糊搜索，参考现有 FilterDropdown 样式
Advanced
让 Claude 采访你
"我想做 X 功能，在动手之前先采访我，问清楚所有你需要知道的事情。"
Claude 会追问场景和边界情况。这些问题里，至少有一半是你自己还没想清楚的。
Workflow
采访阶段
↓
生成 Spec
↓
新会话执行
obra/superpowers — Brainstorm → Plan → TDD → 并行执行
What Makes a Good Skill
三个判断标准
01
能复用
同类任务用同一个 Skill，不重新描述
02
有明确 I/O
给什么、产出什么，清晰可预期
03
包含 Gotchas
记录真实踩过的坑，这是最有价值的部分
好的 Skill 不是文字越多越好，而是信噪比越高越好。
Skill Layers
按层级推荐
通用层 — 所有人
| 写作风格 | 上传样本文章，比规则有效 |
| 晨间简报 | 汇总待办、会议、关注信息 |
| 会议纪要 | 录音 → 纪要 + 行动项 |
| 竞品分析 | 给 URL → 结构化对比 |
产品层 — PM / 设计师
| PRD 生成 | 描述功能 → 规格文档 |
| 用户研究 | 访谈记录 → insight |
| 周报更新 | 状态 → 多受众版本 |
Design Layer
Impeccable
专门解决 AI 设计"看起来廉价"问题。
- 七个领域的设计参考指南
- 20 个可直接调用的指令
- /audit · /critique · /normalize · /polish
Engineering Layer
gstack
YC CEO Garry Tan 开源，23+ Agent Skills。
Think → Plan → Build
→ Review → Test → Ship
→ Reflect
MIT 开源，社区最完整 Skill 体系之一。
Auto-Optimization
Skill 不用全靠手写
Karpathy 的 Autoresearch 方法：定义 3-6 个评分标准（yes/no），让 AI 自我迭代优化 Skill。
56%
→
92%
Landing page Skill 只用了 4 轮迭代。
你唯一需要做的是定义好评分标准。
Limitations
不讲局限性的 AI 分享都是在骗你
01
能生成 ≠ 能交付
AI 缺少业务细节。解法：先做"知识工程"，把业务判断写成规格文档。
02
需求越模糊，偏差越大
"做个好看的页面"，AI 只能猜。解法：描述最终产物、指定选型、给出数据源。
03
讨好倾向
AI 会"找到"不存在的 bug。解法：不反复追问，换角度或开新会话。
Limitations
更多边界
04
上下文管理是技术活
一个会话太多事，质量下降。解法：一个会话一件事，切换就 /clear。
05
设计质量需要人把关
90% 应用看起来廉价。解法：用 Impeccable 注入设计系统约束。
06
必须经过真实验证
"看起来对" ≠ "是对的"。解法：用 Maestro 做 UI 测试闭环。
Pitfalls
六个你一定会踩的坑
| 01 | 一个会话什么都塞 | → 聚焦一个任务，做完就 /clear |
| 02 | 反复纠正，越改越偏 | → 纠正两次不行，推倒重来 |
| 03 | 看着像对的就接受了 | → 每轮改动实际运行验证 |
| 04 | 过度微操 | → 关注结果不关注过程 |
| 05 | 需求模糊然后怪 AI | → 给具体的、可验证的需求 |
| 06 | 不写 CLAUDE.md | → 每次犯错记一条，三个月后最值钱 |
Learning Curve
真实的学习曲线
| 第 1-3 天 | 惊喜期 | "哇，它真的能做！" |
| 第 4-7 天 | 挫折期 | "怎么越来越乱" |
| 第 2-4 周 | 摸索期 | "开始理解边界在哪" |
| 第 1-3 月 | 熟练期 | "找到自己的工作方式" |
| 3 个月后 | 飞轮期 | "越用越顺，效率复利增长" |
挫折期是最重要的关口。大多数人在这里放弃。实际上你在学一种新的工作方式。
Flywheel
两个飞轮
Personal
使用 → 踩坑 → 记录 → 下次更顺 → 更多使用 → 更多积累
Knowledge
完成任务 → 固化 Skill → 被复用 → 被 AI 优化 → 更好的 Skill
Practice Path
六步路径
| 1 | 用 AI 复刻已有工作 |
| 2 | 让 Agent 自主完成任务 |
| 3 | "必定成功"的任务外包给 AI |
| 4 | 每次失败永久修复到配置 |
| 5 | 让 Skill 自我迭代优化 |
| 6 | Agent 全天候自主运行 |
Transformations
三个正在发生的转变
01
会编程 → 会表达
Computer Use 让 AI 看屏幕、控鼠标。PM 可以说"帮我在 Figma 里把按钮改成蓝色"。
02
打字 → 说话
Voice Mode + Computer Use：语音描述，AI 操作屏幕。完全脱离键盘和代码。
03
个人工具 → 团队基建
团队共享 Skill 体系，新人继承 AI 资产。你现在积累的就是最难复制的竞争优势。
Takeaway
Vibe Coding 的本质不是
"让 AI 帮你写代码"，
而是"把你的业务判断力装进系统，
让 AI 持续放大它"。
"在 AI 时代，三个月的规划等于传统意义上的三年。"
— Cat Wu, Anthropic
Resources
推荐资源
| 仓库 | 用途 |
|---|
| mgechev/skills-best-practices | 专业级 Skill 编写指南 |
| shanraisshan/claude-code-best-practice | Claude Code 核心最佳实践 |
| obra/superpowers | 结构化 Agentic 开发工作流 |
| pbakaus/impeccable | AI 设计质量提升 Skill |
| garrytan/gstack | 23+ Agent Skills 虚拟工程团队 |
| steipete/CodexBar | macOS 用量监控 |
Bonus
One More Thing
你现在看到的这套演示文稿，
就是用 Vibe Coding 的方式做出来的。
How It Was Made
完整过程
01
提供源内容
把 Markdown 大纲直接交给 Claude，理解 7 个章节的内容结构。
02
风格发现
不是直接生成，而是先做一轮风格探索——生成 3 个预览，在浏览器里对比选择。
03
生成第一版
基于选定风格 + 全部内容，一次生成 35 页完整演示文稿。
How It Was Made
迭代与验证
04
换风格重来
看完第一版后更喜欢另一个风格，用 Electric Studio 重新生成——改风格不等于重做内容，几分钟搞定。
05
迭代修复布局
Claude 用 /browse 启动浏览器逐页截图自测，主动发现布局问题。然后逐一处理反馈：居中、对齐、选择器作用域。
| 工具 | 用途 |
|---|
| /frontend-slides | 完整工作流：内容发现 → 风格探索 → 生成演示文稿 |
| /browse (gstack) | headless 浏览器逐页截图，自测验证布局 |
Takeaway
这就是五步循环的一次压缩演示
描述需求
→
审查方案
→
确认执行
→
验证结果
→
迭代改进
整个过程没有打开过 Keynote 或 PowerPoint，没有拖过一个元素，没有手写过一行 CSS。
Vibe Coding 不只是用来做产品的，
它可以用在任何有"从想法到成品"需求的地方。
你现在可以开始了。
Thank You
Shawn Wu · 2026
不要等工具更成熟。
你现在积累的上下文和 Skill，
装的不是 AI 的能力，
而是你对自己工作的深度理解。