最近半年，前端圈有一个非常明显的变化。以前大家讨论的是：
“哪个 AI 编程工具更强？”
现在大家开始讨论：
“为什么别人用 Cursor、Claude Code、Copilot 能一天顶过去三天，而我只是多了一个会补全代码的工具？”
这中间其实隔着一个非常关键的认知差异。很多人以为 AI 编程的核心是：
模型越强 → Agent 越聪明 → 写代码越快。
但真正进入 Vibe Coding 深水区之后，你会发现：
AI 的能力上限，越来越取决于你有没有设计好自己的 Workflow。
模型只是发动机。
Agent 是驾驶员。
Skill 是工具箱。
而 Workflow，是整辆车的路线规划系统。
没有路线规划，再强的发动机，也只是在原地轰油门。
一、Skill、Agent、Workflow，到底是什么关系？
很多人在刚接触 AI Agent 的时候，会被几个概念绕晕：
- Skill 是什么？
- Agent 和普通 ChatGPT 有什么区别？
- Workflow 为什么突然这么重要？
我们先用一个前端开发的例子理解，假设你要开发一个交易页面。
过去：
现在：
这里面每一个环节，都可能由不同能力组成。比如：
Skill：单点能力
Skill 更像人的技能。
例如：
- Figma 转 Vue 组件
- 根据项目规范生成 Arco Design 页面
- 自动分析接口文档
- 自动生成单元测试
- 检查代码规范
- 优化 Lighthouse 性能
它解决的问题是：
“我希望 AI 会什么？”
比如你告诉 AI：
“以后生成 Vue 页面必须使用 Arco Design，不允许写硬编码颜色，统一使用 CSS Token。”
这就是一个 Frontend Component Skill。
Agent：拥有目标的执行者
Agent 更像一个开发同事。
它不是简单回答问题，而是：
- 理解目标
- 调用工具
- 执行任务
- 根据结果调整方案
比如你告诉 Agent：
“帮我完成用户资产页面。”
Agent 可能会：
- 查看项目结构
- 找已有页面参考
- 查询接口
- 阅读设计规范
- 创建组件
- 自己运行测试
- 修复问题
它关注的是：
“怎么完成目标？”
Workflow：把一堆能力组织起来的方法
Workflow 是最高层。
它关注：
“一个复杂任务应该按照什么顺序完成？”
比如：
一个完整页面开发 Workflow：
每一步可能调用不同 Skill,整个流程由 Agent 执行。所以三者关系可以简单理解：
Workflow 决定方向。
Agent 负责执行。
Skill 提供能力。
二、为什么 Workflow 会成为 AI 时代开发者的核心竞争力？
过去，一个优秀前端工程师的核心能力是什么？可能是：
- 熟悉框架
- 熟悉工程化
- 写代码速度快
- 解决复杂问题能力强
但是 AI 时代，评价标准正在变化。未来优秀开发者更像：
一个能够设计生产系统的人。
因为写代码本身正在变廉价，真正稀缺的是：
- 如何拆解问题
- 如何定义步骤
- 如何建立标准
- 如何让 AI 稳定输出
举个非常现实的例子。两个开发者使用同一个 Claude Code。
A：
“帮我开发一个订单页面。”
结果生成了一堆能跑但是无法维护的代码。
B：提前设计：
订单页面 Workflow
1. 分析业务流程
2. 提取领域模型
3. 查找已有组件
4. 根据设计规范生成 UI
5. 自动补充 loading/error 状态
6. 编写测试
7. Review 性能问题
最后结果完全不同，区别不是模型，而是 Workflow。
三、不要问 AI "帮我写代码"，应该设计自己的生产流水线
很多人在使用 AI 的时候，有一个误区：把 AI 当成高级版搜索框。比如：
帮我写一个登录页面
然后等待结果。
但是高手使用 AI 不是提问，而是在设计流水线。
场景一：从 Figma 到 Vue 页面
这是前端最适合建立 Workflow 的场景之一。
传统流程：
- 设计师：
“这个页面什么时候开发完？”
- 开发：
“我要先分析一下。”
然后：
- 看设计稿
- 找组件
- 写结构
- 调样式
- 对像素
如果建立 Workflow：
最终目标不是 “AI 帮我写页面。” 而是：“AI 成为我的初级前端工程师。”
场景二：代码 Review Workflow
很多团队代码质量问题，不是不会解决，而是没人有时间解决。比如：
每天几十个 PR人工 Review：
- 有没有重复逻辑？
- 有没有性能问题？
- 有没有安全问题？
- 有没有违反规范？
可以设计：
甚至可以结合团队 Skill。例如：
公司的规则：
- 禁止直接使用 axios
- 必须使用 request 封装
- 禁止 magic number
- 必须使用 Design Token
这些全部可以沉淀成为 Skill。
场景三：线上 Bug 排查 Workflow
这是很多开发者忽略，但是价值非常高的场景。
线上报警：
用户反馈：
支付页面偶发白屏
普通流程：
开发打开代码开始猜。
-
“是不是接口？”
-
“是不是状态问题？”
-
“是不是缓存？”
AI Workflow：
未来很多工程师的工作，会从：写代码的人 变成 设计问题解决流程的人。
四、如何拆解自己的 Workflow？
很多人看到这里会说：
“道理我懂，但是我不知道自己的 Workflow 怎么设计。”
其实很简单，以按照四步拆。
第一步：找到重复劳动
问自己过去一个月哪些事情我做了超过 5 次？ 比如：
- 写 CRUD 页面
- 写接口类型
- 写测试
- 查文档
- Review PR
- 排查线上问题
这些都是 Workflow 候选。
第二步：拆成人可以执行的步骤
不要直接告诉 AI：“帮我优化页面。” 这个目标太大。要拆！
AI 最擅长的是执行明确流程，不是猜你的想法。
第三步：找到可以标准化的部分
不是所有步骤都需要 AI。比如：
- 设计规范固定。
- 代码规则固定。
- 检查流程固定。
这些应该变成 Skill：
Frontend Standard Skill
包含：
- Vue规范
- TS规范
- CSS规范
- Arco使用规范
- Git提交规范
以后所有 Agent 都可以复用。
第四步：让 Workflow 可以不断进化
一个好的 Workflow，不是一开始设计完就结束，它应该像代码一样迭代。
- 第一次：
需求分析 → 代码生成
发现问题：AI 经常生成重复组件。
- 增加：
组件扫描 Skill
3. 继续优化：
加入：
自动截图视觉比较
4. 最后形成自己的 AI 开发流水线。
五、哪些场景最值得搭建 Workflow？
我的判断标准：不是“复杂”。而是：
高频 + 标准化 + 可验证
满足三个条件，就值得。
| 场景 | 推荐程度 |
|---|---|
| CRUD 页面生成 | ⭐⭐⭐⭐⭐ |
| Design To Code | ⭐⭐⭐⭐⭐ |
| Code Review | ⭐⭐⭐⭐⭐ |
| 自动测试生成 | ⭐⭐⭐⭐ |
| 文档生成 | ⭐⭐⭐⭐ |
| 性能优化 | ⭐⭐⭐⭐ |
| 探索性技术研究 | ⭐⭐ |
反而一些非常创新的问题。比如：“设计一个全新的架构。” 不一定适合 Workflow。因为它需要大量人工判断。
六、未来前端工程师最大的差距是什么？
我觉得不是谁写代码最快。而是能把自己的经验复制给 AI。
一个工作五年的工程师其实脑子里有大量隐形资产：
- 什么代码应该怎么写
- 什么方案容易踩坑
- 什么组件应该抽象
- 什么性能问题需要注意
过去这些只能存在个人经验里，orkflow 的意义就是把这些经验外化。把我知道应该这样做 变成 AI 也知道应该这样做。
这才是真正的 Vibe Coding。
最后
AI 时代，很多人忙着收集：
- Prompt
- Agent
- MCP
- Tool
但是更重要的问题是：
你的开发流程，是否已经准备好迎接 AI？
未来优秀开发者，不一定是写代码最多的人。而是那个最懂如何设计：
人类经验
+
AI能力
+
工程流程
的人。
Skill 让 AI 会做事情。
Agent 让 AI 能执行事情。
Workflow 让 AI 持续稳定地产生价值。
而这，可能才是下一代开发者真正应该掌握的能力。
