Vibe Coding实战：用3款免费AI工具零代码搭建全栈网站

AI编程的平民化时代：什么是Vibe Coding

Vibe Coding（氛围编程）正在成为2025年最火的AI编程趋势——你不需要写一行代码，只需用自然语言描述你想要什么，AI就能帮你完成从设计到开发的全部工作。

这一概念由前特斯拉AI总监、OpenAI联合创始人Andrej Karpathy在2025年2月首次提出。他描述了一种全新的编程方式：开发者完全沉浸在"氛围"中，拥抱指数级增长的代码量，几乎忘记代码的存在，只通过自然语言与AI对话来完成开发。这一概念迅速引爆技术社区，因为它代表了软件开发范式的根本性转变——从"编写代码"到"描述意图"。

本文通过一个完整的实战案例，展示如何利用三款免费AI工具，从零搭建一个类似"豆瓣读书"的全栈网站。整个过程覆盖UI设计、前端开发、后端服务三个环节，全程不手写一行代码。

工具选型：三款免费AI开发工具对比

这次Vibe Coding实战选用的三款工具各司其职：

工具	职责	成本
Google Stitch	UI设计稿生成	免费
Google IDX（AST Studio）	前端页面开发	免费
OpenAI Codex	后端代码开发	有免费额度

三款工具分别来自Google和OpenAI，目前均提供免费使用或充足的免费额度。对于简单的网站项目，整套流程的花费几乎为零。如果你想进一步压缩成本，也可以用 Bolt Code 搭配 DeepSeek API 来替代 Codex，同样非常便宜。

值得注意的是，这三款工具的分工恰好对应了传统软件开发中的三个核心角色：UI设计师、前端工程师和后端工程师。Vibe Coding的本质，就是用AI Agent替代了这三个角色的执行层工作，而人类只需要扮演产品经理的角色——定义需求、审核方案、验收结果。

第一步：用Google Stitch生成UI设计稿

明确页面需求

我们的目标是搭建一个类似豆瓣读书的网站，需要包含以下五个核心页面：

1. 图书首页：展示热门图书及图书标签
2. 图书详情页：展示图书评分及书评列表
3. 书评页面：用户撰写和查看书评
4. 个人中心页面：展示最近阅读的书籍
5. 注册登录页面

Google Stitch操作流程

打开 stitch.withgoogle.com，Google Stitch 支持移动端APP和Web网站两种设计模式，底层由 Gemini 模型驱动。

Gemini是Google DeepMind推出的多模态大语言模型，具备同时理解文本、图像、代码等多种信息形态的能力。在UI设计场景中，Gemini的多模态能力尤为关键——它能"看懂"一张网页截图的布局结构、配色方案、组件层级关系，然后基于自然语言指令重新生成符合要求的设计方案。这种图像理解与代码生成的组合能力，是传统设计工具（如Figma、Sketch）所不具备的。

这里我们使用 Redesign 功能——它能基于现有网站的截图，用 Gemini Pro 重新设计界面。具体操作步骤：

1. 选择 Redesign 模式
2. 贴上豆瓣读书的页面截图作为参考
3. 在提示词中说明：页面风格类似豆瓣但更轻松简洁，需要包含上述五个页面

经过一段时间的生成，Stitch 自动产出了完整的UI设计稿，包括首页、图书详情页、标签页、书评页、个人主页和注册登录页。

生成后的设计稿支持编辑——选中某个页面后可以通过 Annotate 功能进行微调，按照自己的需求修改细节。

第二步：用Google IDX将设计稿转化为前端代码

从设计到代码的无缝衔接

设计稿完成后，Stitch 提供了直接导出到 IDX（AST Studio）的功能。点击 Export → Build with AST Studio，设计稿会自动带入开发环境。

在 IDX 中补充提示词：

根据这些设计稿生成对应的前端页面，使用 React 框架。

React是由Meta（原Facebook）开发并开源的前端JavaScript库，目前是全球使用最广泛的前端框架之一。它采用组件化开发模式和虚拟DOM机制，能够高效地构建交互式用户界面。IDX默认支持生成React项目是一个合理的选择——React生态成熟、社区资源丰富，AI模型在训练过程中接触了大量React代码，因此生成的代码质量和规范性通常较高。

IDX 随即自动生成了完整的 React 前端项目代码。从预览效果来看，页面的设计还原度和交互体验都相当不错。

导出前端代码到本地

虽然 IDX 本身也能实现后端功能，但它只支持 Node.js。如果你更熟悉其他技术栈（比如 Java Spring Boot），可以将前端代码下载到本地，再用其他工具开发后端。

下载方式很简单：点击 Code 面板右侧的 Download 按钮，即可将所有前端代码打包下载。

在本地创建项目目录结构：

reading/
├── front/    # 前端代码
└── backend/  # 后端代码（待生成）

运行 npm install 和 npm run start，前端项目在本地 3000 端口成功启动。此时前端页面使用的是内置的Mock数据（模拟数据）来驱动渲染——这是前后端分离开发中的常用策略，在后端API尚未就绪时，前端开发者会在本地创建一组模拟数据，用于驱动页面渲染和交互逻辑的开发，使前后端团队可以并行工作、互不阻塞。

第三步：用OpenAI Codex自动生成后端代码

数据库与API设计规划

后端先实现核心功能：用户登录注册、书评发布、书评点赞/点踩。图书数据继续使用前端的 Mock 数据。

