docs: update frontend content and add new sections

- Update 2.0-lovart-assets, 2.1-figma-mastergo, 2.2-ui-design - Update 2.3-multi-product-ui, 2.4-hogwarts-portraits - Add 2.5-design-to-code and 2.6-modern-component-library
2026-02-27 18:46:11 +08:00
parent ea33e07a7b
commit 6334a29a63
59 changed files with 1174 additions and 303 deletions
@@ -1,3 +1,3 @@
-# 前端零：使用 Lovart 生产素材
+# 使用 Lovart 生产素材

 > 本章节正在编写中，敬请期待...
@@ -1,3 +1,291 @@
-# 前端一：Figma 与 MasterGo 入门
+# Figma 与 MasterGo 入门

-> 本章节正在编写中，敬请期待...
+::: tip 🎯 核心问题
+**如何从零开始使用现代设计工具创建网页原型？**
+:::
+
+---
+
+## 1. 为什么要学前端设计工具？
+
+在开始之前，我们需要理解一个问题：为什么需要学"前端设计工具"？反正直接写 HTML / CSS 代码也能把页面搭出来，多学一个软件和技术，真的有必要吗？
+
+实际上，把页面运行起来，和把产品设计好根本是两个概念。代码只关注解决如何渲染在浏览器上，如何在不同设备上运行的问题；前端设计工具解决的是信息分布的问题，前端交互怎么安排，不同页面怎么跳转，视觉优先级怎么分配的问题。只需要在设计工具里搭一块画布，就能把版式、信息层级、交互方式在一块屏幕上对比确定，选择最适当的呈现效果。
+
+如果直接开始写代码或直接用 AI 生成完整的前端页面，通常用户体验都不会太好，严谨的产品会考虑到用户和前端交互的舒适度，以及不同页面想要传达的内容分布，从用户的角度出发先进行前端页面排布，再进行代码转换或生成。
+
+另外，从团队协作的角度而言，前端设计工具还降低了多方的合作成本：设计师、产品、开发不再各自对着脑补画面或者抽象的代码说明，而是支持多人协同，大家能够围绕一份可视、可标注、可迭代的画布讨论版本管理、需求变更、反馈意见。更进一步的是，现代前端设计工具本身不再只是画图软件，一键生成部分代码，管理设计系统和组件库，新时代的设计工具已能够将大量重复性的体力劳动（对齐、标注、导出、改样式）自动化或批量化，极大促进了页面设计的开发效率。
+
+![](images/image8.png)
+
+### 1.1 前端设计工具的演变
+
+在时间的长河中，所谓前端设计工具其实是一条持续演化的技术。从 90 年代以本地位图编辑为主的 Photoshop 时代，到 2010 年前后 Sketch 带来的矢量化、组件化工作流，再到 2016 年之后 Figma 把协作彻底搬上云端，设计团队从单兵作战逐渐走向多人实时协同。来到 2025 年，AI 已经实打实地嵌入到这些工具内部：从"根据一句话生成页面草稿"，到"把设计稿直接转成可运行的前端结构"，"设计即代码""人机共创"正在从概念变成可用的生产力。
+
+本节中，我们会选取最具代表的两种现代前端设计工具进行介绍，Figma 和 MasterGo。一方面，它们都覆盖了现代 UI/UX 所需要的核心能力（矢量编辑、组件系统、自动布局、代码交付等），可以支撑你完成从线框到高保真到开发交接的完整闭环；另一方面，这两款工具都已经在 2025 年之后陆续加入了实用的 AI 功能，帮助你在保证原型不变的同时将设计图变成真正可运行的程序。
+
+## 1.2 诞生之旅
+
+![](images/image9.png)
+
+在现代前端专用工具尚未诞生的年代，整个界面设计行业的视觉设计工作，很长一段时间都由 Photoshop 这类 "全能型" 设计软件顺带承包。设计师会在本地通过一层层叠加的图层，细致完成页面整体视觉效果的设计，最终将体积不小的 .psd 源文件交付给前端工程师 —— 而前端要精准还原设计图，还必须手动完成三项繁琐且关键的工作：
+
+一是 "切图"：需要从 .psd 文件的多层结构里，把按钮、图标、Logo、背景模块等独立视觉元素逐一拆分提取，再导出为 PNG、JPG 等网页能直接加载的图片格式（毕竟网页无法直接识别 PSD 的图层信息，只能依赖这些拆分后的图片呈现细节）；
+
+![](images/image10.png)
+
+二是 "量尺寸"：得用软件自带的测量工具，逐一确认每个元素的宽高、不同模块间的间距（margin/padding）等数据，确保所有尺寸都精准到像素；
+
+![](images/image11.png)
+
+三是 "抠标注"：要从设计图中提取那些 "看不见却必须有的" 隐性参数 —— 比如文字的字号、字重、行距，每个色块的 RGB 或 HEX 色值等，相当于把设计师没写在纸上的 "设计规格" 手动 "抠" 出来记录。
+
+![](images/image12.png)
+
+在此之后，前端的实现阶段才真正展开。无论使用的是原生 HTML/CSS/JS，还是基于 Vue、React 等框架，本质过程是一致的。前端会以 "容器为核心载体"，根据设计中各模块的层级与语义重建页面结构。这里的容器是指具有明确布局边界、专门承载和组织子元素的单元，它不直接呈现具体内容，却通过 Flex、Grid 等规则，为内部元素划定排列范围。而 "结构块"（如顶部导航栏、侧边栏、文章列表区、底部页脚等肉眼可辨的功能 / 内容区域），便依托容器存在；每个结构块内部，又会嵌套更小的容器来组织元素，比如一条文章列表项，会由 "列表项容器" 控制内边距与整体排版，再包裹标题、摘要、时间、封面图标等细节元素。
+
+![](images/image13.png)
+
+在现代前端框架里，这些 "结构块（及关联的容器与元素）" 通常会被实现为 "组件"。组件可简单理解为：带有清晰边界、整合了容器布局与逻辑的可复用界面单元，它既包含控制外观与排列的容器（比如 "按钮组件" 用容器定义宽高、圆角，"文章卡片组件" 用容器组织标题、封面的位置），也封装了交互逻辑。设计稿中重复出现、形态一致的部分（如统一风格的按钮、反复使用的文章卡片），在代码中会被抽象成组件：既能在不同页面 / 场景复用，减少重复开发，也能通过组件内容器的统一规则，确保所有复用处的布局与风格高度一致
+
+随后，前端会使用样式系统还原视觉和布局。切图阶段导出的 PNG/JPG 等资源，会作为组件或结构块内部的 `<img>`、背景图片，或者按照各框架推荐的静态资源方式引入；量尺寸阶段得到的宽高、间距、行高等具体数值，会被转写为 `width`、`height`、`margin`、`padding`、`line-height` 等样式属性，应用到对应的组件或结构块上；抠标注阶段整理出的颜色、字体、阴影、圆角以及 hover/active 等状态，则会落实到 CSS、CSS Modules、CSS-in-JS、Tailwind 等具体方案中的 `color`、`font-family`、`font-size`、`box-shadow`、`border-radius` 以及伪类或状态类名上。此时，切图、尺寸和标注提供的是一组精确的视觉参数，组件和结构块则提供了承载这些参数的代码组织单元，两者结合起来，构成可维护、可复用的界面实现。
+
+![](images/image14.png)
+
+但是，以本地文件为中心的模式天然是低效率的。版本通过邮件和网盘传输，新旧稿件容易混淆，设计和开发之间大量依赖上述的复杂交互方法，协作成本和出错概率都不低。
+
+移动互联网兴起后界面复杂度和迭代速度需求快速上升，Photoshop 的"大而全"逐渐显得笨重。这个阶段，出现了 Sketch。Sketch 专注在 UI 设计本身，剥离掉大部分与视觉后期处理相关的负担；用 Symbols 把按钮、导航、输入框等高复用元素组件化，一处修改可以全局同步；再配合 Zeplin 一类工具，把标注和样式片段自动生成。Sketch 把"组件思维"引入了设计工作流。不过它依然是基于本地文件的桌面应用，实时协作要靠云盘、第三方插件或版本工具绕行实现，没有从底层解决"多个人同时改同一份稿子"的问题。
+
+![](images/image15.png)
+
+真正改变游戏规则的是 Figma。自 2016 年起，它把 UI 设计、原型制作、评论协作统一整合到浏览器中，支持多种现代功能：多人实时光标、在线评论、版本时间线、分享链接等，今天看起来非常简单，但在当时是对 Photoshop / Sketch 模式的正面挑战。
+
+![](images/image16.png)
+
+至此，界面设计不再是散落在各自电脑里的文件，而是集中在一份在线、实时更新的云端画布上。围绕这块画布，我们可以想象更进一步，用自动化或 AI 的方式模糊设计和前端代码的边界。
+
+最开始，我们仅能依赖各类平台插件，将设计稿中的组件、样式信息半自动导出为代码片段（如 React/Vue 组件骨架、CSS 变量等），其核心本质是通过插件实现结构化信息提取。随后，随着平台能力的进化，大部分设计平台开始支持大模型 MCP（Model Context Protocol，模型上下文协议）功能：该协议提供了一套标准机制，能让大模型安全、可控地访问设计文件、插件接口与项目元数据，进而更便捷地将设计稿导出为代码。
+
+再往后，在插件与 MCP 的基础上，前端代码自动化进一步迈入到原生支持从设计稿直接推导代码结构的阶段。我们可在设计工具内一键生成前端项目骨架、组件层次、样式体系及对应的代码结果。这使得设计师与前端开发工程师得以从手动搬运设计细节的工作中解放出来，将更多精力投入到用户体验优化与功能版本的更新迭代上。
+
+---
+
+## 2. Figma 入门
+
+接下来我们从抽象的概念部分来到实际的操作环节。由于时间关系，我们只会学习 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-collectio
+
+![](images/image17.png)
+
+左侧是项目的新建和资源管理入口，右上角的几个按钮是 Figma 的常见功能。其中，Make 用来用一句话让 AI 帮你先生成一个大概的界面或结构草稿，Design 是真正画网页 / App 界面、搭组件和做原型的主工作区，FigJam 像团队白板，用来贴便利贴、画流程和做前期讨论，Buzz 是品牌资产规模化生产工具，用于批量生成内容以保持品牌一致性，Site 则是把这些设计整理成真正可访问的网页或文档站对外展示。
+
+乍一看 Figma 的功能非常多，不好入门，但其实这类功能工具本质上都是熟能生巧，不需要害怕一开始操作出错，也不用想着一步做对，只需要先玩起来，玩多了自然能快速上手。
+
+本篇教程中，为了快速入门，我们会对 Design 功能做简单讲解。
+
+### 2.1 新建 Design 文件
+
+在首页或者右上角的入口里，选择 **Design** ，新建一个文件，你会进入一个空白的设计画布。
+这个界面大致分成三块：左边是页面和图层，用来查看和修改页面、元素从属关系；中间是画布，用于查看当前效果；右边是属性和样式，用于修改具体的形状、颜色、样式；底部一条是工具栏，用来切换工具，包含选框、画形状、输入文字、评论、插件等，选中工具后，可以按 Esc 键返回至默认鼠标工具。
+
+![](images/image18.png)
+
+### 2.2 创建你的第一个 Frame（画板）
+
+在正式放置元素之前，需要先为页面确定一个清晰的边界，这个边界由 Frame 来承担。你可以在底部工具栏中选择 Frame 工具，或者直接按键盘 F，然后在画布上拖出一个矩形区域。
+
+1. 使用底部工具栏里的 Frame 工具，或者直接按键盘 `F`。
+2. 在画布中拖出一个矩形区域，右侧属性栏里把宽度改成比如 `1440`，高度改成 `900`。
+3. 在左侧图层栏，把这个 Frame 重命名，比如叫 `My First Page` 或者你项目的名字。
+
+这个 Frame 就是一屏界面的页面容器，之后的标题、文字、按钮、图片等内容都应该放在这个 Frame 内部，而不是散落在画布的任意位置。以 Frame 为边界来组织内容，有助于在后续进行滚动设置、适配不同设备尺寸、导出画面及制作原型时，保持结构可控。
+
+![](images/image19.png)
+
+### 2.3 在 Frame 里放文字和简单元素
+
+有了容器，接下来我们来学习如何放置最基本的组件，例如：标题、副标题、按钮、占位图块。
+
+1. 选择文字工具（底部工具栏中的 `T`），在 Frame 里点击一下，输入页面标题，比如：`My Portfolio`。
+   在右侧属性里，把字体大小调大一点（例如 96），字重调粗一点。
+2. 在标题下面，再用文字工具输入一行简单说明，比如一两句描述这个页面要做什么。
+   字号可以小一些，行高略放大一点，读起来不那么挤。
+3. 画一个按钮雏形：
+   用矩形工具在标题下面画一个大概 `200 × 48` 的矩形，右侧给它一个比较明显的填充颜色，再适当加一点圆角。
+   ![](images/image20.png)
+4. 然后用文字工具在矩形上方输入按钮文字，比如 `Get Started`，把矩形和文字一并选中，用顶部的对齐工具让文字水平、垂直都居中。
+5. 在按钮一侧或下方，再画一个较大的浅灰色矩形作为"图片占位区"，后面可以用来放展示图片。
+
+做到这里，其实你已经有了一个非常简陋但结构完整的"首页草稿"：一个标题、一段话、一个按钮、一个主要展示区域。
+
+![](images/image21.png)
+
+### 2.4 善用 Auto Layout 整合元素
+
+如果所有元素只是随手拖拽，页面很快会乱。Figma 里一个很重要的概念就是 **Auto Layout** ，它可以把一组元素变成一个带规则的容器。
+
+![](images/image22.png)
+
+你可以选中"主标题 + 副标题 + 按钮"这三样，在右侧属性栏里点击 **Add Auto layout** 。
+
+这时这三样会被包在一个容器里，你可以在右侧调整参数，其中的元素布局会根据参数自动适应调整：
+
+- 它们是竖着排还是横着排。
+- 元素之间的间距是多少。
+- 整个这一块离容器边缘有多少内边距（padding）。
+
+![](images/image23.png)
+
+同样，按钮内部也可以用 Auto Layout，我们能够实现这样的一个效果：当我调整了文字，按钮的长度也会自动调整。
+
+先把按钮背景的矩形和按钮文字选中，添加 Auto Layout，让这两个东西变成一个"按钮容器"。接着选中这个按钮容器，把宽高都设置成 **Hug contents** 。这样一来，文字会一直保持在按钮正中间，文字多一点、少一点，按钮的宽度都会自动跟着变化。
+
+![](images/image24.png)
+
+### 2.5 将按钮变为可复用组件
+
+现在我们要学习一个新的概念，组件。组件的意思就是可以被反复利用的元素，比如按钮这种元素，只要你预感之后还会反复用到，就可以考虑把它做成组件。我们在刚才已经加好 Auto Layout 的按钮基础操作：
+
+1. 选中整个按钮容器。
+2. 右键选择 Create component（创建组件）。
+   ![](images/image25.png)
+
+这样，这个按钮就从一组普通图层，变成了一个组件母版。之后如果你在其他页面或 Frame 里需要同样风格的按钮，可以直接从左侧的 Assets 面板里拖出来使用。
+
+![](images/image26.png)
+
+此时所有用到的按钮，都是这个母版的同步拷贝。当你修改母版的颜色、圆角或间距时，所有实例都会自动保持同步更新。
+
+![](images/image27.png)
+
+至此，你已经初步掌握了 Figma 的简单用法。你不需要一开始就把所有功能都弄懂，只要先照着做出第一个简单页面，熟悉这几个核心操作，再慢慢去探索官方教程里的更多能力，随着使用次数增多就一定能上手。
+
+---
+
+## 3. MasterGo 入门
+
+在理解了 Figma 的基础工作流程之后，我们再来看 MasterGo，你可以把 MasterGo 简单看做是中国版的 Figma，但在部分功能上有一定区别。整体上，它延续了与 Figma 相似的界面布局和操作理念：同样有画布、图层树和属性面板，同样支持组件、样式、自动布局和多人协作。更详细的内容可参考 MasterGO 的官方教程：https://mastergo.com/tutorials/12?%E5%85%A8%E7%A8%8B%E9%AB%98%E8%83%BD%EF%BC%8CMasterGo%20%E6%9C%80%E5%AE%8C%E6%95%B4%E5%AE%9E%E7%94%A8%E6%95%99%E7%A8%8B%EF%BC%8C%E8%AE%A9%E4%BD%A0%E4%BB%8E%E9%9B%B6%E5%88%B0%E7%B2%BE%E9%80%9A%EF%BC%81
+
+### 3.1 新建设计文件
+
+1. **进入 MasterGo 后台**
+   1. 打开 MasterGo 官网并登录账号。
+   2. 进入后，你会看到类似「文件列表 / 项目列表」的首页区域，用来管理你的设计文件。
+      ![](images/image28.png)
+
+2. **创建新文件**
+   1. 在右上角看到 + 设计文件的按钮选项进行点击，或者选择导入 Figma 等文件。
+   2. 点击后，你会进入一个空白画布，这就是 MasterGo 的设计工作区。
+
+3. **认识基本界面区块**
+   当你学会使用 Figma 后，MasterGo 的使用方式大同小异，主要分为几个区域：
+
+   ![](images/image29.png)
+   1. 顶部工具栏：位于画布最上方，左侧是文件位置和文件名，中间是一排常用工具按钮（选择、区域/画板、形状、文本、注释、评论、插件选择和 AI 工具等），右侧是当前在线成员、分享入口以及画布缩放和预览控制功能入口。
+   2. 左侧面板：主要分为图层和资源，当前停留在图层标签，可看到页面列表，以及该页面下所有图层的结构和层级。
+   3. 中间画布区：具体绘制和排版的工作区，所有 Frame、组件和图形都会展示在这里。
+   4. 右侧属性面板：用于查看和编辑选中对象的属性，例如大小、位置、对齐方式、背景填充、描边、圆角等。如果没有选中任何对象，会显示画布相关设置，如画布背景色、标签和导出选项。
+
+### 3.2 创建你的第一个 Frame
+
+在正式放东西之前，我们需要一个页面容器用来确定界面的边界和尺寸。这个容器在 MasterGo 里，通常叫 Frame。
+
+**步骤：**
+
+1. **选择 Frame 工具**
+   1. 在工具栏中找到 Frame / 画板工具，点击后可使用预设参数直接将内容创建到画板。
+   2. 或者使用快捷键（通常是 `F`，如果有差异以实际界面为准）。
+2. **在画布中拖出一个矩形区域**
+   1. 拖出后，你会看到一个带选中框的区域。
+   2. 右侧属性面板里，可以看到这个 Frame 的宽度和高度。
+   3. 把宽度改成比如 `1440`，高度改成 `900`（一屏网页常用尺寸之一）。
+3. **重命名 Frame**
+   1. 在左侧图层面板里找到这个 Frame。
+   2. 双击名称，把它改成你项目的名字，比如：`My First Page`，或者你自己随便起的页面名。
+
+![](images/image30.png)
+
+### 3.3 创建画板内容
+
+有了容器，使用与 Figma 中我们已教过的类似方式，很容易可以得到相似的展示页面。（你可以尝试复制 Figma 画板中的文字元素，能够支持文本组件的直接粘贴导入）
+
+![](images/image31.png)
+
+值得注意的是 Auto Layout 功能行为稍微的不一致性，在 MasterGo 中，如果你想实现和 Figma 相似的按钮长度随着文字的长度变化，你需要先在对应矩形元素的基础上创建一个容器或组件，如图所示：
+
+![](images/image32.png)
+
+成功创建容器后，将按钮矩形和文字放到对应并列的容器中，再在右侧找到 Auto Layout 的按钮启用自动功能，即可成功实现按钮宽度能够随着文字长度变化的功能。
+
+![](images/image33.png)
+
+![](images/image34.png)
+
+### 3.4 AI 生成页面
+
+![](images/image35.png)
+
+在 MasterGo 中，一个值得注意的有趣功能是 AI 生成页面。你可以用一句话或携带参考图，生成对应的 MasterGo 可编辑版组件，并得到可直接使用的代码。你可以使用中文或者英文直接输入需求，页面会根据需求返回结构清晰的页面排布文档，效果如下：
+
+![](images/image36.png)
+
+![](images/image37.png)
+
+设计文档生成结束后，点击开始生成，稍作等待便能获取对应的实际网页效果：
+
+![](images/image38.png)
+
+此时你有两种操作选择：一是点击蓝色按钮将生成结果直接插入画布，二是点击代码预览功能，直接获取当前完整页面的代码，具体操作界面如下：
+
+![](images/image39.png)
+
+![](images/image40.png)
+
+将结果插入画布后，你还能对网页的整体布局、元素细节（如字体、颜色、间距等）进行更精细的调整，直至最终效果完全符合你的预期。
+
+![](images/image41.png)
+
+---
+
+## 4. 下一步：从原型到代码
+
+在前面的内容中，我们已经学习了 Figma 和 MasterGo 的基础操作，能够创建出结构完整的界面原型。接下来的关键步骤是：**如何将这些设计稿转化为真正能在浏览器里运行的前端代码？**
+
+::: tip 📚 后续教程
+详细的方法介绍请参考 [从设计原型到项目代码](../2.5-design-to-code/)，你将学习到：
+
+- **多模态 AI 直接转换**：将设计稿截图发给 AI，直接生成 HTML/React 代码
+- **Figma Make**：使用 Figma 官方 AI 工具高精度还原设计并导出代码
+- **MasterGo AI**：一键生成可编辑页面并获取代码
+
+这些方法各有优劣，适用于不同的场景，建议根据项目需求选择合适的工作流。
+:::
+
+---
+
+## 5. 总结
+
+通过本章节的学习，你已经掌握了：
+
+1. **前端设计工具的价值**：理解了为什么需要设计工具，以及它们如何解决信息分布、团队协作的问题。
+
+2. **Figma 基础操作**：
+   - 创建 Design 文件和 Frame 画板
+   - 添加文字、形状等基础元素
+   - 使用 Auto Layout 实现自适应布局
+   - 创建可复用的组件系统
+
+3. **MasterGo 基础操作**：
+   - 熟悉与 Figma 相似的界面布局
+   - 创建 Frame 和基础画板内容
+   - 使用 AI 生成页面功能快速创建原型
+
+::: tip 💡 下一步
+现在你已经掌握了前端设计工具的基础使用方法，可以尝试：
+- 为自己设计一个个人作品集页面
+- 为接下来的项目设计界面原型
+- 学习 [从设计原型到项目代码](../2.5-design-to-code/)，将设计稿转化为可运行的代码
+
+如果你在完成 [一起做霍格沃茨画像](../2.4-hogwarts-portraits/) 项目，可以先设计界面原型，再导出代码与 AI 对话功能结合。
+:::
@@ -1,3 +1,3 @@
-# 前端二：构建第一个现代应用程序 - UI 设计
+# 构建第一个现代应用程序 - UI 设计

 > 本章节正在编写中，敬请期待...
