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

feat(docs): integrate version2 curriculum and stage-3 updates

Browse Source 
概要
- 将 version2 分支的课程结构重构、第三阶段章节新增、示例资源迁移、高级 RAG 文档与 Vercel 部署配置等整合为 main 上的一次汇总提交

内容导航与 README 调整
- 更新 README 的总体介绍文案，引入“第零阶段 + 第一到第三阶段”的完整学习路径描述
- 将原先的“三阶段实战路径”说明替换为新版分阶段描述，突出从小游戏到跨平台复杂应用的学习节奏
- 删除已过时的“第二次更新将在分支 version2 合并到主分支”的提示，改为直接以 main 为主线
- 统一 README 顶部标题和排版风格，保证中英文导航、徽章展示等视觉结构一致

课程结构与章节导航更新
- 调整 docs 目录下的学习阶段导航结构，使 README 中的导航表与各 stage 实际目录对齐
- 补全并创建 stage-3 相关章节入口文件，用于承载高级阶段的课程内容
- 新增或更新以下章节入口：
  - 高级核心技能：
    - docs/stage-3/core-skills/3.1-mcp-claudecode-skills/index.md
    - docs/stage-3/core-skills/3.2-long-running-tasks/index.md
  - 多平台开发：
    - docs/stage-3/cross-platform/3.3-wechat-miniprogram/index.md
    - docs/stage-3/cross-platform/3.4-wechat-miniprogram-backend/index.md
    - docs/stage-3/cross-platform/3.5-android-app/index.md
    - docs/stage-3/cross-platform/3.6-ios-app/index.md
  - 个人品牌：
    - docs/stage-3/personal-brand/3.7-personal-website-blog/index.md
- 保持 stage-0、stage-1、stage-2 既有章节结构不变的前提下，对导航表格进行排版和链接校正，使整体课程地图清晰、可点击

示例与图片资源重组
- 将原先位于 docs/examples/example1/images/ 下的微信小程序示例图片，整体迁移到 stage-3 的正式课程路径中：
  - 目标路径：docs/stage-3/3.3-how-to-build-a-wechat-miniprogram/example1/images/
- 通过 rename 方式保留 git 历史关系，避免图片资源被视为完全新增，从而方便后续追踪
- 为微信小程序示例新增 index 页面：
  - docs/stage-3/3.3-how-to-build-a-wechat-miniprogram/example1/index.md
- 使该示例在“高级三：多平台开发：如何构建微信小程序”章节中有清晰的入口，对应实际实战内容

高级 RAG 与 AI 进阶文档
- 新增一篇系统介绍 RAG 的高级文档：
  - docs/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future.md
- 覆盖内容包括：RAG 的基本概念、典型架构、工作流程以及未来演进方向，为第三阶段的复杂应用提供知识检索基础
- 配套引入多张插图，帮助读者从架构图和流程视角理解 RAG：
  - docs/stage-3/ai-advanced/3.a1-rag-introduction/images/image1.png ~ image15.png

部署与工程配置
- 新增 vercel.json 配置文件，为项目在 Vercel 上的部署提供基础配置
  - 明确文档构建产物的输出路径和静态站点托管方式
  - 为之后的一键部署和自动化预览打下基础

依赖与锁文件更新
- 调整 package.json 中与新版文档结构和部署相关的配置，保持脚本和依赖与当前课程形态同步
- 更新 package-lock.json，以反映最新的依赖树和版本锁定状态
- 保证在执行 npm install / npm run build 时，依赖环境与 version2 中的实际使用情况一致