首先使用 Codex 的 Plan Mode（规划模式），让AI先给出整体设计方案而不直接改动代码。Plan Mode体现了一种"先规划后执行"的AI辅助开发理念，这与软件工程中的设计先行原则高度一致。在Plan Mode下，Codex会分析现有代码库的结构、依赖关系和技术栈，然后生成一份包含数据库设计、API端点列表、目录结构等内容的设计文档，供开发者审核。只有在开发者确认方案合理后，才会进入实际的代码生成阶段。这种机制有效避免了AI"一口气写完大量代码却方向错误"的问题，大幅降低了返工成本。

提示词大意如下：

front 目录是前端仓库，需要生成对应的后端仓库。技术栈使用 Spring Boot + MyBatis。图书数据使用前端现有Mock数据，用户注册登录、书评、书评点赞功能需要后端数据存储。先帮我实现数据库设计及概要API设计。

这里选择的Spring Boot是Java生态中最主流的后端开发框架，它简化了Spring应用的配置和部署流程，开发者可以快速搭建生产级别的Web服务。MyBatis则是一款半自动化的ORM（对象关系映射）框架，它允许开发者通过XML或注解将Java对象与SQL语句进行映射，相比全自动ORM框架（如Hibernate），MyBatis在复杂查询场景下提供了更灵活的SQL控制能力。这套组合在中国开发者社区中尤其流行，是企业级Java后端开发的标准技术栈之一。

Codex 很快给出了完整的设计方案：

数据库表设计：

• users 用户表
• book_reviews 书评表
• review_votes 书评点赞表
• 以及相应的约束关系

API接口设计：

• 用户注册、登录、查询接口
• 书评的增删改查接口
• 书评点赞/点踩接口
• 统一的响应格式规范

一键生成Spring Boot后端代码

确认设计方案没有问题后，点击 Implement this plan，Codex 开始自动编写后端代码。

大约18分钟后，Codex 完成了全部后端代码的生成。由于它不知道本地数据库密码，需要手动提供数据库连接信息，之后 Codex 会自动创建数据库并启动前后端服务进行测试。

值得一提的是，Codex 不仅生成了后端代码，还自动将前端的部分页面从 Mock 数据切换到了后端接口调用——登录注册、书评详情等功能已经完成了前后端对接。这说明Codex具备理解前端数据流并进行端到端集成的能力：它分析了前端代码中Mock数据的结构和调用方式，然后在生成后端API时保持了数据格式的一致性，并同步修改了前端的数据请求逻辑，将静态的Mock数据替换为动态的HTTP API调用。

最终效果：零代码全栈网站功能验证

启动前后端服务后，逐一验证核心功能：

1. 注册功能：打开首页右上角登录入口，点击注册，成功创建新账号
2. 登录功能：使用刚注册的账号登录，正常进入系统
3. 书评功能：进入图书详情页，点击"写书评"，输入评分和内容后发布，新书评成功显示在列表中

核心功能全部跑通，一个具备完整前后端的全栈网站就这样搭建完成了——全程没有手写一行代码。

Vibe Coding的优势与局限性

这套AI零代码开发流程的优势

• 成本极低：三款工具均免费或有充足免费额度，几乎零成本就能搭建全栈网站
• 效率极高：从UI设计到前后端上线，核心工作量集中在写提示词和验证结果上
• 门槛极低：不需要掌握任何编程语言，只需要清楚地描述需求即可

当前阶段的局限

• AI生成的代码质量需要人工审查，尤其是安全性和性能方面。例如，AI可能不会自动实现SQL注入防护、密码加盐哈希、CSRF防护等安全最佳实践，也可能在数据库查询中遗漏索引优化，导致数据量增长后出现性能瓶颈
• 复杂的业务逻辑仍然需要人工介入调整。当涉及到分布式事务、高并发处理、复杂的权限体系等企业级需求时，纯自然语言描述往往难以精确传达所有边界条件和异常处理逻辑
• 工具之间的衔接虽然流畅，但提示词的质量直接决定了最终输出质量。这意味着"提示词工程"（Prompt Engineering）正在成为Vibe Coding时代的核心技能——如何精确、完整、有结构地描述需求，本身就是一门需要学习的技艺

Vibe Coding 并不是要取代专业开发者，而是让更多人能够快速验证想法、搭建原型。MVP（Minimum Viable Product，最小可行产品）是精益创业方法论中的核心概念，其思想是用最小的开发成本构建一个具备核心功能的产品原型，快速投放市场获取用户反馈，再根据反馈迭代优化。传统的MVP开发通常需要数周到数月时间和数万元的开发成本，而Vibe Coding将这一过程压缩到了数小时和近乎零成本。对于个人项目、MVP验证、内部工具开发等场景，这套低成本的AI编程流程已经展现出了巨大的实用价值。

核心要点

• 使用Google Stitch（免费）进行UI设计、IDX（免费）开发前端、Codex（免费额度）开发后端，实现近乎零成本的全栈网站搭建
• 整个开发流程不手写一行代码，全程通过自然语言提示词驱动AI完成设计和编码工作
• Codex的Plan Mode可以先生成数据库和API设计方案供审核，确认后再一键生成完整后端代码
• 工具链之间实现了无缝衔接：Stitch设计稿可直接导出到IDX生成React前端代码
• 最终成功实现了用户注册登录、书评发布、点赞等核心功能的前后端完整对接