Vibe Coding：从一个想法开始用 AI 创建应用的完整指南

什么是 Vibe Coding？

**Vibe Coding（氛围编程）**是一种全新的软件创建方式，它将自然语言作为主要的开发界面。

你不再从代码开始，而是从一个想法开始。

你只需描述想构建什么、应用应该如何运行，AI 就会生成应用。随后，你可以亲自测试、提供新的反馈，并通过对话不断修改它。 例如，你可以从一个非常简单的要求开始：

“创建一个瑜伽中心预约平台，包含日历、客户账户和管理后台。”

接下来，像 Coderblock 这样的 AI app builder 就能把这个想法转化为完整的 Web 应用，生成所需的界面、逻辑、数据库和功能。 重点并不只是更快地生成代码。 Vibe Coding 改变了你参与开发过程的方式：你不再需要向机器说明每个细节应该如何实现，而是描述你想实现什么，并让 AI 承担大部分技术工作。

不过，这并不意味着可以“随意”创建软件。良好的 Vibe Coding 流程由需求、测试、反馈和迭代组成。人负责持续定义产品并验证结果，AI 则负责具体实现。

Vibe Coding 如何工作？

1. 描述产品

你的第一个需求应重点说明产品需要做什么，而不是应该如何编程。 例如：

“创建一个私人教练管理系统。客户需要能够查看自己的训练计划、记录训练情况并提交备注。教练需要一个展示训练进度和预约情况的仪表盘。”

这些信息已经足以确定产品的初步结构。 之后，你还可以继续补充视觉设计、用户角色、数据、集成和具体交互方式等细节。

你也可以从现成模板开始。Coderblock 为电商、预约平台、仪表盘、健康应用和游戏等应用提供了多种产品模板，同时也提供身份验证、支付、购物车、聊天和管理面板等功能模板。

模板并不是最终产品，而是一个可以通过对话继续修改的起点。

2. AI 构建第一个版本

确定想法后，AI 智能体会将你的要求转化为应用。 这个过程可以同时涉及多个层面：

• 前端界面和组件；
• 应用逻辑；
• 数据库结构；
• 身份验证；
• 权限控制；
• 第三方集成；
• 发布应用所需的配置。

在 Coderblock 中，标准 Web 应用的前端使用 React、Vite、TypeScript 和 Tailwind CSS，后端则使用一个独立的 Supabase 项目，其中包含 Postgres、Auth、Storage、Row Level Security，以及可按需使用的 Deno Edge Functions。

生成结果会以实时预览的形式发布到 <app>.coderblock.dev 地址，让你能够立即查看 AI 构建的内容。

3. 测试、观察并修改

第一个版本不需要做到完美。 事实上，Vibe Coding 的核心原则正是：构建、观察、迭代。 你可以继续对话，提出更加具体的要求：

“滚动页面时让导航栏保持固定。” “在管理后台添加一个显示所有预约的表格。” “在移动端将菜单替换为汉堡菜单。” “禁止用户查看其他客户的预约。”

每一项新要求都会推动产品进入下一轮迭代。

最基本的循环是： 提示词 → 生成 → 预览 → 反馈 → 新一轮迭代

这就是 Vibe Coding 的核心。

4. 将应用从预览环境推向生产环境

产品准备就绪后，你就可以从开发阶段进入正式发布阶段。

在 Coderblock 中，点击 Publish 即可在 <app>.coderblock.app 上创建生产版本，并自动启用 SSL。 你还可以绑定自定义域名，或者直接在平台内购买域名。

这样一来，整个流程都可以在同一个环境中完成： 想法 → 应用 → 测试 → 迭代 → 发布

Vibe Coding、No-code 与传统开发

Vibe Coding 并不只是 No-code 的新名称。 这三种方式都有相同的目标——创建软件——但使用了不同的抽象层级。

传统开发

在传统模式中，开发者需要确定架构、选择库和技术、编写代码、配置服务并直接处理错误。 这种方式能够提供最高程度的技术控制，但也要求开发者具备相应的专业技能。

No-code

使用 No-code 时，用户通过平台提供的可视化组件、配置选项和工作流构建应用。 虽然不需要编写代码，但必须学习平台的可视化系统如何运作，并在平台所提供的能力范围内完成开发。

Vibe Coding

在 Vibe Coding 中，自然语言会成为主要的交互工具。 你可以这样描述需求：

“我希望用户能够预约时间并收到确认通知。”

AI 智能体会负责将这一需求转化为具体实现。

因此，三者最根本的区别如下：

| | 传统开发 | No-code | Vibe Coding | | --- | --------------------- | ------- | ----------- | | 主要界面 | 代码 | 可视化编辑器 | 自然语言 | | 由谁负责实现 | 开发者 | 用户 | AI | | 灵活性 | 非常高 | 取决于平台 | 取决于智能体和技术栈 | | 所需技能 | 技术能力 | 平台使用经验 | 定义和验证需求的能力 | | 迭代方式 | 修改代码 | 修改配置 | 对话 + 反馈 | | 适合场景 | 复杂且高度定制的软件 | 标准工作流和产品 | 原型、MVP、产品开发和快速实验 |

没有哪一种方式在所有场景下都更好。 具体选择取决于产品类型、所需的控制程度，以及团队偏好的工作方式。

AI app builder 究竟能构建什么？

谈到 Vibe Coding 时，一个常见误区是混淆生成界面与创建应用。 生成一个视觉效果出色的仪表盘相对简单。

