fix
This commit is contained in:
sanbuphy
@@ -11,13 +11,13 @@
|
||||
* **平台对比：** 从初学者视角出发，对 7 个不同 AI Agent 平台的优劣势进行评测与对比。
|
||||
* **UI / UX 工具：** 学会如何将 Figma、Mastergo 等 UI/UX 工具融入到整体工作流中。
|
||||
|
||||
1. # 引言
|
||||
# 1. 引言
|
||||
|
||||
在此前的课程中，我们一直使用 z.ai 的全栈开发模型来完成编程任务。
|
||||
|
||||
不过，我们是否想过：它的核心其实是 “AI Agent”（与普通聊天式 AI 不同，而且要智能得多）？这是因为它不只是和你对话，而是能够进行思考（当你给它任务时，它会先制定计划），还能主动采取行动（比如调用网页搜索、执行电脑命令、打开网页等工具）。我们稍后会详细介绍。
|
||||
|
||||
1. ## 什么是 Vibe Coding？
|
||||
## 1. 什么是 Vibe Coding？
|
||||
|
||||
Vibe Coding 是一种利用 AI 加速应用开发流程的新型软件开发方式。它并不是传统编程的替代品，而是一种更加“对话式”的编程模式。这个概念由 AI 研究者 Andrej Karpathy 提出：在这种工作流下，开发者不再逐行手写代码，而是主要通过引导 AI Agent 来生成、优化和调试应用。
|
||||
|
||||
@@ -40,7 +40,7 @@ Vibe Coding 的核心思想，是从 **“以代码为中心（code-first）”*
|
||||
|
||||
---
|
||||
|
||||
2. ## 什么是 AI Agent？
|
||||
## 2. 什么是 AI Agent？
|
||||
|
||||
### 什么是 AI Agent？
|
||||
|
||||
@@ -61,7 +61,7 @@ AI Agent 是一种软件系统，它能够感知环境、做出决策，并自
|
||||
|
||||
---
|
||||
|
||||
2. # 关于提示词编写
|
||||
# 2. 关于提示词编写
|
||||
3. **提示词一次写完好，还是拆成多步更好？**
|
||||
|
||||
很多人会忍不住想直接在一个提示词里，把“做一个完整的全栈应用”一次性说清楚。事实上，当前工具已经足够强大，确实有机会一次性给出一个看上去还不错的结果。但从整体体验和成功率来看，把工作拆成小步骤、按阶段迭代，效果往往会更好，也更不容易陷入“改不动”的死胡同。
|
||||
@@ -80,8 +80,8 @@ AI Agent 是一种软件系统，它能够感知环境、做出决策，并自
|
||||
|
||||
---
|
||||
|
||||
3. # 工具总览（Vibe Coding / UIUX 工具）
|
||||
4. ### AI Agent 平台
|
||||
# 3. 工具总览（Vibe Coding / UIUX 工具）
|
||||
### 4. AI Agent 平台
|
||||
|
||||
| **Name** | **Platform** |
|
||||
| --------------------------------------------- | ------------------ |
|
||||
@@ -92,7 +92,7 @@ AI Agent 是一种软件系统，它能够感知环境、做出决策，并自
|
||||
| **[Minimax](https://agent.minimaxi.com/)** | Web-based |
|
||||
| **[Trae](https://www.trae.ai/)** | PC |
|
||||
| **[V0](https://v0.app/)** | Web-based |
|
||||
5. ### AI UIUX 平台
|
||||
### 5. AI UIUX 平台
|
||||
|
||||
| **Name** | **Platform** |
|
||||
| ---------------------------------------- | -------------------- |
|
||||
@@ -101,7 +101,7 @@ AI Agent 是一种软件系统，它能够感知环境、做出决策，并自
|
||||
|
||||
---
|
||||
|
||||
4. # 实战教程（Vibe Coding + UI 结合）
|
||||
# 4. 实战教程（Vibe Coding + UI 结合）
|
||||
5. 在你准备进行 Vibe Coding 的平台聊天窗口中，输入你想要的程序描述。
|
||||
示例：
|
||||
|
||||
@@ -165,11 +165,11 @@ AI Agent 是一种软件系统，它能够感知环境、做出决策，并自
|
||||
|
||||
---
|
||||
|
||||
5. # AI Agent 平台对比（如何为简单项目选最佳组合）
|
||||
# 5. AI Agent 平台对比（如何为简单项目选最佳组合）
|
||||
|
||||
不同的 Vibe Coding 平台各有特色和工作流。我们使用同一套“带 DeepSeek API 的贪吃蛇游戏”需求，在多个平台上进行实测，从初学者的角度评估它们的优劣。以下是总结。
|
||||
|
||||
1. ## 对比标准
|
||||
## 1. 对比标准
|
||||
2. **目标（Goal）**
|
||||
构建一个接入 DeepSeek API 的贪吃蛇（Snake）网页应用。
|
||||
3. **游戏细节（Game Details）**
|
||||
@@ -190,8 +190,8 @@ AI Agent 是一种软件系统，它能够感知环境、做出决策，并自
|
||||
1. 用户可以选择要用哪些词来生成诗歌。
|
||||
2. 用户体验友好（例如侧边栏清晰展示单词列表、诗歌展示区布局合理）。
|
||||
3. 为初学者在代码中加入注释，解释关键逻辑。
|
||||
6. ## 编码输出对比
|
||||
7. ### Lovable（Web-based）
|
||||
## 6. 编码输出对比
|
||||
### 7. Lovable（Web-based）
|
||||
|
||||
* **平台类型：** Web 端
|
||||
* **主要特性与工作流：** Lovable 在集成与协作方面做得很好，它自动完成诸如连接 Supabase 数据库等初始化工作，使项目搭建过程非常顺畅。你只需描述项目需求，Agent 就会帮你把各类服务串联起来，构建好基本结构。
|
||||
@@ -205,7 +205,7 @@ AI Agent 是一种软件系统，它能够感知环境、做出决策，并自
|
||||
* **价格：** 相对偏贵，但如果你有学校邮箱，可以通过学生验证以半价使用。
|
||||
|
||||
|
||||
2. ### Cursor（IDE）
|
||||
### 2. Cursor（IDE）
|
||||
|
||||
* **平台类型：** 桌面应用（PC）
|
||||
* **主要特性与工作流：** Cursor 是一款集成了 AI 能力的专有 IDE，支持 Windows、macOS 和 Linux。它把代码生成、智能重写、代码库查询等功能直接嵌入在开发环境中。与 Web 工具相比，它更接近传统本地开发体验。由于是本地环境，不同电脑的配置各异，偶尔会遇到环境相关问题。好处是项目就在本机，无需再额外下载或配置运行环境，Cursor 会帮你处理很多繁琐步骤。
|
||||
@@ -219,7 +219,7 @@ AI Agent 是一种软件系统，它能够感知环境、做出决策，并自
|
||||
* **价格：**
|
||||
|
||||
|
||||
3. ### Z.ai（Web-based）
|
||||
### 3. Z.ai（Web-based）
|
||||
|
||||
* **平台类型：** Web 端
|
||||
* **主要特性与工作流：** Z.ai 的使用方式比较直接，但一个明显的挑战在于：你需要 **手动复制粘贴生成的代码**。平台本身缺少实时预览窗口，因此很难第一时间看到代码运行效果。
|
||||
@@ -233,7 +233,7 @@ AI Agent 是一种软件系统，它能够感知环境、做出决策，并自
|
||||
* **价格：**
|
||||
|
||||
|
||||
4. ### Replit（Web-based）
|
||||
### 4. Replit（Web-based）
|
||||
|
||||
* **平台类型：** Web 端
|
||||
* **主要特性与工作流：** Replit 是一体化的在线开发与部署环境，浏览器里就可以写代码、运行程序、生成线上访问地址。开始编码前，它会给出清晰的行动计划；同时还提供可视化编辑器，你可以在预览窗口里直接改 UI，源码会自动同步更新。这样可以让你随时校验 AI 的输出是否符合预期，大幅减少来回修改的次数。
|
||||
@@ -249,7 +249,7 @@ AI Agent 是一种软件系统，它能够感知环境、做出决策，并自
|
||||
* **价格：**
|
||||
|
||||
|
||||
5. ### Minimax（Web-based）
|
||||
### 5. Minimax（Web-based）
|
||||
|
||||
* **平台类型：** Web 端
|
||||
* **主要特性与工作流：** Minimax 在执行任务时通常比较耗时。其流程往往包括：AI 自动发现并修复错误，因此整个过程可能较慢、甚至略显折腾。以本项目为例，Agent 一般会先生成一个详细计划，然后一步步搭建后端、数据库和前端逻辑。
|
||||
@@ -265,7 +265,7 @@ AI Agent 是一种软件系统，它能够感知环境、做出决策，并自
|
||||
* **价格：** 免费版在复杂项目中很可能无法顺利从头跑到尾，因此更推荐付费升级，以确保项目可以完整构建。
|
||||
|
||||
|
||||
6. ### Trae（IDE）
|
||||
### 6. Trae（IDE）
|
||||
|
||||
* **平台类型：** 桌面应用（PC）
|
||||
* **主要特性与工作流：** 作为桌面应用，Trae 相比 Web 工具在性能和响应速度上通常更有优势。但它需要下载安装，对一些用户来说入门门槛稍高。同样地，由于是本地环境，不同电脑配置和依赖环境的差异，会带来一定的不确定性。优势在于，Trae 会帮助你在本地完成项目创建与运行配置，你可以直接在本机开发与调试。
|
||||
@@ -279,7 +279,7 @@ AI Agent 是一种软件系统，它能够感知环境、做出决策，并自
|
||||
* **价格：** 价格相对亲民，即便是免费版本，也足以完成质量不错的小项目。
|
||||
|
||||
|
||||
7. ### V0（Web-based）
|
||||
### 7. V0（Web-based）
|
||||
|
||||
* **平台类型：** Web 端
|
||||
* **主要特性与工作流：** V0 是一个专注于生成 React UI 组件的工具，由 Vercel 提供。它在生成高质量、可用于生产环境的界面方面表现出色。但在实际使用中，会遇到诸如“难以找到代码视图”、“没有清晰说明 API Key 应该配置在何处”等问题。
|
||||
@@ -293,7 +293,7 @@ AI Agent 是一种软件系统，它能够感知环境、做出决策，并自
|
||||
* **价格：** 免费用户大约可以构建 4–5 个简单项目。
|
||||
|
||||
|
||||
3. ## 平台总结对比
|
||||
## 3. 平台总结对比
|
||||
|
||||
| `` | **Review** | **Platform** | **Notes** |
|
||||
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
|
||||
Reference in New Issue
Block a user