feat(docs): integrate version2 curriculum and stage-3 updates
概要
- 将 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
@@ -4,12 +4,12 @@
|
||||
|
||||
### **你将学到：**
|
||||
|
||||
* **什么是 Vibe Coding：** 了解它的定义、工作流和关键优势。
|
||||
* **AI Agent 的角色：** 理解 AI Agent 的工作方式，以及它与传统程序的差异。
|
||||
* **如何写好提示词：** 掌握清晰、具体的提示词写法，以获得更好的结果。
|
||||
* **Vibe Coding 工具：** 认识一批主流的 AI 编程与设计平台。
|
||||
* **平台对比：** 从初学者视角出发，对 7 个不同 AI Agent 平台的优劣势进行评测与对比。
|
||||
* **UI / UX 工具：** 学会如何将 Figma、Mastergo 等 UI/UX 工具融入到整体工作流中。
|
||||
- **什么是 Vibe Coding：** 了解它的定义、工作流和关键优势。
|
||||
- **AI Agent 的角色：** 理解 AI Agent 的工作方式，以及它与传统程序的差异。
|
||||
- **如何写好提示词：** 掌握清晰、具体的提示词写法，以获得更好的结果。
|
||||
- **Vibe Coding 工具：** 认识一批主流的 AI 编程与设计平台。
|
||||
- **平台对比：** 从初学者视角出发，对 7 个不同 AI Agent 平台的优劣势进行评测与对比。
|
||||
- **UI / UX 工具：** 学会如何将 Figma、Mastergo 等 UI/UX 工具融入到整体工作流中。
|
||||
|
||||
# 1. 引言
|
||||
|
||||
@@ -25,18 +25,18 @@ Vibe Coding 的核心思想，是从 **“以代码为中心（code-first）”*
|
||||
|
||||
典型的 Vibe Coding 工作流程是一个不断迭代的循环：
|
||||
|
||||
* **描述目标：** 先用一句话或一段话描述你想要实现的功能，例如：“做一个带有 Python 后端、可以生成诗歌的简单贪吃蛇游戏。”
|
||||
* **AI 生成代码：** AI Agent 解析你的需求，生成初版代码，包括基本结构、前端页面和后端逻辑。
|
||||
* **运行并观察：** 运行生成的代码，检查其是否按预期工作，同时发现 bug 或不足之处。
|
||||
* **反馈并迭代：** 如果有错误或效果不理想，就在对话中继续下指令，例如：“蛇移动太慢了，把速度调快些”，或者“现在 `.env` 文件里的 API Key 没被正确读取，请修复后端代码。”
|
||||
* **重复上述步骤：** 不断在“描述 → 生成 → 运行 → 反馈”的循环中迭代，直到应用达到满意的状态。
|
||||
- **描述目标：** 先用一句话或一段话描述你想要实现的功能，例如：“做一个带有 Python 后端、可以生成诗歌的简单贪吃蛇游戏。”
|
||||
- **AI 生成代码：** AI Agent 解析你的需求，生成初版代码，包括基本结构、前端页面和后端逻辑。
|
||||
- **运行并观察：** 运行生成的代码，检查其是否按预期工作，同时发现 bug 或不足之处。
|
||||
- **反馈并迭代：** 如果有错误或效果不理想，就在对话中继续下指令，例如：“蛇移动太慢了，把速度调快些”，或者“现在 `.env` 文件里的 API Key 没被正确读取，请修复后端代码。”
|
||||
- **重复上述步骤：** 不断在“描述 → 生成 → 运行 → 反馈”的循环中迭代，直到应用达到满意的状态。
|
||||
|
||||
### Vibe Coding 的主要优势：
|
||||
|
||||
* **降低门槛：** 让缺乏编程经验的设计师、创业者、学生等，也可以通过自然语言参与应用开发。
|
||||
* **快速原型：** 从想法到最小可行产品（MVP）的时间大幅缩短。
|
||||
* **提高效率：** 自动处理大量重复、机械的编码工作（如模板代码），让开发者可以把精力放在架构设计和问题抽象上。
|
||||
* **利于试验：** 鼓励先快速产出，再不断完善的方式，更便于尝试新点子和新功能。
|
||||
- **降低门槛：** 让缺乏编程经验的设计师、创业者、学生等，也可以通过自然语言参与应用开发。
|
||||
- **快速原型：** 从想法到最小可行产品（MVP）的时间大幅缩短。
|
||||
- **提高效率：** 自动处理大量重复、机械的编码工作（如模板代码），让开发者可以把精力放在架构设计和问题抽象上。
|
||||
- **利于试验：** 鼓励先快速产出，再不断完善的方式，更便于尝试新点子和新功能。
|
||||
|
||||
---
|
||||
|
||||
@@ -48,20 +48,21 @@ AI Agent 是一种软件系统，它能够感知环境、做出决策，并自
|
||||
|
||||
下面是一些将 AI Agent 与传统程序区分开的关键特征：
|
||||
|
||||
* **自主性（Autonomy）：** AI Agent 具有较高的独立性。传统程序通常需要人一步一步触发，而 Agent 可以根据目标自主决定下一步要做什么。
|
||||
* **感知与记忆（Perception & Memory）：** Agent 会从环境中收集数据（例如 API 响应、传感器数据、用户输入等），并通过“记忆”保留上下文，从而在后续行动中复用经验、持续改进效果。
|
||||
* **理性与目标导向（Rationality & Goal-Orientation）：** Agent 会围绕给定的目标进行分析与规划，选择最合适的行动序列来追求更高的“绩效指标”。
|
||||
* **工具使用（Tool Use）：** 现代 AI Agent 的一大特征，是可以调用外部工具，不再局限于“生成文字”。例如，它可以浏览网页、运行代码、查询数据库、发送邮件等，是一个会“调度工具”的大脑。
|
||||
- **自主性（Autonomy）：** AI Agent 具有较高的独立性。传统程序通常需要人一步一步触发，而 Agent 可以根据目标自主决定下一步要做什么。
|
||||
- **感知与记忆（Perception & Memory）：** Agent 会从环境中收集数据（例如 API 响应、传感器数据、用户输入等），并通过“记忆”保留上下文，从而在后续行动中复用经验、持续改进效果。
|
||||
- **理性与目标导向（Rationality & Goal-Orientation）：** Agent 会围绕给定的目标进行分析与规划，选择最合适的行动序列来追求更高的“绩效指标”。
|
||||
- **工具使用（Tool Use）：** 现代 AI Agent 的一大特征，是可以调用外部工具，不再局限于“生成文字”。例如，它可以浏览网页、运行代码、查询数据库、发送邮件等，是一个会“调度工具”的大脑。
|
||||
|
||||
可以这样类比理解：
|
||||
|
||||
* 一个 **传统程序** 像是计算器。你给它输入数字和运算符，它只在你按下按钮时执行计算。
|
||||
* 一个 **AI 助手** 像是人类助理。你让它“帮我找附近的餐馆”，它会给你搜索结果并列出选项，但最后还是由你做决策。
|
||||
* 一个 **AI Agent** 则更像是一支自动化研究团队。你只需要给出高层目标（比如“帮我规划一次日本旅行”），它就会分解任务、上网查资料、预定机票酒店（通过 API）、整理日程，最终把结果交付给你，全程几乎不需要你干预细节。
|
||||
- 一个 **传统程序** 像是计算器。你给它输入数字和运算符，它只在你按下按钮时执行计算。
|
||||
- 一个 **AI 助手** 像是人类助理。你让它“帮我找附近的餐馆”，它会给你搜索结果并列出选项，但最后还是由你做决策。
|
||||
- 一个 **AI Agent** 则更像是一支自动化研究团队。你只需要给出高层目标（比如“帮我规划一次日本旅行”），它就会分解任务、上网查资料、预定机票酒店（通过 API）、整理日程，最终把结果交付给你，全程几乎不需要你干预细节。
|
||||
|
||||
---
|
||||
|
||||
# 2. 关于提示词编写
|
||||
|
||||
## 1. 提示词一次写完好，还是拆成多步更好？
|
||||
|
||||
很多人会忍不住想直接在一个提示词里，把“做一个完整的全栈应用”一次性说清楚。事实上，当前工具已经足够强大，确实有机会一次性给出一个看上去还不错的结果。但从整体体验和成功率来看，把工作拆成小步骤、按阶段迭代，效果往往会更好，也更不容易陷入“改不动”的死胡同。
|
||||
@@ -75,91 +76,92 @@ AI Agent 是一种软件系统，它能够感知环境、做出决策，并自
|
||||
|
||||
## 2. 越清晰，越好
|
||||
|
||||
* 在 Vibe Coding 中，你写的提示词和你写的代码一样重要。提示越清晰、越具体，结果就越接近你心中所想。
|
||||
* 一开始就把目标与约束条件说清楚，可以减少后续反复修改的次数，这不仅省时间，也能节省使用额度和成本。
|
||||
- 在 Vibe Coding 中，你写的提示词和你写的代码一样重要。提示越清晰、越具体，结果就越接近你心中所想。
|
||||
- 一开始就把目标与约束条件说清楚，可以减少后续反复修改的次数，这不仅省时间，也能节省使用额度和成本。
|
||||
|
||||
---
|
||||
|
||||
# 3. 工具总览（Vibe Coding / UIUX 工具）
|
||||
|
||||
## 1. AI Agent 平台
|
||||
|
||||
| **Name** | **Platform** |
|
||||
| --------------------------------------------- | ------------------ |
|
||||
| **[Lovable](https://lovable.dev/)** | Web-based |
|
||||
| **[Cursor](https://cursor.com/cn/agents)** | PC |
|
||||
| **[Z.ai](https://chat.z.ai/)** | Web-based |
|
||||
| **[Replit](https://replit.com/~)** | Web-based |
|
||||
| **[Minimax](https://agent.minimaxi.com/)** | Web-based |
|
||||
| **[Trae](https://www.trae.ai/)** | PC |
|
||||
| **[V0](https://v0.app/)** | Web-based |
|
||||
| **Name** | **Platform** |
|
||||
| ------------------------------------------ | ------------ |
|
||||
| **[Lovable](https://lovable.dev/)** | Web-based |
|
||||
| **[Cursor](https://cursor.com/cn/agents)** | PC |
|
||||
| **[Z.ai](https://chat.z.ai/)** | Web-based |
|
||||
| **[Replit](https://replit.com/~)** | Web-based |
|
||||
| **[Minimax](https://agent.minimaxi.com/)** | Web-based |
|
||||
| **[Trae](https://www.trae.ai/)** | PC |
|
||||
| **[V0](https://v0.app/)** | Web-based |
|
||||
|
||||
## 2. AI UIUX 平台
|
||||
|
||||
| **Name** | **Platform** |
|
||||
| ---------------------------------------- | -------------------- |
|
||||
| **[Mastergo](https://mastergo.com/)** | Web-based |
|
||||
| **[FIgma](https://www.figma.com/)** | Web-based, PC Plugin |
|
||||
| **Name** | **Platform** |
|
||||
| ------------------------------------- | -------------------- |
|
||||
| **[Mastergo](https://mastergo.com/)** | Web-based |
|
||||
| **[FIgma](https://www.figma.com/)** | Web-based, PC Plugin |
|
||||
|
||||
---
|
||||
|
||||
# 4. 实战教程（Vibe Coding + UI 结合）
|
||||
|
||||
1. 在你准备进行 Vibe Coding 的平台聊天窗口中，输入你想要的程序描述。
|
||||
示例：
|
||||
|
||||
> 请构建一个带前端和后端的简单贪吃蛇（Snake）网页应用。
|
||||
> 请构建一个带前端和后端的简单贪吃蛇（Snake）网页应用。
|
||||
>
|
||||
> 1. 前端
|
||||
> 1. 前端
|
||||
>
|
||||
> - 页面 1：游戏页面
|
||||
> - 页面 1：游戏页面
|
||||
> - 使用键盘控制蛇的移动。
|
||||
> - 蛇吃掉的不是食物，而是英文单词。
|
||||
> - 页面侧边栏展示已收集单词及其数量。
|
||||
> - 游戏结束后，已收集的单词仍然保留，并在新一局中延续。
|
||||
>
|
||||
> * 使用键盘控制蛇的移动。
|
||||
> * 蛇吃掉的不是食物，而是英文单词。
|
||||
> * 页面侧边栏展示已收集单词及其数量。
|
||||
> * 游戏结束后，已收集的单词仍然保留，并在新一局中延续。
|
||||
> - 页面 2：写诗页面（Make Poem）
|
||||
> - 页面 2：写诗页面（Make Poem）
|
||||
> - 展示与游戏页面相同的单词列表（数据一致）。
|
||||
> - 提供一个按钮，将当前收集的单词发送给后端生成一首诗。
|
||||
> - 生成诗歌后，将被使用到的单词从列表中移除或递减计数。
|
||||
>
|
||||
> * 展示与游戏页面相同的单词列表（数据一致）。
|
||||
> * 提供一个按钮，将当前收集的单词发送给后端生成一首诗。
|
||||
> * 生成诗歌后，将被使用到的单词从列表中移除或递减计数。
|
||||
> * 添加简单的导航，在 Game 和 Make Poem 两个页面之间切换。
|
||||
> * 确保收集到的单词在两个页面中都能看到。
|
||||
>
|
||||
> * 添加简单的导航，在 Game 和 Make Poem 两个页面之间切换。
|
||||
> * 确保收集到的单词在两个页面中都能看到。
|
||||
> 2. 后端
|
||||
>
|
||||
> 2. 后端
|
||||
>
|
||||
> * 提供一个后端接口，接收收集到的单词并返回一首诗。
|
||||
> * 使用 DeepSeek API 生成诗歌。
|
||||
> * 将 API Key 存放在 `.env` 文件中，并在 `.gitignore` 中忽略该文件。
|
||||
>
|
||||
2. 输入你的 DeepSeek API Key。（可以在 [https://platform.deepseek.com/](https://platform.deepseek.com/) 获取）
|
||||
> - 提供一个后端接口，接收收集到的单词并返回一首诗。
|
||||
> - 使用 DeepSeek API 生成诗歌。
|
||||
> - 将 API Key 存放在 `.env` 文件中，并在 `.gitignore` 中忽略该文件。
|
||||
|
||||
2. 输入你的 DeepSeek API Key。（可以在 [https://platform.deepseek.com/](https://platform.deepseek.com/) 获取）
|
||||
1. LLM 的 API Key 用于在你自己的项目中调用大模型。由于这是敏感信息，不能公开，因此需要单独写在配置文件里。
|
||||
**为什么要用 `.env` 文件，并且不要把它上传到 GitHub？**
|
||||
- `.env` 文件专门用来存放 **密钥或密码**（例如 DeepSeek API Key）。
|
||||
- 如果这个文件被上传到 GitHub，全世界的人都能看到你的密钥并盗用它。
|
||||
- 为了安全起见，我们需要在 `.gitignore` 文件中声明忽略 `.env`，让 Git 不跟踪它。
|
||||
- 这样一来，你的项目仍然可以在本机正常使用这些密钥，但不会在仓库中泄露。
|
||||
|
||||
* `.env` 文件专门用来存放 **密钥或密码**（例如 DeepSeek API Key）。
|
||||
* 如果这个文件被上传到 GitHub，全世界的人都能看到你的密钥并盗用它。
|
||||
* 为了安全起见，我们需要在 `.gitignore` 文件中声明忽略 `.env`，让 Git 不跟踪它。
|
||||
* 这样一来，你的项目仍然可以在本机正常使用这些密钥，但不会在仓库中泄露。
|
||||
3. 查看生成结果后，如果发现错误或有需要修改的地方，可以直接在聊天窗口中输入你的修改请求。
|
||||
4. 如果你对页面设计不满意，也可以选择在 Figma 或 Mastergo 中重新设计界面，再把设计思路反馈给 Agent。
|
||||
|
||||
* **示例**
|
||||
- **示例**
|
||||
|
||||
> 请设计一个名为 *Word-Snake* 的 **双页面 Web 应用**。
|
||||
> 请设计一个名为 _Word-Snake_ 的 **双页面 Web 应用**。
|
||||
>
|
||||
> * **Game 页面：**
|
||||
> * 蛇通过键盘控制移动。
|
||||
> * 蛇吃掉的是英文单词，而不是普通食物。
|
||||
> * 右侧面板展示已收集单词及数量。
|
||||
> * 游戏结束后，单词库存不会清空，在新一轮中继续使用。
|
||||
> * **Make Poem 页面：**
|
||||
> * 展示同一份共享单词库存。
|
||||
> * 用户选择部分单词并点击 **Generate Poem** 按钮。
|
||||
> * 将这些单词发送给后端，由 DeepSeek API 生成一首诗。
|
||||
> * 生成诗歌后，从库存中删除或减少被使用的单词。
|
||||
> * **导航：** 通过简单的 Tab 或顶部菜单在两个页面之间切换。
|
||||
> * **共享状态：** 确保收集到的单词在两个页面始终保持同步可见。
|
||||
> - **Game 页面：**
|
||||
> - 蛇通过键盘控制移动。
|
||||
> - 蛇吃掉的是英文单词，而不是普通食物。
|
||||
> - 右侧面板展示已收集单词及数量。
|
||||
> - 游戏结束后，单词库存不会清空，在新一轮中继续使用。
|
||||
> - **Make Poem 页面：**
|
||||
> - 展示同一份共享单词库存。
|
||||
> - 用户选择部分单词并点击 **Generate Poem** 按钮。
|
||||
> - 将这些单词发送给后端，由 DeepSeek API 生成一首诗。
|
||||
> - 生成诗歌后，从库存中删除或减少被使用的单词。
|
||||
> - **导航：** 通过简单的 Tab 或顶部菜单在两个页面之间切换。
|
||||
> - **共享状态：** 确保收集到的单词在两个页面始终保持同步可见。
|
||||
|
||||
* **效果示例**
|
||||
- **效果示例**
|
||||
|
||||
|
||||
|
||||
@@ -170,137 +172,141 @@ AI Agent 是一种软件系统，它能够感知环境、做出决策，并自
|
||||
不同的 Vibe Coding 平台各有特色和工作流。我们使用同一套“带 DeepSeek API 的贪吃蛇游戏”需求，在多个平台上进行实测，从初学者的角度评估它们的优劣。以下是总结。
|
||||
|
||||
## 1. 对比标准
|
||||
|
||||
1. **目标（Goal）**
|
||||
构建一个接入 DeepSeek API 的贪吃蛇（Snake）网页应用。
|
||||
2. **游戏细节（Game Details）**
|
||||
|
||||
1. 游戏通过 DeepSeek LLM API 生成诗歌。
|
||||
2. 蛇吃掉的是英文单词，收集到的单词会在游戏结束后保留，并在新一局中继续使用。相同单词可以被多次收集，并分别计数。
|
||||
3. 当生成一首诗后，被使用到的单词会从库存中移除。
|
||||
3. **必备功能（Must-Haves）**
|
||||
|
||||
3. **必备功能（Must-Haves）**
|
||||
1. 一个可运行的前端页面，包含贪吃蛇游戏（键盘控制、Canvas 渲染）。
|
||||
2. 单词收集机制（单词出现在棋盘上，蛇吃掉单词后，侧栏列表更新）。
|
||||
3. 在多轮游戏之间保持单词库存的持久化。
|
||||
4. 使用 DeepSeek API 的后端（如果没有 API Key，可以先返回模拟诗歌）。
|
||||
5. “生成诗歌”按钮：点击后调用后端，显示诗歌，并根据使用情况更新单词库存。
|
||||
6. 对 API Key 的 `.env` 支持，以及通过 `.gitignore` 避免密钥泄漏。
|
||||
4. **加分项（Nice-to-Haves）**
|
||||
|
||||
4. **加分项（Nice-to-Haves）**
|
||||
1. 用户可以选择要用哪些词来生成诗歌。
|
||||
2. 用户体验友好（例如侧边栏清晰展示单词列表、诗歌展示区布局合理）。
|
||||
3. 为初学者在代码中加入注释，解释关键逻辑。
|
||||
|
||||
## 2. 编码输出对比
|
||||
|
||||
### 1. Lovable（Web-based）
|
||||
|
||||
* **平台类型：** Web 端
|
||||
* **主要特性与工作流：** Lovable 在集成与协作方面做得很好，它自动完成诸如连接 Supabase 数据库等初始化工作，使项目搭建过程非常顺畅。你只需描述项目需求，Agent 就会帮你把各类服务串联起来，构建好基本结构。
|
||||
* **适合的用户：** 对于第一次尝试 Vibe Coding 的新手来说，Lovable 是非常友好的选择。它简化了多服务联动的复杂度，让你可以把注意力集中在提示词与迭代上，而不是环境配置。得益于高度自动化，你能很快得到一个可运行的原型。
|
||||
* **提示词过程：**
|
||||
- **平台类型：** Web 端
|
||||
- **主要特性与工作流：** Lovable 在集成与协作方面做得很好，它自动完成诸如连接 Supabase 数据库等初始化工作，使项目搭建过程非常顺畅。你只需描述项目需求，Agent 就会帮你把各类服务串联起来，构建好基本结构。
|
||||
- **适合的用户：** 对于第一次尝试 Vibe Coding 的新手来说，Lovable 是非常友好的选择。它简化了多服务联动的复杂度，让你可以把注意力集中在提示词与迭代上，而不是环境配置。得益于高度自动化，你能很快得到一个可运行的原型。
|
||||
- **提示词过程：**
|
||||
|
||||
* **贪吃蛇游戏效果：**
|
||||
- **贪吃蛇游戏效果：**
|
||||
|
||||
|
||||
|
||||
* **价格：** 相对偏贵，但如果你有学校邮箱，可以通过学生验证以半价使用。
|
||||
- **价格：** 相对偏贵，但如果你有学校邮箱，可以通过学生验证以半价使用。
|
||||
|
||||
|
||||
### 2. Cursor（IDE）
|
||||
|
||||
* **平台类型：** 桌面应用（PC）
|
||||
* **主要特性与工作流：** Cursor 是一款集成了 AI 能力的专有 IDE，支持 Windows、macOS 和 Linux。它把代码生成、智能重写、代码库查询等功能直接嵌入在开发环境中。与 Web 工具相比，它更接近传统本地开发体验。由于是本地环境，不同电脑的配置各异，偶尔会遇到环境相关问题。好处是项目就在本机，无需再额外下载或配置运行环境，Cursor 会帮你处理很多繁琐步骤。
|
||||
* **适合的用户：** 对已有一定编程基础的用户，Cursor 是一个非常强大又熟悉的环境。但对完全零基础的新手来说，需要自己理解项目结构、依赖管理和文件组织等概念，学习曲线会更陡一些。更适合想在传统编码流程中加入 AI 助手的开发者。
|
||||
* **提示词过程：**
|
||||
- **平台类型：** 桌面应用（PC）
|
||||
- **主要特性与工作流：** Cursor 是一款集成了 AI 能力的专有 IDE，支持 Windows、macOS 和 Linux。它把代码生成、智能重写、代码库查询等功能直接嵌入在开发环境中。与 Web 工具相比，它更接近传统本地开发体验。由于是本地环境，不同电脑的配置各异，偶尔会遇到环境相关问题。好处是项目就在本机，无需再额外下载或配置运行环境，Cursor 会帮你处理很多繁琐步骤。
|
||||
- **适合的用户：** 对已有一定编程基础的用户，Cursor 是一个非常强大又熟悉的环境。但对完全零基础的新手来说，需要自己理解项目结构、依赖管理和文件组织等概念，学习曲线会更陡一些。更适合想在传统编码流程中加入 AI 助手的开发者。
|
||||
- **提示词过程：**
|
||||
|
||||
* **贪吃蛇游戏效果：**
|
||||
- **贪吃蛇游戏效果：**
|
||||
|
||||
|
||||
|
||||
* **价格：**
|
||||
- **价格：**
|
||||
|
||||
|
||||
### 3. Z.ai（Web-based）
|
||||
|
||||
* **平台类型：** Web 端
|
||||
* **主要特性与工作流：** Z.ai 的使用方式比较直接，但一个明显的挑战在于：你需要 **手动复制粘贴生成的代码**。平台本身缺少实时预览窗口，因此很难第一时间看到代码运行效果。
|
||||
* **适合的用户：** 这个平台要求比较“动手”的使用方式。缺少自动化意味着你必须与代码直接打交道，这对想深入理解 AI 输出内容的人来说反而是种训练。但频繁的复制粘贴会带来效率问题和出错风险。更适合想看“原生 AI 输出代码”的同学，而不是追求一键式体验的人。
|
||||
* **提示词过程：**
|
||||
- **平台类型：** Web 端
|
||||
- **主要特性与工作流：** Z.ai 的使用方式比较直接，但一个明显的挑战在于：你需要 **手动复制粘贴生成的代码**。平台本身缺少实时预览窗口，因此很难第一时间看到代码运行效果。
|
||||
- **适合的用户：** 这个平台要求比较“动手”的使用方式。缺少自动化意味着你必须与代码直接打交道，这对想深入理解 AI 输出内容的人来说反而是种训练。但频繁的复制粘贴会带来效率问题和出错风险。更适合想看“原生 AI 输出代码”的同学，而不是追求一键式体验的人。
|
||||
- **提示词过程：**
|
||||
|
||||
* **贪吃蛇游戏效果：**
|
||||
- **贪吃蛇游戏效果：**
|
||||
|
||||
|
||||
|
||||
* **价格：**
|
||||
- **价格：**
|
||||
|
||||
|
||||
### 4. Replit（Web-based）
|
||||
|
||||
* **平台类型：** Web 端
|
||||
* **主要特性与工作流：** Replit 是一体化的在线开发与部署环境，浏览器里就可以写代码、运行程序、生成线上访问地址。开始编码前，它会给出清晰的行动计划；同时还提供可视化编辑器，你可以在预览窗口里直接改 UI，源码会自动同步更新。这样可以让你随时校验 AI 的输出是否符合预期，大幅减少来回修改的次数。
|
||||
- **平台类型：** Web 端
|
||||
- **主要特性与工作流：** Replit 是一体化的在线开发与部署环境，浏览器里就可以写代码、运行程序、生成线上访问地址。开始编码前，它会给出清晰的行动计划；同时还提供可视化编辑器，你可以在预览窗口里直接改 UI，源码会自动同步更新。这样可以让你随时校验 AI 的输出是否符合预期，大幅减少来回修改的次数。
|
||||
|
||||
|
||||
* **适合的用户：** Replit 对新手十分友好。它简化了从编码到部署的完整闭环，无需自己额外配置服务器或托管服务。协作功能也很强，适合同学之间一起做项目或请他人远程帮忙查看代码。
|
||||
* **提示词过程：** 在构建过程中，AI 并不是一开始就完全理解需求，中间经历了大约 3 轮迭代，最终输出才达到了理想效果。
|
||||
|
||||
- **适合的用户：** Replit 对新手十分友好。它简化了从编码到部署的完整闭环，无需自己额外配置服务器或托管服务。协作功能也很强，适合同学之间一起做项目或请他人远程帮忙查看代码。
|
||||
- **提示词过程：** 在构建过程中，AI 并不是一开始就完全理解需求，中间经历了大约 3 轮迭代，最终输出才达到了理想效果。
|
||||
|
||||
* **贪吃蛇游戏效果：**
|
||||
- **贪吃蛇游戏效果：**
|
||||
|
||||
|
||||
|
||||
* **价格：**
|
||||
- **价格：**
|
||||
|
||||
|
||||
### 5. Minimax（Web-based）
|
||||
|
||||
* **平台类型：** Web 端
|
||||
* **主要特性与工作流：** Minimax 在执行任务时通常比较耗时。其流程往往包括：AI 自动发现并修复错误，因此整个过程可能较慢、甚至略显折腾。以本项目为例，Agent 一般会先生成一个详细计划，然后一步步搭建后端、数据库和前端逻辑。
|
||||
* **适合的用户：** 由于它会自动运行测试和修复错误，时间与 Token 消耗都比较大，但你可以清楚看到 AI 如何定位并解决问题，从学习角度看很有价值。
|
||||
* **提示词过程：**
|
||||
- **平台类型：** Web 端
|
||||
- **主要特性与工作流：** Minimax 在执行任务时通常比较耗时。其流程往往包括：AI 自动发现并修复错误，因此整个过程可能较慢、甚至略显折腾。以本项目为例，Agent 一般会先生成一个详细计划，然后一步步搭建后端、数据库和前端逻辑。
|
||||
- **适合的用户：** 由于它会自动运行测试和修复错误，时间与 Token 消耗都比较大，但你可以清楚看到 AI 如何定位并解决问题，从学习角度看很有价值。
|
||||
- **提示词过程：**
|
||||
|
||||
|
||||
|
||||
* **贪吃蛇游戏效果：**
|
||||
- **贪吃蛇游戏效果：**
|
||||
|
||||
|
||||
|
||||
* **价格：** 免费版在复杂项目中很可能无法顺利从头跑到尾，因此更推荐付费升级，以确保项目可以完整构建。
|
||||
- **价格：** 免费版在复杂项目中很可能无法顺利从头跑到尾，因此更推荐付费升级，以确保项目可以完整构建。
|
||||
|
||||
|
||||
### 6. Trae（IDE）
|
||||
|
||||
* **平台类型：** 桌面应用（PC）
|
||||
* **主要特性与工作流：** 作为桌面应用，Trae 相比 Web 工具在性能和响应速度上通常更有优势。但它需要下载安装，对一些用户来说入门门槛稍高。同样地，由于是本地环境，不同电脑配置和依赖环境的差异，会带来一定的不确定性。优势在于，Trae 会帮助你在本地完成项目创建与运行配置，你可以直接在本机开发与调试。
|
||||
* **适合的用户：** 更适合计划长期进行 Vibe Coding 项目、并希望使用专门桌面工具的用户。对于只想“偶尔玩一下”的同学，可能不是最轻量的选择。
|
||||
* **提示词过程：**
|
||||
- **平台类型：** 桌面应用（PC）
|
||||
- **主要特性与工作流：** 作为桌面应用，Trae 相比 Web 工具在性能和响应速度上通常更有优势。但它需要下载安装，对一些用户来说入门门槛稍高。同样地，由于是本地环境，不同电脑配置和依赖环境的差异，会带来一定的不确定性。优势在于，Trae 会帮助你在本地完成项目创建与运行配置，你可以直接在本机开发与调试。
|
||||
- **适合的用户：** 更适合计划长期进行 Vibe Coding 项目、并希望使用专门桌面工具的用户。对于只想“偶尔玩一下”的同学，可能不是最轻量的选择。
|
||||
- **提示词过程：**
|
||||
|
||||
* **贪吃蛇游戏效果：**
|
||||
- **贪吃蛇游戏效果：**
|
||||
|
||||
|
||||
|
||||
* **价格：** 价格相对亲民，即便是免费版本，也足以完成质量不错的小项目。
|
||||
- **价格：** 价格相对亲民，即便是免费版本，也足以完成质量不错的小项目。
|
||||
|
||||
|
||||
### 7. V0（Web-based）
|
||||
|
||||
* **平台类型：** Web 端
|
||||
* **主要特性与工作流：** V0 是一个专注于生成 React UI 组件的工具，由 Vercel 提供。它在生成高质量、可用于生产环境的界面方面表现出色。但在实际使用中，会遇到诸如“难以找到代码视图”、“没有清晰说明 API Key 应该配置在何处”等问题。
|
||||
* **适合的用户：** V0 非常适合专注前端和 UI/UX 设计的学生或设计师。但它并不是完整的全栈解决方案，你仍然需要使用其他平台来实现后端逻辑与 API 集成，因此如果你的目标是“一站式搭建完整应用”，它可能不是最佳首选。
|
||||
* **提示词过程：**
|
||||
- **平台类型：** Web 端
|
||||
- **主要特性与工作流：** V0 是一个专注于生成 React UI 组件的工具，由 Vercel 提供。它在生成高质量、可用于生产环境的界面方面表现出色。但在实际使用中，会遇到诸如“难以找到代码视图”、“没有清晰说明 API Key 应该配置在何处”等问题。
|
||||
- **适合的用户：** V0 非常适合专注前端和 UI/UX 设计的学生或设计师。但它并不是完整的全栈解决方案，你仍然需要使用其他平台来实现后端逻辑与 API 集成，因此如果你的目标是“一站式搭建完整应用”，它可能不是最佳首选。
|
||||
- **提示词过程：**
|
||||
|
||||
|
||||
|
||||
* **贪吃蛇游戏效果：**
|
||||
|
||||
- **贪吃蛇游戏效果：**
|
||||
|
||||
* **价格：** 免费用户大约可以构建 4–5 个简单项目。
|
||||
- **价格：** 免费用户大约可以构建 4–5 个简单项目。
|
||||
|
||||
|
||||
## 3. 平台总结对比
|
||||
|
||||
| **平台** | **Review** | **Platform** | **Notes** |
|
||||
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| **[Lovable](https://lovable.dev/)** | 对 AI 编程新手非常友好，上手简单、体验顺滑，是理想的入门选择。 | Web-based | 自动完成 Supabase 等服务连接，减少配置成本。 |
|
||||
| **[Cursor](https://cursor.com/cn/agents)** | 适合已有开发经验的用户，大幅提升生产力与代码质量。 | PC | 需要一定编程基础，本地环境中需自己理解项目结构和依赖。 |
|
||||
| **[Z.ai](https://chat.z.ai/)** | 更适合有编程基础、想直接研究 AI 输出代码细节的用户。 | Web-based | 无预览窗口，检查结果较麻烦；需要手动粘贴代码、创建文件夹和文件并手动运行服务。 |
|
||||
| **[Replit](https://replit.com/~)** | 推荐给想快速把点子变成可访问在线服务的用户。 | Web-based | 一体化在线开发与部署，支持协作并提供可视化编辑器。 |
|
||||
| **[Minimax](https://agent.minimaxi.com/)** | 适合希望看到 AI 自动查错与修复全过程、并从中学习的人，但整体较慢且耗费 Token。 | Web-based | 整个过程较长，AI 会多次自动运行测试并修复错误。 |
|
||||
| **[Trae](https://www.trae.ai/)** | 针对有编程经验、希望使用桌面 IDE + AI Agent 组合的用户，是提升效率的有力工具。 | PC | 需本地安装与环境配置，但性能更好，适合长期进行 Vibe Coding 项目。 |
|
||||
| **[V0](https://v0.app/)** | 为想快速做出 React UI 视觉效果的非开发者进行了优化，适合前端 / 设计向的学生。 | Web-based | 专注生成 React UI，需要与其他平台配合完成后端和完整应用搭建。 |
|
||||
| **平台** | **Review** | **Platform** | **Notes** |
|
||||
| ------------------------------------------ | ------------------------------------------------------------------------------ | ------------ | ------------------------------------------------------------------------------ |
|
||||
| **[Lovable](https://lovable.dev/)** | 对 AI 编程新手非常友好，上手简单、体验顺滑，是理想的入门选择。 | Web-based | 自动完成 Supabase 等服务连接，减少配置成本。 |
|
||||
| **[Cursor](https://cursor.com/cn/agents)** | 适合已有开发经验的用户，大幅提升生产力与代码质量。 | PC | 需要一定编程基础，本地环境中需自己理解项目结构和依赖。 |
|
||||
| **[Z.ai](https://chat.z.ai/)** | 更适合有编程基础、想直接研究 AI 输出代码细节的用户。 | Web-based | 无预览窗口，检查结果较麻烦；需要手动粘贴代码、创建文件夹和文件并手动运行服务。 |
|
||||
| **[Replit](https://replit.com/~)** | 推荐给想快速把点子变成可访问在线服务的用户。 | Web-based | 一体化在线开发与部署，支持协作并提供可视化编辑器。 |
|
||||
| **[Minimax](https://agent.minimaxi.com/)** | 适合希望看到 AI 自动查错与修复全过程、并从中学习的人，但整体较慢且耗费 Token。 | Web-based | 整个过程较长，AI 会多次自动运行测试并修复错误。 |
|
||||
| **[Trae](https://www.trae.ai/)** | 针对有编程经验、希望使用桌面 IDE + AI Agent 组合的用户，是提升效率的有力工具。 | PC | 需本地安装与环境配置，但性能更好，适合长期进行 Vibe Coding 项目。 |
|
||||
| **[V0](https://v0.app/)** | 为想快速做出 React UI 视觉效果的非开发者进行了优化，适合前端 / 设计向的学生。 | Web-based | 专注生成 React UI，需要与其他平台配合完成后端和完整应用搭建。 |
|
||||
|
||||
+67
-61
@@ -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 生成的多个设计稿。
|
||||
|
||||
|
||||
|
||||
## 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/
|
||||
|
||||
|
||||
|
||||
* **在 Google 上通过关键词搜索配色**
|
||||
- **在 Google 上通过关键词搜索配色**
|
||||
|
||||
|
||||
|
||||
@@ -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 提出反馈，例如：
|
||||
|
||||
* “太花哨了，整体风格改得更简洁一些。”
|
||||
* “换一种字体。”
|
||||
* “调整一下颜色搭配。”
|
||||
* “把这里这一块删掉。”
|
||||
- “太花哨了，整体风格改得更简洁一些。”
|
||||
- “换一种字体。”
|
||||
- “调整一下颜色搭配。”
|
||||
- “把这里这一块删掉。”
|
||||
|
||||
|
||||
|
||||
@@ -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() {
|
||||
|
||||
你可以继续通过自然语言对草稿进行微调，例如：
|
||||
|
||||
* “把按钮做大一点。”
|
||||
* “字体粗一点。”
|
||||
- “把按钮做大一点。”
|
||||
- “字体粗一点。”
|
||||
|
||||
|
||||
|
||||
@@ -306,25 +311,26 @@ Agent 生成的初版网站，通常会包含一些自动生成的占位文本
|
||||
|
||||
如果你想加入特定图片（例如 Logo、背景图等），可以先把图片上传到项目文件夹中，然后在提示词里说明要在页面的什么位置使用这些图片。
|
||||
|
||||
* **示例：**
|
||||
- **示例：**
|
||||
|
||||
|
||||
|
||||
* **结果：**
|
||||
- **结果：**
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# 6. 将设计与代码整合
|
||||
|
||||
## 1. 将设计文件与网站代码整合（可选）
|
||||
|
||||
当你从设计 Agent 那里下载到了代码文件后，可以把它们移动到当前项目目录中，然后请编码 Agent 帮你将这些设计代码与现有项目进行合并。
|
||||
|
||||
* **示例：**
|
||||
- **示例：**
|
||||
|
||||
|
||||
|
||||
* **结果：**
|
||||
- **结果：**
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user