[{"data":1,"prerenderedAt":724},["ShallowReactive",2],{"header-counts":3,"footer-counts":6,"wiki-vibe-coding":9},{"tools":4,"reviews":5},65,7,{"tools":4,"reviews":5,"playbooks":7,"news":8},10,8,{"id":10,"title":11,"body":12,"category":702,"description":144,"extension":703,"meta":704,"navigation":705,"path":706,"published":707,"relatedModels":708,"relatedTools":711,"seo":716,"slug":717,"stem":718,"summary":719,"tags":720,"updated":707,"__hash__":723},"wiki\u002Fwiki\u002Fvibe-coding.md","Vibe Coding",{"type":13,"value":14,"toc":671},"minimark",[15,20,29,32,45,48,125,129,134,145,149,152,156,162,166,170,174,234,238,241,285,289,292,372,378,382,385,391,394,397,400,426,430,433,454,457,477,480,483,515,522,525,528,534,537,540,551,554,557,577,581,584,604,607,639,642],[16,17,19],"h2",{"id":18},"什么是-vibe-coding","什么是 Vibe Coding",[21,22,23,24,28],"p",{},"Vibe Coding 是 Andrej Karpathy 在 2025 年初提出的概念：",[25,26,27],"strong",{},"不再逐行写代码，而是用自然语言描述你想要什么，让 AI 生成代码，你只做审查和调整","。",[21,30,31],{},"\"Vibe\" 的意思是——跟着感觉走，用对话的方式编码，像跟一个全栈工程师 pair programming。",[33,34,35,38],"blockquote",{},[21,36,37],{},"Karpathy 原帖大意：「我在 Vibe Coding 时，会忘记代码是存在的。我只看到屏幕上有东西在动，能用就行。出了 bug，我把报错粘给 AI，让它修，通常就修好了。我不再 review 它做的每一处修改。」",[21,39,40,41,44],{},"这段话有个常被忽略的关键前提——他做的是",[25,42,43],{},"周末玩具项目","。Karpathy 自己后来也澄清过，生产代码不应该这么干。",[16,46,47],{"id":47},"与传统编程的区别",[49,50,51,66],"table",{},[52,53,54],"thead",{},[55,56,57,61,64],"tr",{},[58,59,60],"th",{},"维度",[58,62,63],{},"传统编程",[58,65,11],{},[67,68,69,81,92,103,114],"tbody",{},[55,70,71,75,78],{},[72,73,74],"td",{},"交互方式",[72,76,77],{},"键盘敲代码",[72,79,80],{},"自然语言对话",[55,82,83,86,89],{},[72,84,85],{},"开发者角色",[72,87,88],{},"写代码",[72,90,91],{},"审查代码、描述意图",[55,93,94,97,100],{},[72,95,96],{},"思考粒度",[72,98,99],{},"语法级（怎么写）",[72,101,102],{},"架构级（写什么）",[55,104,105,108,111],{},[72,106,107],{},"效率瓶颈",[72,109,110],{},"打字速度",[72,112,113],{},"提问精度",[55,115,116,119,122],{},[72,117,118],{},"适合场景",[72,120,121],{},"精确控制",[72,123,124],{},"快速原型、CRUD",[16,126,128],{"id":127},"vibe-coding-工作流","Vibe Coding 工作流",[130,131,133],"h3",{"id":132},"_1-描述意图","1. 描述意图",[135,136,141],"pre",{"className":137,"code":139,"language":140},[138],"language-text","帮我做一个 TODO 应用：\n- 添加\u002F删除\u002F标记完成\n- 本地存储\n- 暗色主题\n- 响应式布局\n","text",[142,143,139],"code",{"__ignoreMap":144},"",[130,146,148],{"id":147},"_2-ai-生成代码","2. AI 生成代码",[21,150,151],{},"AI 一次性或分步生成完整代码。",[130,153,155],{"id":154},"_3-审查与调整","3. 审查与调整",[135,157,160],{"className":158,"code":159,"language":140},[138],"布局不错，但列表项太挤了，增加 padding。\n删除按钮加个确认弹窗。\n",[142,161,159],{"__ignoreMap":144},[130,163,165],{"id":164},"_4-迭代直到满意","4. 迭代直到满意",[16,167,169],{"id":168},"适合-vibe-coding-的工具","适合 Vibe Coding 的工具",[130,171,173],{"id":172},"ai-ide","AI IDE",[49,175,176,189],{},[52,177,178],{},[55,179,180,183,186],{},[58,181,182],{},"工具",[58,184,185],{},"特点",[58,187,188],{},"Vibe Coding 适配度",[67,190,191,202,213,223],{},[55,192,193,196,199],{},[72,194,195],{},"Cursor",[72,197,198],{},"Composer 多文件改写",[72,200,201],{},"★★★★★",[55,203,204,207,210],{},[72,205,206],{},"Trae",[72,208,209],{},"字节出品，国内直连",[72,211,212],{},"★★★★☆",[55,214,215,218,221],{},[72,216,217],{},"Windsurf",[72,219,220],{},"Cascade 模式",[72,222,212],{},[55,224,225,228,231],{},[72,226,227],{},"Qoder",[72,229,230],{},"阿里出品",[72,232,233],{},"★★★☆☆",[130,235,237],{"id":236},"ai-应用生成器","AI 应用生成器",[21,239,240],{},"这类工具更进一步——不需要 IDE，直接在浏览器里对话生成完整应用：",[49,242,243,251],{},[52,244,245],{},[55,246,247,249],{},[58,248,182],{},[58,250,185],{},[67,252,253,261,269,277],{},[55,254,255,258],{},[72,256,257],{},"Bolt.new",[72,259,260],{},"一句话生成全栈应用，浏览器内运行",[55,262,263,266],{},[72,264,265],{},"Lovable",[72,267,268],{},"AI 全栈开发，内置部署",[55,270,271,274],{},[72,272,273],{},"v0",[72,275,276],{},"Vercel 出品，专注前端 UI 生成",[55,278,279,282],{},[72,280,281],{},"Replit Agent",[72,283,284],{},"云端全流程：编码→测试→部署",[16,286,288],{"id":287},"vibe-coding-vs-spec-driven-development","Vibe Coding vs Spec-Driven Development",[21,290,291],{},"2026 年另一种主流流派——Spec-Driven Development（规格驱动开发，如 GitHub Spec Kit）走的是相反路线：",[49,293,294,305],{},[52,295,296],{},[55,297,298,300,302],{},[58,299,60],{},[58,301,11],{},[58,303,304],{},"Spec-Driven",[67,306,307,318,329,340,351,361],{},[55,308,309,312,315],{},[72,310,311],{},"起点",[72,313,314],{},"一句话目标",[72,316,317],{},"详细 spec \u002F 验收标准",[55,319,320,323,326],{},[72,321,322],{},"AI 自由度",[72,324,325],{},"高",[72,327,328],{},"受 spec 严格约束",[55,330,331,334,337],{},[72,332,333],{},"适合阶段",[72,335,336],{},"探索、原型",[72,338,339],{},"生产、团队协作",[55,341,342,345,348],{},[72,343,344],{},"出错成本",[72,346,347],{},"改了再改",[72,349,350],{},"改 spec → 重新生成",[55,352,353,356,359],{},[72,354,355],{},"可审计性",[72,357,358],{},"低",[72,360,325],{},[55,362,363,366,369],{},[72,364,365],{},"代表工具",[72,367,368],{},"Cursor \u002F Bolt",[72,370,371],{},"GitHub Spec Kit \u002F Claude Code + AGENTS.md",[21,373,374,377],{},[25,375,376],{},"实务中两者结合","：探索期 Vibe Coding 快速验证，进入生产前补 spec \u002F 测试 \u002F AGENTS.md 把它\"固化\"成可维护的代码。",[16,379,381],{"id":380},"vibe-hardened-流程从玩具到生产","Vibe → Hardened 流程：从玩具到生产",[21,383,384],{},"Vibe Coding 出来的代码上线前必须经过\"加固\"流程：",[135,386,389],{"className":387,"code":388,"language":140},[138],"[Vibe 阶段]                    [Hardened 阶段]\n对话生成                  →    补单元测试 + 集成测试\n功能能跑                  →    Code Review（人 + AI 双重）\n能用就行                  →    边界条件、错误处理补全\n本地 SQLite               →    生产 DB + 迁移脚本\n密钥写死                  →    走 env \u002F secret 管理\nconsole.log 满天          →    结构化日志 + 监控\n没有 CI                   →    Lint \u002F 类型检查 \u002F 测试 \u002F 部署 pipeline\n没有文档                  →    README + AGENTS.md \u002F CLAUDE.md\n",[142,390,388],{"__ignoreMap":144},[21,392,393],{},"跳过 Hardened 直接上线，是 vibe coding 翻车最常见原因。",[16,395,396],{"id":396},"版本控制策略",[21,398,399],{},"Vibe Coding 容易让 AI 一次改一大片，下面三招防止 commit 爆炸：",[401,402,403,410,416],"ol",{},[404,405,406,409],"li",{},[25,407,408],{},"小步提交","——每完成一个功能就 commit，不要\"全部改完再统一提\"。AI 一次性回滚单个 commit 比从乱了的工作区里挑改动容易得多。",[404,411,412,415],{},[25,413,414],{},"分支隔离实验","——任何\"AI，帮我试一下用别的方案\"先开新分支，跑通再合，跑废就删。别在主分支直接让它改。",[404,417,418,421,422,425],{},[25,419,420],{},"diff 必看","——",[142,423,424],{},"git diff"," 即使你 vibe，也要扫一眼变了多少行、动了哪些文件。AI 偶尔会\"顺手\"重写无关代码，不看 diff 就放过去。",[16,427,429],{"id":428},"vibe-coding-的边界","Vibe Coding 的边界",[130,431,432],{"id":432},"适合",[434,435,436,439,442,445,448,451],"ul",{},[404,437,438],{},"✅ CRUD 应用、管理后台",[404,440,441],{},"✅ 落地页、营销网站",[404,443,444],{},"✅ 原型验证、MVP 开发",[404,446,447],{},"✅ 数据处理脚本、一次性自动化",[404,449,450],{},"✅ 单页应用（React\u002FVue）",[404,452,453],{},"✅ 个人玩具项目（Karpathy 本意）",[130,455,456],{"id":456},"不适合",[434,458,459,462,465,468,471,474],{},[404,460,461],{},"❌ 高并发系统（需要精细性能优化）",[404,463,464],{},"❌ 底层系统编程（OS\u002F驱动\u002F编译器）",[404,466,467],{},"❌ 安全关键系统（医疗\u002F航空\u002F金融核心）",[404,469,470],{},"❌ 大型已有项目重构（上下文太长）",[404,472,473],{},"❌ 需要精确算法实现（不如手写可靠）",[404,475,476],{},"❌ 多人协作的生产代码（无 spec 难协同）",[16,478,479],{"id":479},"真实失败案例",[21,481,482],{},"社区流传的几个翻车故事，可以反向学习：",[401,484,485,491,497,503,509],{},[404,486,487,490],{},[25,488,489],{},"「能跑就行」结果跑不动","——开发者 vibe 出一个 SaaS 上线，没看 AI 生成的数据库查询逻辑。前 100 个用户没事，第 1000 个用户时发现每个请求都在做全表扫描，数据库 CPU 100%。",[404,492,493,496],{},[25,494,495],{},"密钥泄露","——AI 生成的代码里直接硬编码 OpenAI API key，开发者没看就 push 到公开 repo，几小时被薅几千刀。",[404,498,499,502],{},[25,500,501],{},"AI 删了文件没提","——让 AI\"重构一下\"，它顺手删了一个看似无用的 utils 文件，实际上有别处依赖。本地跑通是因为缓存，部署后崩。",[404,504,505,508],{},[25,506,507],{},"\"测试也帮我加上\"——AI 写了测试，但测的是\"实现是否调用了 mock\"而非\"业务是否正确\"","。100% 覆盖率，0 个 bug 被发现。",[404,510,511,514],{},[25,512,513],{},"prompt injection 没防","——AI 写的客服 bot 直接把用户输入拼到 system prompt，第一周就被用户绕过限制泄露内部数据。",[21,516,517,518,521],{},"共性：",[25,519,520],{},"没有审查 = 没有质量门","。Vibe Coding 把\"写代码的速度\"加快了 10 倍，如果不同时把\"审查 + 测试\"也加快 10 倍，bug 数也会跟着翻 10 倍。",[16,523,524],{"id":524},"最佳实践",[130,526,527],{"id":527},"提示词技巧",[135,529,532],{"className":530,"code":531,"language":140},[138],"❌ \"做个网站\"\n✅ \"用 Next.js 14 App Router 做一个 SaaS 落地页：\n    - Hero 区：标题 + 副标题 + CTA 按钮\n    - Features 区：3 列图标 + 文字\n    - Pricing 区：3 档价格卡片\n    - Footer 区：链接 + 版权\n    - 用 Tailwind CSS，暗色主题\n    - 响应式，移动端优先\"\n",[142,533,531],{"__ignoreMap":144},[130,535,536],{"id":536},"分步迭代",[21,538,539],{},"不要一次性要求 AI 做完所有事。分步迭代：",[401,541,542,545,548],{},[404,543,544],{},"先生成骨架（布局 + 路由）",[404,546,547],{},"再填充内容（文案 + 样式）",[404,549,550],{},"最后加交互（状态管理 + API）",[130,552,553],{"id":553},"保持审查",[21,555,556],{},"Vibe Coding 不等于不看代码。你必须：",[434,558,559,562,565,568,571],{},[404,560,561],{},"理解 AI 生成的每一行代码",[404,563,564],{},"检查安全漏洞（XSS、SQL 注入、密钥泄露）",[404,566,567],{},"验证业务逻辑正确性",[404,569,570],{},"测试边界情况",[404,572,573,574,576],{},"看 ",[142,575,424],{}," 而不是只看 AI 的总结",[16,578,580],{"id":579},"vibe-coding-会取代程序员吗","Vibe Coding 会取代程序员吗",[21,582,583],{},"短答案：不会，但会改变程序员的工作方式。",[434,585,586,592,598],{},[404,587,588,591],{},[25,589,590],{},"初级程序员"," — 从\"写代码\"变成\"审代码\"，门槛降低",[404,593,594,597],{},[25,595,596],{},"高级程序员"," — 效率 10x，一个人能做原来一个团队的活",[404,599,600,603],{},[25,601,602],{},"非程序员"," — 能做出简单应用，但复杂系统仍需专业开发者",[21,605,606],{},"未来程序员的核心竞争力不是\"会写代码\"，而是：",[401,608,609,615,621,627,633],{},[404,610,611,614],{},[25,612,613],{},"系统设计能力"," — 知道该做什么、怎么拆分",[404,616,617,620],{},[25,618,619],{},"代码审查能力"," — 能判断 AI 生成代码的质量",[404,622,623,626],{},[25,624,625],{},"调试能力"," — AI 出错时能定位和修复",[404,628,629,632],{},[25,630,631],{},"领域知识"," — 理解业务需求，翻译为技术方案",[404,634,635,638],{},[25,636,637],{},"测试能力"," — 知道怎么验证 AI 的输出真的是对的",[16,640,641],{"id":641},"延伸阅读",[434,643,644,657,664],{},[404,645,646,647,652,653],{},"配套思路：",[648,649,651],"a",{"href":650},"\u002Fwiki\u002Fprompt-engineering.html","Prompt Engineering"," \u002F ",[648,654,656],{"href":655},"\u002Fwiki\u002Fcontext-engineering.html","Context Engineering",[404,658,659,660],{},"自主性更高的选项：",[648,661,663],{"href":662},"\u002Fwiki\u002Fai-agent.html","AI Agent",[404,665,666,667],{},"工具底层机制：",[648,668,670],{"href":669},"\u002Fwiki\u002Ffunction-calling.html","Function Calling",{"title":144,"searchDepth":672,"depth":672,"links":673},3,[674,676,677,683,687,688,689,690,694,695,700,701],{"id":18,"depth":675,"text":19},2,{"id":47,"depth":675,"text":47},{"id":127,"depth":675,"text":128,"children":678},[679,680,681,682],{"id":132,"depth":672,"text":133},{"id":147,"depth":672,"text":148},{"id":154,"depth":672,"text":155},{"id":164,"depth":672,"text":165},{"id":168,"depth":675,"text":169,"children":684},[685,686],{"id":172,"depth":672,"text":173},{"id":236,"depth":672,"text":237},{"id":287,"depth":675,"text":288},{"id":380,"depth":675,"text":381},{"id":396,"depth":675,"text":396},{"id":428,"depth":675,"text":429,"children":691},[692,693],{"id":432,"depth":672,"text":432},{"id":456,"depth":672,"text":456},{"id":479,"depth":675,"text":479},{"id":524,"depth":675,"text":524,"children":696},[697,698,699],{"id":527,"depth":672,"text":527},{"id":536,"depth":672,"text":536},{"id":553,"depth":672,"text":553},{"id":579,"depth":675,"text":580},{"id":641,"depth":675,"text":641},"methodology","md",{},true,"\u002Fwiki\u002Fvibe-coding","2026-06-21",[709,710],"claude-sonnet-4","gpt-5",[712,713,714,715],"coding\u002Fide\u002Fcursor","coding\u002Fide\u002Ftrae","coding\u002Fbuilder\u002Fbolt-new","coding\u002Fbuilder\u002Flovable",{"title":11,"description":144},"vibe-coding","wiki\u002Fvibe-coding","用自然语言与 AI 对话式编程，开发者描述意图、AI 写代码，像指挥一个全栈工程师干活。",[11,721,722,195],"编程方法论","AI编程","9UckVqIxysE5n7rliIiWL7i_6LVgt6hJrhow9jgY9Bc",1782316491233]