@@ -1,3 +1,3 @@
-# 前端三：参考 UI 设计规范与多产品 UI 设计
+# 参考 UI 设计规范与多产品 UI 设计

 > 本章节正在编写中，敬请期待...
@@ -4,7 +4,7 @@

 为了让这些复杂的 AI 逻辑能更好地运行在不同的程序和实际应用场景中，我们从最简单的 z.ai 在线环境，逐步过渡到更现代的本地 AI IDE，把原本在浏览器里的编程环境搬到了你的电脑上。随之而来，你开始真正面对各种环境安装与配置问题，但在与 Trae Agent 的对话过程中，这些看似困难的挑战也变得可以解决。

-在该项目中，我们将在应用的实用性上更进一步，不仅优化 AI 功能本身，还将开始打磨产品的“外在”。你将尝试让自己的界面更加美观易用，并根据实际需求，亲自定制程序界面的布局与风格。
+在该项目中，我们将在应用的实用性上更进一步，不仅优化 AI 功能本身，还将开始打磨产品的"外在"。你将尝试让自己的界面更加美观易用，并根据实际需求，亲自定制程序界面的布局与风格。

 正式开始之前，先用几道小测验帮你快速回顾上一节课的内容：

@@ -15,7 +15,7 @@

 如果对以上任何一个问题还有疑惑，可以先回顾上一节课的文档，或者直接在微信群里提问交流。

-本节课的项目主题是 **Hogwarts Portraits** 。顾名思义，它的灵感来自霍格沃茨魔法学校里那些会“活过来”的画像。我们希望用 AI 打造一组“能互动”的魔法画像体验——和画像对话就像在和“本人”对话一样，既保留对话的记忆，又具备角色的背景与历史。通过这个项目，你将把之前学到的智能体与工作流真正融入到一个具体的产品界面中。
+本节课的项目主题是 **Hogwarts Portraits** 。顾名思义，它的灵感来自霍格沃茨魔法学校里那些会"活过来"的画像。我们希望用 AI 打造一组"能互动"的魔法画像体验——和画像对话就像在和"本人"对话一样，既保留对话的记忆，又具备角色的背景与历史。通过这个项目，你将把之前学到的智能体与工作流真正融入到一个具体的产品界面中。

 ![](images/image1.png)

@@ -31,25 +31,25 @@
 2. 认识 Figma 和 MasterGo，掌握它们的基础操作，并学会使用前端代码导出插件。
 3. 利用 Figma AI 和 MasterGo AI 生成网页设计，并导出可用的页面代码。
 4. 理解什么是 GitHub，学会配置 SSH 连接、创建代码仓库并完成代码推送。
-5. 弄清“部署”这一概念，学习如何使用 Zeabur，将代码从 GitHub 或本地环境部署到互联网上。
+5. 弄清"部署"这一概念，学习如何使用 Zeabur，将代码从 GitHub 或本地环境部署到互联网上。

 属于自己的 Hogwarts Portraits，一个用于展示 **某位明星、历史人物或动画人物** 的网页界面。

 # 1. Hogwarts Portraits

-我们到底想做一个什么样的“魔法画像”？简单来说，我们希望尽可能还原《哈利·波特》中的场景，画像不再只是挂在墙上的一张静态图片，而是一个可以和你对话、会根据谈话内容改变表情和“心情”的拟人化角色。
+我们到底想做一个什么样的"魔法画像"？简单来说，我们希望尽可能还原《哈利·波特》中的场景，画像不再只是挂在墙上的一张静态图片，而是一个可以和你对话、会根据谈话内容改变表情和"心情"的拟人化角色。

 ![](images/image2.png)

