附录示例 1：7 款主流 Vibe Coding 在线平台实测对比
本章导读
面对琳琅满目的 AI 编程工具，哪一款才最适合你？本章通过一个统一的实战任务——开发“贪吃蛇 + AI 写诗”游戏，对 Lovable、Replit、Z.ai 等 7 款主流 Web Vibe Coding 平台进行了深度横向评测。我们将从新手友好度、代码可控性、部署便捷性等多维度对比，助你快速选出最强开发辅助工具。
1. 用 Vibe Coding 搭建贪吃蛇游戏：完整实战教程
本文介绍了一种新兴的软件开发实践——“Vibe Coding（氛围式编码）”，它利用人工智能来加速应用构建过程。
接下来我们将依次介绍 Vibe Coding 的核心概念、解释什么是 AI Agent，并给出实用的提示词编写方法。最后，会通过从零开始构建“贪吃蛇（Snake）”游戏的完整实战，并对多个主流 Vibe Coding 平台进行详细对比评测，帮助你选择最适合自己的工具组合。
你将学到：
- 什么是 Vibe Coding： 了解它的定义、工作流和关键优势。
- AI Agent 的角色： 理解 AI Agent 的工作方式，以及它与传统程序的差异。
- 如何写好提示词： 掌握清晰、具体的提示词写法，以获得更好的结果。
- Vibe Coding 工具： 认识一批主流的 AI 编程与设计平台。
- 平台对比： 从初学者视角出发，对 7 个不同 AI Agent 平台的优劣势进行评测与对比。
- UI / UX 工具： 学会如何将 Figma、Mastergo 等 UI/UX 工具融入到整体工作流中。
1. 引言
在此前的课程中，我们一直使用 z.ai 的全栈开发模型来完成编程任务。
不过，我们是否想过：它的核心其实是 “AI Agent”（与普通聊天式 AI 不同，而且要智能得多）？这是因为它不只是和你对话，而是能够进行思考（当你给它任务时，它会先制定计划），还能主动采取行动（比如调用网页搜索、执行电脑命令、打开网页等工具）。我们稍后会详细介绍。
1. 什么是 Vibe Coding？
Vibe Coding 是一种利用 AI 加速应用开发流程的新型软件开发方式。它并不是传统编程的替代品，而是一种更加“对话式”的编程模式。这个概念由 AI 研究者 Andrej Karpathy 提出：在这种工作流下，开发者不再逐行手写代码，而是主要通过引导 AI Agent 来生成、优化和调试应用。
Vibe Coding 的核心思想，是从 “以代码为中心（code-first）” 转变为 “以意图为中心（intent-first）”。你不再需要从第一行代码开始构思，而是用自然语言描述你想要的结果。
典型的 Vibe Coding 工作流程是一个不断迭代的循环：
- 描述目标： 先用一句话或一段话描述你想要实现的功能，例如：“做一个带有 Python 后端、可以生成诗歌的简单贪吃蛇游戏。”
- AI 生成代码： AI Agent 解析你的需求，生成初版代码，包括基本结构、前端页面和后端逻辑。
- 运行并观察： 运行生成的代码，检查其是否按预期工作，同时发现 bug 或不足之处。
- 反馈并迭代： 如果有错误或效果不理想，就在对话中继续下指令，例如：“蛇移动太慢了，把速度调快些”，或者“现在
.env文件里的 API Key 没被正确读取，请修复后端代码。” - 重复上述步骤： 不断在“描述 → 生成 → 运行 → 反馈”的循环中迭代，直到应用达到满意的状态。
Vibe Coding 的主要优势：
- 降低门槛： 让缺乏编程经验的设计师、创业者、学生等，也可以通过自然语言参与应用开发。
- 快速原型： 从想法到最小可行产品（MVP）的时间大幅缩短。
- 提高效率： 自动处理大量重复、机械的编码工作（如模板代码），让开发者可以把精力放在架构设计和问题抽象上。
- 利于试验： 鼓励先快速产出，再不断完善的方式，更便于尝试新点子和新功能。
2. 什么是 Vibe Coding 在线平台（Web-based）？
在本次实测中，你会发现我们评测的工具被分为了两类：Web-based（在线平台） 和 IDE（本地开发环境）。
虽然它们的核心都是用 AI 帮你写代码，但在使用体验和适用场景上有着巨大的区别：
Vibe Coding 在线平台 (Web-based)
代表工具： Lovable, Replit, Z.ai, v0
这就像是“拎包入住”的酒店式公寓。
- 无需环境配置： 你不需要关心什么是 Python 环境、Node.js 版本，也不用管依赖安装。打开浏览器，输入网址，直接就能开始写代码。
- 一键预览与部署： 代码生成后，平台通常会自动在右侧窗口展示运行效果。做好了，点一个按钮就能生成一个链接分享给朋友。
- 适合场景：
- 快速验证想法（MVP）： 脑子里有个点子，想花半小时看看能不能做出来。
- 新手入门： 完全不想被复杂的环境报错劝退，只想体验 AI 编程的乐趣。
- 轻量级应用： 做个简单的工具网页、小游戏或者个人展示页。
AI IDE (本地开发环境)
代表工具： Cursor, Trae, VS Code + AI 插件
这就像是“精装修”的自有住房。
- 强大的本地能力： 它运行在你的电脑上，可以直接访问你所有的本地文件，利用你电脑的算力。
- 无缝对接专业工作流： 适合大型项目，可以自由安装各种插件，连接本地数据库，进行复杂的调试。
- 适合场景：
- 专业项目开发： 需要长期维护、结构复杂的商业项目。
- 深度定制： 需要对代码细节有极致掌控，或者需要与现有的本地工作流（如 Git、Docker）深度结合。
- 数据隐私： 代码完全在本地，更符合某些企业的安全规范。
总结来说： 如果你是刚开始接触 AI 编程，或者只想快速做一个小东西玩玩，在线平台是绝佳的起点。如果你是专业开发者，或者项目越来越复杂，本地 IDE 则会提供更高的上限。
3. 什么是 AI Agent？
什么是 AI Agent？
AI Agent 是一种软件系统，它能够感知环境、做出决策，并自主采取行动来实现特定目标。与遵循固定指令、流程单一的传统软件相比，AI Agent 更加灵活和自适应。
下面是一些将 AI Agent 与传统程序区分开的关键特征：
- 自主性（Autonomy）： AI Agent 具有较高的独立性。传统程序通常需要人一步一步触发，而 Agent 可以根据目标自主决定下一步要做什么。
- 感知与记忆（Perception & Memory）： Agent 会从环境中收集数据（例如 API 响应、传感器数据、用户输入等），并通过“记忆”保留上下文，从而在后续行动中复用经验、持续改进效果。
- 理性与目标导向（Rationality & Goal-Orientation）： Agent 会围绕给定的目标进行分析与规划，选择最合适的行动序列来追求更高的“绩效指标”。
- 工具使用（Tool Use）： 现代 AI Agent 的一大特征，是可以调用外部工具，不再局限于“生成文字”。例如，它可以浏览网页、运行代码、查询数据库、发送邮件等，是一个会“调度工具”的大脑。
可以这样类比理解：
- 一个 传统程序 像是计算器。你给它输入数字和运算符，它只在你按下按钮时执行计算。
- 一个 AI 助手 像是人类助理。你让它“帮我找附近的餐馆”，它会给你搜索结果并列出选项，但最后还是由你做决策。
- 一个 AI Agent 则更像是一支自动化研究团队。你只需要给出高层目标（比如“帮我规划一次日本旅行”），它就会分解任务、上网查资料、预定机票酒店（通过 API）、整理日程，最终把结果交付给你，全程几乎不需要你干预细节。
2. 关于提示词编写
1. 提示词一次写完好，还是拆成多步更好？
很多人会忍不住想直接在一个提示词里，把“做一个完整的全栈应用”一次性说清楚。事实上，当前工具已经足够强大，确实有机会一次性给出一个看上去还不错的结果。但从整体体验和成功率来看，把工作拆成小步骤、按阶段迭代，效果往往会更好，也更不容易陷入“改不动”的死胡同。
小提示： 与其期望“一次到位”，不如把大目标拆成一条条可执行的小待办（To-do）。
例如，不要直接说 “build me a Snake game”，而是拆成：
“1. 先做一个贪吃蛇游戏的前端”，
“2. 再实现一个记录分数的后端”，
“3. 最后把前后端连起来”。
这样能让 AI 更准确地理解你的需求并给出更可靠的输出。
2. 越清晰，越好
- 在 Vibe Coding 中，你写的提示词和你写的代码一样重要。提示越清晰、越具体，结果就越接近你心中所想。
- 一开始就把目标与约束条件说清楚，可以减少后续反复修改的次数，这不仅省时间，也能节省使用额度和成本。
3. 工具总览（Vibe Coding / UIUX 工具）
1. AI Agent 平台
| Name | Platform |
|---|---|
| Lovable | Web-based |
| Cursor | PC |
| Z.ai | Web-based |
| Replit | Web-based |
| Minimax | Web-based |
| Trae | PC |
| V0 | Web-based |
2. AI UIUX 平台
| Name | Platform |
|---|---|
| Mastergo | Web-based |
| FIgma | Web-based, PC Plugin |
4. 实战教程（Vibe Coding + UI 结合）
在你准备进行 Vibe Coding 的平台聊天窗口中，输入你想要的程序描述。 示例：
请构建一个带前端和后端的简单贪吃蛇（Snake）网页应用。
- 前端
- 页面 1：游戏页面
- 使用键盘控制蛇的移动。
- 蛇吃掉的不是食物，而是英文单词。
- 页面侧边栏展示已收集单词及其数量。
- 游戏结束后，已收集的单词仍然保留，并在新一局中延续。
- 页面 2：写诗页面（Make Poem）
- 展示与游戏页面相同的单词列表（数据一致）。
- 提供一个按钮，将当前收集的单词发送给后端生成一首诗。
- 生成诗歌后，将被使用到的单词从列表中移除或递减计数。
- 添加简单的导航，在 Game 和 Make Poem 两个页面之间切换。
- 确保收集到的单词在两个页面中都能看到。
- 后端
- 提供一个后端接口，接收收集到的单词并返回一首诗。
- 使用 DeepSeek API 生成诗歌。
- 将 API Key 存放在
.env文件中，并在.gitignore中忽略该文件。
输入你的 DeepSeek API Key。（可以在 https://platform.deepseek.com/ 获取）
- LLM 的 API Key 用于在你自己的项目中调用大模型。由于这是敏感信息，不能公开，因此需要单独写在配置文件里。 为什么要用
.env文件，并且不要把它上传到 GitHub？
.env文件专门用来存放 密钥或密码（例如 DeepSeek API Key）。- 如果这个文件被上传到 GitHub，全世界的人都能看到你的密钥并盗用它。
- 为了安全起见，我们需要在
.gitignore文件中声明忽略.env，让 Git 不跟踪它。 - 这样一来，你的项目仍然可以在本机正常使用这些密钥，但不会在仓库中泄露。
- LLM 的 API Key 用于在你自己的项目中调用大模型。由于这是敏感信息，不能公开，因此需要单独写在配置文件里。 为什么要用
查看生成结果后，如果发现错误或有需要修改的地方，可以直接在聊天窗口中输入你的修改请求。
如果你对页面设计不满意，也可以选择在 Figma 或 Mastergo 中重新设计界面，再把设计思路反馈给 Agent。
- 示例
请设计一个名为 Word-Snake 的 双页面 Web 应用。
- Game 页面：
- 蛇通过键盘控制移动。
- 蛇吃掉的是英文单词，而不是普通食物。
- 右侧面板展示已收集单词及数量。
- 游戏结束后，单词库存不会清空，在新一轮中继续使用。
- Make Poem 页面：
- 展示同一份共享单词库存。
- 用户选择部分单词并点击 Generate Poem 按钮。
- 将这些单词发送给后端，由 DeepSeek API 生成一首诗。
- 生成诗歌后，从库存中删除或减少被使用的单词。
- 导航： 通过简单的 Tab 或顶部菜单在两个页面之间切换。
- 共享状态： 确保收集到的单词在两个页面始终保持同步可见。
- 效果示例
5. AI Agent 平台对比（如何为简单项目选最佳组合）
不同的 Vibe Coding 平台各有特色和工作流。我们使用同一套“带 DeepSeek API 的贪吃蛇游戏”需求，在多个平台上进行实测，从初学者的角度评估它们的优劣。以下是总结。
1. 对比标准
目标（Goal） 构建一个接入 DeepSeek API 的贪吃蛇（Snake）网页应用。
游戏细节（Game Details）
- 游戏通过 DeepSeek LLM API 生成诗歌。
- 蛇吃掉的是英文单词，收集到的单词会在游戏结束后保留，并在新一局中继续使用。相同单词可以被多次收集，并分别计数。
- 当生成一首诗后，被使用到的单词会从库存中移除。
必备功能（Must-Haves）
- 一个可运行的前端页面，包含贪吃蛇游戏（键盘控制、Canvas 渲染）。
- 单词收集机制（单词出现在棋盘上，蛇吃掉单词后，侧栏列表更新）。
- 在多轮游戏之间保持单词库存的持久化。
- 使用 DeepSeek API 的后端（如果没有 API Key，可以先返回模拟诗歌）。
- “生成诗歌”按钮：点击后调用后端，显示诗歌，并根据使用情况更新单词库存。
- 对 API Key 的
.env支持，以及通过.gitignore避免密钥泄漏。
加分项（Nice-to-Haves）
- 用户可以选择要用哪些词来生成诗歌。
- 用户体验友好（例如侧边栏清晰展示单词列表、诗歌展示区布局合理）。
- 为初学者在代码中加入注释，解释关键逻辑。
2. 编码输出对比
1. Lovable（Web-based）
- 平台类型： Web 端
- 主要特性与工作流： Lovable 在集成与协作方面做得很好，它自动完成诸如连接 Supabase 数据库等初始化工作，使项目搭建过程非常顺畅。你只需描述项目需求，Agent 就会帮你把各类服务串联起来，构建好基本结构。
- 适合的用户： 对于第一次尝试 Vibe Coding 的新手来说，Lovable 是非常友好的选择。它简化了多服务联动的复杂度，让你可以把注意力集中在提示词与迭代上，而不是环境配置。得益于高度自动化，你能很快得到一个可运行的原型。
- 提示词过程：
- 贪吃蛇游戏效果：
- 价格： 相对偏贵，但如果你有学校邮箱，可以通过学生验证以半价使用。
2. Cursor（IDE）
- 平台类型： 桌面应用（PC）
- 主要特性与工作流： Cursor 是一款集成了 AI 能力的专有 IDE，支持 Windows、macOS 和 Linux。它把代码生成、智能重写、代码库查询等功能直接嵌入在开发环境中。与 Web 工具相比，它更接近传统本地开发体验。由于是本地环境，不同电脑的配置各异，偶尔会遇到环境相关问题。好处是项目就在本机，无需再额外下载或配置运行环境，Cursor 会帮你处理很多繁琐步骤。
- 适合的用户： 对已有一定编程基础的用户，Cursor 是一个非常强大又熟悉的环境。但对完全零基础的新手来说，需要自己理解项目结构、依赖管理和文件组织等概念，学习曲线会更陡一些。更适合想在传统编码流程中加入 AI 助手的开发者。
- 提示词过程：
- 贪吃蛇游戏效果：
- 价格：
3. Z.ai（Web-based）
- 平台类型： Web 端
- 主要特性与工作流： Z.ai 的使用方式比较直接，但一个明显的挑战在于：你需要 手动复制粘贴生成的代码。平台本身缺少实时预览窗口，因此很难第一时间看到代码运行效果。
- 适合的用户： 这个平台要求比较“动手”的使用方式。缺少自动化意味着你必须与代码直接打交道，这对想深入理解 AI 输出内容的人来说反而是种训练。但频繁的复制粘贴会带来效率问题和出错风险。更适合想看“原生 AI 输出代码”的同学，而不是追求一键式体验的人。
- 提示词过程：
- 贪吃蛇游戏效果：
- 价格：
4. Replit（Web-based）
平台类型： Web 端
主要特性与工作流： Replit 是一体化的在线开发与部署环境，浏览器里就可以写代码、运行程序、生成线上访问地址。开始编码前，它会给出清晰的行动计划；同时还提供可视化编辑器，你可以在预览窗口里直接改 UI，源码会自动同步更新。这样可以让你随时校验 AI 的输出是否符合预期，大幅减少来回修改的次数。
适合的用户： Replit 对新手十分友好。它简化了从编码到部署的完整闭环，无需自己额外配置服务器或托管服务。协作功能也很强，适合同学之间一起做项目或请他人远程帮忙查看代码。
提示词过程： 在构建过程中，AI 并不是一开始就完全理解需求，中间经历了大约 3 轮迭代，最终输出才达到了理想效果。
贪吃蛇游戏效果：
- 价格：
5. Minimax（Web-based）
- 平台类型： Web 端
- 主要特性与工作流： Minimax 在执行任务时通常比较耗时。其流程往往包括：AI 自动发现并修复错误，因此整个过程可能较慢、甚至略显折腾。以本项目为例，Agent 一般会先生成一个详细计划，然后一步步搭建后端、数据库和前端逻辑。
- 适合的用户： 由于它会自动运行测试和修复错误，时间与 Token 消耗都比较大，但你可以清楚看到 AI 如何定位并解决问题，从学习角度看很有价值。
- 提示词过程：
- 贪吃蛇游戏效果：
- 价格： 免费版在复杂项目中很可能无法顺利从头跑到尾，因此更推荐付费升级，以确保项目可以完整构建。
6. Trae（IDE）
- 平台类型： 桌面应用（PC）
- 主要特性与工作流： 作为桌面应用，Trae 相比 Web 工具在性能和响应速度上通常更有优势。但它需要下载安装，对一些用户来说入门门槛稍高。同样地，由于是本地环境，不同电脑配置和依赖环境的差异，会带来一定的不确定性。优势在于，Trae 会帮助你在本地完成项目创建与运行配置，你可以直接在本机开发与调试。
- 适合的用户： 更适合计划长期进行 Vibe Coding 项目、并希望使用专门桌面工具的用户。对于只想“偶尔玩一下”的同学，可能不是最轻量的选择。
- 提示词过程：
- 贪吃蛇游戏效果：
- 价格： 价格相对亲民，即便是免费版本，也足以完成质量不错的小项目。
7. V0（Web-based）
平台类型： Web 端
主要特性与工作流： V0 是一个专注于生成 React UI 组件的工具，由 Vercel 提供。它在生成高质量、可用于生产环境的界面方面表现出色。但在实际使用中，会遇到诸如“难以找到代码视图”、“没有清晰说明 API Key 应该配置在何处”等问题。
适合的用户： V0 非常适合专注前端和 UI/UX 设计的学生或设计师。但它并不是完整的全栈解决方案，你仍然需要使用其他平台来实现后端逻辑与 API 集成，因此如果你的目标是“一站式搭建完整应用”，它可能不是最佳首选。
提示词过程：
贪吃蛇游戏效果：
价格： 免费用户大约可以构建 4–5 个简单项目。
3. 平台总结对比
| 平台 | Review | Platform | Notes |
|---|---|---|---|
| Lovable | 对 AI 编程新手非常友好，上手简单、体验顺滑，是理想的入门选择。 | Web-based | 自动完成 Supabase 等服务连接，减少配置成本。 |
| Cursor | 适合已有开发经验的用户，大幅提升生产力与代码质量。 | PC | 需要一定编程基础，本地环境中需自己理解项目结构和依赖。 |
| Z.ai | 更适合有编程基础、想直接研究 AI 输出代码细节的用户。 | Web-based | 无预览窗口，检查结果较麻烦；需要手动粘贴代码、创建文件夹和文件并手动运行服务。 |
| Replit | 推荐给想快速把点子变成可访问在线服务的用户。 | Web-based | 一体化在线开发与部署，支持协作并提供可视化编辑器。 |
| Minimax | 适合希望看到 AI 自动查错与修复全过程、并从中学习的人，但整体较慢且耗费 Token。 | Web-based | 整个过程较长，AI 会多次自动运行测试并修复错误。 |
| Trae | 针对有编程经验、希望使用桌面 IDE + AI Agent 组合的用户，是提升效率的有力工具。 | PC | 需本地安装与环境配置，但性能更好，适合长期进行 Vibe Coding 项目。 |
| V0 | 为想快速做出 React UI 视觉效果的非开发者进行了优化，适合前端 / 设计向的学生。 | Web-based | 专注生成 React UI，需要与其他平台配合完成后端和完整应用搭建。 |