兼容性与行为说明
- 该提交通过 npm run build 验证，确保在整合 version2 内容后，VitePress 构建过程正常完成
- main 分支上的历史被压缩为一条有语义的“第二次大更新”提交，详细的开发过程仍保留在 version2 分支，用于后续需要时回溯
This commit is contained in:
sanbuphy
2026-01-12 12:21:35 +08:00
parent 307a37cdb9
commit a4b583b13f
632 changed files with 18082 additions and 8092 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/examples/example0/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md
+67 -61
View File
@@ -1,83 +1,86 @@
# 1. 入门指南
## 1. 教程简介
让我们使用 AI 设计 Agent 和编码 Agent，从零开始搭建一个完整的网站。
* **设计 Agent**：负责创建 logo、网页布局、配色方案和其他视觉元素
* **编码 Agent**：根据你在提示中提出的需求与布局，编写 HTML/CSS/JS 等实际代码，构建可运行的网站
- **设计 Agent**：负责创建 logo、网页布局、配色方案和其他视觉元素
- **编码 Agent**：根据你在提示中提出的需求与布局，编写 HTML/CSS/JS 等实际代码，构建可运行的网站
## 2. 设计 Agent 与编码 Agent
* **设计 Agent**：根据你提供的提示，生成图片、页面模型或设计风格的 AI。
* Mastergo
* Lovart
* Figma MCP
* **编码 Agent**：根据你在提示中请求的功能与布局，编写实际的代码（HTML/CSS/JS 等）的 AI。
* Z.AI
* Trae
* Cursor
* Lovable
- **设计 Agent**：根据你提供的提示，生成图片、页面模型或设计风格的 AI。
- Mastergo
- Lovart
- Figma MCP
- **编码 Agent**：根据你在提示中请求的功能与布局，编写实际的代码（HTML/CSS/JS 等）的 AI。
- Z.AI
- Trae
- Cursor
- Lovable
---
# 2. 使用设计 Agent 创建 Logo
## 1. 设计 Logo 时需要考虑的关键要素
Logo 是决定你网站第一印象的关键元素之一。想要从 AI 设计 Agent 那里获得满意的结果，你需要在提示中清楚地描述你想要的 Logo 类型。
1. **品牌名称 / 文本**
* 必须出现在 Logo 中的文字（例如：网站标题、品牌名称等）。
- 必须出现在 Logo 中的文字（例如：网站标题、品牌名称等）。
2. **风格（情绪 / 气氛）**
* Logo 想要传达的整体感觉或氛围。
* *示例：极简、可爱、简洁、现代、复古、未来感等。*
- Logo 想要传达的整体感觉或氛围。
- _示例：极简、可爱、简洁、现代、复古、未来感等。_
3. **配色方案**（可选）
* 最好让 Logo 的配色与整个网站的整体基调相匹配。
* 可以指定具体的十六进制色号，或大致的色调（冷色、暖色等）。
* *示例：**`#171721`**（黑色）、**`#FF7130`**（橙色）。*
- 最好让 Logo 的配色与整个网站的整体基调相匹配。
- 可以指定具体的十六进制色号，或大致的色调（冷色、暖色等）。
- _示例：**`#171721`**（黑色）、**`#FF7130`**（橙色）。_
4. **形式（形状 / 结构）**
* 明确 Logo 是否需要特定的形状或构图。
* *示例：文字在圆形内部、图标 + 文字组合、以图标为主的 Logo 等。*
- 明确 Logo 是否需要特定的形状或构图。
- _示例：文字在圆形内部、图标 + 文字组合、以图标为主的 Logo 等。_
5. **图标 / 符号元素**（可选）
* 希望出现在 Logo 中的图形或符号。
* *示例：书本图标、闪电符号、与 AI 相关的图形、抽象几何图形等。*
- 希望出现在 Logo 中的图形或符号。
- _示例：书本图标、闪电符号、与 AI 相关的图形、抽象几何图形等。_
## 2. 编写 Logo 设计提示词
**示例提示词**
```Plain
"请为我设计一个极简风格的 Logo，品牌名称是 ‘My First Website’。
"请为我设计一个极简风格的 Logo，品牌名称是 ‘My First Website’。
使用黑色 (#171721) 和橙色 (#FF7130)，并将文字放在一个圆形内部。"
```
```Plain
"请设计一个以 ‘AIID’ 为品牌名的 Logo。
整体风格要未来感、干净简洁，主色为蓝色与白色。
"请设计一个以 ‘AIID’ 为品牌名的 Logo。
整体风格要未来感、干净简洁，主色为蓝色与白色。
将象征 AI 的抽象图形与文字相结合，并导出为带透明背景的 PNG。"
```
## 3. 向 Agent 请求设计
* 输入上述提示词 → 比对 Agent 生成的多个设计稿。
- 输入上述提示词 → 比对 Agent 生成的多个设计稿。
![](images/image1.png)![](images/image2.png)
## 4. 确定最终 Logo
* 从草稿中选择你最喜欢的版本并下载。
- 从草稿中选择你最喜欢的版本并下载。
---
# 3. 规划你的网站结构
## 1. 了解基础版块
在真正开始制作网站前，先规划好要包含哪些菜单（版块）非常重要。菜单的设计取决于你希望访客看到什么、以及你希望他们采取什么行动。
@@ -103,18 +106,18 @@ Logo 是决定你网站第一印象的关键元素之一。想要从 AI 设计 A
### 可选菜单
4. **Services / Projects**
1. 展示你提供的服务，或你的项目 / 作品集
2. 通常以列表或卡片形式展示
5. **Gallery**
1. 用于展示图片、照片或设计作品
6. **Blog / News**
1. 用于发布文章、动态或日志
7. **FAQ**
7. **FAQ**
1. 整理访客经常会问的问题及解答
## 3. 选择配色方案（可选）
如果你已经有了 Logo，或者想用特定的颜色搭配来设计网站，也可以直接在提示词中写上你想使用的颜色代码。
@@ -123,13 +126,13 @@ Logo 是决定你网站第一印象的关键元素之一。想要从 AI 设计 A
即使你暂时想不到配色方案，也可以通过配色网站或搜索关键词来找到灵感。
* **配色参考网站**
* https://colorhunt.co/
* https://coolors.co/
- **配色参考网站**
- https://colorhunt.co/
- https://coolors.co/
![](images/image3.png)![](images/image4.png)
* **在 Google 上通过关键词搜索配色**
- **在 Google 上通过关键词搜索配色**
![](images/image5.png)
@@ -138,17 +141,18 @@ Logo 是决定你网站第一印象的关键元素之一。想要从 AI 设计 A
**示例提示词**
```Plain
"请设计一个由 Home、About、Contact 三个版块构成的单页网站。
使用配色 #171721、#FF7130 和 #FF3C68。
"请设计一个由 Home、About、Contact 三个版块构成的单页网站。
使用配色 #171721、#FF7130 和 #FF3C68。
整体风格要现代、简洁。"
```
---
# 4. 使用设计 Agent 设计网站
## 1. 输入提示词 → 生成设计稿
* 在提示词中写出你规划好的结构以及选定的配色。
- 在提示词中写出你规划好的结构以及选定的配色。
**Mastergo 提示词示例**
@@ -158,10 +162,10 @@ Logo 是决定你网站第一印象的关键元素之一。想要从 AI 设计 A
你可以根据自己的需求，向 Agent 提出反馈，例如：
* “太花哨了，整体风格改得更简洁一些。”
* “换一种字体。”
* “调整一下颜色搭配。”
* “把这里这一块删掉。”
- “太花哨了，整体风格改得更简洁一些。”
- “换一种字体。”
- “调整一下颜色搭配。”
- “把这里这一块删掉。”
![](images/image8.png)
@@ -188,21 +192,22 @@ Logo 是决定你网站第一印象的关键元素之一。想要从 AI 设计 A
---
# 5. 使用编码 Agent 搭建网站
## 1. 理解 HTML/CSS/JS 的基础概念
一个网站本质上由三种语言构成：
* **HTML（HyperText Markup Language）** → 结构（骨架）
* **CSS（Cascading Style Sheets）** → 样式（外观）
* **JavaScript（JS）** → 功能（交互）
- **HTML（HyperText Markup Language）** → 结构（骨架）
- **CSS（Cascading Style Sheets）** → 样式（外观）
- **JavaScript（JS）** → 功能（交互）
这三者配合在一起，构成我们看到的完整网页。
1. **🏗️ HTML（结构）**
* 定义页面中“展示什么”
* 用来放置文本、图片、按钮、链接等元素
* 类似于建筑物的 **墙体和框架**
- 定义页面中“展示什么”
- 用来放置文本、图片、按钮、链接等元素
- 类似于建筑物的 **墙体和框架**
**示例**
@@ -214,9 +219,9 @@ Logo 是决定你网站第一印象的关键元素之一。想要从 AI 设计 A
2. **🎨 CSS（样式）**
* 决定“内容怎样展示”
* 控制文字大小、颜色、间距、背景、按钮形状等
* 让 HTML 有了“衣服”和视觉风格
- 决定“内容怎样展示”
- 控制文字大小、颜色、间距、背景、按钮形状等
- 让 HTML 有了“衣服”和视觉风格
**示例**
@@ -235,9 +240,9 @@ body {
3. **⚙️ JavaScript（JS）（功能）**
* 让网页能够和用户互动
* 可以实现按钮点击、菜单展开、图片轮播、表单提交等动态效果
* 如果说 HTML/CSS 是静态的骨架和外观，那么 JS 就是让网页“活起来”的 **大脑**
- 让网页能够和用户互动
- 可以实现按钮点击、菜单展开、图片轮播、表单提交等动态效果
- 如果说 HTML/CSS 是静态的骨架和外观，那么 JS 就是让网页“活起来”的 **大脑**
**示例**
@@ -256,8 +261,8 @@ function showAlert() {
**示例提示词**
```Plain
"请为一个包含 Home、About 和 Contact 版块的单页网站编写 HTML 和 CSS。
使用配色 #171721、#FF7130、#FF3C68。
"请为一个包含 Home、About 和 Contact 版块的单页网站编写 HTML 和 CSS。
使用配色 #171721、#FF7130、#FF3C68。
背景为黑色，文字为白色。"
```
@@ -279,8 +284,8 @@ function showAlert() {
你可以继续通过自然语言对草稿进行微调，例如：
* “把按钮做大一点。”
* “字体粗一点。”
- “把按钮做大一点。”
- “字体粗一点。”
![](images/image13.png)![](images/image14.png)
@@ -306,25 +311,26 @@ Agent 生成的初版网站，通常会包含一些自动生成的占位文本
如果你想加入特定图片（例如 Logo、背景图等），可以先把图片上传到项目文件夹中，然后在提示词里说明要在页面的什么位置使用这些图片。
* **示例：**
- **示例：**
![](images/image18.png)![](images/image19.png)![](images/image20.png)
* **结果：**
- **结果：**
![](images/image21.png)
---
# 6. 将设计与代码整合
## 1. 将设计文件与网站代码整合（可选）
当你从设计 Agent 那里下载到了代码文件后，可以把它们移动到当前项目目录中，然后请编码 Agent 帮你将这些设计代码与现有项目进行合并。
* **示例：**
- **示例：**
![](images/image22.png)
* **结果：**
- **结果：**
![](images/image23.png)