Vibe Coding 示例：10 种真实应用类型、提示词与翻车经历

最常见的 vibe coding 示例是小而实用的网页应用：记账工具、预约页面、内部工具、客户门户、落地页、测验、仪表盘和简单的 AI 工具。下面列出十个。每个示例都会告诉你谁会做它、第一条提示词是什么、通常会出什么问题，以及修复它的后续提示词。

这些是人们最常带到 AI 应用构建器上的项目的综合案例，而不是某一个人的案例研究。提示词可以直接复制。那些反复出现的翻车经历才是最有用的部分。如果你对 vibe coding 本身还不熟悉，可以先阅读 什么是 vibe coding。

1. 个人记账工具

谁会做： 试过电子表格却坚持不下去的个人用户。

第一条提示词：

做一个月度记账工具。我可以添加支出，填写金额、分类（餐饮、房租、交通、娱乐、其他）、日期和备注。用柱状图显示本月各分类的总额，并列出最近的支出。我可以为每个分类设定预算，并查看剩余额度。

出了什么问题： 图表统计的是有史以来录入的所有支出，而不仅仅是本月的，所以到第二个月，每个分类看起来都超支了。另外，输入带逗号的金额（如“1,200”）时，保存下来的值只是 1。

修复提示词：

图表和汇总应该只包含所选月份的支出。在顶部添加月份选择器，默认为当前月份。同时接受带逗号或空格的金额输入，并将其保存为数字。

经验： “本月”本身就是一条规则。要把规则明确地说出来。

2. 小型美发店的预约页面

谁会做： 厌倦了通过电话和私信接受预约的小企业主。

第一条提示词：

为我的美发店做一个预约页面。顾客选择服务项目、日期和一个空闲时段，然后填写姓名和电话。我有一个私密的管理页面，需要登录后才能访问，按天显示预约情况。

出了什么问题： 两位顾客在一分钟之内预约了同一个 10:00 的时段，因为页面只在首次加载时检查可用性。一个 90 分钟的染发服务也没有占用它之后的时段。

修复提示词：

顾客提交预约时，服务器需要检查该预约覆盖的每个时段是否仍然空闲；如果不空闲，则拒绝预约，并提示“该时段刚刚被预约”。一项服务应占满其全部时长，因此 10:00 的 90 分钟预约会占用 10:00、10:30 和 11:00。

经验： 任何两个人可能同时操作的环节，都需要在服务器端进行检查。完整做法请参见 如何制作预约应用。

3. 带二维码的餐厅菜单

谁会做： 经常需要重新印刷菜单的咖啡馆和餐厅老板。

第一条提示词：

为我的咖啡馆做一个手机菜单网站。分为早餐、午餐、饮品和甜点几个板块，每个菜品包含名称、价格、简短描述和饮食标签（纯素、无麸质）。我需要一个管理页面来编辑菜品，并标记售罄。显示一个可打印的二维码，链接到菜单。

出了什么问题： 没有什么明显故障，但由于每个菜品都加载了全尺寸的手机照片，菜单在咖啡馆的 Wi-Fi 下很慢。

修复提示词：

菜单图片太大了。请把上传的图片缩放到最大宽度 800 像素，压缩后，在访客滚动时再延迟加载。

经验： 要在慢速网络下测试，而不仅仅是在办公室里测试。

4. 团队的设备或库存追踪工具

谁会做： 正在替换共享电子表格的运营人员。

第一条提示词：

为我们的仓库团队做一个库存工具。物品包含名称、SKU、数量、位置和最低库存量。员工登录后可以入库、出库并填写出库原因，低于最低库存的物品以红色高亮显示。保留每一次变更的历史记录，以及是谁做的变更。

出了什么问题： 历史记录显示的是“用户 3”，而不是人名；出库数量超过库存时，库存数量变成了负数。

修复提示词：

历史记录中显示操作人的姓名，而不是 ID。不允许出库后使数量低于零的操作；此时应显示“库存仅剩 4 件”。

经验： 不仅要描述什么应该能做，还要描述什么应该做不到。我们的 库存应用制作指南 涵盖了其余内容。

5. 自由职业者或工作室的客户门户

谁会做： 设计师、会计师、顾问和代理机构。

第一条提示词：

做一个客户门户。我通过邮箱邀请客户。每位客户登录后，只能看到自己的项目、文件和账单，并可以留言评论。我以管理员身份登录，可以看到全部内容。

出了什么问题： 这是清单上最重要的一个故障。页面只向每位客户显示其自己的项目，但只要在地址栏里修改数字，服务器就会返回任何项目。以一个客户的身份反复点击，根本不会暴露这个问题。

修复提示词：

检查每一个返回项目、文件、评论或账单的服务器路由。每一个路由都必须确认当前登录的客户拥有该记录，否则返回“未找到”。然后进行测试：以客户 A 登录，尝试通过 ID 打开客户 B 的项目。

经验： 在屏幕上隐藏某些内容，并不等于保护了它。更多内容请参见 vibe coding 安全吗？。

