返回指南页面
AI × Vibe Coding 实战

1小时出演示
Vibe Coding指南

把 AI 当成见·说·跑的迭代器,不是 Accept All 交差机。好 vibe 的标准:主路径能跑通、边界没加戏、密钥没泄、上生产有人审闸门。

独立开发者 产品经理 创业者 周末造物党 会一点代码的职场人
使用工具
Lovable 等
Cursor·Claude Code
成本
订阅/免费档
以官网为准
技能要求
会写规格
不用函数班底
交付结果
可演示版本
约 1–3 小时/次
场景重现

周末造物党:脑子里有产品,环境却卡了一整天

你是独立开发者、产品经理或创业者。周末想做一个可演示的落地页或小工具——装环境、找模板、改样式,三小时还在报错。真正的成本不是「不会写代码」,是没有见·说·跑的闭环。

① 本地报错:依赖装不上、跑不起来
Cursor 编辑器界面:终端红色报错、依赖安装失败
② 卡在:规格没写清、不敢点部署
职场插画:背对侧脸对着笔记本发呆,便签写着环境装不动、Accept All?

这件事,以前和现在怎么做?

之前 · 空想或盲接
半天到几天

要么卡在环境,要么 Accept All 上生产

  • 聊天窗口贴代码片段 → 本地跑不起来
  • 一键生成后从不看权限与密钥
  • throwaway 手感直接带进真实用户数据
之后 · 见·说·跑 + 闸门
约 1–3 小时

小切片可跑通,人审后再外发

  • 一页规格 → 选对路径(Lovable 或 Cursor)
  • 描述 → 跑通 → 贴报错迭代
  • 权限/密钥/边界过闸再演示或部署

路径选择

三条造物路径,差的不只是速度

先定身份与赌注,再定工具——别先收藏十个 Agent。

❌ 不推荐 🎰

全盘 Accept All 上生产

不读 diff、不测权限、密钥进前端。适合 throwaway 周末玩具——不是付费用户与真实数据。

⚠️ 折中 💬

聊天窗口贴代码自己拼

ChatGPT/豆包生成片段,本地复制粘贴。适合学概念;缺项目上下文与一键跑通,迭代成本高。

✅ 推荐 🎛️

描述 → 跑通 → 小切片验收

零基础走 Lovable;有仓库走 Cursor,长任务补 Claude Code。每步必须「见结果」,再进人审闸门。

💡

分流口诀:要敢给真实用户或密钥 → 只走右侧(规格 → 小切片 → 见·说·跑 → 人审)。Accept All 上生产、只靠聊天拼片段都是错路或折中。演示链接发出前,必须能回放主路径。


工具选择

Vibe Coding 场景:先定哪把刀

按身份与工作面选型;能力榜与价格常变,以官网为准。准确率宣传因仓库而异,以你自己的小切片实测为准。

工具 在本场景的定位 什么时候用 别指望它
Lovable ★ 浏览器全栈:描述→原型→迭代→部署 零基础、落地页、内部工具 MVP、给客户演示 替你做安全审计、维护多年生产架构
Cursor IDE 内 agent:补全、对话改代码、多文件编辑 已有仓库、日常功能切片、UI 微调、贴报错修 bug 你完全不验收就上线
Claude Code 终端/IDE agent:深读仓库、跑命令、提 PR 流 重构、跨模块排查、自动化脚本与 CI 周边 替零基础用户免去一切环境与命令行

选型一句话:不会配环境、要五分钟出第一版 → Lovable。VS Code 手感、要改真实仓库 → Cursor。终端党/长程 agent → Claude Code。很多进阶者两个都用:IDE 里 Cursor 高频交互,侧边 Claude Code 跑重构。设额度上限;涉密代码勿丢未审过的云端工具。

📋

前置条件 · SPEC 骨架:可运行的一句话目标 · 产品边界半页纸(做/不做)· 工具账号与额度预期 · 导出或 Git 落盘预期。Spec 规格 · Pslice 切片 · Erules 规则文件 · Check 人审。throwaway 可以少读 diff;一旦有真实用户或密钥,必须读关键路径。


操作指南

6 步流水线:把氛围变成可演示版本