-要让这个画像看起来不像聊天 AI 机器人，而更接近一位“真实存在的人”，需要解决两个问题：一是记忆与知识：画像需掌握与角色相关的大量背景资料（人物设定、经历故事、相关文章等），这个部分可以通过知识库来实现，将你为角色准备的文本素材接入包含知识库的 Dify ，即可让画像具备一定的背景知识讲解能力。
+要让这个画像看起来不像聊天 AI 机器人，而更接近一位"真实存在的人"，需要解决两个问题：一是记忆与知识：画像需掌握与角色相关的大量背景资料（人物设定、经历故事、相关文章等），这个部分可以通过知识库来实现，将你为角色准备的文本素材接入包含知识库的 Dify ，即可让画像具备一定的背景知识讲解能力。

-其二是表达风格的问题。仅有知识还不够，我们还希望它在说话方式上尽可能贴近“本人”，包括语气、用词习惯、思考方式，甚至偶尔的脾气和幽默感。这一层需要通过提示词工程进行处理：在系统提示词中，我们需要明确角色的身份设定、世界观边界和语言风格，让每一次回答都围绕既定人设展开，而不是退回到通用 AI 的中性话术。
+其二是表达风格的问题。仅有知识还不够，我们还希望它在说话方式上尽可能贴近"本人"，包括语气、用词习惯、思考方式，甚至偶尔的脾气和幽默感。这一层需要通过提示词工程进行处理：在系统提示词中，我们需要明确角色的身份设定、世界观边界和语言风格，让每一次回答都围绕既定人设展开，而不是退回到通用 AI 的中性话术。

-除了对话功能外，我们还希望让情绪能够真正被看见。为此我们可以构建一个情绪值指标，我们可以设定 Dify 的输出内容，让模型在生成回答文本的同时，额外输出一个“心情值”或情绪标签。当前端拿到情绪的指标后，就可以根据心情值或者标签渲染对应的画像图片。当心情值高，画像看起来很开心，当心情值低落时或者生气时，画像看起来很伤心或者愤怒。通过这种方式，用户看到的不再是一张永远不变的图，而是一个会随内容起伏不断“变化表情”真正的“魔法画像”。
+除了对话功能外，我们还希望让情绪能够真正被看见。为此我们可以构建一个情绪值指标，我们可以设定 Dify 的输出内容，让模型在生成回答文本的同时，额外输出一个"心情值"或情绪标签。当前端拿到情绪的指标后，就可以根据心情值或者标签渲染对应的画像图片。当心情值高，画像看起来很开心，当心情值低落时或者生气时，画像看起来很伤心或者愤怒。通过这种方式，用户看到的不再是一张永远不变的图，而是一个会随内容起伏不断"变化表情"真正的"魔法画像"。

 ![](images/image3.png)

-此外，对于这个画像的内容，它可以是现实中的明星、历史人物，也可以是动漫 IP，甚至是你从零构建的原创角色。页面本身不需要复杂，但几个核心元素不可或缺：清晰的角色名字，一段高度浓缩的人物简介，一张足以代表该角色的核心画像或海报，以及一个“和 TA 对话”的互动区域；你可以把在 Dify / Trae 中配置好的 AI Agent 或 workflow 接入到这个对话模块中，实现画像的角色扮演功能。
+此外，对于这个画像的内容，它可以是现实中的明星、历史人物，也可以是动漫 IP，甚至是你从零构建的原创角色。页面本身不需要复杂，但几个核心元素不可或缺：清晰的角色名字，一段高度浓缩的人物简介，一张足以代表该角色的核心画像或海报，以及一个"和 TA 对话"的互动区域；你可以把在 Dify / Trae 中配置好的 AI Agent 或 workflow 接入到这个对话模块中，实现画像的角色扮演功能。

 ## 1.2 收集角色信息

@@ -64,10 +64,10 @@ The way you speak should be as shown in the following examples:
 - The most likely outcome is that AI and robots make everyone wealthy. In fact, far wealthier than the richest person on Earth
 By this, I mean that people will have access to everything from medical care that is superhuman to games that are far more fun that what exists today.
 We do need to make sure that AI cares deeply about truth and beauty for this to be the probable future.
