From e53b7c08326e12439139a73350c6ea5b6786d7ac Mon Sep 17 00:00:00 2001 From: sanbuphy Date: Sun, 4 Jan 2026 16:12:04 +0800 Subject: [PATCH] fix --- .vscode/settings.json | 3 ++ README.md | 2 +- .../vibe-coding-tools-snake-game-tutorial.md | 28 +++++++++---------- ...ebsite-with-ai-coding-and-design-agents.md | 14 +++++----- ...h-the-capability-boundaries-of-ai-tools.md | 2 +- .../chapter4-lets-build-hogwarts-portraits.md | 4 ++- 6 files changed, 29 insertions(+), 24 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..a127e95 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "cSpell.words": [] +} \ No newline at end of file diff --git a/README.md b/README.md index 9345dd3..22ed961 100644 --- a/README.md +++ b/README.md @@ -149,7 +149,7 @@ - [散步-项目负责人](https://github.com/sanbuphy) (Datawhale成员) - 方可-指导老师（Datawhale成员, 清华大学） -- [Yerim Kang](https://github.com/yerim25)（CodingTool补充教程部分-清华大学） +- [Yerim Kang](https://github.com/yerim25)（实践项目部分-清华大学） - 赵芷霖（实践项目部分-清华大学） - [李亦萱](https://yixuan20.github.io/)（页面美术设计-清华大学） - AI Vibe Coding 101 内测群完整给建议体验的小伙伴们 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 6f3df54..2274462 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 @@ -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 就会帮你把各类服务串联起来，构建好基本结构。 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 b2b77a3..f48b158 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,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 帮你将这些设计代码与现有项目进行合并。 diff --git a/docs/project/chapter2/chapter2-reach-the-capability-boundaries-of-ai-tools.md b/docs/project/chapter2/chapter2-reach-the-capability-boundaries-of-ai-tools.md index 0efa157..63e84e2 100644 --- a/docs/project/chapter2/chapter2-reach-the-capability-boundaries-of-ai-tools.md +++ b/docs/project/chapter2/chapter2-reach-the-capability-boundaries-of-ai-tools.md @@ -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 的** 工具来复刻超级井字棋游戏。 diff --git a/docs/project/chapter4/chapter4-lets-build-hogwarts-portraits.md b/docs/project/chapter4/chapter4-lets-build-hogwarts-portraits.md index 7350c40..7922c6c 100644 --- a/docs/project/chapter4/chapter4-lets-build-hogwarts-portraits.md +++ b/docs/project/chapter4/chapter4-lets-build-hogwarts-portraits.md @@ -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) 教程，进行个人作品集或任意功能简单网页的快速搭建。 \ No newline at end of file