6. 带候补名单的发布页

谁会做： 在正式开发之前先测试想法的创始人。

第一条提示词：

为一款帮助家教安排课程、收取付款的应用做一个落地页。包含主标题、副标题、邮箱注册、三个优势、一段“使用流程”说明和一个常见问题部分。把注册信息连同日期保存到数据库，并允许我在一个私密页面中以 CSV 格式下载。

出了什么问题： 几天之内，名单里充满了机器人产生的垃圾注册，而且页面没有标题和描述，所以分享链接时只显示一个空白预览。

修复提示词：

为注册表单添加基础的机器人防护（一个隐藏的蜜罐字段，并限制每个 IP 每小时最多 5 次注册）。再添加页面标题、meta 描述和社交分享图片。

经验： 公开的表单迟早会被发现。请参见 如何制作候补名单页面。

7. 教师的测验应用

谁会做： 希望比学习管理系统更轻量的老师和培训师。

第一条提示词：

为我的班级做一个测验应用。我可以创建选择题测验，每题只有一个正确答案。学生输入代码和名字即可参加，回答问题，并在最后看到自己的分数。我可以查看每次测验的结果表。

出了什么问题： 正确答案和题目一起被发送到了浏览器，所以好奇的学生只需查看页面源代码就能看到答案。学生还可以反复提交，直到拿到 100%。

修复提示词：

不要把正确答案发送到浏览器。提交后在服务器端检查答案。每位学生的名字在每次测验中只允许提交一次，如果有人再次尝试，则告知老师。

经验： 浏览器属于用户。放在那里的任何东西都可以被读取。

8. 小型 AI 工具

谁会做： 希望拥有专注型 AI 助手的营销人员、写作者和创始人。

第一条提示词：

做一个工具，把产品描述转换成五条不同语气（亲切、专业、俏皮、简短、详细）的社交媒体文案。使用 AI API。我粘贴产品描述，选择平台，然后获得带有复制按钮的文案。

出了什么问题： 第一个版本直接从浏览器调用 AI 服务，页面中写着 API 密钥，任何人都可以复制它并让账单暴涨。

修复提示词：

把 AI 调用移到服务器端。把 API 密钥存为机密，绝不放在前端代码中。限制每位访客每天最多 20 次生成。

经验： 密钥应当存放在服务器的机密设置中。参见 如何保护 API 密钥 和 如何为应用添加 AI 功能。

9. 阿拉伯语和英语双语的商业网站

谁会做： 服务于两种语言的海湾地区及更广阔阿拉伯世界的企业。

第一条提示词：

为我的室内设计公司做一个阿拉伯语和英语的网站，带语言切换。页面包括：首页、服务、作品集、关于我们和联系我们。阿拉伯语版本必须完整地从右到左排版。

出了什么问题： 阿拉伯文字是右对齐的，但整体布局没有镜像：箭头仍指向错误的方向，菜单位于错误的一侧。电话号码有时也显示颠倒了。

修复提示词：

阿拉伯语版本需要镜像整个布局：将页面方向设为从右到左，把菜单放在右侧，翻转有方向的图标，并在阿拉伯文字中保持电话号码和邮箱为从左到右显示。

经验： 从右到左是一种布局，而不只是对齐方式。Mythex 支持阿拉伯语和其他从右到左的布局，你也可以直接用阿拉伯语下达指令。

10. 变成手机应用的记录工具

谁会做： 用户主要在手机上的教练、健身房和社群组织。

第一条提示词：

为我的私人训练客户做一个训练记录工具。每位客户登录后，可以看到我本周为其安排的计划，勾选完成的动作并记录重量。我可以在图表中查看每位客户的进度。

出了什么问题： 网页应用运行正常，但在手机上，训练中的按钮太小，很难点击，图表也看不清。

修复提示词：

按单手在手机上操作来设计：屏幕底部放置大号的可点按区域，每屏只显示一个动作，并配有醒目的“下一个”和“完成”按钮，再加一个简单的每周进度图表。

经验： 如果用户会在手机上使用，就先为手机设计。在 Mythex Pro 上，已发布的应用随后可以变成 Google Play 上的 Android 应用，以及发送到 TestFlight 的 iPhone 应用；手机应用打开的是你已发布的应用，因此每次发布都会同步更新。参见 手机应用构建器 页面。

这些示例背后的规律

纵观这十个示例，问题可以归为几类：

这些问题都不需要你读代码。你需要做的是像一个好奇、略带敌意的用户那样去测试，并且精确地描述你看到的现象。

自己试一试

挑选与你的想法最接近的示例，复制它的第一条提示词，然后替换成你自己的细节。分享之前，把修复提示词当作检查清单逐条核对。我们的 vibe coding 提示词速查表 还提供了 30 条提示词，而 如何用 vibe coding 做应用 则带你完成一个从构想到发布的项目。准备好之后，就在 AI 应用构建器 中开始，或者浏览 模板，获取现成的起点。

常见问题