WorkBuddy 路线：30 分钟做出第一个应用

目标

上一节装好了 WorkBuddy，这一节只做一件事：30 分钟内，用 WorkBuddy 做出一个能打开的网页应用。 你不需要理解任何代码。

术语提示：网页应用 = 在浏览器里打开就能用的程序；预览 = 在浏览器里打开看看效果；提示词 = 你发给 AI 的那段话。

第一步：新建项目文件夹

如果你在上一节已经建过 my-first-app 文件夹，直接让 WorkBuddy 打开它就行；还没建的话，现在在桌面上新建一个，再让 WorkBuddy 打开。以后所有练习都放在这个文件夹里，它只会在这里干活。

第二步：发出你的第一个需求

把这段话发给 WorkBuddy：

帮我在这个文件夹里做一个个人介绍网页。我是林晓，喜欢摄影和咖啡，想要干净明亮的单页。

页面需要包含：
1. 顶部大标题「你好，我是林晓」
2. 一句自我介绍
3. 三张占位图片的位置
4. 一个「联系我」的按钮
5. 页面底部写上「用 vibecoding 制作」

全部用简体中文。做完之后告诉我怎么预览。

占位图片 = 先用一个灰色占位框代替照片的位置，之后可以换成你自己的图片，不影响先跑通流程。

第三步：验收和修改

WorkBuddy 完成后，按照它的提示预览页面。第一次的结果大概率不完全是你想要的，直接说：

做得不错！我想把主色调改成橙色，再把「联系我」按钮放到自我介绍下面。帮我改一下。

看着它改完、刷新预览。恭喜，你已经完成了一次完整的「说需求 → 验收 → 修改」循环。

常见卡点（第一次最容易遇到）

现象	原因	怎么办
页面打不开	可能没运行成功	把界面提示贴给 WorkBuddy，让它解决
界面报红字	程序出错了	报错是线索，原样贴给 WorkBuddy
WorkBuddy 半天没反应	任务比较重	等一会儿，或让它拆小：「先只做标题部分」
做完不是我想要的	需求没说清	用上面的话术提具体修改

这一节你收获了什么

• 一个真实存在、能打开的网页应用
• 一次完整的 WorkBuddy 使用体验
• 一个重要的认知：改，比从零做更常见

如果 30 分钟没做完，别灰心，卡在哪里就把报错或界面截图发给 WorkBuddy，让它自己解释和修复。

想回到路线选择页？点这里，随时可以换到 Codex 路线。

下一步

你已经跑通了 WorkBuddy 路线。接下来进入「写提示词」模块，学怎么把想法说清楚——两条路线都适用。