Vibe Coding 开源资源地图：用 5 个项目搭建 AI 编程工作流

Vibe Coding 指的是一种以自然语言为主要交互方式的 AI 编程方法：人负责描述目标、约束和验收标准，AI 负责编写代码、修改实现、解释报错和补齐文档。

它和传统编程最大的差别，不是“不写代码”，而是人的工作重心变了。过去开发者主要在编辑器里手写实现细节，现在更多是在做需求拆解、方案审查、提示词设计、运行验证和代码评审。

flowchart LR
    A[描述产品想法] --> B[生成需求文档]
    B --> C[拆分功能与技术方案]
    C --> D[让 AI 编写代码]
    D --> E[运行与测试]
    E --> F{结果是否符合预期}
    F -- 否 --> G[补充约束或指出问题]
    G --> D
    F -- 是 --> H[整理代码、文档与提交]

这个流程看起来很轻松，但真正决定结果质量的不是“让 AI 写代码”这一句，而是前面的规划和约束。如果需求模糊，AI 会自己补全细节；如果没有验收标准，AI 可能写出看似完整但无法上线的实现；如果缺少工程边界，代码库很容易变得混乱。

围绕这个问题，GitHub 上已经出现了一批 Vibe Coding 相关项目。它们大致可以分成五类：入门路线、提示词模板、工具配置、完整指南和工具索引。

Vibe Coding 解决的核心问题

Vibe Coding 适合解决三类开发问题。

第一类是快速验证想法。比如做一个待办事项工具、内部管理页面、数据看板、简单的 SaaS（软件即服务）原型，不一定要从空项目开始手写所有代码，可以先让 AI 根据需求生成可运行版本，再逐步打磨。

第二类是降低陌生技术栈的上手成本。以前遇到不熟悉的框架，需要查文档、看示例、拼配置；现在可以让 AI 解释目录结构、生成脚手架、补充依赖，并在报错时协助定位问题。

第三类是把重复性工程任务交给 AI。比如生成 CRUD（创建、读取、更新、删除）接口、补单元测试、写表单校验、改页面样式、整理 README、迁移配置文件，这些任务通常规则明确，适合用自然语言描述后交给 AI 执行。

但它不适合完全替代工程判断。涉及支付、权限、数据安全、并发一致性、复杂架构设计时，AI 可以辅助，但不能直接替你承担决策责任。

1. aicodeguide：从零开始理解 AI 编程路线

aicodeguide 更像是一份 AI 编程学习地图。它不是单个工具，而是围绕 AI 编程方式整理了一套路线：该了解哪些工具、如何使用提示词、怎样让 AI 完成一个项目、有哪些教程和参考资料。

开源地址：

https://github.com/automata/aicodeguide

对于刚接触 Vibe Coding 的人，最容易遇到的问题是“不知道该问 AI 什么”。很多人会直接输入一句：

帮我做一个网站。

这种提示词太宽，AI 只能猜。更好的方式是把需求拆成目标、用户、功能、技术限制和验收标准：

我要做一个个人记账 Web 应用。

目标用户：
- 个人用户，用来记录日常收入和支出。

核心功能：
- 新增一条账单，包含金额、类型、分类、备注和日期。
- 按月份查看收入、支出和结余。
- 按分类统计支出占比。

技术要求：
- 使用 React + TypeScript。
- 数据先保存在浏览器 localStorage。
- 页面需要适配手机屏幕。

验收标准：
- 刷新页面后账单不能丢失。
- 金额必须是大于 0 的数字。
- 月度统计结果要和账单列表一致。

aicodeguide 的价值在于，它会帮助你建立这种拆解意识。Vibe Coding 不是随便聊天，而是把需求表达成 AI 能执行的任务说明。

可以把它当作入门阶段的学习资料，重点看三部分：

如果还没有固定工具，先从这类路线图开始，比直接安装一堆编辑器插件更稳。

2. vibe-coding-prompt-template：用 5 个阶段构建 MVP

vibe-coding-prompt-template 解决的是另一个问题：怎样让 AI 不只是写几段代码，而是围绕一个产品想法生成可落地的 MVP（最小可行产品）。

开源地址：

https://github.com/KhazP/vibe-coding-prompt-template

它把 AI 开发流程拆成 5 个阶段：

flowchart LR
    A[Research 研究] --> B[Define 定义]
    B --> C[Design 设计]
    C --> D[Generate Agent Instructions 生成代理指令]
    D --> E[Build 构建]

每个阶段的目标不同。

