diff --git a/.gitignore b/.gitignore index 7d6ad5f..8222584 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ .DS_Store node_modules/* +tools/* \ No newline at end of file diff --git a/README.md b/README.md index 2e24027..9345dd3 100644 --- a/README.md +++ b/README.md @@ -66,7 +66,7 @@ | [Project 4: 一起做霍格沃茨画像](https://github.com/datawhalechina/easy-vibe/blob/main/docs/project/chapter4/chapter4-lets-build-hogwarts-portraits.md) | 前端原型设计、前端原型转代码、AI IDE 入门、Dify API 集成、网页部署 | 中 | ✅ | | [Project 5: 从数据库到 Supabase](https://github.com/datawhalechina/easy-vibe/blob/main/docs/project/chapter5/chapter5-from-database-to-supabase.md) | 数据库与 JSON 入门、Supabase 后端服务、用户鉴权系统、边缘函数、鉴权、存储桶 | 中 | ✅ | | [Project 6: 别急着写代码，先想一个好点子](https://github.com/datawhalechina/easy-vibe/blob/main/docs/project/chapter6/chapter6-no-code-without-an-idea.md) | 产品思维、学会抽象思路变具体、如何制作好应用、用户需求与增长 | 中 | ✅ | -| **第三阶段：现代全栈应用实战** | | | | +| **第三阶段：现代全栈网页应用实战** | | | | | Project 7: 构建第一个现代应用程序-UI设计 | 现代前端组件库、前端编辑工具进阶、UI 设计规范 | 高 | 🚧 | | Project 8: 构建第一个现代应用程序-功能设计 | 市场调研、产品 PRD 构建、原型设计深度解析、多页面架构设计 | 高 | 🚧 | | Project 9: 构建第一个现代应用程序-全栈应用 | 全栈应用构建方案、独立后端鉴权、设计到上线开发闭环 | 高 | 🚧 | @@ -84,17 +84,20 @@ | [扩展知识 7: CLI AI 编程工具](https://github.com/datawhalechina/easy-vibe/blob/main/docs/extra/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development.md) | 终端介绍、CLI AI 编程工具、Claude Code/Codex | 中 | ✅ | | 扩展知识 8: MCP 与 ClaudeCode skills | MCP 协议、ClaudeCode Skills、工具扩展机制 | 中 | 🚧 | | 扩展知识 9: 使用 Trae SOLO 模式深度开发 | PRD 生成、需求驱动开发、前后端集成 | 中 | 🚧 | -| 扩展知识 10: 如何提高 vibe coding 的品味，避免写长而无用 | 测试驱动开发、中间检查点、约束条件 | 高 | 🚧 | +| 扩展知识 10: 尝试提高 vibe coding 的品味 | 测试驱动开发、设立中间检查点、约束条件 | 高 | 🚧 | | 扩展知识 11: 如何让 Coding Tools 长时间工作 | 自动化开发配置、长时间任务管理、CLI 工具稳定性优化 | 高 | 🚧 | ### 实践项目部分 | 章节 | 关键内容 | 难度 | 状态 | | :--- | :--- | :--- | :--- | +| [Example 0-1: 使用 Vibe Coding 工具完成贪吃蛇教程](https://github.com/datawhalechina/easy-vibe/blob/main/docs/examples/example0/vibe-coding-tools-snake-game-tutorial/README.md) | 基于 Vibe Coding 工具复现与扩展贪吃蛇游戏的补充文章与实践记录 | 中 | 🚧 | +| [Example 0-2: 使用 Vibe Coding 工具与设计智能体搭建网站](https://github.com/datawhalechina/easy-vibe/blob/main/docs/examples/example0/vibe-coding-tools-build-website-with-ai-coding-and-design-agents/README.md) | 结合 Vibe Coding 工具与设计智能体从 0 到 1 搭建网站的补充文章与实践记录 | 中 | 🚧 | | [Example 1: 如何构建微信小程序](https://github.com/datawhalechina/easy-vibe/blob/main/docs/examples/example1/example1-how-to-build-a-wechat-miniprogram.md) | 了解微信小程序生态与开发链路，结合 Trae + HBuilderX + 微信开发者工具，全流程开发贪吃蛇小程序 | 中 | ✅ | | Example 2: 如何构建微信小程序-包含后端 | 使用 vibe coding 从 0 到 1 构建具有后端数据库的微信小程序 | 中 | 🚧 | | Example 3: 如何构建安卓程序 | 结合 Expo，使用 vibe coding 从 0 到 1 构建安卓应用并上架 | 高 | 🚧 | + ### 路线图 #### 更新 diff --git a/docs/README.md b/docs/README.md index 8cddacc..d455589 100644 --- a/docs/README.md +++ b/docs/README.md @@ -100,6 +100,8 @@ | 难度 | 章节 | 关键内容 | 状态 | | ---- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---- | +| 初 | [Example 0-1: Vibe Coding 入门与贪吃蛇游戏实战](https://github.com/datawhalechina/easy-vibe/blob/main/docs/examples/example0/example0-1/vibe-coding-tools-snake-game-tutorial.md) | 认识 Vibe Coding 与在线 AI Agent 编码平台，学习提示词编写方法，对比不同平台 vibe coding 贪吃蛇游戏的效果。 | ✅ | +| 初 | [Example 0-2: 使用 AI 设计与编码 Agent 搭建网站](https://github.com/datawhalechina/easy-vibe/blob/main/docs/examples/example0/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md) | 使用设计 Agent + 编码 Agent，从零完成 Logo 设计、网站结构规划与单页网站搭建全流程。 | ✅ | | 中 | [Example 1: 如何构建微信小程序](https://github.com/datawhalechina/easy-vibe/blob/main/docs/examples/example1/example1-how-to-build-a-wechat-miniprogram.md) | 了解微信小程序生态与开发链路，结合 **Trae** + **HBuilderX** + **微信开发者工具**，通过 AI 辅助从环境搭建到代码生成，全流程开发**贪吃蛇小程序**。 | ✅ | | 中 | Example 2: 如何构建微信小程序-包含后端 | 使用 vibe coding 从 0 到 1 构建具有后端数据库的微信小程序 | 🚧 | | 高 | Example 3: 如何构建安卓程序 | 结合 Expo，使用 vibe coding 从 0 到 1 构建安卓应用并上架 | 🚧 | diff --git a/docs/_sidebar.md b/docs/_sidebar.md index 577968e..9ede1d5 100644 --- a/docs/_sidebar.md +++ b/docs/_sidebar.md @@ -19,4 +19,6 @@ * [扩展知识 7: 命令行 AI 编程工具介绍](extra/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development.md) * Examples - * [完整实战项目 1: 如何写一个微信小程序](examples/example1/example1-how-to-build-a-wechat-miniprogram.md) +* * [完整实战 0-1: Vibe Coding 入门与贪吃蛇游戏实战](examples/example0/example0-1/vibe-coding-tools-snake-game-tutorial.md) +* * [完整实战 0-2: 使用 AI 设计与编码 Agent 搭建网站](examples/example0/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md) +* * [完整实战项目 1: 如何写一个微信小程序](examples/example1/example1-how-to-build-a-wechat-miniprogram.md) diff --git a/docs/examples/example0/example0-1/images/image1.png b/docs/examples/example0/example0-1/images/image1.png new file mode 100644 index 0000000..b2c2184 Binary files /dev/null and b/docs/examples/example0/example0-1/images/image1.png differ diff --git a/docs/examples/example0/example0-1/images/image10.png b/docs/examples/example0/example0-1/images/image10.png new file mode 100644 index 0000000..d3b6fba Binary files /dev/null and b/docs/examples/example0/example0-1/images/image10.png differ diff --git a/docs/examples/example0/example0-1/images/image11.png b/docs/examples/example0/example0-1/images/image11.png new file mode 100644 index 0000000..7be43ce Binary files /dev/null and b/docs/examples/example0/example0-1/images/image11.png differ diff --git a/docs/examples/example0/example0-1/images/image12.png b/docs/examples/example0/example0-1/images/image12.png new file mode 100644 index 0000000..bad2d07 Binary files /dev/null and b/docs/examples/example0/example0-1/images/image12.png differ diff --git a/docs/examples/example0/example0-1/images/image13.png b/docs/examples/example0/example0-1/images/image13.png new file mode 100644 index 0000000..e8a263d Binary files /dev/null and b/docs/examples/example0/example0-1/images/image13.png differ diff --git a/docs/examples/example0/example0-1/images/image14.png b/docs/examples/example0/example0-1/images/image14.png new file mode 100644 index 0000000..31f377b Binary files /dev/null and b/docs/examples/example0/example0-1/images/image14.png differ diff --git a/docs/examples/example0/example0-1/images/image15.png b/docs/examples/example0/example0-1/images/image15.png new file mode 100644 index 0000000..33a1ecb Binary files /dev/null and b/docs/examples/example0/example0-1/images/image15.png differ diff --git a/docs/examples/example0/example0-1/images/image16.png b/docs/examples/example0/example0-1/images/image16.png new file mode 100644 index 0000000..7a15f9f Binary files /dev/null and b/docs/examples/example0/example0-1/images/image16.png differ diff --git a/docs/examples/example0/example0-1/images/image17.png b/docs/examples/example0/example0-1/images/image17.png new file mode 100644 index 0000000..6e3afae Binary files /dev/null and b/docs/examples/example0/example0-1/images/image17.png differ diff --git a/docs/examples/example0/example0-1/images/image18.png b/docs/examples/example0/example0-1/images/image18.png new file mode 100644 index 0000000..cf7da26 Binary files /dev/null and b/docs/examples/example0/example0-1/images/image18.png differ diff --git a/docs/examples/example0/example0-1/images/image19.png b/docs/examples/example0/example0-1/images/image19.png new file mode 100644 index 0000000..5855787 Binary files /dev/null and b/docs/examples/example0/example0-1/images/image19.png differ diff --git a/docs/examples/example0/example0-1/images/image2.png b/docs/examples/example0/example0-1/images/image2.png new file mode 100644 index 0000000..c2ebe40 Binary files /dev/null and b/docs/examples/example0/example0-1/images/image2.png differ diff --git a/docs/examples/example0/example0-1/images/image20.png b/docs/examples/example0/example0-1/images/image20.png new file mode 100644 index 0000000..5723912 Binary files /dev/null and b/docs/examples/example0/example0-1/images/image20.png differ diff --git a/docs/examples/example0/example0-1/images/image21.png b/docs/examples/example0/example0-1/images/image21.png new file mode 100644 index 0000000..9cdc651 Binary files /dev/null and b/docs/examples/example0/example0-1/images/image21.png differ diff --git a/docs/examples/example0/example0-1/images/image22.png b/docs/examples/example0/example0-1/images/image22.png new file mode 100644 index 0000000..f0a1452 Binary files /dev/null and b/docs/examples/example0/example0-1/images/image22.png differ diff --git a/docs/examples/example0/example0-1/images/image23.png b/docs/examples/example0/example0-1/images/image23.png new file mode 100644 index 0000000..b83fe56 Binary files /dev/null and b/docs/examples/example0/example0-1/images/image23.png differ diff --git a/docs/examples/example0/example0-1/images/image24.png b/docs/examples/example0/example0-1/images/image24.png new file mode 100644 index 0000000..ae99dc5 Binary files /dev/null and b/docs/examples/example0/example0-1/images/image24.png differ diff --git a/docs/examples/example0/example0-1/images/image25.png b/docs/examples/example0/example0-1/images/image25.png new file mode 100644 index 0000000..78ffa69 Binary files /dev/null and b/docs/examples/example0/example0-1/images/image25.png differ diff --git a/docs/examples/example0/example0-1/images/image26.png b/docs/examples/example0/example0-1/images/image26.png new file mode 100644 index 0000000..17da89f Binary files /dev/null and b/docs/examples/example0/example0-1/images/image26.png differ diff --git a/docs/examples/example0/example0-1/images/image27.png b/docs/examples/example0/example0-1/images/image27.png new file mode 100644 index 0000000..74e2140 Binary files /dev/null and b/docs/examples/example0/example0-1/images/image27.png differ diff --git a/docs/examples/example0/example0-1/images/image28.png b/docs/examples/example0/example0-1/images/image28.png new file mode 100644 index 0000000..8ecab49 Binary files /dev/null and b/docs/examples/example0/example0-1/images/image28.png differ diff --git a/docs/examples/example0/example0-1/images/image29.png b/docs/examples/example0/example0-1/images/image29.png new file mode 100644 index 0000000..a99341e Binary files /dev/null and b/docs/examples/example0/example0-1/images/image29.png differ diff --git a/docs/examples/example0/example0-1/images/image3.png b/docs/examples/example0/example0-1/images/image3.png new file mode 100644 index 0000000..9619350 Binary files /dev/null and b/docs/examples/example0/example0-1/images/image3.png differ diff --git a/docs/examples/example0/example0-1/images/image30.png b/docs/examples/example0/example0-1/images/image30.png new file mode 100644 index 0000000..3be46e2 Binary files /dev/null and b/docs/examples/example0/example0-1/images/image30.png differ diff --git a/docs/examples/example0/example0-1/images/image31.png b/docs/examples/example0/example0-1/images/image31.png new file mode 100644 index 0000000..13e2a65 Binary files /dev/null and b/docs/examples/example0/example0-1/images/image31.png differ diff --git a/docs/examples/example0/example0-1/images/image32.png b/docs/examples/example0/example0-1/images/image32.png new file mode 100644 index 0000000..0025fbf Binary files /dev/null and b/docs/examples/example0/example0-1/images/image32.png differ diff --git a/docs/examples/example0/example0-1/images/image33.png b/docs/examples/example0/example0-1/images/image33.png new file mode 100644 index 0000000..8f3e466 Binary files /dev/null and b/docs/examples/example0/example0-1/images/image33.png differ diff --git a/docs/examples/example0/example0-1/images/image34.png b/docs/examples/example0/example0-1/images/image34.png new file mode 100644 index 0000000..34ac842 Binary files /dev/null and b/docs/examples/example0/example0-1/images/image34.png differ diff --git a/docs/examples/example0/example0-1/images/image35.png b/docs/examples/example0/example0-1/images/image35.png new file mode 100644 index 0000000..94d62b0 Binary files /dev/null and b/docs/examples/example0/example0-1/images/image35.png differ diff --git a/docs/examples/example0/example0-1/images/image4.png b/docs/examples/example0/example0-1/images/image4.png new file mode 100644 index 0000000..998f300 Binary files /dev/null and b/docs/examples/example0/example0-1/images/image4.png differ diff --git a/docs/examples/example0/example0-1/images/image5.png b/docs/examples/example0/example0-1/images/image5.png new file mode 100644 index 0000000..3fdd5f3 Binary files /dev/null and b/docs/examples/example0/example0-1/images/image5.png differ diff --git a/docs/examples/example0/example0-1/images/image6.png b/docs/examples/example0/example0-1/images/image6.png new file mode 100644 index 0000000..e813873 Binary files /dev/null and b/docs/examples/example0/example0-1/images/image6.png differ diff --git a/docs/examples/example0/example0-1/images/image7.png b/docs/examples/example0/example0-1/images/image7.png new file mode 100644 index 0000000..9dd478c Binary files /dev/null and b/docs/examples/example0/example0-1/images/image7.png differ diff --git a/docs/examples/example0/example0-1/images/image8.png b/docs/examples/example0/example0-1/images/image8.png new file mode 100644 index 0000000..f4256b3 Binary files /dev/null and b/docs/examples/example0/example0-1/images/image8.png differ diff --git a/docs/examples/example0/example0-1/images/image9.png b/docs/examples/example0/example0-1/images/image9.png new file mode 100644 index 0000000..6e98717 Binary files /dev/null and b/docs/examples/example0/example0-1/images/image9.png differ 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 new file mode 100644 index 0000000..eba8c35 --- /dev/null +++ b/docs/examples/example0/example0-1/vibe-coding-tools-snake-game-tutorial.md @@ -0,0 +1,306 @@ +本文介绍了一种新兴的软件开发实践——“Vibe Coding（氛围式编码）”，它利用人工智能来加速应用构建过程。 + +接下来我们将依次介绍 Vibe Coding 的核心概念、解释什么是 AI Agent，并给出实用的提示词编写方法。最后，会通过从零开始构建“贪吃蛇（Snake）”游戏的完整实战，并对多个主流 Vibe Coding 平台进行详细对比评测，帮助你选择最适合自己的工具组合。 + +### **你将学到：** + +* **什么是 Vibe Coding：** 了解它的定义、工作流和关键优势。 +* **AI Agent 的角色：** 理解 AI Agent 的工作方式，以及它与传统程序的差异。 +* **如何写好提示词：** 掌握清晰、具体的提示词写法，以获得更好的结果。 +* **Vibe Coding 工具：** 认识一批主流的 AI 编程与设计平台。 +* **平台对比：** 从初学者视角出发，对 7 个不同 AI Agent 平台的优劣势进行评测与对比。 +* **UI / UX 工具：** 学会如何将 Figma、Mastergo 等 UI/UX 工具融入到整体工作流中。 + +1. # 引言 + +在此前的课程中，我们一直使用 z.ai 的全栈开发模型来完成编程任务。 + +不过，我们是否想过：它的核心其实是 “AI Agent”（与普通聊天式 AI 不同，而且要智能得多）？这是因为它不只是和你对话，而是能够进行思考（当你给它任务时，它会先制定计划），还能主动采取行动（比如调用网页搜索、执行电脑命令、打开网页等工具）。我们稍后会详细介绍。 + +1. ## 什么是 Vibe Coding？ + +Vibe Coding 是一种利用 AI 加速应用开发流程的新型软件开发方式。它并不是传统编程的替代品，而是一种更加“对话式”的编程模式。这个概念由 AI 研究者 Andrej Karpathy 提出：在这种工作流下，开发者不再逐行手写代码，而是主要通过引导 AI Agent 来生成、优化和调试应用。 + +Vibe Coding 的核心思想，是从 **“以代码为中心（code-first）”** 转变为 **“以意图为中心（intent-first）”**。你不再需要从第一行代码开始构思，而是用自然语言描述你想要的结果。 + +典型的 Vibe Coding 工作流程是一个不断迭代的循环： + +* **描述目标：** 先用一句话或一段话描述你想要实现的功能，例如：“做一个带有 Python 后端、可以生成诗歌的简单贪吃蛇游戏。” +* **AI 生成代码：** AI Agent 解析你的需求，生成初版代码，包括基本结构、前端页面和后端逻辑。 +* **运行并观察：** 运行生成的代码，检查其是否按预期工作，同时发现 bug 或不足之处。 +* **反馈并迭代：** 如果有错误或效果不理想，就在对话中继续下指令，例如：“蛇移动太慢了，把速度调快些”，或者“现在 `.env` 文件里的 API Key 没被正确读取，请修复后端代码。” +* **重复上述步骤：** 不断在“描述 → 生成 → 运行 → 反馈”的循环中迭代，直到应用达到满意的状态。 + +### Vibe Coding 的主要优势： + +* **降低门槛：** 让缺乏编程经验的设计师、创业者、学生等，也可以通过自然语言参与应用开发。 +* **快速原型：** 从想法到最小可行产品（MVP）的时间大幅缩短。 +* **提高效率：** 自动处理大量重复、机械的编码工作（如模板代码），让开发者可以把精力放在架构设计和问题抽象上。 +* **利于试验：** 鼓励先快速产出，再不断完善的方式，更便于尝试新点子和新功能。 + +--- + +2. ## 什么是 AI Agent？ + +### 什么是 AI Agent？ + +AI Agent 是一种软件系统，它能够感知环境、做出决策，并自主采取行动来实现特定目标。与遵循固定指令、流程单一的传统软件相比，AI Agent 更加灵活和自适应。 + +下面是一些将 AI Agent 与传统程序区分开的关键特征： + +* **自主性（Autonomy）：** AI Agent 具有较高的独立性。传统程序通常需要人一步一步触发，而 Agent 可以根据目标自主决定下一步要做什么。 +* **感知与记忆（Perception & Memory）：** Agent 会从环境中收集数据（例如 API 响应、传感器数据、用户输入等），并通过“记忆”保留上下文，从而在后续行动中复用经验、持续改进效果。 +* **理性与目标导向（Rationality & Goal-Orientation）：** Agent 会围绕给定的目标进行分析与规划，选择最合适的行动序列来追求更高的“绩效指标”。 +* **工具使用（Tool Use）：** 现代 AI Agent 的一大特征，是可以调用外部工具，不再局限于“生成文字”。例如，它可以浏览网页、运行代码、查询数据库、发送邮件等，是一个会“调度工具”的大脑。 + +可以这样类比理解： + +* 一个 **传统程序** 像是计算器。你给它输入数字和运算符，它只在你按下按钮时执行计算。 +* 一个 **AI 助手** 像是人类助理。你让它“帮我找附近的餐馆”，它会给你搜索结果并列出选项，但最后还是由你做决策。 +* 一个 **AI Agent** 则更像是一支自动化研究团队。你只需要给出高层目标（比如“帮我规划一次日本旅行”），它就会分解任务、上网查资料、预定机票酒店（通过 API）、整理日程，最终把结果交付给你，全程几乎不需要你干预细节。 + +--- + +2. # 关于提示词编写 +3. **提示词一次写完好，还是拆成多步更好？** + +很多人会忍不住想直接在一个提示词里，把“做一个完整的全栈应用”一次性说清楚。事实上，当前工具已经足够强大，确实有机会一次性给出一个看上去还不错的结果。但从整体体验和成功率来看，把工作拆成小步骤、按阶段迭代，效果往往会更好，也更不容易陷入“改不动”的死胡同。 + +> **小提示：** 与其期望“一次到位”，不如把大目标拆成一条条可执行的小待办（To-do）。 +> 例如，不要直接说 “build me a Snake game”，而是拆成： +> “1. 先做一个贪吃蛇游戏的前端”， +> “2. 再实现一个记录分数的后端”， +> “3. 最后把前后端连起来”。 +> 这样能让 AI 更准确地理解你的需求并给出更可靠的输出。 + +2. **越清晰，越好** + +* 在 Vibe Coding 中，你写的提示词和你写的代码一样重要。提示越清晰、越具体，结果就越接近你心中所想。 +* 一开始就把目标与约束条件说清楚，可以减少后续反复修改的次数，这不仅省时间，也能节省使用额度和成本。 + +--- + +3. # 工具总览（Vibe Coding / UIUX 工具） +4. ### 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 | +5. ### AI UIUX 平台 + + | **Name** | **Platform** | + | ---------------------------------------- | -------------------- | + | **[Mastergo](https://mastergo.com/)** | Web-based | + | **[FIgma](https://www.figma.com/)** | Web-based, PC Plugin | + +--- + +4. # 实战教程（Vibe Coding + UI 结合） +5. 在你准备进行 Vibe Coding 的平台聊天窗口中，输入你想要的程序描述。 + 示例： + + > 请构建一个带前端和后端的简单贪吃蛇（Snake）网页应用。 + > + > 1. 前端 + > + > - 页面 1：游戏页面 + > + > * 使用键盘控制蛇的移动。 + > * 蛇吃掉的不是食物，而是英文单词。 + > * 页面侧边栏展示已收集单词及其数量。 + > * 游戏结束后，已收集的单词仍然保留，并在新一局中延续。 + > - 页面 2：写诗页面（Make Poem） + > + > * 展示与游戏页面相同的单词列表（数据一致）。 + > * 提供一个按钮，将当前收集的单词发送给后端生成一首诗。 + > * 生成诗歌后，将被使用到的单词从列表中移除或递减计数。 + > + > * 添加简单的导航，在 Game 和 Make Poem 两个页面之间切换。 + > * 确保收集到的单词在两个页面中都能看到。 + > + > 2. 后端 + > + > * 提供一个后端接口，接收收集到的单词并返回一首诗。 + > * 使用 DeepSeek API 生成诗歌。 + > * 将 API Key 存放在 `.env` 文件中，并在 `.gitignore` 中忽略该文件。 + > +6. 输入你的 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 不跟踪它。 + * 这样一来，你的项目仍然可以在本机正常使用这些密钥，但不会在仓库中泄露。 +7. 查看生成结果后，如果发现错误或有需要修改的地方，可以直接在聊天窗口中输入你的修改请求。 +8. 如果你对页面设计不满意，也可以选择在 Figma 或 Mastergo 中重新设计界面，再把设计思路反馈给 Agent。 + +* **示例** + +> 请设计一个名为 *Word-Snake* 的 **双页面 Web 应用**。 +> +> * **Game 页面：** +> * 蛇通过键盘控制移动。 +> * 蛇吃掉的是英文单词，而不是普通食物。 +> * 右侧面板展示已收集单词及数量。 +> * 游戏结束后，单词库存不会清空，在新一轮中继续使用。 +> * **Make Poem 页面：** +> * 展示同一份共享单词库存。 +> * 用户选择部分单词并点击 **Generate Poem** 按钮。 +> * 将这些单词发送给后端，由 DeepSeek API 生成一首诗。 +> * 生成诗歌后，从库存中删除或减少被使用的单词。 +> * **导航：** 通过简单的 Tab 或顶部菜单在两个页面之间切换。 +> * **共享状态：** 确保收集到的单词在两个页面始终保持同步可见。 + +* **效果示例** + +![](images/image1.png)![](images/image2.png) + +--- + +5. # AI Agent 平台对比（如何为简单项目选最佳组合） + +不同的 Vibe Coding 平台各有特色和工作流。我们使用同一套“带 DeepSeek API 的贪吃蛇游戏”需求，在多个平台上进行实测，从初学者的角度评估它们的优劣。以下是总结。 + +1. ## 对比标准 +2. **目标（Goal）** + 构建一个接入 DeepSeek API 的贪吃蛇（Snake）网页应用。 +3. **游戏细节（Game Details）** + + 1. 游戏通过 DeepSeek LLM API 生成诗歌。 + 2. 蛇吃掉的是英文单词，收集到的单词会在游戏结束后保留，并在新一局中继续使用。相同单词可以被多次收集，并分别计数。 + 3. 当生成一首诗后，被使用到的单词会从库存中移除。 +4. **必备功能（Must-Haves）** + + 1. 一个可运行的前端页面，包含贪吃蛇游戏（键盘控制、Canvas 渲染）。 + 2. 单词收集机制（单词出现在棋盘上，蛇吃掉单词后，侧栏列表更新）。 + 3. 在多轮游戏之间保持单词库存的持久化。 + 4. 使用 DeepSeek API 的后端（如果没有 API Key，可以先返回模拟诗歌）。 + 5. “生成诗歌”按钮：点击后调用后端，显示诗歌，并根据使用情况更新单词库存。 + 6. 对 API Key 的 `.env` 支持，以及通过 `.gitignore` 避免密钥泄漏。 +5. **加分项（Nice-to-Haves）** + + 1. 用户可以选择要用哪些词来生成诗歌。 + 2. 用户体验友好（例如侧边栏清晰展示单词列表、诗歌展示区布局合理）。 + 3. 为初学者在代码中加入注释，解释关键逻辑。 +6. ## 编码输出对比 +7. ### Lovable（Web-based） + +* **平台类型：** Web 端 +* **主要特性与工作流：** Lovable 在集成与协作方面做得很好，它自动完成诸如连接 Supabase 数据库等初始化工作，使项目搭建过程非常顺畅。你只需描述项目需求，Agent 就会帮你把各类服务串联起来，构建好基本结构。 +* **适合的用户：** 对于第一次尝试 Vibe Coding 的新手来说，Lovable 是非常友好的选择。它简化了多服务联动的复杂度，让你可以把注意力集中在提示词与迭代上，而不是环境配置。得益于高度自动化，你能很快得到一个可运行的原型。 +* **提示词过程：** + ![](images/image3.png) +* **贪吃蛇游戏效果：** + +![](images/image4.png)![](images/image5.png) + +* **价格：** 相对偏贵，但如果你有学校邮箱，可以通过学生验证以半价使用。 + ![](images/image6.png) + +2. ### Cursor（IDE） + +* **平台类型：** 桌面应用（PC） +* **主要特性与工作流：** Cursor 是一款集成了 AI 能力的专有 IDE，支持 Windows、macOS 和 Linux。它把代码生成、智能重写、代码库查询等功能直接嵌入在开发环境中。与 Web 工具相比，它更接近传统本地开发体验。由于是本地环境，不同电脑的配置各异，偶尔会遇到环境相关问题。好处是项目就在本机，无需再额外下载或配置运行环境，Cursor 会帮你处理很多繁琐步骤。 +* **适合的用户：** 对已有一定编程基础的用户，Cursor 是一个非常强大又熟悉的环境。但对完全零基础的新手来说，需要自己理解项目结构、依赖管理和文件组织等概念，学习曲线会更陡一些。更适合想在传统编码流程中加入 AI 助手的开发者。 +* **提示词过程：** + ![](images/image7.png) +* **贪吃蛇游戏效果：** + +![](images/image8.png)![](images/image9.png) + +* **价格：** + ![](images/image10.png) + +3. ### Z.ai（Web-based） + +* **平台类型：** Web 端 +* **主要特性与工作流：** Z.ai 的使用方式比较直接，但一个明显的挑战在于：你需要 **手动复制粘贴生成的代码**。平台本身缺少实时预览窗口，因此很难第一时间看到代码运行效果。 +* **适合的用户：** 这个平台要求比较“动手”的使用方式。缺少自动化意味着你必须与代码直接打交道，这对想深入理解 AI 输出内容的人来说反而是种训练。但频繁的复制粘贴会带来效率问题和出错风险。更适合想看“原生 AI 输出代码”的同学，而不是追求一键式体验的人。 +* **提示词过程：** + ![](images/image11.png) +* **贪吃蛇游戏效果：** + +![](images/image12.png)![](images/image13.png) + +* **价格：** + ![](images/image14.png) + +4. ### Replit（Web-based） + +* **平台类型：** Web 端 +* **主要特性与工作流：** Replit 是一体化的在线开发与部署环境，浏览器里就可以写代码、运行程序、生成线上访问地址。开始编码前，它会给出清晰的行动计划；同时还提供可视化编辑器，你可以在预览窗口里直接改 UI，源码会自动同步更新。这样可以让你随时校验 AI 的输出是否符合预期，大幅减少来回修改的次数。 + + ![](images/image15.png) +* **适合的用户：** Replit 对新手十分友好。它简化了从编码到部署的完整闭环，无需自己额外配置服务器或托管服务。协作功能也很强，适合同学之间一起做项目或请他人远程帮忙查看代码。 +* **提示词过程：** 在构建过程中，AI 并不是一开始就完全理解需求，中间经历了大约 3 轮迭代，最终输出才达到了理想效果。 + ![](images/image16.png) +* **贪吃蛇游戏效果：** + +![](images/image17.png)![](images/image18.png) + +* **价格：** + ![](images/image19.png) + +5. ### Minimax（Web-based） + +* **平台类型：** Web 端 +* **主要特性与工作流：** Minimax 在执行任务时通常比较耗时。其流程往往包括：AI 自动发现并修复错误，因此整个过程可能较慢、甚至略显折腾。以本项目为例，Agent 一般会先生成一个详细计划，然后一步步搭建后端、数据库和前端逻辑。 +* **适合的用户：** 由于它会自动运行测试和修复错误，时间与 Token 消耗都比较大，但你可以清楚看到 AI 如何定位并解决问题，从学习角度看很有价值。 +* **提示词过程：** + +![](images/image20.png)![](images/image21.png)![](images/image22.png)![](images/image23.png) + +* **贪吃蛇游戏效果：** + +![](images/image24.png)![](images/image25.png) + +* **价格：** 免费版在复杂项目中很可能无法顺利从头跑到尾，因此更推荐付费升级，以确保项目可以完整构建。 + ![](images/image26.png) + +6. ### Trae（IDE） + +* **平台类型：** 桌面应用（PC） +* **主要特性与工作流：** 作为桌面应用，Trae 相比 Web 工具在性能和响应速度上通常更有优势。但它需要下载安装，对一些用户来说入门门槛稍高。同样地，由于是本地环境，不同电脑配置和依赖环境的差异，会带来一定的不确定性。优势在于，Trae 会帮助你在本地完成项目创建与运行配置，你可以直接在本机开发与调试。 +* **适合的用户：** 更适合计划长期进行 Vibe Coding 项目、并希望使用专门桌面工具的用户。对于只想“偶尔玩一下”的同学，可能不是最轻量的选择。 +* **提示词过程：** + ![](images/image27.png) +* **贪吃蛇游戏效果：** + +![](images/image28.png)![](images/image29.png) + +* **价格：** 价格相对亲民，即便是免费版本，也足以完成质量不错的小项目。 + ![](images/image30.png) + +7. ### V0（Web-based） + +* **平台类型：** Web 端 +* **主要特性与工作流：** V0 是一个专注于生成 React UI 组件的工具，由 Vercel 提供。它在生成高质量、可用于生产环境的界面方面表现出色。但在实际使用中，会遇到诸如“难以找到代码视图”、“没有清晰说明 API Key 应该配置在何处”等问题。 +* **适合的用户：** V0 非常适合专注前端和 UI/UX 设计的学生或设计师。但它并不是完整的全栈解决方案，你仍然需要使用其他平台来实现后端逻辑与 API 集成，因此如果你的目标是“一站式搭建完整应用”，它可能不是最佳首选。 +* **提示词过程：** + ![](images/image31.png) + + ![](images/image32.png) +* **贪吃蛇游戏效果：** + ![](images/image33.png)![](images/image34.png) +* **价格：** 免费用户大约可以构建 4–5 个简单项目。 + ![](images/image35.png) + +3. ## 平台总结对比 + +| `` | **Review** | **Platform** | **Notes** | +| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Lovable** | 对 AI 编程新手非常友好，上手简单、体验顺滑，是理想的入门选择。 | Web-based | 自动完成 Supabase 等服务连接，减少配置成本。 | +| **Cursor** | 适合已有开发经验的用户，大幅提升生产力与代码质量。 | PC | `` | +| **Z.ai** | 更适合有编程基础、想直接研究 AI 输出代码细节的用户。 | Web-based | 无预览窗口，检查结果较麻烦；需要手动粘贴代码、创建文件夹和文件并手动运行服务。 | +| **Repl.it** | 推荐给想快速把点子变成可访问在线服务的用户。 | Web-based`` | `` | +| **Minimax** | 适合希望看到 AI 自动查错与修复全过程、并从中学习的人，但整体较慢且耗费 Token。 | Web-based | 整个过程较长，AI 会多次自动运行测试并修复错误。 | +| **Trae** | 针对有编程经验、希望使用桌面 IDE + AI Agent 组合的用户，是提升效率的有力工具。 | PC | `` | +| **V0** | 为想快速做出 React UI 视觉效果的非开发者进行了优化，适合前端 / 设计向的学生。 | Web-based | `` | diff --git a/docs/examples/example0/example0-2/images/image1.png b/docs/examples/example0/example0-2/images/image1.png new file mode 100644 index 0000000..6fdf2b2 Binary files /dev/null and b/docs/examples/example0/example0-2/images/image1.png differ diff --git a/docs/examples/example0/example0-2/images/image10.png b/docs/examples/example0/example0-2/images/image10.png new file mode 100644 index 0000000..bd109a4 Binary files /dev/null and b/docs/examples/example0/example0-2/images/image10.png differ diff --git a/docs/examples/example0/example0-2/images/image11.png b/docs/examples/example0/example0-2/images/image11.png new file mode 100644 index 0000000..9bae06a Binary files /dev/null and b/docs/examples/example0/example0-2/images/image11.png differ diff --git a/docs/examples/example0/example0-2/images/image12.png b/docs/examples/example0/example0-2/images/image12.png new file mode 100644 index 0000000..3d8eb2d Binary files /dev/null and b/docs/examples/example0/example0-2/images/image12.png differ diff --git a/docs/examples/example0/example0-2/images/image13.png b/docs/examples/example0/example0-2/images/image13.png new file mode 100644 index 0000000..820d58e Binary files /dev/null and b/docs/examples/example0/example0-2/images/image13.png differ diff --git a/docs/examples/example0/example0-2/images/image14.png b/docs/examples/example0/example0-2/images/image14.png new file mode 100644 index 0000000..c928ba4 Binary files /dev/null and b/docs/examples/example0/example0-2/images/image14.png differ diff --git a/docs/examples/example0/example0-2/images/image15.png b/docs/examples/example0/example0-2/images/image15.png new file mode 100644 index 0000000..a6c6d68 Binary files /dev/null and b/docs/examples/example0/example0-2/images/image15.png differ diff --git a/docs/examples/example0/example0-2/images/image16.png b/docs/examples/example0/example0-2/images/image16.png new file mode 100644 index 0000000..f8789b9 Binary files /dev/null and b/docs/examples/example0/example0-2/images/image16.png differ diff --git a/docs/examples/example0/example0-2/images/image17.png b/docs/examples/example0/example0-2/images/image17.png new file mode 100644 index 0000000..ce8ea89 Binary files /dev/null and b/docs/examples/example0/example0-2/images/image17.png differ diff --git a/docs/examples/example0/example0-2/images/image18.png b/docs/examples/example0/example0-2/images/image18.png new file mode 100644 index 0000000..d420e5a Binary files /dev/null and b/docs/examples/example0/example0-2/images/image18.png differ diff --git a/docs/examples/example0/example0-2/images/image19.png b/docs/examples/example0/example0-2/images/image19.png new file mode 100644 index 0000000..a18a5b0 Binary files /dev/null and b/docs/examples/example0/example0-2/images/image19.png differ diff --git a/docs/examples/example0/example0-2/images/image2.png b/docs/examples/example0/example0-2/images/image2.png new file mode 100644 index 0000000..be00846 Binary files /dev/null and b/docs/examples/example0/example0-2/images/image2.png differ diff --git a/docs/examples/example0/example0-2/images/image20.png b/docs/examples/example0/example0-2/images/image20.png new file mode 100644 index 0000000..9149778 Binary files /dev/null and b/docs/examples/example0/example0-2/images/image20.png differ diff --git a/docs/examples/example0/example0-2/images/image21.png b/docs/examples/example0/example0-2/images/image21.png new file mode 100644 index 0000000..1b75609 Binary files /dev/null and b/docs/examples/example0/example0-2/images/image21.png differ diff --git a/docs/examples/example0/example0-2/images/image22.png b/docs/examples/example0/example0-2/images/image22.png new file mode 100644 index 0000000..3d4184d Binary files /dev/null and b/docs/examples/example0/example0-2/images/image22.png differ diff --git a/docs/examples/example0/example0-2/images/image23.png b/docs/examples/example0/example0-2/images/image23.png new file mode 100644 index 0000000..fb0157f Binary files /dev/null and b/docs/examples/example0/example0-2/images/image23.png differ diff --git a/docs/examples/example0/example0-2/images/image3.png b/docs/examples/example0/example0-2/images/image3.png new file mode 100644 index 0000000..7397786 Binary files /dev/null and b/docs/examples/example0/example0-2/images/image3.png differ diff --git a/docs/examples/example0/example0-2/images/image4.png b/docs/examples/example0/example0-2/images/image4.png new file mode 100644 index 0000000..ae557f0 Binary files /dev/null and b/docs/examples/example0/example0-2/images/image4.png differ diff --git a/docs/examples/example0/example0-2/images/image5.png b/docs/examples/example0/example0-2/images/image5.png new file mode 100644 index 0000000..db89185 Binary files /dev/null and b/docs/examples/example0/example0-2/images/image5.png differ diff --git a/docs/examples/example0/example0-2/images/image6.png b/docs/examples/example0/example0-2/images/image6.png new file mode 100644 index 0000000..c25f532 Binary files /dev/null and b/docs/examples/example0/example0-2/images/image6.png differ diff --git a/docs/examples/example0/example0-2/images/image7.png b/docs/examples/example0/example0-2/images/image7.png new file mode 100644 index 0000000..c25f532 Binary files /dev/null and b/docs/examples/example0/example0-2/images/image7.png differ diff --git a/docs/examples/example0/example0-2/images/image8.png b/docs/examples/example0/example0-2/images/image8.png new file mode 100644 index 0000000..54c6c3d Binary files /dev/null and b/docs/examples/example0/example0-2/images/image8.png differ diff --git a/docs/examples/example0/example0-2/images/image9.png b/docs/examples/example0/example0-2/images/image9.png new file mode 100644 index 0000000..4759fb0 Binary files /dev/null and b/docs/examples/example0/example0-2/images/image9.png differ 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 new file mode 100644 index 0000000..e1750b9 --- /dev/null +++ b/docs/examples/example0/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md @@ -0,0 +1,330 @@ +1. # 入门指南 +2. ## 教程简介 + +让我们使用 AI 设计 Agent 和编码 Agent，从零开始搭建一个完整的网站。 + +* **设计 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 + +--- + +2. # 使用设计 Agent 创建 Logo +3. ## 设计 Logo 时需要考虑的关键要素 + +Logo 是决定你网站第一印象的关键元素之一。想要从 AI 设计 Agent 那里获得满意的结果，你需要在提示中清楚地描述你想要的 Logo 类型。 + +1. **品牌名称 / 文本** + +* 必须出现在 Logo 中的文字（例如：网站标题、品牌名称等）。 + +2. **风格（情绪 / 气氛）** + +* Logo 想要传达的整体感觉或氛围。 +* *示例：极简、可爱、简洁、现代、复古、未来感等。* + +3. **配色方案**（可选） + +* 最好让 Logo 的配色与整个网站的整体基调相匹配。 +* 可以指定具体的十六进制色号，或大致的色调（冷色、暖色等）。 +* *示例：**`#171721`**（黑色）、**`#FF7130`**（橙色）。* + +4. **形式（形状 / 结构）** + +* 明确 Logo 是否需要特定的形状或构图。 +* *示例：文字在圆形内部、图标 + 文字组合、以图标为主的 Logo 等。* + +5. **图标 / 符号元素**（可选） + +* 希望出现在 Logo 中的图形或符号。 +* *示例：书本图标、闪电符号、与 AI 相关的图形、抽象几何图形等。* + +2. ## 编写 Logo 设计提示词 + +**示例提示词** + +```Plain +"请为我设计一个极简风格的 Logo，品牌名称是 ‘My First Website’。 +使用黑色 (#171721) 和橙色 (#FF7130)，并将文字放在一个圆形内部。" +``` + +```Plain +"请设计一个以 ‘AIID’ 为品牌名的 Logo。 +整体风格要未来感、干净简洁，主色为蓝色与白色。 +将象征 AI 的抽象图形与文字相结合，并导出为带透明背景的 PNG。" +``` + +3. ## 向 Agent 请求设计 + +* 输入上述提示词 → 比对 Agent 生成的多个设计稿。 + +![](images/image1.png)![](images/image2.png) + +4. ## 确定最终 Logo + +* 从草稿中选择你最喜欢的版本并下载。 + +--- + +3. # 规划你的网站结构 +4. ## 了解基础版块 + +在真正开始制作网站前，先规划好要包含哪些菜单（版块）非常重要。菜单的设计取决于你希望访客看到什么、以及你希望他们采取什么行动。 +一般来说，网站通常由 **Home / About / Contact** 等基础版块构成。 + +2. ## 自己先画一个结构草图（可选） + +你可以先根据网站的目标，大致写出一个简单的菜单结构。 + +### 基础菜单 + +1. **Home** + 1. 访客进入网站后首先看到的主页面 + 2. 通常包含 Logo、主视觉区域和一句简短的标语或简介 +2. **About** + 1. 介绍你是谁，或者项目 / 服务的目的 + 2. 个人作品集：自我介绍 + 简短履历 + 3. 服务类网站：愿景、目标以及核心功能 +3. **Contact** + 1. 联系方式，如邮箱、电话号码、社交媒体链接等 + 2. 也可以加入一个简单的联系表单 + +### 可选菜单 + +4. **Services / Projects** + + 1. 展示你提供的服务，或你的项目 / 作品集 + 2. 通常以列表或卡片形式展示 +5. **Gallery** + + 1. 用于展示图片、照片或设计作品 +6. **Blog / News** + + 1. 用于发布文章、动态或日志 +7. **FAQ** + + 1. 整理访客经常会问的问题及解答 +8. ## 选择配色方案（可选） + +如果你已经有了 Logo，或者想用特定的颜色搭配来设计网站，也可以直接在提示词中写上你想使用的颜色代码。 + +**示例：** `#171721, #872B97, #FF7130, #FF3C68` + +即使你暂时想不到配色方案，也可以通过配色网站或搜索关键词来找到灵感。 + +* **配色参考网站** + * https://colorhunt.co/ + * https://coolors.co/ + +![](images/image3.png)![](images/image4.png) + +* **在 Google 上通过关键词搜索配色** + +![](images/image5.png) + +4. ## 编写网站设计提示词 + +**示例提示词** + +```Plain +"请设计一个由 Home、About、Contact 三个版块构成的单页网站。 +使用配色 #171721、#FF7130 和 #FF3C68。 +整体风格要现代、简洁。" +``` + +--- + +4. # 使用设计 Agent 设计网站 +5. ## 输入提示词 → 生成设计稿 + +* 在提示词中写出你规划好的结构以及选定的配色。 + +**Mastergo 提示词示例** + +![](images/image6.png)![](images/image7.png) + +2. ## 审阅设计稿并提出修改意见 + +你可以根据自己的需求，向 Agent 提出反馈，例如： + +* “太花哨了，整体风格改得更简洁一些。” +* “换一种字体。” +* “调整一下颜色搭配。” +* “把这里这一块删掉。” + +![](images/image8.png) + +3. ## 确定最终设计 + +当你对设计稿进行多轮修改并满意之后，就可以把这个设计转化为代码，让编码 Agent 能理解并继续工作。 + +将设计转为代码的方式会因平台而异，但通常是在设计平台中安装并使用某些插件来完成。 + +**Mastergo 示例** + +1. 打开 [Mastergo 插件网站](https://mastergo.com/community/plugin)，搜索 **seal**。 + +![](images/image9.png) + +2. 回到设计页面，点击 **方块图标（插件）**。 + +![](images/image10.png) + +3. 选中你想转换为代码的设计区域，点击 **Generate** 按钮生成代码。 + +![](images/image11.png) + +--- + +5. # 使用编码 Agent 搭建网站 +6. ## 理解 HTML/CSS/JS 的基础概念 + +一个网站本质上由三种语言构成： + +* **HTML（HyperText Markup Language）** → 结构（骨架） +* **CSS（Cascading Style Sheets）** → 样式（外观） +* **JavaScript（JS）** → 功能（交互） + +这三者配合在一起，构成我们看到的完整网页。 + +1. **🏗️ HTML（结构）** + +* 定义页面中“展示什么” +* 用来放置文本、图片、按钮、链接等元素 +* 类似于建筑物的 **墙体和框架** + +**示例** + +```HTML +

Hello!

+

This is my first website.

+Contact +``` + +2. **🎨 CSS（样式）** + +* 决定“内容怎样展示” +* 控制文字大小、颜色、间距、背景、按钮形状等 +* 让 HTML 有了“衣服”和视觉风格 + +**示例** + +```CSS +h1 { + color: #FF7130; /* Text color */ + font-size: 36px; /* Font size */ + text-align: center; /* Center alignment */ +} + +body { + background-color: #171721; /* Background color */ + color: white; /* Default text color */ +} +``` + +3. **⚙️ JavaScript（JS）（功能）** + +* 让网页能够和用户互动 +* 可以实现按钮点击、菜单展开、图片轮播、表单提交等动态效果 +* 如果说 HTML/CSS 是静态的骨架和外观，那么 JS 就是让网页“活起来”的 **大脑** + +**示例** + +```JavaScript +function showAlert() { + alert("The button has been clicked!"); +} +``` + +```HTML + +``` + +2. ## 让编码 Agent 生成代码 + +**示例提示词** + +```Plain +"请为一个包含 Home、About 和 Contact 版块的单页网站编写 HTML 和 CSS。 +使用配色 #171721、#FF7130、#FF3C68。 +背景为黑色，文字为白色。" +``` + +![](images/image12.png) + +3. ## 运行网站 + +当草稿代码生成后，Agent 通常会自动启动项目，并展示生成好的网站页面。 + +如果你重新启动了 Agent，或者网站画面没有出现，可以输入类似这样的提示： + +```Plain +"Please activate the project" +``` + +让 Agent 重新启动项目并打开预览页面，方便你查看当前的效果。 + +4. ## 进行简单修改 + +你可以继续通过自然语言对草稿进行微调，例如： + +* “把按钮做大一点。” +* “字体粗一点。” + +![](images/image13.png)![](images/image14.png) + +5. ## 修改网站文案内容 + +Agent 生成的初版网站，通常会包含一些自动生成的占位文本。为了让它更贴近你的真实场景，你可以提前准备好实际内容，再让 Agent 帮你替换。 + +**应用示例**：更新 AIID 网站的 About 页面 + +1. 先写好你想在 About 页面展示的内容。为了方便 Agent 理解，可以将内容保存为 Markdown 格式。 + +![](images/image15.png) + +2. 然后在对话中告诉 Agent，将该文件中的内容应用到指定页面上。 + +![](images/image16.png) + +3. 查看应用内容后的更新版本。 + +![](images/image17.png) + +6. ## 插入图片 + +如果你想加入特定图片（例如 Logo、背景图等），可以先把图片上传到项目文件夹中，然后在提示词里说明要在页面的什么位置使用这些图片。 + +* **示例：** + +![](images/image18.png)![](images/image19.png)![](images/image20.png) + +* **结果：** + +![](images/image21.png) + +--- + +6. # 将设计与代码整合 +7. ## 将设计文件与网站代码整合（可选） + +当你从设计 Agent 那里下载到了代码文件后，可以把它们移动到当前项目目录中，然后请编码 Agent 帮你将这些设计代码与现有项目进行合并。 + +* **示例：** + +![](images/image22.png) + +* **结果：** + +![](images/image23.png) diff --git a/docs/index.html b/docs/index.html index 661e469..2c45519 100644 --- a/docs/index.html +++ b/docs/index.html @@ -127,6 +127,8 @@ 'extra/extra5/extra5-what-is-rag-and-how-does-it-work-and-future.md', 'extra/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications.md', 'extra/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development.md', + 'examples/example0/example0-1/vibe-coding-tools-snake-game-tutorial.md', + 'examples/example0/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md', 'examples/example1/example1-how-to-build-a-wechat-miniprogram.md' ], placeholder: '🔍 搜索', @@ -226,4 +228,4 @@ - \ No newline at end of file +