企业官网建设流程全解析

• 教程
• 文档

本文基于 easy-vibe 教程 Stage 2（初级-中级开发）前端方向的《Figma 与 MasterGo 入门》一章展开：讲解为什么项目制学习中需要前端设计工具、设计工具从 Photoshop 到 AI 时代的技术演进，以及 Figma 与 MasterGo 两个工具从零创建网页原型的完整实操流程。读完后，你将能够独立创建 Design 文件与 Frame 画板、用 Auto Layout 组织自适应布局、建立可复用组件体系，并使用 MasterGo AI 从一句话需求直接生成可编辑页面与代码，为后续的「设计稿转代码」环节打下基础。

1. 为什么要学前端设计工具？

在开始之前，需要先回答一个问题：既然直接写 HTML/CSS 也能把页面搭出来，多学一个软件和技术，真的有必要吗？

关键在于：把页面运行起来，和把产品设计好，是两个完全不同的概念。代码只关注「如何渲染在浏览器上、如何在不同设备上运行」；而前端设计工具解决的是信息分布的问题——前端交互怎么安排、不同页面之间怎么跳转、视觉优先级怎么分配。只需要在设计工具里搭一块画布，就能把版式、信息层级、交互方式集中在一块屏幕上对比确定，选出最合适的呈现方式。

如果直接开始写代码，或者直接用 AI 生成完整的前端页面，用户体验通常不会太好。严谨的产品会先考虑用户与前端交互的舒适度、不同页面要传达的内容分布，从用户视角先完成页面排布，再进行代码转换或生成。

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

2. 设计工具的演变：从 Photoshop 到「设计即代码」

2.1 前端设计工具的技术脉络

「前端设计工具」本质上是一条持续演化的技术线：

本节选取最具代表性的两款现代前端设计工具——Figma 和 MasterGo：一方面，它们都覆盖了现代 UI/UX 所需的核心能力（矢量编辑、组件系统、自动布局、代码交付），能支撑你完成从线框到高保真、再到开发交接的完整闭环；另一方面，这两款工具在 2025 年之后都陆续加入了实用的 AI 功能，帮助你在保证原型不变的前提下，把设计图变成真正可运行的程序。

2.2 Photoshop 时代：切图、量尺寸、抠标注

在现代前端专用工具诞生之前，设计师在本地通过一层层叠加的图层完成页面视觉设计，最终把体积不小的.psd源文件交付给前端工程师。而前端要精准还原设计图，必须手动完成三项繁琐且关键的工作：

1. 切图：从.psd的多层结构里，把按钮、图标、Logo、背景模块等独立视觉元素逐一拆分提取，再导出为 PNG、JPG 等网页能直接加载的图片格式——网页无法直接识别 PSD 的图层信息，只能依赖这些拆分后的图片呈现细节。
2. 量尺寸：用软件自带的测量工具，逐一确认每个元素的宽、高，以及模块之间的间距（margin/padding），确保所有尺寸精准到像素。
3. 抠标注：从设计图中提取那些「看不见却必须有的」隐性参数——文字的字号、字重、行距，每个色块的 RGB 或 HEX 色值等，相当于把设计师没写在纸上的「设计规格」手动抠出来记录下来。

2.3 从设计稿到代码：容器、结构块与组件思维

完成以上三步，前端的实现阶段才真正展开。无论使用原生 HTML/CSS/JS 还是 Vue、React 等框架，本质过程一致：前端以「容器」为核心载体，根据设计中各模块的层级与语义重建页面结构。

• 容器：具有明确布局边界、专门承载和组织子元素的单元。它不直接呈现具体内容，却通过 Flex、Grid 等规则为内部元素划定排列范围。
• 结构块：顶部导航栏、侧边栏、文章列表区、底部页脚等肉眼可辨的功能/内容区域，依托容器存在；每个结构块内部又嵌套更小的容器——例如一条文章列表项由「列表项容器」控制内边距与整体排版，再包裹标题、摘要、时间、封面图标等细节。
• 组件：在现代前端框架里，这些结构块及关联容器通常被实现为「组件」——带有清晰边界、整合了容器布局与逻辑的可复用界面单元。设计稿中重复出现、形态一致的部分（统一风格的按钮、反复使用的文章卡片）被抽象成组件后，既能在不同页面复用、减少重复开发，也能通过容器统一规则保证所有复用处布局与风格高度一致。

随后，样式系统负责还原视觉和布局：

• 切图阶段导出的 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及伪类或状态类名上。

切图、尺寸、标注提供一组精确的视觉参数，组件和结构块提供承载这些参数的代码组织单元，两者结合，构成可维护、可复用的界面实现。

然而，以本地文件为中心的模式天然是低效的：版本靠邮件和网盘传输，新旧稿件容易混淆，设计与开发之间高度依赖上述复杂交互，协作成本和出错概率都不低。