很多 Vibe Coding 失败案例都卡在同一个地方：直接从想法跳到代码。比如只说“做一个在线预约系统”，AI 可能会生成页面，但遗漏管理员审核、时间冲突校验、取消预约规则、用户身份区分等关键逻辑。

更稳的流程是先让 AI 生成 PRD（产品需求文档）和技术说明，再让它根据文档写代码。一个简化版 PRD 模板可以这样写：

# 产品名称
在线预约系统

# 目标
让用户选择服务、日期和时间段，并提交预约申请。

# 角色
- 普通用户：查看可预约时间，提交或取消预约。
- 管理员：查看预约列表，确认或拒绝预约。

# 核心功能
1. 用户预约
   - 选择服务类型
   - 选择日期和时间段
   - 填写姓名、手机号和备注
2. 预约冲突校验
   - 同一服务在同一时间段只能有一个预约
3. 管理后台
   - 查看所有预约
   - 按状态筛选
   - 修改预约状态

# 非目标
- 不接入在线支付
- 不发送短信通知
- 不做多门店管理

# 验收标准
- 同一时间段重复预约时必须提示冲突。
- 管理员修改状态后，用户侧能看到最新状态。
- 表单必填项为空时不能提交。

这种写法对 AI 很友好，因为它明确告诉 AI 哪些要做，哪些不做。对于 MVP 开发来说，“非目标”尤其重要。没有边界，AI 很容易主动加功能，最后生成一个看起来丰富但难维护的项目。

3. claude-code-settings：把 Research -> Plan -> Code 固化到 Claude Code

如果主力工具是 Claude Code，可以关注 claude-code-settings。它提供的是一组配置和指令，用来把固定的工作方式写进工具默认行为里。

开源地址：

https://github.com/feiskyer/claude-code-settings

Claude Code 属于命令行里的 AI 编程代理，适合在真实项目目录中读取文件、修改代码、运行命令。它的能力很强，但也意味着必须给它清晰边界，否则它可能一次性改太多文件。

这个项目强调的流程可以概括为：

flowchart TD
    A[Research<br/>理解代码库和需求] --> B[Plan<br/>输出修改计划]
    B --> C{人工确认}
    C -- 通过 --> D[Code<br/>执行代码修改]
    C -- 调整 --> B
    D --> E[Test<br/>运行测试或构建]
    E --> F[Review<br/>查看 diff 并修正]

关键点在于：不要让 AI 跳过计划直接改代码。一个更安全的 Claude Code 工作方式通常是：

请先阅读当前项目结构和相关文件，不要修改代码。

你需要完成：
- 理解用户登录流程。
- 找出表单校验逻辑在哪里。
- 判断新增“手机号登录”需要修改哪些文件。

输出内容：
- 相关文件列表。
- 当前登录流程说明。
- 修改计划。
- 可能的风险点。

在我确认之前，不要执行任何代码修改。

确认计划后，再进入实现阶段：

按照刚才确认的计划实现手机号登录。

约束：
- 不要重构无关模块。
- 不要改动邮箱登录现有行为。
- 新增逻辑需要补充测试。
- 完成后运行现有测试，并汇报结果。

把这类约束写进 Claude Code 的全局配置或项目配置后，每次任务都会默认遵守同一套规则。这比每次手动提醒 AI “不要乱改”更可靠。

适合使用这类配置的场景包括：

4. vibe-coding：强调规划优先的完整指南

vibe-coding 是面向 Claude Code 和 Cursor 的流程型指南。它的核心思想很明确：规划比直接生成代码更重要。

开源地址：

https://github.com/EnzeD/vibe-coding

Cursor 和 Claude Code 都能根据上下文修改代码，但它们处理大型任务时容易出现两个问题：

1. AI 会根据局部上下文做决定，忽略整体架构。
2. AI 为了完成当前请求，可能引入临时方案，导致后续维护困难。

所以更合理的做法是把开发拆成多个小任务，每次只让 AI 完成一个明确目标。

flowchart TD
    A[需求说明] --> B[拆分任务]
    B --> C[为当前任务准备上下文]
    C --> D[生成实现方案]
    D --> E[确认方案]
    E --> F[修改代码]
    F --> G[运行测试]
    G --> H[代码评审]
    H --> I{是否进入下一任务}
    I -- 是 --> C
    I -- 否 --> J[整理文档与提交]

一个适合 Cursor 或 Claude Code 的任务拆分方式可以这样设计：

每个小任务都应该带上上下文和验收标准。比如：

任务：实现登录表单的前端校验。

上下文：
- 项目使用 React + TypeScript。
- 表单组件在 src/pages/Login.tsx。
- 现有 UI 使用 Tailwind CSS。
- 登录接口已经存在，不需要修改接口层。

