Vibe Coding 是什么意思、怎么入门：零基础用 Lovable、Bolt 做出第一个网页应用的流程

本文根据 Cursor 官方帮助中心《What is vibe coding?》以及 Lovable、Bolt 的官方快速上手文档整理，资料核对于 2026-10-11。文中提到的免费额度是官方页面当天的数字。

适用于谁

• 不会写代码，但想把一个点子做成能打开的网页或小工具的人；
• 搜「vibe coding 是什么」「vibe coding 是什么意思」「ai 做网站」的人；
• 产品、设计、运营，想自己做原型或内部小工具的人。

结论先说

1. Vibe coding（常译「氛围编程」）是 Andrej Karpathy 在 2025 年初提出的说法：用大白话描述你要什么，让 AI 智能体写代码，跑起来看效果，再凭感觉继续调整。
2. 它最适合原型、实验和内部小工具——求快、出错代价低。
3. 它不等于可以直接上生产。Cursor 官方原话的意思是：不建议把你不理解的软件发布到生产环境；别人要依赖的代码仍然需要审查、测试和工程判断。
4. 零基础入门选浏览器里的生成工具（Lovable、Bolt、v0），不用装环境；想长期维护、要更多控制，再过渡到 Cursor 这类编辑器或 Claude Code、Codex。
5. 一条贯穿始终的方法：第一版尽量简单，之后一次只改一处，每改一次看一眼预览。

该用哪类工具

三款浏览器工具的介绍见本站 AI 应用目录里的 Lovable、Bolt.new、v0 条目。下面的流程以前两者的官方快速上手为蓝本，换成别的工具步骤也大同小异。

八步流程

第一步：注册并了解额度

• Lovable：可用邮箱、Google、GitHub 或 Apple 注册。官方快速上手页写明构建消耗 build credits，免费档每天 5 个、每月最多 30 个。
• Bolt：需要 Chrome 或 Chromium 内核的浏览器；注册不需要信用卡。官方写明免费账号每月 100 万 token、每天上限 30 万，并提醒照着它的入门示例做一遍就会用掉接近 30 万。

额度有限，所以每一条提示词都值得写清楚。

第二步：写第一条提示词

把「做什么、有哪些部分、给谁看」写出来，并且明确说第一版不要什么。Lovable 官方示例的最后一句是「先不要登录和数据库」，并解释：第一版没有登录和数据库，出错的地方就少，之后一条提示词就能加上。

text
做一个社区咖啡馆的网站。包含：带标题和照片的首屏；一个可以按类别
（咖啡、早餐、午餐、甜点）筛选的菜单；营业时间；地址和「怎么找到我们」的说明。
使用逼真的示例数据。暂时不要登录和数据库。

Lovable 官方说明提示词可以用任何语言写，中文没问题。也可以从官方模板开始，在别人的成品上改。

第三步：等它生成，看预览

第一版通常要几分钟。带登录、收藏这类需要数据库的功能会更慢——Bolt 官方解释是因为要搭建数据库。生成后界面一般是左边对话、右边实时预览。在预览里把每个地方都点一遍。

第四步：一次只改一处

Lovable 官方的原则：每次只要求一个改动，改完看预览。

text
在菜单和营业时间之间加一个「今日特价」区块，展示两款菜品，各带一句介绍和价格。

风格不对也可以直接用大白话说，官方认可这样的提示词：

text
让整个网站看起来更温暖一些，不要那么商务。

小的视觉修改，「指」比「说」好用：Lovable 的预览工具栏、Bolt 的可视化编辑、Cursor 的 Design Mode 都能直接点选页面元素再提要求；改一句文字可以直接在页面上改。

第五步：盯住消耗

Bolt 官方建议一开始就打开「在对话中显示 token 用量」（Settings → General → Display token usage in chat），这样能看到每条提示词花了多少。应用越大越复杂，每次修改消耗越多——这也是「一次只改一处、说清楚改哪里」的另一个理由。