2.4 Sketch 与 Figma：组件思维与云端协作

移动互联网兴起后，界面复杂度和迭代速度需求快速上升，Photoshop 的「大而全」逐渐显得笨重。此时出现了Sketch：它专注 UI 设计本身，剥离大部分视觉后期处理负担；用Symbols把按钮、导航、输入框等高复用元素组件化，一处修改全局同步；再配合 Zeplin 一类工具自动生成标注和样式片段。Sketch 把「组件思维」引入了设计工作流，但它仍是基于本地文件的桌面应用，实时协作要靠云盘、第三方插件或版本工具绕行，没有从底层解决「多个人同时改同一份稿子」的问题。

真正改变游戏规则的是Figma：自 2016 年起，它把 UI 设计、原型制作、评论协作统一整合到浏览器中，支持多人实时光标、在线评论、版本时间线、分享链接等能力——今天看起来稀松平常，在当时是对 Photoshop/Sketch 模式的正面挑战。至此，界面设计不再是散落在各自电脑里的文件，而是一份集中、在线、实时更新的云端画布。

2.5 AI 时代：插件导出、MCP 与原生代码生成

围绕这块云端画布，设计到代码的自动化经历了三个阶段：

1. 插件时代：依赖各类平台插件，把设计稿中的组件、样式信息半自动导出为代码片段（React/Vue 组件骨架、CSS 变量等），本质是通过插件做结构化信息提取。
2. MCP 阶段：大部分设计平台开始支持大模型的MCP（Model Context Protocol，模型上下文协议）——该协议提供一套标准机制，让大模型能安全、可控地访问设计文件、插件接口与项目元数据，从而更便捷地把设计稿导出为代码。
3. 原生生成阶段：在插件与 MCP 基础上，前端代码自动化进一步迈入原生支持「从设计稿直接推导代码结构」的阶段，可在设计工具内一键生成前端项目骨架、组件层次、样式体系及对应代码。设计师与前端工程师得以从手动搬运设计细节的工作中解放出来，把精力投入到用户体验优化与功能迭代上。

3. Figma 实战入门

接下来进入实际操作环节。本章只学习 Figma 的基本操作逻辑，确保完全没用过设计工具的读者也能跟着完成练习。如果你想系统学习 Figma 的完整功能，建议参考 Figma 官方帮助中心「Figma Design for beginners」系列教程，或用官方 Sites 相关教程搭建一个类似个人作品集的简单网站。

3.1 认识 Figma 首页与功能入口

登录后进入 Figma 首页：左侧是项目的新建和资源管理入口，右上角一排按钮是 Figma 的常见功能入口。

各入口的职责：

• Make：用一句话让 AI 先生成大概的界面或结构草稿；
• Design：真正画网页/App 界面、搭组件和做原型的主工作区；
• FigJam：团队白板，用于贴便利贴、画流程和前期讨论；
• Slides：演示文稿制作；
• Buzz：品牌资产规模化生产工具，批量生成内容以保持品牌一致性；
• Site：把设计整理成真正可访问的网页或文档站对外展示。

功能看起来很多，不必害怕一开始操作出错，也不用想着一步做对——这类功能工具本质上是熟能生巧，先玩起来即可。本教程聚焦Design功能的快速入门。

3.2 新建 Design 文件：认识三块区域界面

在首页或右上角入口中选择Design新建文件，即可进入空白设计画布。这个界面大致分成三块：

1. 左侧：页面和图层，用于查看和修改页面、元素的从属关系；
2. 中间：画布，用于查看当前效果；
3. 右侧：属性和样式，用于修改具体的形状、颜色、样式；
4. 底部：一条工具栏，用于切换工具，包含选框、画形状、输入文字、评论、插件等。

选中某个工具后，可以按Esc键返回默认的鼠标工具。

3.3 创建你的第一个 Frame（画板）

正式放置元素之前，需要先为页面确定一个清晰的边界，这个边界由Frame承担。在底部工具栏中选择 Frame 工具，或直接按键盘F，然后在画布上拖出一个矩形区域：

1. 使用底部工具栏里的 Frame 工具，或者直接按键盘F；
2. 在画布中拖出矩形区域后，在右侧属性栏把宽度改成例如1440，高度改成900（一屏网页的常用尺寸之一）；
3. 在左侧图层栏把该 Frame 重命名，例如My First Page或你的项目名。

这个 Frame 就是一屏界面的页面容器：之后的标题、文字、按钮、图片等内容都应该放在 Frame 内部，而不是散落在画布任意位置。以 Frame 为边界组织内容，有助于在后续进行滚动设置、适配不同设备尺寸、导出画面及制作原型时保持结构可控。

3.4 在 Frame 里放文字和简单元素