默认按 Cursor 仓库路径描述;走 Lovable 时把「打开仓库」换成「新建项目并描述」,闸门步骤不变。关键纪律:本切片跑不通就不开下一刀粉色标记为必填;黄色标记为选填。

写一页规格(做 / 不做) ⏱ 10 分钟

用户、主路径、成功标准、不做清单。规格越短越好——超过一页就还在空想。

prompt_01_mvp_spec.txt · MVP 规格一页纸
【角色】你是务实的产品教练,帮我把想法压成可实现的 MVP 规格,禁止扩成平台幻想。 【一句话目标】[谁用它完成什么] 【用户】[画像一句] 【主路径】[用户从打开到成功的 3 步] 【成功标准】[可演示的一条,如「表单提交后出现成功页」] 【明确不做】[至少 3 条] 【技术约束】[如:只要静态站 / 要登录 / 不要支付] 【输出】半页规格:目标 / 主路径 / 成功标准 / 不做清单 / 建议的第一切片。

选路径并准备落盘 ⏱ 2 分钟

零基础 → Lovable 新项目。有仓库 → 打开 Cursor / 准备 Claude Code 工作目录。确认能导出或 git commit。本步无提示词。

只做最小可演示切片 ⏱ 首切片

一屏主路径能点通即可。不要同时要登录+支付+后台。按路径二选一:

Lovable 路径

prompt_02_lovable_first_slice.txt · Lovable 首屏
【角色】你在 Lovable 中构建可演示 Web 应用。只做第一切片,不要一次做完全部功能。 【规格】[粘贴一页纸规格] 【本切片成功标准】[一条可点击验证的标准] 【视觉方向】[简洁/深色/品牌色;或上传参考图说明] 【硬性规则】 - 不要加支付、复杂权限、多角色后台(除非规格明确要求) - 文案用中文(除非我另说) - 完成后列出:我该点哪里验收 + 你不确定需要我确认的 3 点

Cursor 仓库路径

prompt_03_cursor_feature_slice.txt · Cursor 功能切片
【角色】你是结对工程师。在当前仓库内只实现一个可验证切片,保持现有风格与目录约定。 【切片目标】[一句话] 【验收方式】[我如何本地验证:命令或点击路径] 【约束】[技术栈/禁止改动的目录/不要引入的依赖] 【相关文件】[路径提示;没有则先搜索再改] 【硬性规则】 - 先给出简短计划,再改代码 - 改动尽量小;说明每个文件为什么改 - 不要提交密钥;不要删除无关文件 - 结束后给出:如何验收 + 风险点

看结果 → 说改动 → 再跑 ⏱ 见·说·跑

界面不对就描述像素级修改;报错就整段粘贴下方模板。循环直到本切片验收通过。Karpathy 说的 see / say / run 就在这一步闭环。

prompt_04_fix_from_error.txt · 粘贴报错修复
【角色】你修 bug 像工程师:先定位再改,禁止瞎改三处碰运气。 【我期望的行为】[一句话] 【实际行为】[一句话] 【完整报错 / 日志】 [粘贴] 【最近改动】[相关文件或截图说明] 【输出】1) 最可能根因 2) 最小修复 3) 如何验证 4) 若仍失败,下一步诊断。

权限 · 密钥 · 边界 ⏱ 人审闸门

过本篇验收四刀。生产向部署前:查密钥、登录与数据权限、错误处理。不过闸门就标「仅演示」。本步无提示词。

规则文件 + 提交/导出 ⏱ 固化

把约定写进 .cursorrulesCLAUDE.md;commit 或导出。下一刀从新切片开始,不推翻重来。本步无提示词。

💡

实操顺序:任何路径先跑步骤 ① 规格模板;浏览器 MVP 用步骤 ③ Lovable 框;仓库用步骤 ③ Cursor 框;卡住就用步骤 ④ 贴完整报错。不要跳过规格直接「帮我做个 App」。

💡

切片纪律:一次提示词塞进整站十个功能,等于邀请屎山。每次只交付一个可演示点——表单能提交、列表能刷新——完成再拉下一项。


迭代微调

跑通之后的版本,才是训练集

演示时卡在哪,决定你下次规格与规则文件怎么改。