第六步：测试

Lovable 官方的发布前检查：

• 每个按钮和链接都点一遍；
• 把交互部分全走一遍（比如每个筛选类别）；
• 切到手机视图——大多数人会在手机上打开你的链接。

发现问题时，说清「哪里、现在怎样、应该怎样」：

text
在菜单里点「甜点」筛选后没有显示任何菜品，应该显示甜点类的菜品。

第七步：改坏了就回退

Lovable 官方说明每次修改都会保存为一个可恢复的版本；Bolt 有备份、恢复和版本历史。发现越改越乱时，回到上一个好的版本重新来，比一轮轮追着修更省事——这和 Cursor、Devin Desktop 官方对 Plan 模式给的建议是同一个道理。

第八步：发布

Lovable 点右上角 Publish，会得到一个 lovable.app 的网址，官方说明所有档位都免费提供。发布之前，先看完下一节。

上线前必须做的安全检查

用对话做出来的应用同样会被真实的人访问、被真实地攻击。Lovable 官方的安全最佳实践里，有几条对新手尤其重要：

1. 密钥不要放在前端代码里。浏览器里运行的代码任何人都能看到。正确做法是让平台把密钥安全地存起来，只在服务器端代码里读取，并且不要出现在返回内容和日志里。
2. 不要靠前端校验来保证安全。始终把来自用户的输入当作不可信的，在服务器端校验格式和业务规则后再处理或保存。
3. 数据库要有访问规则。用了数据库和登录，就要确认每张表设置了行级安全（RLS），用户只能读写自己的数据。发布前逐表检查一遍。
4. 用平台自带的安全扫描。Lovable 和 Bolt 都有项目安全检查功能，发布前跑一次，把提示的问题让 AI 修掉再复查。

可以直接这样要求：

text
检查这个项目：有没有把密钥写在前端代码里？每张数据库表是否都限制了
只有本人能读写自己的数据？列出发现的问题，并逐个修复。

涉及收款、用户隐私、公司内部数据的应用，不要只靠自己「看起来能用」就上线，请懂技术的人审一遍。

什么时候该从 vibe coding 往前走一步

出现下面的信号，说明项目已经超出「凭感觉」能管的范围：

• 同一个 bug 改了三四轮还在；
• 一处改动总是带坏另一处；
• 有别人开始依赖它，出错有了代价。

这时可以把代码导出或同步到 GitHub（各平台的做法以其文档为准），用 Cursor 这类编辑器接手：先让 AI 讲清项目结构，再补测试，之后的修改走「先计划、再实现、看 diff」的流程。相关教程：《Cursor 安装教程》、《Cursor Agent 模式怎么用》、《用 AI 写单元测试》。

常见问题

Q：完全不懂代码能做出来吗？

做原型和简单工具可以，官方的入门示例都是面向零基础的。但 Cursor 官方的提醒值得记住：不理解的软件不要直接放到生产环境。

Q：生成的代码归谁？

Lovable 官方快速上手页的说法是「背后的代码是你的」。具体的使用条款、导出方式以各平台条款为准。

Q：为什么第一版要强调「不要登录和数据库」？

因为它们是最容易出错、也最容易出安全问题的部分。先把界面和核心交互跑通，再一步一步加。

Q：提示词怎么写得更准？

写清对象、内容、限制，一次一件事。通用写法见本站《提示词怎么写》，也可以到提示词库里找编程类的模板。

参考资料

• What is vibe coding?（Cursor 官方帮助中心）：https://cursor.com/help/ai-features/vibe-coding
• Quick start（Lovable 官方）：https://docs.lovable.dev/introduction/getting-started
• Security best practices for Lovable apps（Lovable 官方）：https://docs.lovable.dev/tips-tricks/security-best-practices
• Bolt QuickStart guide（Bolt 官方）：https://support.bolt.new/get-started/quickstart