本课约 25 分钟 · 演示产品：腾讯 WorkBuddy（其他桌面 Agent 同样适用）· 内容更新于 2026 年 10 月
什么是氛围编程
2025 年初，AI 研究者 Andrej Karpathy 在一条帖子里给一种新的写程序方式起了个名字：氛围编程（vibe coding）。大意是：你只管描述想要什么、看效果、提意见，代码交给 AI 去写，你甚至可以不看代码。这个说法很快流行起来，现在不少 AI 编程产品都用它来介绍自己。
对不会编程的人来说，氛围编程意味着：
你当产品经理和验收员，Agent 当程序员。
这一课，你将不写一行代码，做出一个能用的网页小工具，并学会把它分享给别人。
先划清边界：什么适合自己做
| 适合用氛围编程自己做 | 应该找专业开发者 |
|---|---|
| 单页小工具：计算器、换算器、倒计时、抽签、打卡表 | 收钱、支付相关的功能 |
| 个人主页、活动介绍页、作品集 | 收集和保存别人的个人信息（报名表、会员系统） |
| 只在自己电脑上用的小工具 | 需要账号登录的系统 |
| 给几个朋友或同事临时用一下 | 公司的正式业务系统，需要长期稳定运行 |
右边这些不是 AI 写不出来，而是一旦出问题（被攻击、数据泄露、算错钱），后果需要专业的人来负责。本课只做左边这类：一个不联网、不收集任何信息的单页工具。
本课项目：定制礼盒报价计算器
延续第 4 课的小店场景：顾客常常问"做 200 个礼盒多少钱"，你每次都要翻价目表算半天。我们做一个网页，选好规格、数量，价格自动算出来，还能一键复制报价文字发给顾客。
第一步：写一份需求说明
氛围编程最重要的一步，是第 3 课学的"把活交代清楚"。写程序的任务书叫需求说明。有一样东西决定了成败：验收例子，也就是你事先算好答案的几个例子，用来检验它算得对不对。
在 WorkBuddy 里新建一个工作文件夹"报价计算器"，切到**想一想（Plan）**模式，发送：
【背景】我开了一家定制礼盒小店，想做一个网页小工具，顾客问价时我用它快速算出报价。
【任务】做一个"礼盒报价计算器"网页。
【功能】
1. 选择礼盒尺寸：小号 8 元/个、中号 12 元/个、大号 18 元/个；
2. 输入数量（1–5000）；
3. 可选"烫金 logo"，每个加 3 元；
4. 数量满 200 个打 9 折，满 500 个打 8 折（折扣只针对礼盒和烫金的总价）；
5. 运费：总价满 1000 元包邮，否则加 30 元；
6. 实时显示：单价、折扣、运费、总价；
7. 一个"复制报价"按钮，复制一段报价文字，例如"您好，中号礼盒 200 个（含烫金 logo），合计 2730 元，含运费。"
【界面】简洁、字大，手机上也能正常使用；颜色用浅色系。
【技术要求】
- 只生成一个 index.html 文件，双击就能在浏览器里打开；
- 不联网、不引用任何外部网站的资源；
- 不收集、不保存任何信息。
【验收例子】（必须全部算对）
- 小号 100 个，不烫金：800 元，加运费 30 元，总价 830 元；
- 中号 200 个，烫金：(12+3)×200=3000 元，打 9 折 2700 元，包邮，总价 2700 元；
- 大号 500 个，不烫金：18×500=9000 元，打 8 折 7200 元，包邮，总价 7200 元。
【交付】先给我页面设计和计算规则的说明，我确认后再写代码。
注意上面"复制报价"的示例文字：中号 200 个含烫金，按规则应是 2700 元，这里故意写成了 2730 元。这是一个小测验：好的 Agent 会发现示例和规则不一致，并向你确认。如果它没发现，记住这个教训：你的需求说明里如果有错，AI 很可能照着错的来做。
第二步：确认设计，生成网页
- 看它给出的设计说明，重点看计算规则和你想的是否一致，比如折扣是先算还是运费先算。
- 确认后执行。它会在工作文件夹里生成
index.html。 - 打开 WorkBuddy 右侧边栏的预览标签，可以直接看到网页效果，不用切换浏览器。也可以在文件夹里双击
index.html，用浏览器打开。
第三步：一次改一处，像产品经理一样提意见
第一版通常不完美。提修改意见的诀窍：
| 不好的说法 | 好的说法 |
|---|---|
| "不好看，重做" | "总价的字再大一倍，用深绿色；其他文字保持不变" |
| "计算不对" | "中号 200 个烫金，应该是 2700 元，现在显示 3000 元，看起来没有打 9 折，请检查折扣规则" |
| 一次提 8 个修改 | 一次只提 1–2 个，确认改好了再提下一个 |
两个保命习惯：
- 每次满意了就备份一份：把
index.html复制一份，命名为index-v1.html、index-v2.html……改坏了，随时能退回上一个能用的版本。 - 看"变更"：右侧边栏的变更标签会显示它每次改了哪些地方。看不懂代码也没关系，至少能知道它是不是改了你没让它改的东西。
**遇到报错怎么办？**把报错信息原样复制给它："打开网页后出现这个提示：【粘贴报错】，请修复。"你不需要看懂报错。
第四步：验收
| 检查项 | 怎么做 |
|---|---|
| 验收例子全对 | 把三个验收例子逐一输入，核对总价 |
| 边界情况 | 输入 0、5000、负数、空白，看它会不会算出奇怪的结果 |
| 手机上能用 | 把浏览器窗口拉窄到手机宽度，或者把文件发到手机上打开看看 |
| 复制报价 | 点"复制报价"，粘贴到微信里，检查文字和数字 |
| 不联网 | 断开网络，再打开网页，功能应该照常可用 |
全部通过，你的第一个工具就做好了。
第五步：分享给别人
做好的网页是一个文件。怎么让别人用上，有三种方式，难度和限制各不相同：
| 方式 | 怎么做 | 适合 | 限制 |
|---|---|---|---|
| ① 只在自己电脑用 | 把文件放在桌面，双击打开 | 自己用 | 无 |
| ② 直接发文件 | 把 index.html 发给对方，对方在电脑浏览器里打开 | 给几个同事或朋友 | 对方需要用浏览器打开；改了版本要重新发 |
| ③ 发布成网址 | 上传到静态网站托管平台，得到一个链接 | 想让更多人随时打开 | 见下方说明 |
关于方式 ③：以腾讯的 EdgeOne Pages 为例，它支持把单个 HTML 文件、一个文件夹或一个 ZIP 压缩包直接拖进网页上传，不需要任何命令（文件夹里的首页文件必须叫 index.html）。但要注意它官方文档写明的限制：
- 在中国大陆访问时，系统给的默认链接属于预览链接，有效期只有 3 小时，过期后需要在控制台重新生成；
- 想要长期稳定的网址，需要绑定你自己的域名，而面向中国大陆访问的自定义域名需要完成工信部备案；
- 访问者主要在海外的话，可以直接访问。
所以，面向国内的小范围分享，方式 ② 往往最省事；真的需要长期网址，再考虑购买域名、办理备案，或者使用你所在公司已有的网站。其他托管平台的规则各不相同，以各自的官方说明为准。
三条安全规矩
- **网页里的东西所有人都看得见。**任何人打开网页都能看到全部代码，所以密码、密钥（API Key）、客户名单绝对不能写进网页。
- 不要做收集别人信息的网页，比如报名表、问卷，除非你清楚数据存在哪、谁能看到、怎么保护。
- **涉及钱的数字要验收。**本课的报价器只用于给顾客估价，最终价格以你确认的为准。
在其他工具里怎么做
方法完全一样：写需求说明（含验收例子）→ 先看设计 → 生成 → 一次改一处 → 备份 → 验收。
| 产品 | 说明 |
|---|---|
| OpenAI 的 ChatGPT 桌面应用（包含原 Codex） | Codex 本身就是 AI 编程工具，适合做这类小工具，需要境外账号 |
| Anthropic 的 Claude Code | 面向开发者的 AI 编程工具；不熟悉命令行的话，可以先用桌面 Agent 练手 |
| 扣子编程 | 扣子官方文档称其"适配氛围编程（Vibe Coding）范式"，通过对话生成网页应用等项目 |
拿走就能用
- 需求说明模板：背景 / 功能 / 界面 / 技术要求 / 验收例子 / 先给设计；
- 提修改意见的话术表；
- 验收清单：例子、边界、手机、复制、断网；
- 三种分享方式对照表。
常见问题
完全看不懂代码，真的没关系吗？ 做本课这种小工具，没关系。你负责说清楚需求、准备验收例子、认真测试，这是质量的保证。但如果要做右边那一栏里的东西，就需要懂行的人把关了。
改着改着越来越乱怎么办？ 退回最近一个能用的备份版本，把你的需求说明补充完整，再从那里继续改。必要时，让它根据最新的需求说明从头重写，通常比在一团乱的代码上修修补补更好。
能做手机 App 吗？ 有些 AI 编程平台支持生成 App，但安装、上架、更新都更复杂。建议先用网页小工具练熟这套方法。
课后小任务
- 照着本课做出报价计算器，全部验收例子通过。
- 想一个你自己工作或生活中的小工具，比如"换算器""排班表""孩子的口算练习页"，写需求说明（至少 3 个验收例子），做出来。
- 用方式 ② 发给一位朋友，请他试用并提一条意见，再改一版。
参考来源
- Andrej Karpathy 于 2025 年 2 月 2 日在 X 上的帖子，首次使用 "vibe coding" 一词（本课据多方二手资料转述，未直接引用原文）。
- 腾讯云. WorkBuddy 应用场景（官方文档，2026-07-20）。应用构建：用自然语言描述需求，搭建网页、工具、本地应用。
- 腾讯云. WorkBuddy 右侧边栏（官方文档，2026-07-20）。产物、工作空间文件、变更（差异对比）、预览。
- 腾讯 EdgeOne. 直接上传与域名概述（官方文档，2026 年 10 月核对）。上传方式与限制；中国大陆访问的预览链接有效期 3 小时；自定义域名的备案要求。
- 扣子. 什么是扣子编程（官方文档，2026 年 10 月核对）。
延伸阅读
想了解 AI 编程工具在开发者工作中的定位，推荐阅读 Datawhale 开源教程《Hello-Agents》第一章 1.4.1 节"作为开发者工具的智能体"（CC BY-NC-SA 4.0）。