diff --git a/docs/examples/example0/example0-1/vibe-coding-tools-snake-game-tutorial.md b/docs/examples/example0/example0-1/vibe-coding-tools-snake-game-tutorial.md index eba8c35..6f3df54 100644 --- a/docs/examples/example0/example0-1/vibe-coding-tools-snake-game-tutorial.md +++ b/docs/examples/example0/example0-1/vibe-coding-tools-snake-game-tutorial.md @@ -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** | | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | diff --git a/docs/examples/example0/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md b/docs/examples/example0/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md index e1750b9..b2b77a3 100644 --- a/docs/examples/example0/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md +++ b/docs/examples/example0/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md @@ -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() { ``` -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 帮你将这些设计代码与现有项目进行合并。 diff --git a/docs/index.html b/docs/index.html index 2c45519..90af806 100644 --- a/docs/index.html +++ b/docs/index.html @@ -8,6 +8,8 @@ + +