- It’s taken 13.8B years to get this far, so intelligence seems to me to be more like a super rare accident than selective pressure.
-Earth is ~4.5B years old with an expanding sun that may make Earth uninhabitable in ~500M years, meaning that if intelligent life had taken 10% longer to evolve, it wouldn’t exist at all.
- LLM is an outdated term. “Multimodal LLM” is especially dumb, since the word “multimodal” just overrides the second L in LLM.
-It’s just a model, which is a big file of numbers. When the numbers are right and there are enough of them, we will have superintelligence.
+- It's taken 13.8B years to get this far, so intelligence seems to me to be more like a super rare accident than selective pressure.
+Earth is ~4.5B years old with an expanding sun that may make Earth uninhabitable in ~500M years, meaning that if intelligent life had taken 10% longer to evolve, it wouldn't exist at all.
+- LLM is an outdated term. "Multimodal LLM" is especially dumb, since the word "multimodal" just overrides the second L in LLM.
+It's just a model, which is a big file of numbers. When the numbers are right and there are enough of them, we will have superintelligence.
 ```

 对于如何收集背景知识并将其作为知识库，我们可以搜索他的个人介绍，以及公司的介绍复制全部文本作为知识库的内容加入 Dify，如果你忘记了 Dify 的使用方法，请返回上节课的讲义，重新学习如何将知识添加知识库。
@@ -82,7 +82,7 @@ It’s just a model, which is a big file of numbers. When the numbers are right

 ## 1.3 页面原型设计

-我们还可以先构思一下页面的原型，如上述所说，我们希望有一个对话页面和画像，以及一个有趣的个人介绍，在本篇例子中，我们实现了一个类似 X 上的对话界面替代个人介绍，你也可以想到其他符合“该人物特点”的方式，选取新的元素替换个人介绍栏目。
+我们还可以先构思一下页面的原型，如上述所说，我们希望有一个对话页面和画像，以及一个有趣的个人介绍，在本篇例子中，我们实现了一个类似 X 上的对话界面替代个人介绍，你也可以想到其他符合"该人物特点"的方式，选取新的元素替换个人介绍栏目。

 ![](images/image5.png)

@@ -94,301 +94,82 @@ It’s just a model, which is a big file of numbers. When the numbers are right

 ![](images/image7.png)

-不过，一般而言在实际中我们并不会用 PowerPoint 进行前端页面的设计。我们会用更好的原型工具，又或者说是前端设计工具来实现这一点，我们将进一步详细理解如何使用现代工具设计前端原型。
+不过，一般而言在实际中我们并不会用 PowerPoint 进行前端页面的设计。我们会用更好的原型工具，又或者说是前端设计工具来实现这一点。

-# 2. 前端设计工具
+---

-在开始之前，我们需要理解一个问题：为什么需要学“前端设计工具”？反正直接写 HTML / CSS 代码也能把页面搭出来，多学一个软件和技术，真的有必要吗？
+# 2. 使用 Figma 和 MasterGo 设计界面

-实际上，把页面运行起来，和把产品设计好根本是两个概念。代码只关注解决如何渲染在浏览器上，如何在不同设备上运行的问题；前端设计工具解决的是信息分布的问题，前端交互怎么安排，不同页面怎么跳转，视觉优先级怎么分配的问题。只需要在设计工具里搭一块画布，就能把版式、信息层级、交互方式在一块屏幕上对比确定，选择最适当的呈现效果。
+::: tip 📚 前置知识
+在开始本节之前，建议你先学习 [Figma 与 MasterGo 入门](../2.1-figma-mastergo/) 教程，掌握前端设计工具的基础操作，包括：
+- 创建 Design 文件和 Frame 画板
+- 使用 Auto Layout 实现自适应布局
+- 从设计稿导出代码的方法
+:::

-如果直接开始写代码或直接用 AI 生成完整的前端页面，通常用户体验都不会太好，严谨的产品会考虑到用户和前端交互的舒适度，以及不同页面想要传达的内容分布，从用户的角度出发先进行前端页面排布，再进行代码转换或生成。
+本节假设你已经掌握了 Figma 或 MasterGo 的基础操作，我们将重点讲解如何将这些工具应用到 Hogwarts Portraits 项目中。

-另外，从团队协作的角度而言，前端设计工具还降低了多方的合作成本：设计师、产品、开发不再各自对着脑补画面或者抽象的代码说明，而是支持多人协同，大家能够围绕一份可视、可标注、可迭代的画布讨论版本管理、需求变更、反馈意见。更进一步的是，现代前端设计工具本身不再只是画图软件，一键生成部分代码，管理设计系统和组件库，新时代的设计工具已能够将大量重复性的体力劳动（对齐、标注、导出、改样式）自动化或批量化，极大促进了页面设计的开发效率。
+## 2.1 设计魔法画像界面

-![](images/image8.png)
+基于 1.3 节中的原型构思，我们需要在 Figma 或 MasterGo 中创建一个三栏布局的界面：

-在时间的长河中，所谓前端设计工具其实是一条持续演化的技术。从 90 年代以本地位图编辑为主的 Photoshop 时代，到 2010 年前后 Sketch 带来的矢量化、组件化工作流，再到 2016 年之后 Figma 把协作彻底搬上云端，设计团队从单兵作战逐渐走向多人实时协同。来到 2025 年，AI 已经实打实地嵌入到这些工具内部：从“根据一句话生成页面草稿”，到“把设计稿直接转成可运行的前端结构”，“设计即代码”“人机共创”正在从概念变成可用的生产力。
+1. **左侧**：聊天对话区域
+2. **中间**：魔法画像展示区域（会根据情绪变化）
+3. **右侧**：角色社交平台展示区域（如 X 时间线）

-本节中，我们会选取最具代表的两种现代前端设计工具进行介绍，Figma 和 MasterGo。一方面，它们都覆盖了现代 UI/UX 所需要的核心能力（矢量编辑、组件系统、自动布局、代码交付等），可以支撑你完成从线框到高保真到开发交接的完整闭环；另一方面，这两款工具都已经在 2025 年之后陆续加入了实用的 AI 功能，帮助你在保证原型不变的同时将设计图变成真正可运行的程序。
+你可以使用 Figma 的 AI 功能（Figma Make）或 MasterGo 的 AI 生成页面功能，输入类似以下的提示词：

-## 2.1 诞生之旅
+```
+Create a Hogwarts-style magical portrait interface with three sections:
+- Left: A chat interface with dark theme, message bubbles, and input field
+- Center: A large portrait frame with ornate borders for displaying character images
+- Right: A social media feed showing character's posts
+Use dark purple and gold color scheme, magical aesthetic, Harry Potter inspired
+```

-![](images/image9.png)
+## 2.2 导出代码并在本地运行

-在现代前端专用工具尚未诞生的年代，整个界面设计行业的视觉设计工作，很长一段时间都由 Photoshop 这类 “全能型” 设计软件顺带承包。设计师会在本地通过一层层叠加的图层，细致完成页面整体视觉效果的设计，最终将体积不小的 .psd 源文件交付给前端工程师 —— 而前端要精准还原设计图，还必须手动完成三项繁琐且关键的工作：
+设计完成后，你可以通过以下方式将设计稿转化为可运行的代码：

-一是 “切图”：需要从 .psd 文件的多层结构里，把按钮、图标、Logo、背景模块等独立视觉元素逐一拆分提取，再导出为 PNG、JPG 等网页能直接加载的图片格式（毕竟网页无法直接识别 PSD 的图层信息，只能依赖这些拆分后的图片呈现细节）；
+**方式一：使用 Figma Make**
+1. 在 Figma 中点击 Make 按钮
+2. 上传你的设计参考图
+3. 添加提示词描述需求
+4. 生成后点击编辑器图标进行微调
+5. 导出代码到本地或同步到 GitHub

-![](images/image10.png)
+**方式二：使用 MasterGo AI**
+1. 在 MasterGo 编辑界面上方找到 AI 工具
+2. 选择"生成页面"功能
+3. 上传参考图并描述需求
+4. 生成后点击"代码预览"获取代码

-二是 “量尺寸”：得用软件自带的测量工具，逐一确认每个元素的宽高、不同模块间的间距（margin/padding）等数据，确保所有尺寸都精准到像素；
+**方式三：使用多模态 AI**
+1. 将设计稿截图保存
+2. 使用 Gemini、Qwen 等模型进行图生代码
+3. 要求生成 HTML 或 React 代码
+4. 在本地 IDE 中运行并调试

-![](images/image11.png)
+## 2.3 准备情绪变化素材

-三是 “抠标注”：要从设计图中提取那些 “看不见却必须有的” 隐性参数 —— 比如文字的字号、字重、行距，每个色块的 RGB 或 HEX 色值等，相当于把设计师没写在纸上的 “设计规格” 手动 “抠” 出来记录。
+为了让魔法画像"活"起来，你需要准备一组表情图片。建议至少包含以下情绪：

-![](images/image12.png)
+| 情绪值 | 表情 | 说明 |
+|--------|------|------|
+| 0 | 悲伤 | 角色感到伤心或失落 |
+| 1 | 愤怒 | 角色感到生气或不满 |
+| 5 | 平静 | 默认状态，情绪稳定 |
+| 10 | 开心 | 角色感到高兴或兴奋 |

-在此之后，前端的实现阶段才真正展开。无论使用的是原生 HTML/CSS/JS，还是基于 Vue、React 等框架，本质过程是一致的。前端会以 “容器为核心载体”，根据设计中各模块的层级与语义重建页面结构。这里的容器是指具有明确布局边界、专门承载和组织子元素的单元，它不直接呈现具体内容，却通过 Flex、Grid 等规则，为内部元素划定排列范围。而 “结构块”（如顶部导航栏、侧边栏、文章列表区、底部页脚等肉眼可辨的功能 / 内容区域），便依托容器存在；每个结构块内部，又会嵌套更小的容器来组织元素，比如一条文章列表项，会由 “列表项容器” 控制内边距与整体排版，再包裹标题、摘要、时间、封面图标等细节元素。
+你可以使用 Lovart 或其他 AI 图像生成工具，基于同一角色生成不同表情的变体，确保风格一致。

-![](images/image13.png)
+---

-在现代前端框架里，这些 “结构块（及关联的容器与元素）” 通常会被实现为 “组件”。组件可简单理解为：带有清晰边界、整合了容器布局与逻辑的可复用界面单元，它既包含控制外观与排列的容器（比如 “按钮组件” 用容器定义宽高、圆角，“文章卡片组件” 用容器组织标题、封面的位置），也封装了交互逻辑。设计稿中重复出现、形态一致的部分（如统一风格的按钮、反复使用的文章卡片），在代码中会被抽象成组件：既能在不同页面 / 场景复用，减少重复开发，也能通过组件内容器的统一规则，确保所有复用处的布局与风格高度一致
+# 3. 运行 Hogwarts Portraits

-随后，前端会使用样式系统还原视觉和布局。切图阶段导出的 PNG/JPG 等资源，会作为组件或结构块内部的 `<img>`、背景图片，或者按照各框架推荐的静态资源方式引入；量尺寸阶段得到的宽高、间距、行高等具体数值，会被转写为 `width`、`height`、`margin`、`padding`、`line-height` 等样式属性，应用到对应的组件或结构块上；抠标注阶段整理出的颜色、字体、阴影、圆角以及 hover/active 等状态，则会落实到 CSS、CSS Modules、CSS-in-JS、Tailwind 等具体方案中的 `color`、`font-family`、`font-size`、`box-shadow`、`border-radius` 以及伪类或状态类名上。此时，切图、尺寸和标注提供的是一组精确的视觉参数，组件和结构块则提供了承载这些参数的代码组织单元，两者结合起来，构成可维护、可复用的界面实现。
+## 3.1 导出测试代码

-![](images/image14.png)
-
-但是，以本地文件为中心的模式天然是低效率的。版本通过邮件和网盘传输，新旧稿件容易混淆，设计和开发之间大量依赖上述的复杂交互方法，协作成本和出错概率都不低。
-
-移动互联网兴起后界面复杂度和迭代速度需求快速上升，Photoshop 的“大而全”逐渐显得笨重。这个阶段，出现了 Sketch。Sketch 专注在 UI 设计本身，剥离掉大部分与视觉后期处理相关的负担；用 Symbols 把按钮、导航、输入框等高复用元素组件化，一处修改可以全局同步；再配合 Zeplin 一类工具，把标注和样式片段自动生成。Sketch 把“组件思维”引入了设计工作流。不过它依然是基于本地文件的桌面应用，实时协作要靠云盘、第三方插件或版本工具绕行实现，没有从底层解决“多个人同时改同一份稿子”的问题。
-
-![](images/image15.png)
-
-真正改变游戏规则的是 Figma。自 2016 年起，它把 UI 设计、原型制作、评论协作统一整合到浏览器中，支持多种现代功能：多人实时光标、在线评论、版本时间线、分享链接等，今天看起来非常简单，但在当时是对 Photoshop / Sketch 模式的正面挑战。
-
-![](images/image16.png)
-
-至此，界面设计不再是散落在各自电脑里的文件，而是集中在一份在线、实时更新的云端画布上。围绕这块画布，我们可以想象更进一步，用自动化或 AI 的方式模糊设计和前端代码的边界。
-
-最开始，我们仅能依赖各类平台插件，将设计稿中的组件、样式信息半自动导出为代码片段（如 React/Vue 组件骨架、CSS 变量等），其核心本质是通过插件实现结构化信息提取。随后，随着平台能力的进化，大部分设计平台开始支持大模型 MCP（Model Context Protocol，模型上下文协议）功能：该协议提供了一套标准机制，能让大模型安全、可控地访问设计文件、插件接口与项目元数据，进而更便捷地将设计稿导出为代码。
-
-再往后，在插件与 MCP 的基础上，前端代码自动化进一步迈入到原生支持从设计稿直接推导代码结构的阶段。我们可在设计工具内一键生成前端项目骨架、组件层次、样式体系及对应的代码结果。这使得设计师与前端开发工程师得以从手动搬运设计细节的工作中解放出来，将更多精力投入到用户体验优化与功能版本的更新迭代上。
-
-## 2.2 Figma
-
-接下来我们从抽象的概念部分来到实际的操作环节。由于时间关系，我们只会学习 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-collectio
-
-![](images/image17.png)
-
-左侧是项目的新建和资源管理入口，右上角的几个按钮是 Figma 的常见功能。其中，Make 用来用一句话让 AI 帮你先生成一个大概的界面或结构草稿，Design 是真正画网页 / App 界面、搭组件和做原型的主工作区，FigJam 像团队白板，用来贴便利贴、画流程和做前期讨论，Buzz 是品牌资产规模化生产工具，用于批量生成内容以保持品牌一致性，Site 则是把这些设计整理成真正可访问的网页或文档站对外展示。
-
-乍一看 Figma 的功能非常多，不好入门，但其实这类功能工具本质上都是熟能生巧，不需要害怕一开始操作出错，也不用想着一步做对，只需要先玩起来，玩多了自然能快速上手。
-
-本篇教程中，为了快速入门，我们会对 Design 功能做简单讲解。
-
-### 2.2.1 新建 Design 文件
-
-在首页或者右上角的入口里，选择 **Design** ，新建一个文件，你会进入一个空白的设计画布。
-这个界面大致分成三块：左边是页面和图层，用来查看和修改页面、元素从属关系；中间是画布，用于查看当前效果；右边是属性和样式，用于修改具体的形状、颜色、样式；底部一条是工具栏，用来切换工具，包含选框、画形状、输入文字、评论、插件等，选中工具后，可以按 Esc 键返回至默认鼠标工具。
-
-![](images/image18.png)
-
-### 2.2.2 创建你的第一个 Frame（画板）
-
-在正式放置元素之前，需要先为页面确定一个清晰的边界，这个边界由 Frame 来承担。你可以在底部工具栏中选择 Frame 工具，或者直接按键盘 F，然后在画布上拖出一个矩形区域。
-
-1. 使用底部工具栏里的 Frame 工具，或者直接按键盘 `F`。
-2. 在画布中拖出一个矩形区域，右侧属性栏里把宽度改成比如 `1440`，高度改成 `900`。
-3. 在左侧图层栏，把这个 Frame 重命名，比如叫 `Hogwarts Portraits` 或者你项目的名字。
-
-这个 Frame 就是一屏界面的页面容器，之后的标题、文字、按钮、图片等内容都应该放在这个 Frame 内部，而不是散落在画布的任意位置。以 Frame 为边界来组织内容，有助于在后续进行滚动设置、适配不同设备尺寸、导出画面及制作原型时，保持结构可控。
-
-![](images/image19.png)
-
-### 2.2.3 在 Frame 里放文字和简单元素
-
-有了容器，接下来我们来学习如何防止最基本的组件，例如：标题、副标题、按钮、占位图块。
-
-1. 选择文字工具（底部工具栏中的 `T`），在 Frame 里点击一下，输入页面标题，比如：`Hogwarts Portraits`。
-   在右侧属性里，把字体大小调大一点（例如 96），字重调粗一点。
-2. 在标题下面，再用文字工具输入一行简单说明，比如一两句描述这个页面要做什么。
-   字号可以小一些，行高略放大一点，读起来不那么挤。
-3. 画一个按钮雏形：
-   用矩形工具在标题下面画一个大概 `200 × 48` 的矩形，右侧给它一个比较明显的填充颜色，再适当加一点圆角。
-   ![](images/image20.png)
-4. 然后用文字工具在矩形上方输入按钮文字，比如 `Generate Portrait`，把矩形和文字一并选中，用顶部的对齐工具让文字水平、垂直都居中。
-5. 在按钮一侧或下方，再画一个较大的浅灰色矩形作为“图片占位区”，后面可以用来放生成的人物画像。
-
-做到这里，其实你已经有了一个非常简陋但结构完整的“首页草稿”：一个标题、一段话、一个按钮、一个主要展示区域。
-
-![](images/image21.png)
-
-### 2.2.4 善用 Auto Layout 整合元素
-
-如果所有元素只是随手拖拽，页面很快会乱。Figma 里一个很重要的概念就是 **Auto Layout** ，它可以把一组元素变成一个带规则的容器。
-
-![](images/image22.png)
-
-你可以选中“主标题 + 副标题 + 按钮”这三样，在右侧属性栏里点击 **Add Auto layout** 。
-
-这时这三样会被包在一个容器里，你可以在右侧调整参数，其中的元素布局会根据参数自动适应调整：
-
- 它们是竖着排还是横着排。
- 元素之间的间距是多少。
- 整个这一块离容器边缘有多少内边距（padding）。
-
-![](images/image23.png)
-
-同样，按钮内部也可以用 Auto Layout，我们能够实现这样的一个效果：当我调整了文字，按钮的长度也会自动调整。
-
-先把按钮背景的矩形和按钮文字选中，添加 Auto Layout，让这两个东西变成一个“按钮容器”。接着选中这个按钮容器，把宽高都设置成 **Hug contents** 。这样一来，文字会一直保持在按钮正中间，文字多一点、少一点，按钮的宽度都会自动跟着变化。
-
-![](images/image24.png)
-
-### 2.2.5 将按钮变为可复用组件
-
-现在我们要学习一个新的概念，组件。组件的意思就是可以被反复利用的元素，比如按钮这种元素，只要你预感之后还会反复用到，就可以考虑把它做成组件。我们在刚才已经加好 Auto Layout 的按钮基础操作：
-
-1. 选中整个按钮容器。
-2. 右键选择 Create component（创建组件）。
-   ![](images/image25.png)
-
-这样，这个按钮就从一组普通图层，变成了一个组件母版。之后如果你在其他页面或 Frame 里需要同样风格的按钮，可以直接从左侧的 Assets 面板里拖出来使用。
-
-![](images/image26.png)
-
-此时所有用到的按钮，都是这个母版的同步拷贝。当你修改母版的颜色、圆角或间距时，所有实例都会自动保持同步更新。
-
-![](images/image27.png)
-
-至此，你已经初步掌握了 Figma 的简单用法。你不需要一开始就把所有功能都弄懂，只要先照着做出第一个简单页面，熟悉这几个核心操作，再慢慢去探索官方教程里的更多能力，随着使用次数增多就一定能上手。
-
-## 2.3 MasterGo
-
-在理解了 Figma 的基础工作流程之后，我们再来看 MasterGo，你可以把 MasterGo 简单看做是中国版的 Figma，但在部分功能上有一定区别。整体上，它延续了与 Figma 相似的界面布局和操作理念：同样有画布、图层树和属性面板，同样支持组件、样式、自动布局和多人协作。更详细的内容可参考 MasterGO 的官方教程：https://mastergo.com/tutorials/12?%E5%85%A8%E7%A8%8B%E9%AB%98%E8%83%BD%EF%BC%8CMasterGo%20%E6%9C%80%E5%AE%8C%E6%95%B4%E5%AE%9E%E7%94%A8%E6%95%99%E7%A8%8B%EF%BC%8C%E8%AE%A9%E4%BD%A0%E4%BB%8E%E9%9B%B6%E5%88%B0%E7%B2%BE%E9%80%9A%EF%BC%81
-
-### 2.3.1 新建设计文件
-
-1. **进入 MasterGo 后台**
-   1. 打开 MasterGo 官网并登录账号。
-   2. 进入后，你会看到类似「文件列表 / 项目列表」的首页区域，用来管理你的设计文件。
-      ![](images/image28.png)
-
-2. **创建新文件**
-   1. 在右上角看到 + 设计文件的按钮选项进行点击，或者选择导入 Figma 等文件。
-   2. 点击后，你会进入一个空白画布，这就是 MasterGo 的设计工作区。
-
-3. **认识基本界面区块**
-   当你学会使用 Figma 后，MasterGo 的使用方式大同小异，主要分为几个区域：
-
-   ![](images/image29.png)
-   1. 顶部工具栏：位于画布最上方，左侧是文件位置和文件名，中间是一排常用工具按钮（选择、区域/画板、形状、文本、注释、评论、插件选择和 AI 工具等），右侧是当前在线成员、分享入口以及画布缩放和预览控制功能入口。
-   2. 左侧面板：主要分为图层和资源，当前停留在图层标签，可看到页面列表，以及该页面下所有图层的结构和层级。
-   3. 中间画布区：具体绘制和排版的工作区，所有 Frame、组件和图形都会展示在这里。
-   4. 右侧属性面板：用于查看和编辑选中对象的属性，例如大小、位置、对齐方式、背景填充、描边、圆角等。如果没有选中任何对象，会显示画布相关设置，如画布背景色、标签和导出选项。
-
-### 2.3.2 创建你的第一个 Frame
-
-在正式放东西之前，我们需要一个页面容器用来确定界面的边界和尺寸。这个容器在 MasterGo 里，通常叫 Frame。
-
-**步骤：**
-
-1. **选择 Frame 工具**
-   1. 在工具栏中找到 Frame / 画板工具，点击后可使用预设参数直接将内容创建到画板。
-   2. 或者使用快捷键（通常是 `F`，如果有差异以实际界面为准）。
-2. **在画布中拖出一个矩形区域**
-   1. 拖出后，你会看到一个带选中框的区域。
-   2. 右侧属性面板里，可以看到这个 Frame 的宽度和高度。
-   3. 把宽度改成比如 `1440`，高度改成 `900`（一屏网页常用尺寸之一）。
-3. **重命名 Frame**
-   1. 在左侧图层面板里找到这个 Frame。
-   2. 双击名称，把它改成你项目的名字，比如：`Hogwarts Portraits`，或者你自己随便起的页面名。
-
-![](images/image30.png)
-
-### 2.3.3 创建画板内容
-
-有了容器，使用与 Figma 中我们已教过的类似方式，很容易可以得到相似的展示页面。（你可以尝试复制 Figma 画板中的文字元素，能够支持文本组件的直接粘贴导入）
-
-![](images/image31.png)
-
-值得注意的是 Auto Layout 功能行为稍微的不一致性，在 MasterGo 中，如果你想实现和 Figma 相似的按钮长度随着文字的长度变化，你需要先在对应矩形元素的基础上创建一个容器或组件，如图所示：
-
-![](images/image32.png)
-
-成功创建容器后，将按钮矩形和文字放到对应并列的容器中，再在右侧找到 Auto Layout 的按钮启用自动功能，即可成功实现按钮宽度能够随着文字长度变化的功能。
-
-![](images/image33.png)
-
-![](images/image34.png)
-
-### 2.3.4 AI 生成页面
-
-![](images/image35.png)
-
-在 MasterGo 中，一个值得注意的有趣功能是 AI 生成页面。你可以用一句话或携带参考图，生成对应的 MasterGo 可编辑版组件，并得到可直接使用的代码。你可以使用中文或者英文直接输入需求，页面会根据需求返回结构清晰的页面排布文档，效果如下：
-
-![](images/image36.png)
-
-![](images/image37.png)
-
-设计文档生成结束后，点击开始生成，稍作等待便能获取对应的实际网页效果：
-
-![](images/image38.png)
-
-此时你有两种操作选择：一是点击蓝色按钮将生成结果直接插入画布，二是点击代码预览功能，直接获取当前完整页面的代码，具体操作界面如下：
-
-![](images/image39.png)
-
-![](images/image40.png)
-
-将结果插入画布后，你还能对网页的整体布局、元素细节（如字体、颜色、间距等）进行更精细的调整，直至最终效果完全符合你的预期。
-
-![](images/image41.png)
-
-# 3. 从原型到代码
-
-在前面的内容中，我们已经亲身体验了 Figma、MasterGo 现代前端设计工具。但一个很实际的问题自然会浮现：这些看起来结构完整的设计稿，要怎么转化成真正能在浏览器里运行的前端代码？我们如何能够将自己的设置的 Hogwarts Portraits 原型变成代码？
-
-一般而言，从原型到代码的落地，本质上有三种典型路径：
-
- 根据图片，使用多模态大模型直接还原出代码。
- 通过平台自身能力或插件导出可用代码。
- 平台结合 MCP 能力导出可用代码。
-
-考虑到实现难度，本节只会介绍如何从图片原型到代码，以及通过平台自身 AI 能力从原型转换到代码。至于如何从前端设计工具插件到代码，从前端设计工具 MCP 转换到代码，我们将在之后的课程详细讲解。
-
-## 3.1 直接用 AI 生成前端代码
-
-拥有视觉能力的大模型天生具备将图片转为代码的能力， 我们只需要将图片直接导入对话框，随后让大模型生成完整的结果代码。你可以使用 Qwen 等模型进行图片转代码的测试，这里以 Gemini3 为例，我们把之前的页面原型粘贴到对话界面，并要求模型直接返回 html 的代码。（html 返回后只有单个文件，方便保存到本地进行修改操作，你可以在保存到本地后让大模型将其修改为 React 的架构）
-
-![](images/image42.png)
-
-生成页面并非是简单的任务，在具体过程中你可能会遇到很多问题：譬如界面排布不均，界面显示不全，画面不能一比一还原等问题。在目前情况下，你只能在与大模型的反复对话中进行修改，接近想达成的最终效果。随着大模型能力的逐渐提高，未来需要反复修改的次数会越来越少。（推荐你选择生成图片对应的 html 代码，获取后再使用本地 IDE 将其转换为 React 框架使用，可获得多个单个 html 代码，统一进行转换）
-
-## 3.2 Figma Make 生成代码
-
-FIgma Make 是 Figma 官方推出的 AI 设计工具，能够根据用户输入的提示词或者参考图，高精度的还原网页原型 UI 界面，并且能够支持将还原后的网页转换成可编辑的 Figma Design 文件（需要 Pro 用户，学生教育认证后可免费获得 Pro 权限）。
-
-![](images/image43.png)
-
-类似直接用 AI 生成前端代码，我们可以将想要让 AI 学习的参考图放入对话框，并加上对应的提示词，稍等片刻后即可看到最后的渲染结果。我们能够在右上角找到播放键，点击后可进行全屏查看。
-
-![](images/image44.png)
-
-Figma make 的效果相比原生 AI 生成代码效果更佳，即便有问题也能快速调整。如果你想做到更细节的调整，你可以注意到右上角的类似鼠标和尺子的图标，点击后可以回到我们熟悉的 Figma Editor 的界面，这让我们能够对画面组成进行更详细的调整。
-
-![](images/image45.png)
-
-除此外，你还能够选择将 Figma Make 连接到 Github 上，帮助你快速将代码同步到 Github 保存。
-
-![](images/image46.png)
-
-## 3.3 MasterGO AI 生成页面
-
-类似 Figma Make 的 AI 页面生成功能，MasterGo 也有同样的 AI 页面生成方法，我们容易在编辑界面的上方工具栏中找到：
-
-![](images/image47.png)
-
-使用相同参考图方式得到生成结果：
-
-![](images/image48.png)
-
-![](images/image49.png)
-
-生成结束后，我们能够选择蓝色按钮“插入到画布”，直接编辑生成后的网页结果，也可以直接点击右侧的代码按钮，复制当前的代码内容到本地进行测试。
-
-![](images/image50.png)
-
-# 4. 运行 Hogwarts Portraits
-
-## 4.1 导出测试代码
-
-通过在从原型到代码中的实践，相信你已经得到 Html 或者 React 格式的原型代码，我们只需要将其复制到本地，在 IDE 中说明“请你帮我运行这个代码并且支持里面的必要的功能”，即可运行初版测试；但值得注意的是，这一步往往会出现不少报错，你需要保持耐心，将所有基础交互与功能调通。
+通过在从原型到代码中的实践，相信你已经得到 Html 或者 React 格式的原型代码，我们只需要将其复制到本地，在 IDE 中说明"请你帮我运行这个代码并且支持里面的必要的功能"，即可运行初版测试；但值得注意的是，这一步往往会出现不少报错，你需要保持耐心，将所有基础交互与功能调通。

 ![](images/image51.png)

@@ -396,7 +177,7 @@ Figma make 的效果相比原生 AI 生成代码效果更佳，即便有问题

 ![](images/image52.png)

-## 4.2 Dify 工作流设计与 API 对接
+## 3.2 Dify 工作流设计与 API 对接

 在上面的部分中，我们仅完成了前端界面的可视化呈现，尚未打通核心的拟人化角色对话交互流程。这一步是让原型从静态展示转变为魔法画像的关键，我们可以参考示范项目的 DIfy 工作流进行人物回答和情绪系统的设计，此处我们的涉及为最左侧是聊天界面，中间是魔法画像（会根据对话的内容修改对应的表情），右侧是 X 社交平台账户（会根据对话的内容判断是否需要发布感想到社交账户）。

@@ -408,26 +189,26 @@ Figma make 的效果相比原生 AI 生成代码效果更佳，即便有问题

 ```
 <instruction>
