fix

2026-01-04 16:12:04 +08:00
parent 2d858d79e2
commit e53b7c0832
6 changed files with 29 additions and 24 deletions
@@ -62,7 +62,7 @@ AI Agent 是一种软件系统，它能够感知环境、做出决策，并自
 ---

 # 2. 关于提示词编写
-3. **提示词一次写完好，还是拆成多步更好？**
+## 1. 提示词一次写完好，还是拆成多步更好？

 很多人会忍不住想直接在一个提示词里，把“做一个完整的全栈应用”一次性说清楚。事实上，当前工具已经足够强大，确实有机会一次性给出一个看上去还不错的结果。但从整体体验和成功率来看，把工作拆成小步骤、按阶段迭代，效果往往会更好，也更不容易陷入“改不动”的死胡同。

@@ -73,7 +73,7 @@ AI Agent 是一种软件系统，它能够感知环境、做出决策，并自
 > “3. 最后把前后端连起来”。  
 > 这样能让 AI 更准确地理解你的需求并给出更可靠的输出。

-2. **越清晰，越好**
+## 2. 越清晰，越好

 * 在 Vibe Coding 中，你写的提示词和你写的代码一样重要。提示越清晰、越具体，结果就越接近你心中所想。
 * 一开始就把目标与约束条件说清楚，可以减少后续反复修改的次数，这不仅省时间，也能节省使用额度和成本。
@@ -81,7 +81,7 @@ AI Agent 是一种软件系统，它能够感知环境、做出决策，并自
 ---

 # 3. 工具总览（Vibe Coding / UIUX 工具）
-### 4. AI Agent 平台
+## 1. 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 平台
+## 2. AI UIUX 平台

   | **Name**                           | **Platform**   |
   | ---------------------------------------- | -------------------- |
@@ -102,7 +102,7 @@ AI Agent 是一种软件系统，它能够感知环境、做出决策，并自
 ---

 # 4. 实战教程（Vibe Coding + UI 结合）
-5. 在你准备进行 Vibe Coding 的平台聊天窗口中，输入你想要的程序描述。
+1. 在你准备进行 Vibe Coding 的平台聊天窗口中，输入你想要的程序描述。
   示例：

   > 请构建一个带前端和后端的简单贪吃蛇（Snake）网页应用。  
@@ -130,7 +130,7 @@ AI Agent 是一种软件系统，它能够感知环境、做出决策，并自
   > * 使用 DeepSeek API 生成诗歌。  
   > * 将 API Key 存放在 `.env` 文件中，并在 `.gitignore` 中忽略该文件。  
   >