但要构建一个能够完成以下任务的应用：

• 注册用户；
• 保存数据；
• 管理角色和权限；
• 处理支付；
• 与外部服务通信；
• 保护敏感信息；
• 处理错误；
• 在生产环境中稳定运行；

问题就复杂得多。

因此，在评估 AI app builder 时，不要只看它生成的第一个页面。 你还需要了解这个页面背后具备哪些能力。

后端和数据库

在 Coderblock 中，每个标准 Web 应用都配有独立的 Supabase 项目，其中包含 Postgres、Auth、Storage、Row Level Security 和 Edge Functions。 因此，你可以这样描述需求：

“每位客户只能查看自己的预约。管理员必须能够查看并修改所有预约。”

AI 智能体可以将这一要求转化为数据结构和访问规则，使其符合预期的应用行为。 你还可以在 Backend 部分查看和管理数据表、用户、存储空间及函数。

身份验证和角色

身份验证并不只是创建一个登录页面。 真实应用还需要管理身份、会话、受保护的路由和访问权限。 在 Coderblock 中，你可以提出以下要求：

“添加注册、登录功能，并为每位客户创建个人中心。”

AI 智能体会配置 Supabase Auth、所需页面、会话管理和 Row Level Security 策略。 平台还提供用于用户资料和角色管理的基础结构。

其目标是让用户只需描述期望的行为，而不必手动实现每一个身份验证机制。

---

支付功能怎么办？

支付是另一个能够清楚体现原型与真实应用差异的例子。 创建一个按钮：

每月 9.99 欧元，立即订阅

并不代表应用已经拥有可用的支付系统。 这个按钮背后还需要支付服务商、产品和价格、结账流程、安全凭证以及支付事件处理机制。

使用 Coderblock，你可以直接描述所需功能：

“允许客户每月支付 9.99 欧元。”

AI 智能体可以配置 Stripe 集成、创建产品和价格，并设置结账流程。

平台还提供 BYOK（Bring Your Own Key，自带密钥）模式，允许你连接现有的 Stripe 账户。系统会通过安全字段获取凭证，并将其保存在服务器端，而不会把凭证写入前端代码或对话中。

无论采用哪种方式，都可以先使用测试模式，确认无误后再切换到生产环境。

---

如何为 Vibe Coding 编写更好的提示词

不存在一个能够保证首次生成完美应用的“万能提示词”。 使用 AI app builder 的最佳方式，是逐步提供更多背景、目标和限制条件。

描述最终结果

不要只说：

“创建一个仪表盘。”

可以改为：

“为管理员创建一个仪表盘，显示预约、用户和月度收入。管理员需要能够按日期和状态筛选预约。”

第二种描述明确给出了可以验证的行为。

明确应用的使用者

说明不同用户角色以及每个角色能够执行的操作。 例如：

“客户可以创建和取消自己的预约。管理员可以查看并修改所有预约。”

这有助于 AI 正确设计权限和界面。

分阶段推进

没有必要总是在一个提示词中提出所有需求。 复杂应用可以分阶段构建：

1. 初始结构；
2. 数据库；
3. 身份验证；
4. 核心功能；
5. 支付；
6. 管理后台；
7. 界面优化。

每完成一个阶段，都要测试生成结果。 这样更容易判断哪些功能正常，以及哪些地方需要调整。

同时描述错误情况

不要只说明一切正常时应该发生什么。 还要说明出现以下情况时应用应如何处理：

• 支付失败；
• 资源不可用；
• 用户没有权限；
• 字段为空；
• 外部服务请求失败。

真实应用也必须妥善处理这些场景。

切勿在提示词中输入密钥

不要直接在对话或前端代码中输入 API key、密码或支付凭证。 应使用安全的环境变量和 secret 管理系统。 在 Coderblock 中，集成所需的凭证会通过专用的安全请求获取，并保存在服务器端。

---

Vibe Coding 仍然需要专业技能吗？

需要，但它改变了所需技能的类型。 你不一定要了解 React、SQL、API 或服务器配置，也能开始使用 Vibe Coding 构建应用。 但你需要清楚：

• 你想解决什么问题；
• 谁会使用这个产品；
• 哪些功能是真正必要的；
• 哪些数据需要保存；
• 哪些用户可以访问哪些内容；
• 如何验证生成结果是否正确。

换句话说，AI 可以减少实现产品所需的技术知识，但无法取代你对正在构建的产品本身的理解。 项目越复杂，评估 AI 生成结果的能力就越重要。

---

从最初的想法到可运行的应用

Vibe Coding 的价值并不在于通过一个提示词生成代码。 真正的价值是加快整个开发周期：

1. 想法 描述你想构建什么。 2. 生成 AI 创建应用的第一个版本。 3. 预览 实时测试产品。 4. 迭代 描述需要修改的内容。 5. 验证 检查功能、数据、安全性和应用行为。 6. 发布 准备就绪后将应用上线。

这种方式让你的关注点从**“我该如何编写这个功能？”转向“这个功能应该实现什么？”**。 这才是 Vibe Coding 真正的价值所在。

这并不意味着 AI 会完全取代软件开发，而是意味着自然语言可以成为与软件交互的一个新层级，让人们能够以更低的技术门槛，将想法转化为可运行的应用。 在 Coderblock 这样的 AI app builder 中，这一流程可以从最初的想法一直延伸到数据库、身份验证、第三方集成和应用发布。