有了容器，接下来放置最基本的组件：标题、副标题、按钮、占位图块。

1. 选择文字工具（底部工具栏中的T），在 Frame 里点击一下，输入页面标题，例如My Portfolio；在右侧属性里把字体调大（例如 96），字重调粗。
2. 在标题下方，再用文字工具输入一两句页面说明；字号可以小一些，行高略放大一点，读起来不那么挤。
3. 画一个按钮雏形：用矩形工具在标题下方画一个约200 × 48的矩形，右侧属性里给它一个比较明显的填充颜色，再适当加一点圆角。
4. 用文字工具在矩形上方输入按钮文字，例如Get Started；把矩形和文字一并选中，用顶部对齐工具让文字水平、垂直都居中。
5. 在按钮一侧或下方，再画一个较大的浅灰色矩形作为「图片占位区」，后面可以放展示图片。

做到这里，你已经有了一个非常简陋但结构完整的「首页草稿」：一个标题、一段话、一个按钮、一个主要展示区域。这正是后续做 Auto Layout、组件化操作的素材。

3.5 善用 Auto Layout 整合元素

如果所有元素只是随手拖拽，页面很快就会乱。Figma 里一个非常重要的概念是Auto Layout：它能把一组元素变成一个带规则的容器。

操作方式：选中「主标题 + 副标题 + 按钮」三样，在右侧属性栏点击Add Auto layout。这时三者会被包在一个容器里，你可以调整以下参数，容器内元素布局会随之自动适应：

• 元素是竖排还是横排（Flow 方向）；
• 元素之间的间距（Gap）；
• 整个区块离容器边缘的内边距（padding）。

按钮内部同样适用 Auto Layout，可以实现「调整文字时按钮长度自动变化」的效果：

1. 选中按钮背景矩形和按钮文字，添加 Auto Layout，让二者变成一个「按钮容器」；
2. 选中该按钮容器，把宽、高都设置为Hug contents。

这样一来，文字始终保持在按钮正中间；文字多一点、少一点，按钮宽度都会自动跟随变化——这正是后续按钮做成组件后依然保持自适应的原因。

3.6 将按钮变为可复用组件

组件（Component）的意思就是可以被反复利用的元素：只要预感某个元素之后还会反复用到，就可以把它做成组件。以已加好 Auto Layout 的按钮为例：

1. 选中整个按钮容器；
2. 右键选择Create component（创建组件）。

这个按钮就从一组普通图层变成了组件母版。之后在任何页面或 Frame 里需要同样风格的按钮，直接从左侧Assets面板拖出来使用即可。

所有这样放置的按钮都是母版的同步拷贝：修改母版的颜色、圆角或间距时，所有实例都会自动同步更新。到这里，你已经初步掌握了 Figma 的简单用法——不需要一开始就弄懂所有功能，先照着做出第一个简单页面、熟悉这几个核心操作，再慢慢探索官方教程里的更多能力即可。

4. MasterGo 实战入门

4.1 定位：与 Figma 相似的「中国版」工作流

理解 Figma 的基础工作流程后，再看MasterGo：可以把它简单看作中国版的 Figma，但在部分功能上有一定区别。整体上它延续了与 Figma 相似的界面布局和操作理念：同样有画布、图层树和属性面板，同样支持组件、样式、自动布局和多人协作。更完整的知识可参考 MasterGo 官方教程中的全程实用教程。

4.2 新建一个设计文件

1. 进入 MasterGo 后台：打开 MasterGo 官网并登录，进入后看到类似「文件列表 / 项目列表」的首页区域，用来管理设计文件。
2. 创建新文件：点击右上角「+ 设计文件」按钮，或选择导入 Figma 等文件；点击后进入一个空白画布，这就是 MasterGo 的设计工作区。
3. 认识基本界面区块：学会 Figma 后，MasterGo 的使用方式大同小异，界面主要分为四个区域：
   • 顶部工具栏：位于画布最上方，左侧是文件位置和文件名，中间是一排常用工具按钮（选择、区域/画板、形状、文本、注释、评论、插件选择和 AI 工具等），右侧是当前在线成员、分享入口以及画布缩放和预览控制入口；
   • 左侧面板：主要分为「图层」和「资源」两个标签；停留在图层标签时，可看到页面列表以及该页面下所有图层的结构和层级；
   • 中间画布区：具体绘制和排版的工作区，所有 Frame、组件和图形都展示在这里；
   • 右侧属性面板：用于查看和编辑选中对象的属性，例如大小、位置、对齐方式、背景填充、描边、圆角等；若未选中任何对象，则显示画布相关设置（画布背景色、标签和导出选项）。

4.3 创建你的第一个 Frame

放东西之前，需要一个页面容器来确定界面边界和尺寸。这个容器在 MasterGo 里通常也叫Frame：