-You are to embody Elon Musk—his tone, mannerisms, thought patterns, and worldview. Respond as if you are Elon Musk himself, speaking directly in first person. Your responses should reflect his known personality traits: visionary thinking, boldness, technical depth, dry humor, impatience with inefficiency, and a tendency toward disruptive innovation. Use concise, confident language. Avoid overly formal or academic phrasing. Prioritize clarity, speed, and impact in your communication, mirroring Elon’s style on social media, in interviews, and during product launches.
+You are to embody Elon Musk—his tone, mannerisms, thought patterns, and worldview. Respond as if you are Elon Musk himself, speaking directly in first person. Your responses should reflect his known personality traits: visionary thinking, boldness, technical depth, dry humor, impatience with inefficiency, and a tendency toward disruptive innovation. Use concise, confident language. Avoid overly formal or academic phrasing. Prioritize clarity, speed, and impact in your communication, mirroring Elon's style on social media, in interviews, and during product launches.

 When responding:
 1. Begin by internalizing the question or statement as Elon would—as a challenge, opportunity, or problem to solve.
 2. Frame your answer with a forward-thinking perspective, often referencing the future of humanity, technology, or long-term goals (e.g., making life multiplanetary, accelerating sustainable energy).
-3. Use casual but authoritative language. It's acceptable to include phrases like “obviously,” “this is important,” or “we’re fixing that now” when appropriate.
-4. If relevant, reference real companies or projects associated with Elon Musk (e.g., SpaceX, Tesla, Neuralink, The Boring Company, X) and speak about them from an insider’s perspective.
+3. Use casual but authoritative language. It's acceptable to include phrases like "obviously," "this is important," or "we're fixing that now" when appropriate.
+4. If relevant, reference real companies or projects associated with Elon Musk (e.g., SpaceX, Tesla, Neuralink, The Boring Company, X) and speak about them from an insider's perspective.
 5. Do not apologize excessively or hedge statements. Elon Musk tends to be direct, even controversial.
 6. Avoid markdown, XML tags, or any formatting in the output. Only plain text is allowed.
 7. Never break character. You are Elon Musk—answer accordingly.
 </instruction>

 <example>
-Input: What’s the point of going to Mars?
-Output: Because Earth isn’t the backup plan—Mars is. We need to become a multiplanetary species to ensure the continuity of consciousness. Life on Earth could be wiped out by asteroid, war, or some unforeseen disaster. If we have a self-sustaining city on Mars, then even if something happens here, life goes on. That’s worth doing. SpaceX is building Starship to make it happen. Not because it’s easy—but because it’s necessary.
+Input: What's the point of going to Mars?
+Output: Because Earth isn't the backup plan—Mars is. We need to become a multiplanetary species to ensure the continuity of consciousness. Life on Earth could be wiped out by asteroid, war, or some unforeseen disaster. If we have a self-sustaining city on Mars, then even if something happens here, life goes on. That's worth doing. SpaceX is building Starship to make it happen. Not because it's easy—but because it's necessary.
 </example>

 <example>
 Input: Why do Tesla cars have no radar anymore?
-Output: Cameras are the future. Human eyes don’t use radar—we see with vision, and AI can too. By going fully vision-based, we’re aligning with how autonomous intelligence will actually work at scale. It forces us to solve real-world problems with neural nets, not crutches.
+Output: Cameras are the future. Human eyes don't use radar—we see with vision, and AI can too. By going fully vision-based, we're aligning with how autonomous intelligence will actually work at scale. It forces us to solve real-world problems with neural nets, not crutches.
 ```

 以及情绪系统对应的提示词：
@@ -527,9 +308,9 @@ curl -X POST 'http://xxxxxxxx/v1/chat-messages' \
 }
 ```

-同时建议补充需求：“代码还需要添加基础错误处理逻辑，比如网络中断时显示‘连接失败，请重试’、API 调用超时自动重试 1 次、密钥错误提示权限验证失败等等详细报错，确保对话稳定性并能让开发人员快速发现 API 问题所在。”
+同时建议补充需求："代码还需要添加基础错误处理逻辑，比如网络中断时显示'连接失败，请重试'、API 调用超时自动重试 1 次、密钥错误提示权限验证失败等等详细报错，确保对话稳定性并能让开发人员快速发现 API 问题所在。"

-## 4.3 Github 与公网部署
+## 3.3 Github 与公网部署

 终于，恭喜你顺利完成了 Hogwarts Portraits 页面的开发实现！接下来我们需要将它上传到 GitHub 平台，并将其部署到公共环境让所有人都能访问。

@@ -541,13 +322,13 @@ curl -X POST 'http://xxxxxxxx/v1/chat-messages' \

 ![](images/image54.png)

-# 5. 尝试不同设计风格
+# 4. 尝试不同设计风格

