[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$fsSJG_N_Ugtq5_32_bWfNmtWUOxOoA0oPPfRQT2WjoGM":3},{"item":4,"related":51},{"id":5,"type":6,"title":7,"slug":8,"summary":9,"body":10,"coverUrl":11,"productScreenshots":12,"productLinks":13,"authorName":14,"authorUrl":15,"authorSubject":16,"category":17,"tags":22,"sourceLabel":39,"sourceName":40,"sourceUrl":41,"status":42,"seoTitle":43,"seoDescription":44,"canonicalUrl":45,"isFeatured":46,"sno":47,"sortOrder":48,"publishedAt":49,"updatedAt":50,"createdAt":50},"642ebbdf-7834-496a-8515-2eb03c8f527b","article","Vibe Coding 是什么？从一句话到可运行应用","what-is-vibe-coding","Vibe Coding 让人用自然语言描述意图，再和 AI 一起把想法变成可运行的软件。本文从一次完整协作流程出发，解释它改变了什么、没有改变什么，以及普通人如何用清晰约束和持续验证做出可靠原型。","“我想做一个能记录读书笔记的小网页，卡片按标签筛选，手机上也能用。”把这句话交给 AI，它可能在几分钟内生成页面、样式和一套可以运行的代码。这个过程常被称为 Vibe Coding，中文可以理解为“用自然语言描述意图，再和 AI 一起把软件做出来”。\n\n## 它改变的是输入方式，不是软件规律\n\n传统编程要求人先把需求翻译成变量、函数、组件、数据库表和接口；Vibe Coding 把这一步部分交给了模型。人负责说明目标、约束和取舍，AI 负责把描述翻译成代码，再根据错误信息继续修改。\n\n但“会说话”不等于“没有工程”。浏览器仍然需要有效的 HTML、CSS 和 JavaScript，服务器仍然要处理权限、并发和异常，数据库仍然需要一致性。AI 只是降低了写出第一版的门槛，并没有取消这些规律。\n\n## 一次完整的 Vibe Coding 对话是什么样的\n\n一个相对稳妥的过程通常分成五步：\n\n1. 先说清楚用户、场景和成功标准，而不是直接说“帮我做一个很酷的 App”。\n2. 让 AI 先复述理解、列出实现计划和可能的风险。\n3. 只实现一个可验证的小切片，例如先完成“新增笔记”和“按标签筛选”。\n4. 在本地运行、点击、测试，再把具体错误和预期行为反馈给 AI。\n5. 每次改动都保留版本记录，确认没有破坏已有功能后再进入下一步。\n\n这和找一位速度很快的结对程序员相似：你不必亲手敲下每个字符，但必须能判断结果是否符合要求。\n\n## 为什么“描述得具体”比“提示词很长”重要\n\n好的任务描述不需要堆很多魔法句式，关键是提供可检查的边界。例如：\n\n> 请在现有页面中增加标签筛选。保留现有路由和数据结构；空状态要显示提示；筛选结果要在刷新后仍可恢复；先说明要修改哪些文件，完成后列出验证步骤。\n\n这里包含了范围、限制、状态和验收方式。AI 得到的自由度越适合任务，返工就越少。反过来，“把界面做得高级一点”缺乏可观察标准，往往会换一套颜色，却没有解决真正的问题。\n\n## 最容易被忽略的三类工作\n\n第一是边界条件：空列表、重复提交、网络失败、权限不足和手机窄屏。演示路径常常只有“填入正常数据并点击成功”，真实用户不会只走这一条路。\n\n第二是项目上下文：目录约定、构建命令、现有组件和数据模型。如果 AI 不知道这些信息，它可能创建重复工具、绕过已有接口，或者把代码放在错误目录。\n\n第三是责任边界：涉及支付、个人信息、删除数据或生产部署的操作，不应因为模型看起来很自信就直接放行。高风险动作需要人工确认和可回滚机制。\n\n## 适合怎样开始\n\n第一次尝试可以选一个低风险、可独立验收的小工具，例如个人清单、文本格式转换器或静态作品集。先让 AI 生成一个最小版本，再逐项增加功能。每次只改变一个变量，你才知道出现问题时是需求、代码还是环境导致的。\n\n一句话总结：Vibe Coding 让“想法到原型”的距离变短了，但真正可靠的结果仍来自清晰的约束、持续的验证和愿意承担责任的人。\n\n## 来源\n\n- [GitHub Copilot：在 IDE 中使用聊天和 Agent mode](https:\u002F\u002Fdocs.github.com\u002Fen\u002Fcopilot\u002Fhow-tos\u002Fchat-with-copilot\u002Fchat-in-ide)\n- [GitHub Copilot 负责任使用说明](https:\u002F\u002Fdocs.github.com\u002Fen\u002Fcopilot\u002Fresponsible-use)","\u002Fuploads\u002F2026-09-13\u002F94dbc9cd-7df5-4681-8e35-ea8e590b8152.jpg",[],[],"Foundit","https:\u002F\u002Ffoundit.cn","foundit-ai-editorial",{"id":18,"name":19,"slug":20,"description":21},"6179d3b6-dc34-4483-9ded-3cd9f1b37a47","科普","abbreviation","介绍各领域新兴概念",[23,27,31,35],{"id":24,"name":25,"slug":26},"0848beb4-db26-4fb8-b391-f852a11be192","AI编程","ai-coding",{"id":28,"name":29,"slug":30},"144abe77-0dc6-4f66-a176-20bddb1c0bfa","编程","coding",{"id":32,"name":33,"slug":34},"88d2bc27-0e0f-468a-b907-2991cb97b87b","人工智能","ai",{"id":36,"name":37,"slug":38},"7da20200-5815-42a5-851a-bc8c1db554cb","应用","app","GitHub Copilot 官方文档","GitHub Copilot：IDE 中的聊天和 Agent mode","https:\u002F\u002Fdocs.github.com\u002Fen\u002Fcopilot\u002Fhow-tos\u002Fchat-with-copilot\u002Fchat-in-ide","published","Vibe Coding 是什么：从自然语言到可运行应用","解释 Vibe Coding 的工作方式、适用场景和风险边界，帮助普通读者用清晰需求、分步验证和版本记录做出可靠原型。",null,false,59,0,"2026-09-13T00:00:00.000Z","2026-09-13T11:55:43.155Z",[52,60,68],{"id":53,"type":6,"title":54,"slug":55,"summary":56,"coverUrl":57,"authorName":14,"sno":58,"publishedAt":49,"createdAt":59},"f1cda8d5-21ea-4cf8-b210-7b6c41801fdd","云端 AI 编程环境和本机环境有什么区别","cloud-ai-coding-environment-vs-local","云端环境强调隔离、复现和交接，本机环境强调完整上下文和即时反馈。本文从数据边界、权限、复现、设备依赖和回滚出发，解释两种环境适合什么任务。","\u002Fuploads\u002F2026-09-13\u002F281b34c3-394d-487a-9ac3-9734f380a4f4.jpg",42,"2026-09-13T11:55:55.452Z",{"id":61,"type":6,"title":62,"slug":63,"summary":64,"coverUrl":65,"authorName":14,"sno":66,"publishedAt":49,"createdAt":67},"01d2808d-6efb-422a-b1f8-aeaf3f993949","AI 编程会让程序员消失吗","will-ai-coding-replace-programmers","AI 会让样板代码和部分重复工作更便宜，却不会自动承担需求、架构、风险和长期维护责任。本文从代码之外的系统工作出发，解释程序员的重心为什么会从逐行书写转向定义、验证和负责。","\u002Fuploads\u002F2026-09-13\u002Fa1a3bf3f-3cb9-4495-8e67-826749af0073.jpg",44,"2026-09-13T11:56:05.061Z",{"id":69,"type":6,"title":70,"slug":71,"summary":72,"coverUrl":73,"authorName":14,"sno":74,"publishedAt":75,"createdAt":76},"a2052bdb-8828-4c3c-8393-36172844bc57","一个 SKILL.md 如何让 AI 学会一套可复用工作流？","agent-skills-skill-md-workflows","Agent Skills 把一套工作方法打包成包含 SKILL.md、脚本、参考资料和资产的目录。本文解释 Skill 与 Prompt、MCP、AGENTS.md 的区别，拆解渐进式加载和可执行脚本，并讨论技能包的安全边界。","\u002Fuploads\u002F2026-09-08\u002Fea16f4b5-cdb3-4d44-8bb2-4e07bbe90ee7.jpg",46,"2026-09-08T00:00:00.000Z","2026-09-08T03:19:24.073Z"]