要求：
- 邮箱不能为空，并且必须符合邮箱格式。
- 密码不能为空，长度至少 8 位。
- 校验失败时在输入框下方显示错误信息。
- 不要修改登录接口调用方式。

验收标准：
- 输入非法邮箱时不能提交。
- 密码少于 8 位时不能提交。
- 表单校验通过后仍然调用原有登录逻辑。

这样的提示词不会限制 AI 的发挥，但会限制它乱跑。Vibe Coding 的关键不是让 AI 一次生成一个庞大系统，而是持续把任务切小、说清、验证。

5. awesome-vibe-coding：寻找 Cursor 之外的工具

awesome-vibe-coding 是一个资源索引类项目，重点收集 AI 辅助编程工具、教程和相关资料。

开源地址：

https://github.com/filipecalegario/awesome-vibe-coding

如果只知道 Cursor、Windsurf、Claude Code，很容易误以为 AI 编程工具就这几类。实际上，工具生态已经分出多个方向：

选择工具时不要只看“能不能写代码”，还要看它适合放在哪个环节。

工具越强，越需要流程约束。一个能自动读取文件、执行命令、修改代码的 Agent，如果没有明确计划，也更容易制造不可控修改。

用这些项目搭出一条完整工作流

这几个项目不是互相替代的关系，更像是同一条链路上的不同环节。

flowchart LR
    A[aicodeguide<br/>建立基础认知] --> B[vibe-coding-prompt-template<br/>生成 PRD 与提示词]
    B --> C[vibe-coding<br/>拆分任务与控制节奏]
    C --> D[claude-code-settings<br/>固化工具规则]
    D --> E[awesome-vibe-coding<br/>扩展工具选择]

一条可执行的 Vibe Coding 工作流可以这样落地：

对于一个新项目，可以按这个顺序推进：

1. 写一句产品想法。
2. 让 AI 根据想法生成 PRD，并补充非目标和验收标准。
3. 让 AI 输出技术方案，但暂时不要写代码。
4. 人工检查方案，删掉不必要功能，确认技术栈。
5. 让 AI 把需求拆成 5 到 10 个小任务。
6. 每次只执行一个任务。
7. 每个任务完成后运行测试或手动验收。
8. 查看代码 diff，确认没有改动无关文件。
9. 提交版本，再进入下一个任务。

Vibe Coding 的几个常见坑

需求越短，AI 自己补的越多

一句“帮我做一个后台管理系统”看似省事，但 AI 必须自己猜角色、权限、数据模型、页面结构和接口格式。猜得越多，偏离预期的概率越高。

更好的办法是补齐四类信息：

目标：要解决什么问题
范围：包含哪些功能，不包含哪些功能
约束：技术栈、代码风格、目录结构、依赖限制
验收：什么结果算完成

不要让 AI 一次性改太多文件

AI 一次修改 20 个文件时，人很难审查每个改动是否合理。更稳的做法是限制范围：

本次只允许修改以下文件：
- src/pages/Login.tsx
- src/components/LoginForm.tsx
- src/utils/validators.ts

如果你认为还需要修改其他文件，先说明原因，不要直接修改。

计划必须先于编码

让 AI 先输出方案，可以提前发现很多问题。比如依赖选型不合适、数据结构不完整、接口边界不清楚，这些问题在写代码前修正，成本远低于代码生成后再返工。

生成代码后必须验收

AI 生成的代码不等于可用代码。至少要做三件事：

安全信息不能随便交给 AI

不要把真实密钥、生产数据库地址、用户隐私数据直接放进提示词。需要调试时，可以用脱敏后的示例数据替代：

{
  "user_id": "mock_user_001",
  "email": "user@example.com",
  "token": "mock_token"
}

如何选择适合自己的项目

如果你刚开始接触 Vibe Coding，从 aicodeguide 入门最合适；如果你已经有产品想法，但不知道怎么让 AI 稳定做出 MVP，优先看 vibe-coding-prompt-template；如果你正在使用 Claude Code，claude-code-settings 可以帮助你把工作习惯写进配置；如果你想系统掌握 Cursor 或 Claude Code 的开发节奏，vibe-coding 更适合；如果你想找更多 AI 编程工具，awesome-vibe-coding 是工具索引。

Vibe Coding 真正有用的地方，不是把程序员变成“只会聊天的人”，而是把大量低层级实现交给 AI，让人把精力放在需求、边界、架构、验证和迭代上。只要流程足够清晰，AI 就能成为一个执行力很强的开发助手；流程越模糊，它越容易生成一堆看似完整但难以维护的代码。