-6. 输入你的 DeepSeek API Key。（可以在 [https://platform.deepseek.com/](https://platform.deepseek.com/) 获取）
+2. 输入你的 DeepSeek API Key。（可以在 [https://platform.deepseek.com/](https://platform.deepseek.com/) 获取）

   1. LLM 的 API Key 用于在你自己的项目中调用大模型。由于这是敏感信息，不能公开，因此需要单独写在配置文件里。
      **为什么要用 `.env` 文件，并且不要把它上传到 GitHub？**
@@ -139,8 +139,8 @@ AI Agent 是一种软件系统，它能够感知环境、做出决策，并自
   * 如果这个文件被上传到 GitHub，全世界的人都能看到你的密钥并盗用它。
   * 为了安全起见，我们需要在 `.gitignore` 文件中声明忽略 `.env`，让 Git 不跟踪它。
   * 这样一来，你的项目仍然可以在本机正常使用这些密钥，但不会在仓库中泄露。
-7. 查看生成结果后，如果发现错误或有需要修改的地方，可以直接在聊天窗口中输入你的修改请求。
-8. 如果你对页面设计不满意，也可以选择在 Figma 或 Mastergo 中重新设计界面，再把设计思路反馈给 Agent。
+3. 查看生成结果后，如果发现错误或有需要修改的地方，可以直接在聊天窗口中输入你的修改请求。
+4. 如果你对页面设计不满意，也可以选择在 Figma 或 Mastergo 中重新设计界面，再把设计思路反馈给 Agent。

 * **示例**

@@ -170,14 +170,14 @@ AI Agent 是一种软件系统，它能够感知环境、做出决策，并自
 不同的 Vibe Coding 平台各有特色和工作流。我们使用同一套“带 DeepSeek API 的贪吃蛇游戏”需求，在多个平台上进行实测，从初学者的角度评估它们的优劣。以下是总结。

 ## 1. 对比标准
-2. **目标（Goal）**
+1. **目标（Goal）**
   构建一个接入 DeepSeek API 的贪吃蛇（Snake）网页应用。
-3. **游戏细节（Game Details）**
+2. **游戏细节（Game Details）**

   1. 游戏通过 DeepSeek LLM API 生成诗歌。
   2. 蛇吃掉的是英文单词，收集到的单词会在游戏结束后保留，并在新一局中继续使用。相同单词可以被多次收集，并分别计数。
   3. 当生成一首诗后，被使用到的单词会从库存中移除。
-4. **必备功能（Must-Haves）**
+3. **必备功能（Must-Haves）**

   1. 一个可运行的前端页面，包含贪吃蛇游戏（键盘控制、Canvas 渲染）。
   2. 单词收集机制（单词出现在棋盘上，蛇吃掉单词后，侧栏列表更新）。
@@ -185,13 +185,13 @@ AI Agent 是一种软件系统，它能够感知环境、做出决策，并自
   4. 使用 DeepSeek API 的后端（如果没有 API Key，可以先返回模拟诗歌）。
   5. “生成诗歌”按钮：点击后调用后端，显示诗歌，并根据使用情况更新单词库存。
   6. 对 API Key 的 `.env` 支持，以及通过 `.gitignore` 避免密钥泄漏。
-5. **加分项（Nice-to-Haves）**
+4. **加分项（Nice-to-Haves）**

   1. 用户可以选择要用哪些词来生成诗歌。
   2. 用户体验友好（例如侧边栏清晰展示单词列表、诗歌展示区布局合理）。
   3. 为初学者在代码中加入注释，解释关键逻辑。
-## 6. 编码输出对比
-### 7. Lovable（Web-based）
+## 2. 编码输出对比
+### 1. Lovable（Web-based）

 * **平台类型：** Web 端
 * **主要特性与工作流：** Lovable 在集成与协作方面做得很好，它自动完成诸如连接 Supabase 数据库等初始化工作，使项目搭建过程非常顺畅。你只需描述项目需求，Agent 就会帮你把各类服务串联起来，构建好基本结构。
@@ -1,5 +1,5 @@
 # 1. 入门指南
-## 2. 教程简介
+## 1. 教程简介

 让我们使用 AI 设计 Agent 和编码 Agent，从零开始搭建一个完整的网站。

@@ -21,7 +21,7 @@
 ---

 # 2. 使用设计 Agent 创建 Logo
-## 3. 设计 Logo 时需要考虑的关键要素
+## 1. 设计 Logo 时需要考虑的关键要素

 Logo 是决定你网站第一印象的关键元素之一。想要从 AI 设计 Agent 那里获得满意的结果，你需要在提示中清楚地描述你想要的 Logo 类型。

@@ -78,7 +78,7 @@ Logo 是决定你网站第一印象的关键元素之一。想要从 AI 设计 A
 ---

 # 3. 规划你的网站结构
-## 4. 了解基础版块
+## 1. 了解基础版块

 在真正开始制作网站前，先规划好要包含哪些菜单（版块）非常重要。菜单的设计取决于你希望访客看到什么、以及你希望他们采取什么行动。
 一般来说，网站通常由 **Home / About / Contact** 等基础版块构成。
@@ -115,7 +115,7 @@ Logo 是决定你网站第一印象的关键元素之一。想要从 AI 设计 A
 7. **FAQ**

   1. 整理访客经常会问的问题及解答
-## 8. 选择配色方案（可选）
+## 3. 选择配色方案（可选）

 如果你已经有了 Logo，或者想用特定的颜色搭配来设计网站，也可以直接在提示词中写上你想使用的颜色代码。

@@ -146,7 +146,7 @@ Logo 是决定你网站第一印象的关键元素之一。想要从 AI 设计 A
 ---

 # 4. 使用设计 Agent 设计网站
-## 5. 输入提示词 → 生成设计稿
+## 1. 输入提示词 → 生成设计稿

 * 在提示词中写出你规划好的结构以及选定的配色。

@@ -188,7 +188,7 @@ Logo 是决定你网站第一印象的关键元素之一。想要从 AI 设计 A
 ---

 # 5. 使用编码 Agent 搭建网站
-## 6. 理解 HTML/CSS/JS 的基础概念
+## 1. 理解 HTML/CSS/JS 的基础概念

 一个网站本质上由三种语言构成：

@@ -317,7 +317,7 @@ Agent 生成的初版网站，通常会包含一些自动生成的占位文本
 ---

 # 6. 将设计与代码整合
-## 7. 将设计文件与网站代码整合（可选）
+## 1. 将设计文件与网站代码整合（可选）

 当你从设计 Agent 那里下载到了代码文件后，可以把它们移动到当前项目目录中，然后请编码 Agent 帮你将这些设计代码与现有项目进行合并。

@@ -52,7 +52,7 @@

 **任务目标：尽你所能做到一模一样！**

-感谢 Yerim 的详细教程 [Vibe Coding] 贪吃蛇游戏教程。**我们可以选择以下任何一个平台来复刻游戏**，你必须不惜一切代价完成任务。（如果你不确定从哪里开始，你甚至可以尝试向大语言模型寻求建议——例如如何编写提示词或采取什么步骤——以完全复刻项目。）
+感谢 Yerim 的详细教程 [[Vibe Coding] 贪吃蛇游戏教程](https://datawhalechina.github.io/easy-vibe/#/examples/example0/example0-1/vibe-coding-tools-snake-game-tutorial)。**我们可以选择以下任何一个平台来复刻游戏**，你必须不惜一切代价完成任务。（如果你不确定从哪里开始，你甚至可以尝试向大语言模型寻求建议——例如如何编写提示词或采取什么步骤——以完全复刻项目。）

 请查看以下编码平台的介绍（Yerim 的详细教程），并选择 **基于 Web 的** 工具来复刻超级井字棋游戏。

@@ -160,7 +160,7 @@ It’s just a model, which is a big file of numbers. When the numbers are right

 接下来我们从抽象的概念部分来到实际的操作环节。由于时间关系，我们只会学习 Figma 的基本操作逻辑，确保即便你完全没用过设计工具，也能跟着完成练习。如果你想进行完整的 Figma 功能学习，请你参考 Figma 提供的详细官方教程进行学习：https://help.figma.com/hc/en-us/sections/30880632542743-Figma-Design-for-beginners

-或者参考如下教程，进行类似个人作品集简单网页的快速搭建：https://help.figma.com/hc/en-us/sections/35895585621655-Figma-Sites-collection
+或者参考如下教程，进行类似个人作品集简单网页的快速搭建：https://help.figma.com/hc/en-us/sections/35895585621655-Figma-Sites-collectio

 ![](images/image17.png)

@@ -559,3 +559,5 @@ curl -X POST 'http://xxxxxxxx/v1/chat-messages' \
 1. **你的 GitHub 仓库链接；**
   1. **在 README.md 中写入一两句话的小说明：你选择了谁作为画像主角，为什么选 TA。**
 2. **你的 Hogwarts Portraits 线上访问链接；**
+
+你也可以参考 Yerim 写的 [使用设计和代码 Agent 制作网页](http://localhost:3000/#/examples/example0/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents) 教程，进行个人作品集或任意功能简单网页的快速搭建。