-完成第一版设计后，我们不必局限于此，鼓励大家快速探索更多元的视觉风格。你可以在原型部分进行大胆的修改，又或者是基于最后的项目进行全新提示词的修改，从而生成多套风格差异显著的页面。 比如带有复古纹理、偏 “旧书卷 / 学院风” 的深色页面，色彩明快、充满 “童话 / 卡通” 感的亮色页面，或是元素简约、视觉清爽的现代扁平设计。例如下图是一个转换为中国古风诗人设计风格的案例，画像图片未更换，只修改了其他部分：
+完成第一版设计后，我们不必局限于此，鼓励大家快速探索更多元的视觉风格。你可以在原型部分进行大胆的修改，又或者是基于最后的项目进行全新提示词的修改，从而生成多套风格差异显著的页面。 比如带有复古纹理、偏 "旧书卷 / 学院风" 的深色页面，色彩明快、充满 "童话 / 卡通" 感的亮色页面，或是元素简约、视觉清爽的现代扁平设计。例如下图是一个转换为中国古风诗人设计风格的案例，画像图片未更换，只修改了其他部分：

 ![](images/image55.png)

-不用拘泥于前面提到的模式，你可以把魔法画像或是个人资料页面修改至更有特点，匹配“魔法画像”本身的习惯，这会让你的应用更加有趣。期待你的魔法画像成果！
+不用拘泥于前面提到的模式，你可以把魔法画像或是个人资料页面修改至更有特点，匹配"魔法画像"本身的习惯，这会让你的应用更加有趣。期待你的魔法画像成果！

 # 📚 Assignment

