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-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 帮你将这些设计代码与现有项目进行合并。