1. 选择 Frame 工具：在工具栏中找到 Frame / 画板工具，点击后可使用预设参数直接把内容创建到画板；或者使用快捷键（通常是F，如有差异以实际界面为准）。
2. 在画布中拖出一个矩形区域：拖出后看到带选中框的区域，在右侧属性面板可看到该 Frame 的宽度和高度；把宽度改成例如1440，高度改成900（一屏网页常用尺寸之一）。
3. 重命名 Frame：在左侧图层面板找到该 Frame，双击名称，改成项目名，例如My First Page，或任意你自拟的页面名。

4.4 创建画板内容与 Auto Layout 的行为差异

有了容器后，用与 Figma 类似的方式很容易得到相似的展示页面——还可以尝试复制 Figma 画板中的文字元素，MasterGo 支持文本组件的直接粘贴导入。

值得注意的是Auto Layout 的行为差异：在 MasterGo 中，若想实现与 Figma 相似「按钮长度随文字长度变化」的效果，需要先在对应矩形元素的基础上创建一个容器或组件；成功创建容器后，把按钮的矩形和文字放入该容器中，再在右侧找到 Auto Layout 按钮启用自动布局功能，即可得到宽度随文字长度自适应的按钮。这与 Figma 中「先选中元素再 Add Auto layout」的交互顺序略有不同，实际操作时以界面为准。

4.5 用 AI 一键生成页面

MasterGo 中一个值得重点关注的功能是AI 生成页面（MasterGo AI）：你可以用一句话、或携带参考图，生成对应的 MasterGo 可编辑组件，并得到可直接使用的代码。

典型流程：

1. 在工具栏进入MasterGo AI（Beta）面板，选择「AI 生成界面」；
2. 用中文或英文直接输入需求（面板支持选择目标框架，如 React，并可附带参考图）；
3. 页面会根据需求返回一份结构清晰的页面排布设计文档；
4. 设计文档生成结束后，点击「开始生成」，稍作等待即可获取对应的实际网页效果。

此时有两种操作选择：一是点击蓝色按钮将生成结果直接插入画布；二是点击代码预览功能，直接获取当前完整页面的代码。将结果插入画布后，你还可以对网页的整体布局、元素细节（字体、颜色、间距等）做更精细的调整，直至最终效果完全符合预期。

5. 从原型到代码：衔接下一步

到这里，你已经能够用 Figma 和 MasterGo 创建出结构完整的界面原型。接下来的关键问题是：如何把这些设计稿转化为真正能在浏览器里运行的前端代码？

参考 从设计原型到项目代码 一章的归纳，从原型到代码通常有三条典型路径：

该章将详细讲解多模态 AI 直接转换（把设计稿截图发给 AI 生成 HTML/React 代码）、Figma Make（Figma 官方 AI 工具高精度还原设计并导出代码）、MasterGo AI（一键生成可编辑页面并获取代码）三种方法的具体操作与常见问题处理。这些方法各有优劣，建议根据项目需求选择合适的工作流。

6. 总结与练习建议

通过本章节的学习，你应该已经掌握：

1. 前端设计工具的价值：理解了为什么需要设计工具，以及它们如何解决信息分布、团队协作的问题，并掌握了从 Photoshop 切图/量尺寸/抠标注到容器、组件思维、云端协作与 AI 生成的完整演进脉络。
2. Figma 基础操作：创建 Design 文件与 Frame 画板（快捷键F，常用尺寸1440 × 900）；添加文字、形状等基础元素；用 Auto Layout（含 Hug contents）实现自适应布局；创建可复用组件母版并通过 Assets 面板复用实例。
3. MasterGo 基础操作：熟悉与 Figma 相似的界面布局（顶部工具栏、左侧图层/资源面板、中间画布、右侧属性面板）；创建 Frame 与基础画板内容；注意 Auto Layout 需先建容器/组件的行为差异；使用 AI 生成页面功能快速创建原型并获取代码。

接下来可以尝试：

• 为自己设计一个个人作品集页面；
• 为接下来的项目设计界面原型；
• 学习 从设计原型到项目代码，把设计稿转化为可运行的代码。

如果你正在完成 一起做霍格沃茨画像（Stage 2 前端方向的实战项目 4），可以先把界面原型在 Figma/MasterGo 中设计好，再导出代码与 AI 对话功能结合——该项目还会涉及 GitHub 代码仓库与 Zeabur 部署，正好把「设计 → 代码 → 上线」的完整链路走一遍。本章所在的完整课程脉络见 Stage 2 课程索引；本章法语原文位于 docs/fr-fr/stage-2/frontend/figma-mastergo/index.md，中文原版为 docs/zh-cn/stage-2/frontend/figma-mastergo/index.md，可对照阅读。

• 教程
• 文档