不会写代码也能做项目？手把手教你用 Vibe Coding 快速落地 AI 项目
导读： 你是否曾经有过一个很棒的项目想法，却因为"不会写代码"而迟迟不敢开始？本文将通过一个真实案例——在 NanaDraw 中集成 MinerU PDF 解析功能，带你理解 Vibe Coding 这种全新的 AI 协作开发方式，让你从想法到可演示成果，一步步走完全程。
📌 目录
- 什么是 Vibe Coding？
- 案例背景介绍
- 第一步：先把需求说清楚（Spec）
- 第二步：让 AI 帮你做计划（Plan）
- 第三步：分轮推进开发（Build）
- 第四步：学会用自然语言反馈
- 第五步：遇到报错怎么办？
- 第六步：测试阶段如何借助 AI？
- 第七步：本地启动与演示
- 第八步：用 AI 整理 GitHub 交付
- 总结与建议
一、什么是 Vibe Coding？
很多人第一次听到 Vibe Coding 会以为：
"就是把需求丢给 AI，让它帮我把代码全写完呗？"
❌ 这是误解。
✅ 真正的 Vibe Coding 是一种项目协作推进方式：
| 角色 | 职责 |
|---|---|
| 你 | 提出目标、判断结果、持续反馈 |
| AI | 整理思路、生成代码、修改补全、解释报错 |
💡 核心思想： 你从"逐行写代码的人"，转变为任务定义者 + 结果判断者 + 迭代推进者。
Vibe Coding 最重要的三个能力：
- 🎯 会描述问题
- ✂️ 会拆分任务
- 🔄 会给 AI 反馈
二、案例背景介绍
本文使用的真实案例是：
在 NanaDraw 中集成 MinerU，实现 PDF 文档解析辅助绘图功能。
NanaDraw 是一个面向科研和论文写作场景的 AI 可编辑图示生成工具，可以把论文方法描述、关键词或手绘草图自动转成流程图、机制图和科研插图。
- 🔗 在线体验：https://shannon.opendatalab.com/nanadraw/
- 📦 GitHub：https://github.com/Shannon4Science/NanaDraw
目标功能：
用户上传 PDF → 系统解析文档内容 → 用户选择关键片段 → 自动生成学术图示
三、第一步：先把需求说清楚（Spec）
❌ 错误示范 —— 模糊需求
"希望 NanaDraw 支持上传 PDF，并根据论文内容来生成图。" 这句话方向对，但它没有回答：
- PDF 从哪里上传？
- 解析结果怎么展示？
- 用户怎么选内容？
- 选中内容怎么接回绘图流程？
✅ 正确示范 —— 拆解需求
将模糊需求拆分成可执行小目标：
1. 在 AI 助手区域提供 PDF 上传入口
2. 在设置中配置文档解析 Token
3. 后端调用 MinerU 完成 PDF 解析
4. 解析后展示完整文本
5. 用户可以选择文本片段作为绘图参考
6. 选中内容后，继续驱动 NanaDraw 原有生成流程 ⚠️ 记住： AI 的输出质量，直接取决于你的输入质量。Spec 不是开发前的附属工作，它本身就是开发的一部分。
四、第二步：让 AI 帮你做计划（Plan）
为什么不能直接让 AI 写代码？
一上来就说"帮我把这个功能完整实现出来"，AI 给出的内容往往：
- 📦 范围太大
- 💭 不切合当前项目
- 🔍 难以检查和落地
推荐的提问姿势
这是一个已有项目 NanaDraw，主要用于学术绘图场景，我希望增加 PDF 解析功能。
用户上传 PDF 后，系统通过 MinerU 解析文档，再让用户从解析文本中选择片段生成图。
请你先不要写代码，帮我输出：
1. 功能拆分
2. 第一版最小可行方案
3. 实现顺序
4. 风险点
5. 验收标准 💡 AI 在 Plan 阶段的价值： 不是"替你做决定"，而是"帮你整理思路"，让项目从一团乱线变成一张清晰路线图。
五、第三步：分轮推进开发（Build）
🚫 最常见的错误
"请把这个功能完整做出来。"
✅ 正确方式：分轮推进
第 1 轮：先让 AI 读懂项目（看清地图）
当前项目里和这个功能相关的文件有哪些？
前端入口可能在哪里？
设置项可能在哪一层修改？
后端文档解析应该接入哪里？ 第 2 轮：只做一个小目标
先加 PDF 上传入口（只做这一个） 第 3 轮：推进下一步交互
展示完整文本 → 支持滚动查看 → 支持选中文本 → 接回生成流程 🎯 核心思路： 不是一次让 AI 给你最终答案，而是让它一轮一轮把项目推到正确方向。
六、第四步：学会用自然语言反馈
"我不会写代码，怎么判断 AI 写得对不对？"
答案是：你不需要会写，但你必须会反馈！
✅ 以下这些都是非常有效的反馈：
"这个按钮位置不对"
"解析结果被截断了"
"我想要完整文本，不要摘要"
"这个按钮不要关闭，要改成收起"
"不要在界面里体现 MinerU 这个名字" 这些是产品语言，而 AI 最擅长的正是把这种自然语言反馈转成具体的实现修改。
七、第五步：遇到报错怎么办？
🔥 报错不是失败，是下一轮协作的起点！
把报错信息原样发给 AI，并补充：
"请解释这个报错是什么意思"
"请定位可能是前端还是后端问题"
"请给出最小修改方案"
"请修掉这个问题，不要影响已有功能" 💡 这种方式把 AI 从"代码生成器"变成了**"调试助手"**，而调试恰恰是项目里最消耗精力的部分。
八、第六步：测试阶段如何借助 AI？
测试不只是"会写代码的人的事"，AI 在测试阶段同样能帮上大忙：
| AI 能帮你做的事 | 示例 |
|---|---|
| 列测试清单 | 哪些是必须成功的路径？ |
| 补测试代码 | 生成对应的单元测试 |
| 设计手工验收流程 | 前端交互/后端异常分别检查什么？ |
参考提问方式：
这个功能已经完成，请帮我列出：
- 哪些是必须成功的核心路径
- 哪些是容易出错的边界情况
- 前端交互要重点检查什么
- 后端异常要重点检查什么 九、第七步：本地启动与演示
项目功能做好了，但还没"跑起来"？这是初学者最常见的卡点。
可以这样问 AI：
这是一个前后端项目，请先不要讲上线流程，先告诉我：
1. 我在本地要先启动什么？
2. 前端和后端分别用什么命令运行？
3. 我应该怎样确认功能已经跑通？
4. 如果我要录一段一分钟演示，操作顺序怎么安排？ ⚠️ 注意： 本地演示绝不是附属环节，它是项目闭环中的关键一步。一个只存在于代码层面、不能顺畅演示的项目，学习价值和展示价值都会大打折扣。
十、第八步：用 AI 整理 GitHub 交付
功能完成后，很多人卡在"整理成果"这一步。
让 AI 扮演"表达助手"：
请帮我：
1. 根据改动生成提交说明（commit message）
2. 生成适合发往 dev 分支的 PR 标题和描述
3. 整理 README 新增内容
4. 输出一段适合展示项目成果的简介 💡 产品经理实践心得： 用前面几步快速实验出一个 demo，调到满意后，再提交 PR 到 GitHub/GitLab，PR 内容包括代码 + feature 变更说明，然后由开发统一集成。
十一、总结
Vibe Coding 完整路径
需求 Spec → AI 做 Plan → 分轮 Build → 自然语言反馈
→ 报错继续喂给 AI → 测试 → 本地演示 → GitHub 交付 给初学者的三个建议
① 不要怕自己不会写代码
只要你能描述目标、判断结果、提出反馈，你就已经可以参与项目推进。
② 不要一开始就追求一步到位
真正有效的方式，是一轮一轮推进，一次只解决一个清楚的问题。
③ 不要把 AI 当成"自动答案机"
你越会提问、越会反馈、越会判断，AI 就越能帮你。
💬 课后思考
- 如果你只对 AI 说"帮我做一个 PDF 绘图功能"，会有什么问题？
- 为什么把大任务拆成多轮对话，会比一次提完整要求更有效？
- 在 Vibe Coding 过程中，人最不可替代的能力是什么？
🌟 最后一句话：
不会写代码，并不等于不能做项目；关键是学会借助 AI，把想法一步步推进成成果。Just Do It！
如果本文对你有帮助，欢迎点赞收藏～ 也欢迎访问 mineru给项目点个 ⭐ Star！
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。
更多推荐
9
0- 0
已为社区贡献29条内容
所有评论(0)