TIP 01
演示翻车
粘贴演示脚本与翻车点,改成更稳的主路径,并更新「不做清单」。
TIP 02
加戏太多
对照规格,列出 AI 多做的功能;给出删除或隔离计划。
TIP 03
规则固化
根据本周踩坑,生成一版简短 .cursorrules / CLAUDE.md(<80 行)。
TIP 04
升级生产
从 vibe MVP 迁到可维护结构:列出必须人审的模块与测试清单。
🔄

复盘节奏:每次演示后记下「被追问的是功能缺失还是权限/密钥」——下次 SPEC 卡把那一格写死。只靠临场记忆会永远重复同一类翻车。


质量验收

演示或部署前,90 秒过这 4 刀

界面再漂亮,密钥写飞了也是事故。把 AI 当起草层,把这张清单当放行闸。

01
主路径能跑通
按成功标准亲手点一遍。不能跑通就不算 vibe 成功——只算生成了文本。
02
边界没被加戏
对照「不做清单」。多出来的登录/支付/后台,要么删掉要么明确排期——别默默带着上线。
03
密钥与权限
无明文密钥进前端/仓库公开区;有用户数据则检查权限模型。不确定就标「仅本地演示」。
04
可回滚
有 git commit 或可导出备份。下一刀改炸了,能退回上一可演示版。
🔍

额度急救:Agent/Max 模式别无上限。设月度消费 cap;大重构前先估成本。一次烧穿额度,周末项目会变成「钱包 vibe」。


演示前检查

过线后,两步都要做再外发

演示脚本与部署标记是流水线,不是二选一。

演示脚本走一遍

按成功标准亲手点主路径;录屏或截图留证。翻车就回到见·说·跑,禁止带着已知 bug 演示。

标注仅演示或部署

没过闸门 → 链接标「仅演示、勿填真实数据」。过闸门 → 查部署环境与域名/密钥配置后再公开。

🔗

①② 是流水线,不是二选一。先跑通演示脚本,再决定仅演示还是正式部署。对外给客户看之前,建议第二人扫一遍权限与密钥清单。


关键回顾

一条可复用的 Vibe Coding 流水线

可交付 vibe = 清晰规格 × 见·说·跑闭环 × 小切片 × 人审闸门。AI 加速中间的体力活——按下公开前的权限与密钥,永远是你的。

1 写一页规格 ⏱ 10 分钟
2 选路径落盘 ⏱ 2 分钟
3 最小可演示切片 ⏱ 首切片
4 见·说·跑 ⏱ 迭代
5 人审闸门 ⏱ 验收
6 规则 + 提交 ⏱ 固化

常见问题

踩过的坑,提前告诉你

覆盖 Vibe Coding 最高频卡住点。

零基础、要快速可点开的演示 → Lovable(浏览器里聊出应用)。已有仓库或准备长期改代码 → Cursor。两者都能 vibe;差在工作面(浏览器全栈 vs IDE/仓库),不在「谁更 vibe」。

入门先吃透一个。很多进阶工作流是:Cursor 做日常交互与 UI,Claude Code 做跨文件长任务与终端自动化。学透一个比两个都学一半强。

可以学在 throwaway 项目里找手感。一旦有用户、支付、隐私数据,必须读关键路径并过人审闸门。周末玩具手感不是生产免责声明。

各产品网络与支付政策会变,以官网与账户页为准。提前确认能否登录、如何付费;设消费上限。访问不稳时,先用小切片验证,避免长 agent 空转烧额度。

当探索与 MVP 可以;当长期生产要补测试、权限模型、可维护结构,必要时用专业栈重建关键模块。正确节奏常见是:vibe 验证 → 再工程化。


后续建议

一场好 vibe,值得变成可复用系统

别让每次造物都从「提示词从哪找」开始。

📄

规格模板常驻

保存「一页纸 MVP」空白表。新点子先填表再开工具。

📜

规则文件版本化

.cursorrules / CLAUDE.md 进 git。踩坑就改规则,而不是改脾气。

🧪

验收清单置顶

四刀验收复制到每个项目 README。演示前强制过一遍。

💬

更多资源

想继续核对产品能力,可从这些官方资料延伸: