delorex/test-repo
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
sanbuphy
2026-01-04 15:46:49 +08:00
parent 4a67933ffc
commit 2d858d79e2
3 changed files with 83 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/examples/example0/example0-1/vibe-coding-tools-snake-game-tutorial.md
+19 -19
View File
@@ -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 是一种软件系统，它能够感知环境、做出决策，并自
* **价格：** 相对偏贵，但如果你有学校邮箱，可以通过学生验证以半价使用。
![](images/image6.png)
2. ### Cursor（IDE）
### 2. Cursor（IDE）
* **平台类型：** 桌面应用（PC）
* **主要特性与工作流：** Cursor 是一款集成了 AI 能力的专有 IDE，支持 Windows、macOS 和 Linux。它把代码生成、智能重写、代码库查询等功能直接嵌入在开发环境中。与 Web 工具相比，它更接近传统本地开发体验。由于是本地环境，不同电脑的配置各异，偶尔会遇到环境相关问题。好处是项目就在本机，无需再额外下载或配置运行环境，Cursor 会帮你处理很多繁琐步骤。
@@ -219,7 +219,7 @@ AI Agent 是一种软件系统，它能够感知环境、做出决策，并自
* **价格：**
![](images/image10.png)
3. ### Z.ai（Web-based）
### 3. Z.ai（Web-based）
* **平台类型：** Web 端
* **主要特性与工作流：** Z.ai 的使用方式比较直接，但一个明显的挑战在于：你需要 **手动复制粘贴生成的代码**。平台本身缺少实时预览窗口，因此很难第一时间看到代码运行效果。
@@ -233,7 +233,7 @@ AI Agent 是一种软件系统，它能够感知环境、做出决策，并自
* **价格：**
![](images/image14.png)
4. ### Replit（Web-based）
### 4. Replit（Web-based）
* **平台类型：** Web 端
* **主要特性与工作流：** Replit 是一体化的在线开发与部署环境，浏览器里就可以写代码、运行程序、生成线上访问地址。开始编码前，它会给出清晰的行动计划；同时还提供可视化编辑器，你可以在预览窗口里直接改 UI，源码会自动同步更新。这样可以让你随时校验 AI 的输出是否符合预期，大幅减少来回修改的次数。
@@ -249,7 +249,7 @@ AI Agent 是一种软件系统，它能够感知环境、做出决策，并自
* **价格：**
![](images/image19.png)
5. ### Minimax（Web-based）
### 5. Minimax（Web-based）
* **平台类型：** Web 端
* **主要特性与工作流：** Minimax 在执行任务时通常比较耗时。其流程往往包括：AI 自动发现并修复错误，因此整个过程可能较慢、甚至略显折腾。以本项目为例，Agent 一般会先生成一个详细计划，然后一步步搭建后端、数据库和前端逻辑。
@@ -265,7 +265,7 @@ AI Agent 是一种软件系统，它能够感知环境、做出决策，并自
* **价格：** 免费版在复杂项目中很可能无法顺利从头跑到尾，因此更推荐付费升级，以确保项目可以完整构建。
![](images/image26.png)
6. ### Trae（IDE）
### 6. Trae（IDE）
* **平台类型：** 桌面应用（PC）
* **主要特性与工作流：** 作为桌面应用，Trae 相比 Web 工具在性能和响应速度上通常更有优势。但它需要下载安装，对一些用户来说入门门槛稍高。同样地，由于是本地环境，不同电脑配置和依赖环境的差异，会带来一定的不确定性。优势在于，Trae 会帮助你在本地完成项目创建与运行配置，你可以直接在本机开发与调试。
@@ -279,7 +279,7 @@ AI Agent 是一种软件系统，它能够感知环境、做出决策，并自
* **价格：** 价格相对亲民，即便是免费版本，也足以完成质量不错的小项目。
![](images/image30.png)
7. ### V0（Web-based）
### 7. V0（Web-based）
* **平台类型：** Web 端
* **主要特性与工作流：** V0 是一个专注于生成 React UI 组件的工具，由 Vercel 提供。它在生成高质量、可用于生产环境的界面方面表现出色。但在实际使用中，会遇到诸如“难以找到代码视图”、“没有清晰说明 API Key 应该配置在何处”等问题。
@@ -293,7 +293,7 @@ AI Agent 是一种软件系统，它能够感知环境、做出决策，并自
* **价格：** 免费用户大约可以构建 4–5 个简单项目。
![](images/image35.png)
3. ## 平台总结对比
## 3. 平台总结对比
| `` | **Review** | **Platform** | **Notes** |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
docs/examples/example0/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md
+26 -26
View File
@@ -1,12 +1,12 @@
1. # 入门指南
2. ## 教程简介
# 1. 入门指南
## 2. 教程简介
让我们使用 AI 设计 Agent 和编码 Agent，从零开始搭建一个完整的网站。
* **设计 Agent**：负责创建 logo、网页布局、配色方案和其他视觉元素
* **编码 Agent**：根据你在提示中提出的需求与布局，编写 HTML/CSS/JS 等实际代码，构建可运行的网站
2. ## 设计 Agent 与编码 Agent
## 2. 设计 Agent 与编码 Agent
* **设计 Agent**：根据你提供的提示，生成图片、页面模型或设计风格的 AI。
* Mastergo
@@ -20,8 +20,8 @@
---
2. # 使用设计 Agent 创建 Logo
3. ## 设计 Logo 时需要考虑的关键要素
# 2. 使用设计 Agent 创建 Logo
## 3. 设计 Logo 时需要考虑的关键要素
Logo 是决定你网站第一印象的关键元素之一。想要从 AI 设计 Agent 那里获得满意的结果，你需要在提示中清楚地描述你想要的 Logo 类型。
@@ -50,7 +50,7 @@ Logo 是决定你网站第一印象的关键元素之一。想要从 AI 设计 A
* 希望出现在 Logo 中的图形或符号。
* *示例：书本图标、闪电符号、与 AI 相关的图形、抽象几何图形等。*
2. ## 编写 Logo 设计提示词
## 2. 编写 Logo 设计提示词
**示例提示词**
@@ -65,25 +65,25 @@ Logo 是决定你网站第一印象的关键元素之一。想要从 AI 设计 A
将象征 AI 的抽象图形与文字相结合，并导出为带透明背景的 PNG。"
```
3. ## 向 Agent 请求设计
## 3. 向 Agent 请求设计
* 输入上述提示词 → 比对 Agent 生成的多个设计稿。
![](images/image1.png)![](images/image2.png)
4. ## 确定最终 Logo
## 4. 确定最终 Logo
* 从草稿中选择你最喜欢的版本并下载。
---
3. # 规划你的网站结构
4. ## 了解基础版块
# 3. 规划你的网站结构
## 4. 了解基础版块
在真正开始制作网站前，先规划好要包含哪些菜单（版块）非常重要。菜单的设计取决于你希望访客看到什么、以及你希望他们采取什么行动。
一般来说，网站通常由 **Home / About / Contact** 等基础版块构成。
2. ## 自己先画一个结构草图（可选）
## 2. 自己先画一个结构草图（可选）
你可以先根据网站的目标，大致写出一个简单的菜单结构。
@@ -115,7 +115,7 @@ Logo 是决定你网站第一印象的关键元素之一。想要从 AI 设计 A
7. **FAQ**
1. 整理访客经常会问的问题及解答
8. ## 选择配色方案（可选）
## 8. 选择配色方案（可选）
如果你已经有了 Logo，或者想用特定的颜色搭配来设计网站，也可以直接在提示词中写上你想使用的颜色代码。
@@ -133,7 +133,7 @@ Logo 是决定你网站第一印象的关键元素之一。想要从 AI 设计 A
![](images/image5.png)
4. ## 编写网站设计提示词
## 4. 编写网站设计提示词
**示例提示词**
@@ -145,8 +145,8 @@ Logo 是决定你网站第一印象的关键元素之一。想要从 AI 设计 A
---
4. # 使用设计 Agent 设计网站
5. ## 输入提示词 → 生成设计稿
# 4. 使用设计 Agent 设计网站
## 5. 输入提示词 → 生成设计稿
* 在提示词中写出你规划好的结构以及选定的配色。
@@ -154,7 +154,7 @@ Logo 是决定你网站第一印象的关键元素之一。想要从 AI 设计 A
![](images/image6.png)![](images/image7.png)
2. ## 审阅设计稿并提出修改意见
## 2. 审阅设计稿并提出修改意见
你可以根据自己的需求，向 Agent 提出反馈，例如：
@@ -165,7 +165,7 @@ Logo 是决定你网站第一印象的关键元素之一。想要从 AI 设计 A
![](images/image8.png)
3. ## 确定最终设计
## 3. 确定最终设计
当你对设计稿进行多轮修改并满意之后，就可以把这个设计转化为代码，让编码 Agent 能理解并继续工作。
@@ -187,8 +187,8 @@ Logo 是决定你网站第一印象的关键元素之一。想要从 AI 设计 A
---
5. # 使用编码 Agent 搭建网站
6. ## 理解 HTML/CSS/JS 的基础概念
# 5. 使用编码 Agent 搭建网站
## 6. 理解 HTML/CSS/JS 的基础概念
一个网站本质上由三种语言构成：
@@ -251,7 +251,7 @@ function showAlert() {
<button onclick="showAlert()">Click me</button>
```
2. ## 让编码 Agent 生成代码
## 2. 让编码 Agent 生成代码
**示例提示词**
@@ -263,7 +263,7 @@ function showAlert() {
![](images/image12.png)
3. ## 运行网站
## 3. 运行网站
当草稿代码生成后，Agent 通常会自动启动项目，并展示生成好的网站页面。
@@ -275,7 +275,7 @@ function showAlert() {
让 Agent 重新启动项目并打开预览页面，方便你查看当前的效果。
4. ## 进行简单修改
## 4. 进行简单修改
你可以继续通过自然语言对草稿进行微调，例如：
@@ -284,7 +284,7 @@ function showAlert() {
![](images/image13.png)![](images/image14.png)
5. ## 修改网站文案内容
## 5. 修改网站文案内容
Agent 生成的初版网站，通常会包含一些自动生成的占位文本。为了让它更贴近你的真实场景，你可以提前准备好实际内容，再让 Agent 帮你替换。
@@ -302,7 +302,7 @@ Agent 生成的初版网站，通常会包含一些自动生成的占位文本
![](images/image17.png)
6. ## 插入图片
## 6. 插入图片
如果你想加入特定图片（例如 Logo、背景图等），可以先把图片上传到项目文件夹中，然后在提示词里说明要在页面的什么位置使用这些图片。
@@ -316,8 +316,8 @@ Agent 生成的初版网站，通常会包含一些自动生成的占位文本
---
6. # 将设计与代码整合
7. ## 将设计文件与网站代码整合（可选）
# 6. 将设计与代码整合
## 7. 将设计文件与网站代码整合（可选）
当你从设计 Agent 那里下载到了代码文件后，可以把它们移动到当前项目目录中，然后请编码 Agent 帮你将这些设计代码与现有项目进行合并。