夜雨聆风Vibe Coding 翻车现场：AI编程不先定架构，写再多也是技术债
你打开 Claude Code，跟它说"帮我写个任务管理应用"。
它啪啪啪给你吐了一堆 React 组件，看着挺像回事。你接着说"加个用户登录"，它开始引入 NextAuth。你又说"数据要存本地"，它默默把 Prisma 换成了 SQLite。
三小时后回头一看——组件之间耦合得一塌糊涂，状态管理用了三种方案，API 路由命名风格混乱，数据库 schema 跟前端类型对不上。
这就是 Vibe Coding 最常见的翻车姿势。
什么是 Vibe Coding
Vibe Coding 是一种以自然语言对话驱动 AI编程工具生成代码的开发方式。你用大白话描述需求，AI 负责写代码，你负责提需求、审代码、拍方向。
听起来很爽对吧？但问题也出在这里。
AI编程的架构痛点：为什么 Vibe Coding 会越写越乱？
用 AI编程工具写代码，有个特别隐蔽的陷阱：AI 不会主动帮你做架构决策。
你说"写个页面"，它就写个页面。你说"加个功能"，它就加个功能。它每一步都在响应你的指令，但没人站在全局视角想：这个项目整体架构应该长什么样？
结果就是典型的碎片化开发：
第一个功能用 Client Component，第二个用 Server Component，没有统一策略 状态管理一会儿用 useState，一会儿引入 Zustand，毫无章法 数据获取有的用 Server Actions，有的直接 fetch，风格割裂 类型定义散落各处，没有统一的 schema
你以为在快速迭代，其实在疯狂积累技术债。等到想加第六个功能，AI 看着前面的代码也犯迷糊——上下文太乱了，它也理不清。
核心问题：AI编程工具擅长生成代码，但不会主动做架构判断。这件事得你来主导。
解决思路：给 AI编程加一个"架构判断 Skill"
既然 AI 不会主动做架构决策，那就用一个 Skill 教它做。
在 Claude Code 这类工具里，Skill 本质上是一个 SKILL.md 文件，里面写满指令，告诉 AI 在特定场景下应该怎么思考、怎么行动。它跟代码模板是两回事，说白了就是把你的思考过程写成指令，让 AI 照着走。
思路很简单：在 AI 写代码之前，先让它停下来，做一轮架构判断，输出决策方案。你确认了方向，再让它动手写。这才是 Vibe Coding 正确的打开方式。
这好比盖房子之前先出图纸，边砌墙边想户型迟早出事。
手把手教你创建架构判断 Skill
第一步：定义 Skill 的目标
这个 Skill 的核心目标只有一条：在 AI 写代码之前，先输出架构决策。
听起来简单，但这是整个 Skill 的灵魂。后面所有指令设计，都围绕这个目标展开。
第二步：写 SKILL.md 的核心结构
一个完整的架构判断 Skill，SKILL.md 至少包含四个部分：
- 角色定义
：告诉 AI 它是架构判断助手，不是代码生成器。这一步很关键，因为 AI 默认行为是直接写代码。 - 触发条件
：当用户描述一个产品想法时，先做架构判断。明确什么场景触发，什么场景不触发。 - 输出规范
：必须输出 6 项架构决策（下面详细讲），每项有明确格式要求。 - 约束条件
：不要直接写代码，先输出架构决策等用户确认。硬性约束，写死在 Skill 里。
第三步：设计 6 项架构决策
这是 Skill 的核心内容。6 项决策按顺序输出，每一项对应一个关键架构维度。
01 产品类型判断
先判断用户想做什么类型的产品：落地页？SaaS 应用？本地工具？工作流自动化？产品类型决定了后面所有技术选择。
落地页根本不需要数据库和认证系统，但 SaaS 就必须有。这一步判断错了，后面全跟着错。
02 架构方向选择
根据产品类型，决定架构方向：纯前端、全栈、本地优先、还是云端优先。
个人记账工具，本地优先就够了，非要上云端架构就是过度设计。反过来，多用户协作工具，纯前端方案根本撑不住。
03 技术栈推荐
按项目类型和架构方向选技术栈，遵循一个原则——合适胜过高级。
落地页用 Astro 就挺好，别上来就 Next.js 全家桶。本地工具 Tauri 比 Electron 轻。选技术栈要考虑维护成本，别追新。
04 MVP 范围收敛
区分三类功能：Must Have（必须做）、Later（以后做）、Do Not Build Yet（暂时别碰）。
这步最容易吵架，因为人人都想一步到位。但 Vibe Coding 的经验告诉我：MVP 砍得越狠，第一版出得越快，架构也越清晰。什么都想做的项目，架构一定乱。
05 数据与接口设计
定义数据模型、API Contract、状态流转。这一步不写具体代码，但要明确核心实体的关系和接口契约。
06 开发 Prompt 生成
前 5 项做完后，生成一个结构化的开发 Prompt，可以直接交给 Codex、Claude Code 或 Cursor 执行。这个 Prompt 包含所有架构决策结论，让编码阶段的 AI 有清晰上下文。
第四步：添加示例对话
写 1-2 个示例，展示从想法到架构决策的完整流程。比如用户说"我想做个习惯追踪 App"，Skill 应该怎么依次输出 6 项决策。
示例的作用是让 AI 学会输出格式和思考路径。你写得越具体，AI 执行得越准确。
第五步：测试和迭代
拿真实项目跑一遍，看 AI 输出的架构决策是否合理。不合理就回来改 SKILL.md 里的指令，调到满意为止。
Skill 跟代码一样，需要跟着项目经验一起迭代。
SKILL.md 示例片段
给你看一个简化版的 SKILL.md 长什么样：
# Vibe Coding Architecture Skill ## 角色 你是架构判断助手。当用户描述一个产品想法时，你的首要任务是输出架构决策，而不是直接写代码。 ## 触发条件 用户描述产品想法时触发。 ## 输出规范 按以下 6 项依次输出架构决策： 1. 产品类型判断 2. 架构方向选择 3. 技术栈推荐 4. MVP 范围收敛 5. 数据与接口设计 6. 开发 Prompt 生成 ## 约束 - 不要直接写代码 - 先输出架构决策，等用户确认后再进入编码阶段 - 技术栈选择遵循"合适胜过高级"原则
完整的 SKILL.md 会更长，包含每项决策的详细判断逻辑和示例。但核心骨架就是上面这些。
核心设计思想
这个 Skill 背后有四条设计原则，值得单独拎出来讲：
架构优先于代码——先想清楚系统怎么长出来，再动手写。Vibe Coding 最大的坑就是跳过这步直接开写，写着写着就偏了。
判断优先于生成——让 AI 先做判断（产品类型、架构方向、技术栈），再做生成（写代码）。架构判断这一步省不掉，判断和生成混在一起做就容易翻车。
收敛优先于扩展——先定 MVP 范围，砍掉不该做的东西。做减法比做加法难，但架构清晰度全靠这步。
人机分工——AI 负责生成选项和代码，人负责判断方向和拍板。分工边界划清楚，别什么都扔给 AI。
Vibe Coding 的核心能力，在于让 AI 在写代码之前先做对的判断。写得多不如写得对。
创建好之后怎么用
Skill 写好了，配合AI编程工具有三个场景：
配合 Claude Code 使用：把 SKILL.md 放在项目的 .claude/skills/ 目录下，Claude Code 会自动加载。你跟它说"我想做个 XX"，它会先走架构判断流程，输出 6 项决策，等你确认后再写代码。
配合 Codex 使用：把 SKILL.md 内容作为 system prompt 注入，或者放在项目的 AGENTS.md 里。Codex 读取后会在编码前先做架构判断。
配合 Cursor 使用：在 Cursor 的 Rules 里引用 SKILL.md 内容，或者通过 .cursorrules 文件配置。效果类似——AI 会在编码前先走一轮架构判断。
不管用哪个工具做 Vibe Coding，核心流程都一样：
用户描述产品想法 AI 触发架构判断 Skill，输出 6 项决策 用户确认或调整方向 AI 根据确认后的方案生成开发 Prompt AI（或你自己）拿着 Prompt 进入编码阶段
进阶路径：从 L1 到 L3
架构判断 Skill 的使用深度分三个层次：
L1：基础用户——直接用 Skill 输出的架构决策，按部就班执行。适合刚接触 Vibe Coding 的人，先建立"先想架构再写代码"的习惯。
L2：调优用户——根据项目经验修改 SKILL.md，加入个人偏好的技术栈和架构风格。比如团队主力用 Vue，就把技术栈推荐逻辑往 Vue 生态调。
L3：架构师——把 Skill 拆成多个子 Skill 组合使用。到这个层次，你已经在用 Skill 管理整个团队的工作流了。
FAQ：常见问题
Q：我已经习惯直接让 AI 写代码，为什么还要多一步架构判断？
因为你大概率遇到过这种事：AI 写了一大堆代码，你发现方向不对，推倒重来。架构判断花几分钟，能省你后面几小时返工。
Q：什么情况不需要用这个 Skill？
写一次性脚本、改 bug、给已有项目加小功能，这些场景不需要走完整架构判断流程。Skill 适合新项目启动、或功能模块从零开始的时候用。
Q：架构判断会不会拖慢开发速度？
短期看多了一步，长期看省了大量返工时间。跟写需求文档一个道理——不写也能开发，但写到一半发现需求没想清楚，代价更大。
Q：Codex Claude Code 架构判断能力有差异吗？
底座模型有差异，但架构判断 Skill 的指令是通用的。关键是 SKILL.md 写得够清晰，工具只是执行载体。Claude Code 对 Skill 原生支持最好，Cursor 走 Rules 配置，Codex 走 AGENTS.md。
Q：6 项架构决策必须全做吗？
可以跳，但建议前 4 项（产品类型、架构方向、技术栈、MVP 范围）尽量做全。后 2 项看项目复杂度，简单项目可以简化。
写在最后
Vibe Coding 这事，让 AI 写代码不难，难的是让 AI 写对代码。
一个架构判断 Skill，本质上就是把你的架构思考过程固化成指令，让 AI 在写代码之前先走一遍该走的路。它不替你拍板，但它帮你把该想的问题摆到桌面上。
自己动手写一个试试，你会发现 Vibe Coding 的体验完全不一样。
如果觉得有用，点个在看，转发给你身边还在 Vibe Coding 翻车的朋友。评论区聊聊：你用AI编程工具时，遇到过最离谱的架构翻车是什么？