【vibe coding 第六部分】练手项目地图

【vibe coding 第六部分】练手项目地图

第六部分:项目实战(独立完成)

学习目标:运用前五部分学到的方法,独立完成至少一个适合 Vibe Coding 的真实项目

完成标志:独立完成一个项目,能运行、能展示、能部署,并能写出清晰的复盘说明

6.1 独立实战说明

恭喜你走到了这里!前面的章节是"师傅领进门",这一部分是"修行在个人"。

从现在开始,你需要自己选择项目自己驱动 AI 完成开发。你可以使用 Claude Code,也可以使用 Codex Desktop,甚至两者配合:Claude Code 负责深度编码和代码审查,Codex 负责文件整理、部署、自动化和桌面操作。

独立开发流程(复用第五部分的方法论):

1. 选择项目 → 写一句话描述 2. 用AI生成PRD → 人工审查修改 3. 用AI生成SPEC → 确认技术方案 4. 创建CLAUDE.md → 建立项目上下文 5. 骨架搭建 → 验证可运行 6. 逐功能开发 → 每个功能一个commit 7. Code Review + 测试 8. 部署上线 9. 复盘总结

6.2 选项目的三个原则

不要只选“看起来高级”的项目。适合 Vibe Coding 的项目,最好满足三个条件:

  1. 需求能用一句话说清楚:比如“给我做一个可以记录支出的记账工具”。
  2. 有可视化结果:页面、图表、报表、文件、部署链接都可以,方便你验收。
  3. 边界不太大:第一版最好 3 天到 2 周能做完,不要一上来就做完整 SaaS。

Claude Code 和 Codex 的分工可以这样理解:

项目特征更适合的工具原因
代码文件多、需要重构、要跑测试Claude Code终端工作流和代码审查更强
文件整理、文档生成、部署、自动化Codex Desktop图形界面和桌面任务更顺手
从零做 Web App两者都适合Claude Code 写核心代码,Codex 辅助部署与整理
面向非程序员的轻量工具Codex Desktop交互门槛低,适合用自然语言驱动

6.3 初级项目清单:先做出可用工具

项目更适合你会练到什么核心功能预计周期
番茄钟 + 任务记录Codex / Claude Code状态管理、计时器、轻量 UI计时、暂停、任务列表、完成统计1-2 天
个人记账工具Claude CodeCRUD、图表、数据建模收支记录、分类统计、月度报表3-5 天
习惯追踪器Claude Code日历视图、连续打卡逻辑习惯创建、每日打卡、趋势图3-5 天
Markdown 笔记应用两者都适合编辑器、预览、文件导出实时预览、分类、搜索、导出3-5 天
在线简历生成器Codex文档生成、模板化输出表单录入、模板切换、PDF 导出3-5 天
图片压缩与格式转换工具Codex文件批处理、命令行工具调用批量上传、压缩、WebP 转换2-4 天
课程资料整理器Codex本地文件操作、命名规范扫描文件夹、重命名、生成目录2-4 天
个人作品集网站两者都适合页面结构、响应式、部署项目展示、关于我、联系方式3-7 天

初级项目的目标不是“技术多复杂”,而是完整跑通:需求 → 计划 → 实现 → 验收 → 部署 → 复盘。

6.4 中级项目清单:做出完整业务闭环

项目更适合你会练到什么核心功能预计周期
团队任务看板Claude Code拖拽、权限、多人协作看板、任务、成员、状态流转1-2 周
读书/课程知识库两者都适合搜索、标签、摘要生成资料导入、标签、全文搜索、摘要1-2 周
AI 周报生成器Codex自动化、文档整合读取 Git/任务记录、生成周报3-7 天
博客/CMS 系统Claude Code内容模型、MDX、后台管理文章、分类、草稿、发布1-2 周
URL 短链接服务Claude CodeAPI、数据库、统计短链生成、访问统计、后台3-7 天
问卷调查系统Claude Code动态表单、统计图表表单设计、提交、结果分析1-2 周
食谱管理应用两者都适合搜索过滤、图片与结构化数据食谱录入、食材清单、收藏1 周
部署监控面板Codex / Claude CodeAPI 调用、定时检查网站状态、日志摘要、告警1-2 周
AI 知识库问答系统Claude CodeRAG、向量检索、引用来源文档上传、检索、问答、引用2-3 周
小型电商 MVPClaude Code全栈业务、订单流程商品、购物车、订单、后台2-4 周

中级项目建议每个功能单独提交一次 Git。让 AI 做实现,你负责检查业务逻辑是否真的闭环。

6.5 进阶项目清单:挑战 Agent 工作流

项目更适合关键挑战第一版验收标准
AI 客服机器人Claude Code工具调用、知识库、会话状态能基于资料回答,并展示引用
多人协作白板Claude CodeCanvas、实时同步、冲突处理多人能同时绘制和移动元素
会议纪要流水线Codex音频转写、摘要、文档生成输入录音,输出纪要和待办
GitHub 热门项目推荐器Codex自动化、信息筛选、定时执行每周生成一篇项目推荐稿
个人数据驾驶舱两者都适合多数据源、图表、权限展示健康/学习/财务核心指标
代码库体检工具Claude Code静态分析、规则设计、报告生成输出质量评分和修复建议
SaaS 订阅管理Claude Code认证、支付、权限、账单用户可订阅、取消、查看账单
浏览器自动化助手Codex浏览器操作、表单、截图验证自动完成一组网页重复操作

进阶项目不要一次性全做。先做“最小可用版本”,再用 AI 帮你列第二阶段路线图。

6.6 推荐起步项目:从这五个里面选

如果你不知道从哪个开始,优先选下面五个。它们最适合训练 Claude Code 和 Codex 的 Vibe Coding 工作流。

推荐项目为什么适合第一条 Prompt 示例
个人记账工具业务闭环清晰,适合练 CRUD 和图表“请先帮我设计一个个人记账工具的 PRD,不要写代码。”
课程资料整理器Codex 能发挥本地文件处理优势“请扫描这个课程文件夹,先给出整理方案和命名规则。”
AI 周报生成器适合练自动化与文档输出“请基于 Git 提交、任务记录和笔记生成本周周报模板。”
团队任务看板适合练复杂状态和拖拽交互“请先设计任务看板的数据模型和页面结构。”
小型电商 MVP覆盖全栈核心能力“请进入计划模式,帮我规划一个微型商城的第一版。”

通用开场 Prompt:

我想做一个「项目名称」。请先不要写代码。 请你先完成三件事: 1. 用小白能看懂的话整理 PRD; 2. 拆成 3-5 个开发阶段; 3. 告诉我第一版最小可用功能应该包含什么。 等我确认后,再开始创建项目文件。

6.7 从学习项目到开源贡献

当你完成了一个项目并想分享给社区时:

一个好的 GitHub 开源项目需要:

  1. README.md:项目介绍、功能截图、安装使用说明
  2. LICENSE:开源协议(推荐 MIT 协议)
  3. .gitignore:确保不提交敏感信息
  4. Contributing 指南(可选):告诉别人如何参与贡献

你可以让 Claude Code 帮你生成这些文件:

> 请为这个项目生成一个完整的 README.md,包含: > - 项目介绍和功能截图位置 > - 技术栈 > - 本地开发环境搭建步骤 > - 使用说明 > - MIT License 声明