Claude Code 实战记录

简介

适合人群

想看到「Vibe Coding 在一整个真实项目里到底怎么跑」的人——尤其想照着一套可复制的流程（技术选型文档 → 执行计划 → 小步提交 → 截图迭代）从零做出自己产品的中文开发者。

核心内容

1. 01开篇定调：什么是 Vibe Coding，文档为王

   仓库先讲清概念：Vibe Coding 是 Andrej Karpathy 于 2025 年 2 月提出的——「There's a new kind of coding I call 'vibe coding', where you fully give in to the vibes, embrace exponentials, and forget that the code even exists.」你不再真正「写」代码，而是用自然语言描述想要什么，看结果、不对再调。核心特点：自然语言驱动、迭代式开发、关注「做什么」而非「怎么做」、文档即代码——所以作者把「文档为王」当成 AI 时代编程的纲领。

2. 02从技术选型到上线：45 分钟做出初版

   作者只给 AI 一句技术选型提示词（Next.js 全栈 + SQLite 快速集成），让 AI 生成「技术选型和系统设计」文档，自己 check 后再 @ 这份文档启动开发。AI 会自动生成执行计划并自我 review、二次修改不合理处，再用 superpowers:subagent-driven-development 按计划补齐项目结构、队列处理与数据库集成。全程约 45 分钟，初版系统开发完成。

3. 03关键工程习惯：小步提交、截图反馈、UI 一轮轮磨

   用 superpowers 开发的一大好处是每完成一个功能就 commit 一次，AI 把代码改坏了也能方便回退。运行时遇到 bug 不用写长描述——直接把截图发给 AI 就能修。初版 UI 丑，作者一句话触发 ui-ux-pro-max 重新设计各个环节的 UI 与交互，经过 3 轮优化才满意；这类「截图 + 自然语言」的反馈闭环贯穿整个项目。

4. 04功能迭代：从环境变量到用户可配模型

   上线后继续迭代：把模型配置从环境变量改成用户自己配置 key 的设置页，文本/图像模型支持 OpenAI 与 Gemini 协议，视频模型支持字节 seedance 与 Google，默认走 /model/list API、失败可手填 model_id，key 存本地；还做了用户隔离、模型点击拦截、Veo 模型接入、分镜子流程（分镜描述 → 首尾帧 → 视频生成）等。每一处改动都有原始提示词与前后对比图。

5. 05学习价值：一套可照抄的 Skill 装配清单

   仓库完整列出作者实测用到的 Skills 及安装命令：superpowers（14 个可组合技能，强制 TDD、四阶段调试）、frontend-design、planning-with-files（Manus 风格持久化规划）、skill-creator、notebooklm、best-minds（模拟器思维）、find-skills、ui-ux-pro-max、内置 simplify。想复制这套「全副武装」的开发环境，按清单装一遍即可。

实践建议

• 照作者的方式走一遍 0 到 1：只给 AI 一句技术选型提示词，让它生成设计文档，你 check 后再 @ 文档启动开发，记录从想法到初版的时间。
• 装上 superpowers 后刻意使用 subagent-driven-development，体会「每完成一个功能 commit 一次」对出错回退的帮助。
• 遇到 bug 或 UI 问题，先截图再配一句话自然语言描述发给 AI，体验这种反馈闭环与写长文字描述的差异。
• 从作者的 Skill 清单里挑 2-3 个装进自己的环境（如 planning-with-files、best-minds），用在下一次项目里，对照它沉淀的执行计划质量。

配套工作流

同类资源