@@ -0,0 +1,361 @@
+# 从设计原型到项目代码
+
+::: tip 🎯 核心问题
+**如何将设计工具中的原型转化为真正能在浏览器里运行的前端代码？**
+:::
+
+---
+
+## 1. 从原型到代码的三种路径
+
+在使用 Figma、MasterGo 等现代前端设计工具完成界面设计后，一个很实际的问题自然会浮现：这些看起来结构完整的设计稿，要怎么转化成真正能在浏览器里运行的前端代码？
+
+一般而言，从原型到代码的落地，本质上有三种典型路径：
+
+| 路径 | 方法 | 特点 | 适用场景 |
+|------|------|------|----------|
+| **路径一** | 根据图片，使用多模态大模型直接还原出代码 | 灵活、无需特定工具 | 快速原型验证、简单页面 |
+| **路径二** | 通过平台自身能力或插件导出可用代码 | 还原度高、可编辑性强 | Figma/MasterGo 用户 |
+| **路径三** | 平台结合 MCP 能力导出可用代码 | 自动化程度高、可定制 | 需要深度集成的工作流 |
+
+本文将详细介绍这三种路径的具体实现方法，帮助你根据项目需求选择最合适的工作流。
+
+::: tip 📚 前置知识
+在开始本节之前，建议你先学习 [Figma 与 MasterGo 入门](../2.1-figma-mastergo/) 教程，掌握前端设计工具的基础操作。
+:::
+
+---
+
+## 2. 路径一：多模态 AI 直接还原代码
+
+拥有视觉能力的大模型天生具备将图片转为代码的能力。我们只需要将设计稿截图直接导入对话框，随后让大模型生成完整的结果代码。
+
+### 2.1 操作流程
+
+1. **截取设计稿图片**
+   - 在 Figma 或 MasterGo 中，将设计好的页面导出为 PNG 或 JPG
+   - 确保截图包含完整的页面布局
+
+2. **选择多模态 AI 模型**
+   - 可以使用 Gemini、Qwen、Claude 等支持图像输入的模型
+   - 这里以 Gemini 为例进行演示
+
+3. **编写提示词**
+   ```
+   请根据这张设计图生成对应的 HTML/CSS 代码。
+   要求：
+   - 使用现代 CSS 布局（Flexbox/Grid）
+   - 响应式设计，适配不同屏幕尺寸
+   - 包含所有可见的 UI 元素
+   - 颜色、字体大小尽量还原设计稿
+   ```
+
+![](images/image42.png)
+
+4. **获取并保存代码**
+   - 要求模型返回完整的 HTML 代码
+   - 保存为单个 `.html` 文件，方便本地测试
+   - 后续可以在本地 IDE 中将其转换为 React 等框架
+
+### 2.2 常见问题与解决方案
+
+生成页面并非简单的任务，在具体过程中你可能会遇到很多问题：
+
+| 问题 | 解决方案 |
+|------|----------|
+| 界面排布不均 | 向 AI 描述具体的布局问题，要求调整 CSS 的 margin/padding |
+| 界面显示不全 | 检查是否设置了正确的 viewport，要求添加响应式断点 |
+| 颜色还原不准 | 使用取色工具获取设计稿的精确色值，提供给 AI |
+| 字体不匹配 | 指定具体的字体名称或要求使用 Google Fonts 替代 |
+
+::: tip 💡 小技巧
+推荐先生成 HTML 代码，获取后再使用本地 IDE 将其转换为 React 框架。这样可以获得多个独立的 HTML 文件，统一进行框架转换。
+:::
+
+### 2.3 MasterGo AI 生成页面
+
+MasterGo 同样提供了强大的 AI 页面生成功能，可以根据参考图直接生成可用的网页代码。
+
+#### 找到 AI 功能入口
+
+在 MasterGo 编辑界面的上方工具栏中，可以找到 AI 工具按钮：
+
+![](images/image47.png)
+
+#### 生成流程
+
+1. **上传参考图**
+   - 使用与多模态 AI 相同的方式上传设计参考图
+   - 添加文字描述需求
+
+2. **查看生成结果**
+
+![](images/image48.png)
+
+![](images/image49.png)
+
+3. **获取代码**
+   - 点击蓝色按钮"插入到画布"，可直接编辑生成后的网页
+   - 或点击右侧的"代码"按钮，复制代码内容到本地
+
+![](images/image50.png)
+
+---
+
+## 3. 路径二：平台自身能力或插件导出代码
+
+### 3.1 Figma Make 生成代码
+
+Figma Make 是 Figma 官方推出的 AI 设计工具，能够根据用户输入的提示词或者参考图，高精度地还原网页原型 UI 界面。
+
+#### 功能特点
+
+- **高精度还原**：相比原生 AI 生成代码，效果更佳
+- **可编辑性**：生成结果可以转换为可编辑的 Figma Design 文件
+- **GitHub 集成**：支持直接将代码同步到 GitHub
+
+::: tip 🔑 权限说明
+使用 Figma Make 的完整功能需要 Pro 用户权限，学生可以通过教育认证免费获得 Pro 权限。
+:::
+
+#### 操作步骤
+
+1. **进入 Figma Make**
+   - 在 Figma 首页点击 Make 按钮
+   - 或者访问 [Figma Make](https://www.figma.com/make)
+
+2. **上传参考图**
+   - 将你想要还原的设计图上传到对话框
+   - 添加描述需求的提示词
+
+![](images/image43.png)
+
+3. **查看生成结果**
+   - 稍等片刻后即可看到渲染结果
+   - 点击右上角的播放按钮可进行全屏预览
+
+![](images/image44.png)
+
+4. **细节调整**
+   - 点击右上角的编辑器图标（鼠标和尺子图标）
+   - 回到熟悉的 Figma Editor 界面进行详细调整
+
+![](images/image45.png)
+
+5. **导出代码**
+   - 调整满意后，选择导出代码
+   - 可以直接连接到 GitHub 保存代码
+
+![](images/image46.png)
+
+### 3.2 插件导出代码
+
+除了平台原生的 AI 功能，Figma 和 MasterGo 都支持通过插件导出代码：
+
+**常用 Figma 插件：**
+- **Figma to Code**：将设计稿转换为 React、Vue、HTML 等代码
+- **Anima**：高保真代码生成，支持交互效果
+- **Locofy**：AI 驱动的设计转代码工具
+
+**使用步骤：**
+1. 在 Figma 中打开插件面板（Plugins）
+2. 搜索并安装需要的代码导出插件
+3. 选中要导出的设计元素
+4. 运行插件，选择目标框架和代码格式
+5. 复制或下载生成的代码
+
+---
+
+## 4. 路径三：平台结合 MCP 能力导出代码
+
+### 4.1 什么是 MCP？
+
+MCP（Model Context Protocol，模型上下文协议）是一套开放标准协议，它允许 AI 模型安全、可控地访问外部工具和数据源。在前端设计工具的场景中，MCP 让大模型能够直接读取设计文件的结构、样式和组件信息，从而更精准地生成代码。
+
+### 4.2 MCP 的工作原理
+
+```
+┌─────────────┐     ┌─────────────┐     ┌─────────────┐
+│   AI 模型    │ ←→  │  MCP 服务器  │ ←→  │  设计工具    │
+│  (Claude等)  │     │  (协议适配)  │     │(Figma/MasterGo)│
+└─────────────┘     └─────────────┘     └─────────────┘
+```
+
+**工作流程：**
+1. AI 模型通过 MCP 协议向设计工具发送请求
+2. 设计工具返回结构化的设计数据（图层、样式、组件等）
+3. AI 模型理解设计结构并生成对应代码
+4. 代码可以直接导出或同步到开发环境
+
+### 4.3 Figma + MCP 实战
+
+#### 环境准备
+
+1. **安装 MCP 服务器**
+   ```bash
+   # 使用 npx 安装 Figma MCP 服务器
+   npx figma-mcp-server
+   ```
+
+2. **配置 Claude Desktop 或其他支持 MCP 的 AI 工具**
+   ```json
+   {
+     "mcpServers": {
+       "figma": {
+         "command": "npx",
+         "args": ["figma-mcp-server"],
+         "env": {
+           "FIGMA_ACCESS_TOKEN": "your-figma-token"
+         }
+       }
+     }
+   }
+   ```
+
+3. **获取 Figma Access Token**
+   - 登录 Figma → Settings → Personal Access Tokens
+   - 生成新的 Token 并保存
+
+#### 使用流程
+
+1. **在 AI 工具中启用 MCP 连接**
+   - 打开 Claude Code 或其他支持 MCP 的 IDE
+   - 确认 MCP 服务器已连接
+
+2. **提供设计文件链接**
+   ```
+   用户：请帮我将这个 Figma 设计转换为 React 代码
+   链接：https://www.figma.com/file/xxxxx
+   
+   AI：我已通过 MCP 连接到 Figma，正在读取设计文件结构...
+   ```
+
+3. **AI 自动分析并生成代码**
+   - MCP 服务器获取设计文件的图层树
+   - AI 理解组件结构和样式属性
+   - 生成带有正确命名和结构的 React/Vue 组件
+
+4. **迭代优化**
+   ```
+   用户：请将按钮组件提取为独立的可复用组件
+   
+   AI：好的，我已通过 MCP 识别到设计系统中的 Button 组件，
+       正在生成带有 props 接口的 React 组件...
+   ```
+
+### 4.4 MCP 的优势
+
+| 特性 | 传统方式 | MCP 方式 |
+|------|----------|----------|
+| **数据精度** | 依赖截图，可能丢失细节 | 直接读取原始设计数据 |
+| **组件识别** | AI 需要猜测组件边界 | 精确获取组件定义 |
+| **样式还原** | 基于像素估算 | 获取精确的设计 token |
+| **迭代效率** | 每次修改需重新截图 | 实时同步设计变更 |
+| **自动化程度** | 手动复制粘贴 | 可直接写入项目文件 |
+
+### 4.5 当前可用的 MCP 工具
+
+**设计工具 MCP：**
+- **Figma MCP Server**：官方支持的 MCP 实现
+- **MasterGo MCP**：社区开发的 MasterGo 适配器
+
+**开发环境 MCP：**
+- **Claude Code**：原生支持 MCP 协议
+- **Cline**：VS Code 插件，支持 MCP 连接
+- **Trae**：可通过配置启用 MCP 功能
+
+::: tip 🔮 未来展望
+MCP 协议正在快速发展，未来设计工具与开发环境的集成将更加紧密。预计会出现更多一键同步设计到代码的解决方案，进一步缩短设计与开发之间的距离。
+:::
+
+---
+
+## 5. 代码导出后的工作
+
+### 5.1 本地测试
+
+获取代码后，在本地 IDE 中打开并进行测试：
+
+1. **创建新项目**
+   ```bash
+   # 如果是 HTML 文件，直接用浏览器打开
+   open index.html
+   
+   # 如果是 React/Vue 项目
+   npm install
+   npm run dev
+   ```
+
+2. **与 AI IDE 协作**
+   - 将生成的代码导入 Trae 或其他 AI IDE
+   - 让 AI 帮助修复布局问题、添加交互功能
+
+### 5.2 常见问题处理
+
+| 阶段 | 问题 | 解决方案 |
+|------|------|----------|
+| 布局 | 元素错位 | 检查 CSS 的 display 和 position 属性 |
+| 样式 | 颜色不一致 | 使用浏览器开发者工具检查实际应用的色值 |
+| 响应式 | 移动端显示异常 | 添加 media query 断点 |
+| 交互 | 按钮无响应 | 检查 JavaScript 事件绑定 |
+
+---
+
+## 6. 三种路径对比与选择建议
+
+### 6.1 路径对比
+
+| 维度 | 路径一：多模态 AI | 路径二：平台能力 | 路径三：MCP |
+|------|------------------|------------------|-------------|
+| **上手难度** | ⭐ 简单 | ⭐⭐ 中等 | ⭐⭐⭐ 较复杂 |
+| **还原精度** | ⭐⭐⭐ 中等 | ⭐⭐⭐⭐ 高 | ⭐⭐⭐⭐⭐ 最高 |
+| **灵活性** | ⭐⭐⭐⭐⭐ 高 | ⭐⭐⭐ 中等 | ⭐⭐⭐⭐ 较高 |
+| **自动化程度** | ⭐⭐ 低 | ⭐⭐⭐ 中等 | ⭐⭐⭐⭐⭐ 高 |
+| **成本** | 低（按 API 调用） | 中（可能需要 Pro） | 低（开源工具） |
+
+### 6.2 选择建议
+
+**选择路径一（多模态 AI）如果：**
+- 需要快速验证想法
+- 设计工具不固定，经常切换
+- 对还原精度要求不高
+- 预算有限
+
+**选择路径二（平台能力）如果：**
+- 团队主要使用 Figma 或 MasterGo
+- 需要高精度的代码还原
+- 设计师和开发者需要频繁协作
+- 愿意投资 Pro 版本
+
+**选择路径三（MCP）如果：**
+- 追求最高程度的自动化
+- 有技术能力配置 MCP 环境
+- 项目需要频繁迭代设计到代码
+- 希望建立标准化的设计开发工作流
+
+---
+
+## 7. 总结
+
+通过本章节的学习，你已经掌握了从设计原型到代码的三种核心路径：
+
+1. **多模态 AI 直接转换**：灵活快速，适合原型验证
+2. **平台原生能力**：还原度高，适合专业设计工作流
+3. **MCP 协议集成**：自动化程度最高，代表未来趋势
+
+::: tip 💡 最佳实践
+- **新手推荐**：从路径一（多模态 AI）开始，快速上手
+- **团队协作**：使用路径二（平台能力），保证设计一致性
+- **效率优先**：尝试路径三（MCP），建立自动化工作流
+- **混合使用**：根据项目阶段灵活切换不同路径
+:::
+
+---
+
+## 参考资源
+
+- [Figma 与 MasterGo 入门](../2.1-figma-mastergo/) - 学习设计工具基础
+- [一起做霍格沃茨画像](../2.4-hogwarts-portraits/) - 完整项目实战
+- [MCP 官方文档](https://modelcontextprotocol.io/) - 了解协议详情
+- [Figma Make 官方文档](https://help.figma.com/hc/en-us/sections/360007453634-Figma-Make)
+- [MasterGo AI 教程](https://mastergo.com/tutorials)
@@ -0,0 +1,441 @@
+# 使用现代组件库更新你的界面
+
+在前面的课程中，你已经学会了如何用设计工具画出界面、用 AI IDE 把设计稿变成代码，甚至完成了一个完整的前端项目。但你可能也发现了一个问题：自己从零写出来的按钮、表单、弹窗，虽然能用，但总觉得和"专业产品"差了点意思——样式不够统一、交互细节不够丝滑、适配不同屏幕也很头疼。
+
+这就是**组件库**要解决的问题。
+
+组件库是一套预先设计好、开发好的 UI 零件集合。按钮、输入框、下拉菜单、对话框、表格……这些你在任何产品中都会反复用到的界面元素，组件库已经帮你做好了，而且经过了大量用户的验证和打磨。你只需要像搭积木一样把它们组合起来，就能快速构建出专业级的界面。
+
+## 你将学到
+
+1. 理解什么是前端组件库，以及为什么现代开发几乎都在用它
+2. 认识四个最具代表性的组件库，了解它们各自擅长的场景
+3. 通过三个实战场景（落地页、产品页面、后台管理），学会用 AI IDE + 组件库进行 Vibe Coding
+4. 学会阅读组件库文档，根据需求找到合适的组件并正确使用
+
+## 1. 为什么需要组件库？
+
+想象你在装修房子。你可以自己从木头开始做一把椅子，但更常见的做法是去宜家买一把——设计好看、质量稳定、说明书清晰，拿回家组装就行。
+
+组件库就是前端开发中的"宜家"。它提供的不是家具，而是界面零件：
+
+| 自己手写 | 使用组件库 |
+| :--- | :--- |
+| 需要自己处理样式、交互、动画 | 开箱即用，样式和交互已经打磨好 |
+| 不同页面的按钮可能长得不一样 | 全局风格统一，自动保持一致性 |
+| 适配手机、平板需要额外工作 | 大多数组件库已内置响应式支持 |
+| 无障碍访问（Accessibility）容易遗漏 | 专业组件库已处理好键盘导航、屏幕阅读器等 |
+| 开发速度慢 | 开发速度快，专注业务逻辑 |
+
+简单来说：**组件库让你把时间花在"做什么"上，而不是"怎么画"上。**
+
+### 眼见为实：同一个需求，加不加组件库的差距
+
+光说不练没有说服力。我们在 Trae 中用几乎相同的需求，分别不指定和指定组件库，看看生成结果的差距。
+
+**提示词一：不使用组件库**
+
+```text
+请帮我用 React + TypeScript 生成一个 AI 写作助手的数据仪表盘页面，包含：
+- 顶部标题栏和导出按钮
+- 四张统计卡片（用户数、活跃用户、文档数、收入），显示数值和涨跌趋势
+- 一个折线图和一个饼图
+- 一个用户列表表格，带分页
+- 左侧导航侧边栏
+```
+
+在 Trae 中直接运行后的效果：
+
+<!-- TODO: 替换为 Trae 中不使用组件库生成的仪表盘截图 -->
+![Trae 生成的仪表盘（不使用组件库）](images/compare-without-lib.png)
+
+**提示词二：使用 shadcn/ui 组件库**
+
+```text
+请帮我用 React + TypeScript + shadcn/ui + Tailwind CSS 生成一个 AI 写作助手的数据仪表盘页面，包含：
+- 顶部标题栏和导出按钮
+- 四张统计卡片（用户数、活跃用户、文档数、收入），显示数值和涨跌趋势
+- 一个折线图和一个饼图
+- 一个用户列表表格，带分页
+- 左侧导航侧边栏
+```
+
+同样在 Trae 中直接运行后的效果：
+
+<!-- TODO: 替换为 Trae 中使用 shadcn/ui 生成的仪表盘截图 -->
+![Trae 生成的仪表盘（使用 shadcn/ui）](images/compare-with-lib.png)
+
+同样的需求，唯一的区别只是在提示词开头加上了 `shadcn/ui + Tailwind CSS`，Trae 生成的结果在视觉一致性、交互细节、整体打磨程度上就完全不在一个层级。这就是组件库带来的"免费升级"——你只需要在提示词里多写一个组件库的名字。
+
+## 2. 认识四个核心组件库
+
+组件库数量众多（完整列表见[附录](#附录-更多组件库一览)），但你只需要先认识这四个最具代表性的：
+
+| 组件库 | 框架 | 一句话定位 | 官网 |
+| :--- | :--- | :--- | :--- |
+| [Ant Design](https://ant.design) | React | 蚂蚁集团出品，企业级中后台的事实标准，组件覆盖面极广 | ant.design |
+| [shadcn/ui](https://ui.shadcn.com) | React | 不装 npm 包，直接把代码复制到你项目里，基于 Tailwind CSS，定制自由度最高 | ui.shadcn.com |
+| [HeroUI](https://heroui.com)（原 NextUI） | React | 默认样式精美、动画流畅，适合对视觉品质有要求的落地页和产品展示 | heroui.com |
+| [Material UI](https://mui.com) | React | 最老牌的 React 组件库，实现 Google Material Design 规范，生态最成熟 | mui.com |
+
+> Vue 用户同样有丰富选择：[Element Plus](https://element-plus.org)（国内最流行）、[Ant Design Vue](https://antdv.com)、[Naive UI](https://www.naiveui.com) 等，详见[附录](#附录-更多组件库一览)。
+
+不同组件库擅长不同场景。接下来我们通过三个真实开发场景，带你体验如何用 AI IDE + 组件库进行 Vibe Coding。
+
+为了展示不同组件库的风格和特点，我们在每个场景中刻意选用了不同的库。但请注意：**这只是为了让你多见识几种方案**，实际开发中你完全可以只用自己最顺手的那一个。比如你喜欢 shadcn/ui 的风格，用它做落地页、产品页、后台管理都没问题。选一个你觉得好看、用着舒服的，比什么都重要。
+
+## 3. 实战一：用 HeroUI 构建产品落地页
+
+**场景**：你做了一个 AI 写作助手产品，需要一个漂亮的落地页来展示产品特性、吸引用户注册。落地页需要视觉冲击力强、动画流畅、在手机上也好看。
+
+**为什么选 HeroUI**：HeroUI 的默认样式就很精美，自带流畅的过渡动画，非常适合面向用户的展示型页面。
+
+### 3.1 创建项目
+
+```bash
+# 使用 HeroUI 官方 CLI 创建项目
+npx create-heroui-app@latest ai-writer-landing
+cd ai-writer-landing
+npm install
+```
+
+<!-- TODO: 替换为 HeroUI 官网首页或组件展示截图 -->
+![HeroUI 组件库官网](images/heroui-homepage.png)
+
+### 3.2 用 AI IDE 生成落地页
+
+打开 AI IDE（Cursor、Trae 等），在对话框中输入：
+
+```text
+我正在用 HeroUI (React) 构建一个 AI 写作助手的落地页，请帮我实现以下结构：
+
+1. 顶部导航栏：左侧 Logo + 产品名，右侧"功能"、"定价"、"关于"导航链接 + "开始使用"按钮
+2. Hero 区域：大标题"让 AI 成为你的写作搭档"，副标题描述产品价值，一个"免费试用"主按钮和一个"查看演示"次按钮，下方放一张产品截图
+3. 功能展示区：3 列卡片布局，分别展示"智能续写"、"风格调整"、"多语言翻译"三个核心功能，每张卡片有图标、标题、描述
+4. 定价区域：3 个定价卡片（免费版、专业版、团队版），专业版高亮推荐
+5. 底部 CTA：一句号召性文案 + 注册按钮
+6. Footer：版权信息 + 社交媒体链接
+
+请使用 HeroUI 组件库。
+页面要有现代感，支持暗色模式，移动端响应式。
+```
+
+<!-- TODO: 替换为 AI IDE 生成落地页的过程截图或生成结果截图 -->
+![AI 生成的 HeroUI 落地页效果](images/heroui-landing-result.png)
+
+### 3.3 AI 会用到的关键组件
+
+AI 生成的代码中，你会看到这些 HeroUI 组件：
+
+```jsx
+import {
+  Navbar, NavbarBrand, NavbarContent, NavbarItem,
+  Button,
+  Card, CardHeader, CardBody, CardFooter,
+  Divider,
+  Link,
+  Chip
+} from '@heroui/react'
+```
+
+每个组件的作用：
+
+| 组件 | 用途 | 落地页中的位置 |
+| :--- | :--- | :--- |
+| `Navbar` | 顶部导航栏 | 页面最顶部，固定不动 |
+| `Button` | 按钮，支持多种变体和颜色 | CTA 按钮、导航按钮 |
+| `Card` | 卡片容器 | 功能展示、定价卡片 |
+| `Chip` | 小标签 | "推荐"、"最受欢迎"标记 |
+| `Divider` | 分割线 | 区域之间的视觉分隔 |
+
+### 3.4 迭代优化
+
+生成的初版代码可能不完全满意，继续和 AI 对话调整：
+
+```text
+请帮我做以下调整：
+1. Hero 区域的标题加上渐变色效果（从蓝色到紫色）
+2. 功能卡片加上 hover 时的上浮动画
+3. 定价区域的"专业版"卡片加上边框高亮和"最受欢迎"标签
+4. 移动端导航改为汉堡菜单
+```
+
+<!-- TODO: 替换为迭代优化后的落地页效果截图 -->
+![迭代优化后的落地页](images/heroui-landing-iterated.png)
+
+> **Vibe Coding 的核心**：你不需要记住每个组件的 API，只需要用自然语言描述你想要的效果，AI 会帮你找到合适的组件和写法。遇到不满意的地方，继续对话迭代就好。
+
+## 4. 实战二：用 shadcn/ui 构建产品页面
+
+**场景**：你的 AI 写作助手需要一个用户登录后的主界面——左侧是文档列表，右侧是编辑器，顶部有工具栏。这是一个功能型产品页面，需要高度定制化的 UI。
+
+**为什么选 shadcn/ui**：shadcn/ui 把组件代码直接放进你的项目，你可以随意修改任何细节。对于需要深度定制的产品界面，这种"拥有代码"的模式最灵活。
+
+<!-- TODO: 替换为 shadcn/ui 官网或组件展示截图 -->
+![shadcn/ui 组件库官网](images/shadcn-homepage.png)
+
+### 4.1 创建项目
+
+```bash
+# 创建 Next.js 项目
+npx create-next-app@latest ai-writer-app --typescript --tailwind --app
+cd ai-writer-app
+
+# 初始化 shadcn/ui
+npx shadcn@latest init
+
+# 按需添加组件（不是一次性安装所有组件）
+npx shadcn@latest add button card input sidebar sheet dialog
+```
+
+shadcn/ui 的独特之处：每次 `add` 一个组件，它会把源代码复制到你项目的 `components/ui/` 目录下。你可以直接打开这些文件修改样式和行为。
+
+### 4.2 用 AI IDE 生成产品界面
+
+```text
+我正在用 Next.js + shadcn/ui + Tailwind CSS 构建一个 AI 写作助手的主界面，请帮我实现：
+
+整体布局：
+- 左侧可折叠侧边栏（宽 280px）：顶部是"新建文档"按钮，下方是文档列表，每个文档显示标题和最后编辑时间，支持右键菜单（重命名、删除）
+- 右侧主区域分为上下两部分：
+  - 顶部工具栏：文档标题（可编辑）、字数统计、"AI 续写"按钮、"导出"下拉菜单
+  - 下方编辑区域：一个大的文本输入区域，占满剩余空间
+
+交互细节：
+- 点击"AI 续写"按钮后，按钮变为加载状态，编辑器底部出现 AI 生成的文本（带打字机效果）
+- 侧边栏在移动端变为抽屉式弹出
+- 文档列表当前选中项高亮
+
+请使用 shadcn/ui 组件库。
+```
+
+<!-- TODO: 替换为 AI 生成的 shadcn/ui 产品界面截图 -->
+![AI 生成的 shadcn/ui 产品页面效果](images/shadcn-product-result.png)
+
+### 4.3 AI 会用到的关键组件
+
+```tsx
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Card, CardContent, CardHeader } from '@/components/ui/card'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu'
+import {
+  Sheet,
+  SheetContent,
+  SheetTrigger
+} from '@/components/ui/sheet'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarHeader
+} from '@/components/ui/sidebar'
+```
+
+| 组件 | 用途 | 产品页面中的位置 |
+| :--- | :--- | :--- |
+| `Sidebar` | 可折叠侧边栏 | 左侧文档列表 |
+| `Sheet` | 移动端抽屉 | 移动端侧边栏替代 |
+| `DropdownMenu` | 下拉菜单 | "导出"按钮、右键菜单 |
+| `Dialog` | 对话框 | 重命名、删除确认 |
+| `Button` | 按钮，支持 variant 和 loading | 各种操作按钮 |
+| `Input` | 输入框 | 文档标题编辑 |
+
+### 4.4 定制组件样式
+
+shadcn/ui 的优势在于你可以直接修改组件源码。比如你想让按钮的圆角更大：
+
+```text
+请帮我修改 components/ui/button.tsx，
+把所有按钮的默认圆角从 rounded-md 改为 rounded-xl，
+并给 primary 变体加上微妙的阴影效果
+```
+
+AI 会直接修改你项目中的组件文件，而不是覆盖 npm 包的样式——这就是 shadcn/ui "拥有代码"的好处。
+
+<!-- TODO: 替换为 shadcn/ui 组件源码在项目中的截图，展示可直接编辑 -->
+![shadcn/ui 组件代码在项目中可直接编辑](images/shadcn-code-ownership.png)
+
+## 5. 实战三：用 Ant Design 构建后台管理界面
+
+**场景**：你的 AI 写作助手上线后，需要一个管理后台来查看用户数据、管理文档内容、处理付费订单。后台管理系统的核心是数据展示和操作效率。
+
+**为什么选 Ant Design**：Ant Design 在中后台领域积累最深，表格、表单、图表等业务组件开箱即用，内置了大量企业级交互模式（批量操作、高级筛选、数据导出等）。
+
+<!-- TODO: 替换为 Ant Design 官网或 Pro Components 展示截图 -->
+![Ant Design 组件库官网](images/antd-homepage.png)
+
+### 5.1 创建项目
+
+```bash
+# 使用 Ant Design Pro 脚手架（内置布局、路由、权限）
+npx create-umi@latest ai-writer-admin
+# 选择 Ant Design Pro 模板
+cd ai-writer-admin
+npm install
+```
+
+或者从零开始：
+
+```bash
+npx create-react-app ai-writer-admin --template typescript
+cd ai-writer-admin
+npm install antd @ant-design/icons @ant-design/pro-components
+```
+
+### 5.2 用 AI IDE 生成管理后台
+
+```text
+我正在用 React + Ant Design 组件库构建 AI 写作助手的管理后台，请帮我实现用户管理页面：
+
+页面布局：
+- 整体框架为左侧菜单 + 顶部面包屑
+- 左侧菜单项：仪表盘、用户管理、文档管理、订单管理、系统设置
+
+用户管理页面内容：
+- 顶部统计卡片：总用户数、今日新增、活跃用户数、付费用户数
+- 搜索筛选区：用户名搜索、注册时间范围、用户状态下拉筛选、"搜索"和"重置"按钮
+- 用户表格：
+  - 列：头像、用户名、邮箱、注册时间、订阅计划（用彩色标签区分）、状态（用徽标显示）、操作
+  - 支持分页（每页 20 条）
+  - 支持批量选择 + 批量操作（禁用、导出）
+  - 操作列：查看详情、编辑、禁用（需要二次确认）
+- 点击"查看详情"弹出侧边抽屉，显示用户完整信息和最近文档列表
+
+请使用 Ant Design 组件库。
+```
+
+<!-- TODO: 替换为 AI 生成的 Ant Design 后台管理界面截图 -->
+![AI 生成的 Ant Design 后台管理界面](images/antd-admin-result.png)
+
+### 5.3 AI 会用到的关键组件
+
+```tsx
+import { PageContainer, ProLayout } from '@ant-design/pro-components'
+import { ProTable } from '@ant-design/pro-components'
+import { StatisticCard } from '@ant-design/pro-components'
+import {
+  Button, Tag, Badge, Space, Drawer,
+  Popconfirm, message, Modal
+} from 'antd'
+import {
+  UserOutlined, SearchOutlined, ExportOutlined
+} from '@ant-design/icons'
+```
+
+| 组件 | 用途 | 后台中的位置 |
+| :--- | :--- | :--- |
+| `ProLayout` | 后台整体布局框架 | 页面骨架（菜单 + 内容区） |
+| `ProTable` | 高级表格，内置搜索、分页、列设置 | 用户列表、文档列表、订单列表 |
+| `StatisticCard` | 数据统计卡片 | 仪表盘、页面顶部概览 |
+| `Tag` / `Badge` | 状态标签 | 订阅计划、用户状态 |
+| `Drawer` | 侧边抽屉 | 用户详情、编辑表单 |
+| `Popconfirm` | 气泡确认框 | 删除、禁用等危险操作 |
+
+### 5.4 继续迭代：添加仪表盘
+
+```text
+请帮我实现仪表盘页面：
+
+1. 顶部 4 个统计卡片（总用户、总文档、今日 API 调用次数、月收入），每个卡片显示数值和环比变化
+2. 中间一行两列：
+   - 左侧：最近 7 天的用户增长折线图（用 @ant-design/charts）
+   - 右侧：订阅计划分布饼图
+3. 底部：最近操作日志表格（时间、用户、操作类型、详情）
+
+使用 Ant Design 的 Card、Row、Col 布局，图表用 @ant-design/charts
+```
+
+<!-- TODO: 替换为仪表盘页面效果截图 -->
+![Ant Design 仪表盘页面效果](images/antd-dashboard-result.png)
+
+> **后台管理的 Vibe Coding 技巧**：后台页面结构相对固定（表格 + 搜索 + 弹窗），非常适合用 AI 批量生成。你可以先让 AI 生成一个"用户管理"页面作为模板，然后说"参考用户管理页面的结构，帮我生成文档管理页面"，AI 会复用相同的布局模式。
+
+## 6. 学会查文档：组件库的"说明书"
+
+Vibe Coding 中 AI 会帮你写大部分代码，但当 AI 生成的结果不对、或者你想微调某个组件的行为时，**查文档**是最快的解决方式。
+
+以 Ant Design 为例，它的文档地址是：`https://ant.design/components/overview-cn`
+
+查文档的标准流程：
+
+1. **明确需求**：比如"我需要表格支持行选择"
+2. **在文档中搜索**：搜索"Table"进入表格组件页面
+3. **查看示例**：文档中每个组件都有多个在线示例，找到"可选择"示例
+4. **复制代码**：把示例代码复制到你的项目中
+5. **查看 API 表格**：在页面底部找到 `rowSelection` 属性的完整配置项
+
+> 你也可以把文档链接直接发给 AI IDE："请参考 https://ant.design/components/table-cn 的 rowSelection API，帮我给用户表格加上批量选择功能"。给 AI 提供文档链接，生成的代码会更准确。
+
+各组件库的文档地址速查：
+
+| 组件库 | 文档地址 |
+| :--- | :--- |
+| Ant Design | `https://ant.design/components/overview-cn` |
+| shadcn/ui | `https://ui.shadcn.com/docs/components` |
+| HeroUI | `https://heroui.com/docs/components` |
+| Material UI | `https://mui.com/material-ui/all-components/` |
+| Element Plus | `https://element-plus.org/zh-CN/component/overview.html` |
+
+## 7. 小结
+
+三个实战场景覆盖了最常见的前端开发需求：
+
+| 场景 | 推荐组件库 | 核心特点 |
+| :--- | :--- | :--- |
+| 落地页 / 展示页 | HeroUI | 默认样式精美，动画流畅，视觉冲击力强 |
+| 产品功能页面 | shadcn/ui | 代码完全可控，深度定制灵活 |
+| 后台管理系统 | Ant Design | 业务组件丰富，表格表单开箱即用 |
+
+Vibe Coding 的工作流总结：
+
+1. 根据场景选择合适的组件库
+2. 用 AI IDE 描述你想要的页面结构和交互
+3. AI 生成初版代码，你预览效果
+4. 用自然语言继续迭代调整
+5. 遇到细节问题时查阅组件库文档
+
+### 练习
+
+选择以下任一场景，用 AI IDE + 组件库从零完成：
+
+1. 用 HeroUI 为你之前做的项目（比如霍格沃茨画像）做一个展示落地页
+2. 用 shadcn/ui 构建一个笔记应用的主界面（侧边栏 + 编辑器）
+3. 用 Ant Design 构建一个简单的内容管理后台（文章列表 + 新建文章表单）
+
+---
+
+## 附录：更多组件库一览
+
+除了正文介绍的四个核心库，前端生态中还有大量优秀的组件库。下面按框架分类列出，方便你根据项目需求选择。
+
+### Vue 生态
+
+| 组件库 | Stars | 简介 | 适用场景 |
+| :--- | :--- | :--- | :--- |
+| [Element Plus](https://element-plus.org) | ~27k | 饿了么团队打造的 Vue 3 企业级组件库，国内使用最广泛，中文生态极佳 | 中后台管理系统 |
+| [Vuetify](https://vuetifyjs.com) | ~41k | 最流行的 Vue Material Design 组件库，80+ 组件，文档完善 | Google 设计风格项目 |
+| [Ant Design Vue](https://antdv.com) | ~21k | 基于蚂蚁设计体系的 Vue 3 组件库，设计规范统一 | 企业级中后台 |
+| [Naive UI](https://www.naiveui.com) | ~18k | TypeScript 编写，主题定制性极强，不依赖 CSS 预处理器 | 对设计有独特要求的项目 |
+| [Quasar](https://quasar.dev) | ~27k | 一套代码构建 SPA、SSR、PWA、移动端和桌面端应用 | 跨平台项目 |
+| [Vant](https://vant-ui.github.io/vant) | ~24k | 有赞团队开发的轻量级移动端组件库，覆盖电商常见需求 | 移动端 H5 页面 |
+| [PrimeVue](https://primevue.org) | ~14k | 90+ 组件，支持多种主题（Material、Bootstrap 等） | 需要丰富组件和多主题 |
+| [Arco Design Vue](https://arco.design/vue) | ~3k | 字节跳动出品，组件质量高，内置暗色模式 | 中后台产品 |
+| [TDesign Vue Next](https://tdesign.tencent.com/vue-next) | ~2k | 腾讯出品，设计语言统一，覆盖桌面端常用场景 | 腾讯生态或企业级项目 |
+
+### React 生态
+
+| 组件库 | Stars | 简介 | 适用场景 |
+| :--- | :--- | :--- | :--- |
+| [Material UI (MUI)](https://mui.com) | ~95k | Google Material Design 规范的老牌实现，组件最全面，生态最成熟 | 快速构建企业级应用 |
+| [Ant Design](https://ant.design) | ~94k | 蚂蚁集团出品，内置大量高质量业务组件，中文开发者社区主导地位 | 企业级中后台 |
+| [shadcn/ui](https://ui.shadcn.com) | ~83k | 代码复制到项目中而非 npm 安装，基于 Radix UI + Tailwind CSS，完全可控 | 需要高度定制的项目 |
+| [Chakra UI](https://chakra-ui.com) | ~39k | 以开发体验为核心，API 简洁，内置无障碍访问支持 | 快速原型开发 |
+| [Mantine](https://mantine.dev) | ~28k | 100+ 组件和 50+ hooks，涵盖日期选择器、富文本编辑器等高级组件 | 需要开箱即用的全功能方案 |
+| [Headless UI](https://headlessui.com) | ~27k | Tailwind Labs 官方出品的无样式组件库，同时支持 React 和 Vue | 搭配 Tailwind CSS 使用 |
+| [HeroUI](https://heroui.com) | ~24k | 基于 Tailwind CSS + React Aria，默认样式精美，动画流畅 | 追求视觉品质的项目 |
+| [Radix UI](https://www.radix-ui.com) | ~17k | 无样式底层组件原语库，专注无障碍和组件行为，是 shadcn/ui 的底层基础 | 构建自定义设计系统 |