教程文档【免费下载链接】easy-vibe从 0 到 1 学会 vibe coding项目制学习项目地址https://gitcode.com/datawhalechina/easy-vibe点击查看免费下载本文基于 easy-vibe 教程 Stage 2初级-中级开发前端方向的《Figma 与 MasterGo 入门》一章展开讲解为什么项目制学习中需要前端设计工具、设计工具从 Photoshop 到 AI 时代的技术演进以及 Figma 与 MasterGo 两个工具从零创建网页原型的完整实操流程。读完后你将能够独立创建 Design 文件与 Frame 画板、用 Auto Layout 组织自适应布局、建立可复用组件体系并使用 MasterGo AI 从一句话需求直接生成可编辑页面与代码为后续的「设计稿转代码」环节打下基础。1. 为什么要学前端设计工具在开始之前需要先回答一个问题既然直接写 HTML/CSS 也能把页面搭出来多学一个软件和技术真的有必要吗关键在于把页面运行起来和把产品设计好是两个完全不同的概念。代码只关注「如何渲染在浏览器上、如何在不同设备上运行」而前端设计工具解决的是信息分布的问题——前端交互怎么安排、不同页面之间怎么跳转、视觉优先级怎么分配。只需要在设计工具里搭一块画布就能把版式、信息层级、交互方式集中在一块屏幕上对比确定选出最合适的呈现方式。如果直接开始写代码或者直接用 AI 生成完整的前端页面用户体验通常不会太好。严谨的产品会先考虑用户与前端交互的舒适度、不同页面要传达的内容分布从用户视角先完成页面排布再进行代码转换或生成。从团队协作角度看前端设计工具还显著降低了多方合作成本设计师、产品、开发不再各自对着脑补的画面或抽象的代码说明工作而是支持多人实时协同——大家围绕一份可视、可标注、可迭代的画布讨论版本管理、需求变更与反馈意见。更进一步现代前端设计工具早已不只是「画图软件」一键生成部分代码、管理设计系统和组件库新时代的设计工具已能把大量重复性体力劳动对齐、标注、导出、改样式自动化或批量化极大提升了页面设计的开发效率。2. 设计工具的演变从 Photoshop 到「设计即代码」2.1 前端设计工具的技术脉络「前端设计工具」本质上是一条持续演化的技术线阶段代表工具核心特征90 年代Photoshop本地位图编辑为主界面设计被「全能型」软件顺带承包2010 年前后Sketch带来矢量化、组件化工作流Symbols配合 Zeplin 自动生成标注2016 年之后Figma把 UI 设计、原型、评论协作彻底搬上云端多人实时协同2025 年之后Figma / MasterGo AI「一句话生成页面草稿」「设计稿直接转可运行前端结构」设计即代码、人机共创落地本节选取最具代表性的两款现代前端设计工具——Figma 和 MasterGo一方面它们都覆盖了现代 UI/UX 所需的核心能力矢量编辑、组件系统、自动布局、代码交付能支撑你完成从线框到高保真、再到开发交接的完整闭环另一方面这两款工具在 2025 年之后都陆续加入了实用的 AI 功能帮助你在保证原型不变的前提下把设计图变成真正可运行的程序。2.2 Photoshop 时代切图、量尺寸、抠标注在现代前端专用工具诞生之前设计师在本地通过一层层叠加的图层完成页面视觉设计最终把体积不小的.psd源文件交付给前端工程师。而前端要精准还原设计图必须手动完成三项繁琐且关键的工作切图从.psd的多层结构里把按钮、图标、Logo、背景模块等独立视觉元素逐一拆分提取再导出为 PNG、JPG 等网页能直接加载的图片格式——网页无法直接识别 PSD 的图层信息只能依赖这些拆分后的图片呈现细节。量尺寸用软件自带的测量工具逐一确认每个元素的宽、高以及模块之间的间距margin/padding确保所有尺寸精准到像素。抠标注从设计图中提取那些「看不见却必须有的」隐性参数——文字的字号、字重、行距每个色块的 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 与原生代码生成围绕这块云端画布设计到代码的自动化经历了三个阶段插件时代依赖各类平台插件把设计稿中的组件、样式信息半自动导出为代码片段React/Vue 组件骨架、CSS 变量等本质是通过插件做结构化信息提取。MCP 阶段大部分设计平台开始支持大模型的MCPModel Context Protocol模型上下文协议——该协议提供一套标准机制让大模型能安全、可控地访问设计文件、插件接口与项目元数据从而更便捷地把设计稿导出为代码。原生生成阶段在插件与 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新建文件即可进入空白设计画布。这个界面大致分成三块左侧页面和图层用于查看和修改页面、元素的从属关系中间画布用于查看当前效果右侧属性和样式用于修改具体的形状、颜色、样式底部一条工具栏用于切换工具包含选框、画形状、输入文字、评论、插件等。选中某个工具后可以按Esc键返回默认的鼠标工具。3.3 创建你的第一个 Frame画板正式放置元素之前需要先为页面确定一个清晰的边界这个边界由Frame承担。在底部工具栏中选择 Frame 工具或直接按键盘F然后在画布上拖出一个矩形区域使用底部工具栏里的 Frame 工具或者直接按键盘F在画布中拖出矩形区域后在右侧属性栏把宽度改成例如1440高度改成900一屏网页的常用尺寸之一在左侧图层栏把该 Frame 重命名例如My First Page或你的项目名。这个 Frame 就是一屏界面的页面容器之后的标题、文字、按钮、图片等内容都应该放在 Frame 内部而不是散落在画布任意位置。以 Frame 为边界组织内容有助于在后续进行滚动设置、适配不同设备尺寸、导出画面及制作原型时保持结构可控。3.4 在 Frame 里放文字和简单元素有了容器接下来放置最基本的组件标题、副标题、按钮、占位图块。选择文字工具底部工具栏中的T在 Frame 里点击一下输入页面标题例如My Portfolio在右侧属性里把字体调大例如 96字重调粗。在标题下方再用文字工具输入一两句页面说明字号可以小一些行高略放大一点读起来不那么挤。画一个按钮雏形用矩形工具在标题下方画一个约200 × 48的矩形右侧属性里给它一个比较明显的填充颜色再适当加一点圆角。用文字工具在矩形上方输入按钮文字例如Get Started把矩形和文字一并选中用顶部对齐工具让文字水平、垂直都居中。在按钮一侧或下方再画一个较大的浅灰色矩形作为「图片占位区」后面可以放展示图片。做到这里你已经有了一个非常简陋但结构完整的「首页草稿」一个标题、一段话、一个按钮、一个主要展示区域。这正是后续做 Auto Layout、组件化操作的素材。3.5 善用 Auto Layout 整合元素如果所有元素只是随手拖拽页面很快就会乱。Figma 里一个非常重要的概念是Auto Layout它能把一组元素变成一个带规则的容器。操作方式选中「主标题 副标题 按钮」三样在右侧属性栏点击Add Auto layout。这时三者会被包在一个容器里你可以调整以下参数容器内元素布局会随之自动适应元素是竖排还是横排Flow 方向元素之间的间距Gap整个区块离容器边缘的内边距padding。按钮内部同样适用 Auto Layout可以实现「调整文字时按钮长度自动变化」的效果选中按钮背景矩形和按钮文字添加 Auto Layout让二者变成一个「按钮容器」选中该按钮容器把宽、高都设置为Hug contents。这样一来文字始终保持在按钮正中间文字多一点、少一点按钮宽度都会自动跟随变化——这正是后续按钮做成组件后依然保持自适应的原因。3.6 将按钮变为可复用组件组件Component的意思就是可以被反复利用的元素只要预感某个元素之后还会反复用到就可以把它做成组件。以已加好 Auto Layout 的按钮为例选中整个按钮容器右键选择Create component创建组件。这个按钮就从一组普通图层变成了组件母版。之后在任何页面或 Frame 里需要同样风格的按钮直接从左侧Assets面板拖出来使用即可。所有这样放置的按钮都是母版的同步拷贝修改母版的颜色、圆角或间距时所有实例都会自动同步更新。到这里你已经初步掌握了 Figma 的简单用法——不需要一开始就弄懂所有功能先照着做出第一个简单页面、熟悉这几个核心操作再慢慢探索官方教程里的更多能力即可。4. MasterGo 实战入门4.1 定位与 Figma 相似的「中国版」工作流理解 Figma 的基础工作流程后再看MasterGo可以把它简单看作中国版的 Figma但在部分功能上有一定区别。整体上它延续了与 Figma 相似的界面布局和操作理念同样有画布、图层树和属性面板同样支持组件、样式、自动布局和多人协作。更完整的知识可参考 MasterGo 官方教程中的全程实用教程。4.2 新建一个设计文件进入 MasterGo 后台打开 MasterGo 官网并登录进入后看到类似「文件列表 / 项目列表」的首页区域用来管理设计文件。创建新文件点击右上角「 设计文件」按钮或选择导入 Figma 等文件点击后进入一个空白画布这就是 MasterGo 的设计工作区。认识基本界面区块学会 Figma 后MasterGo 的使用方式大同小异界面主要分为四个区域顶部工具栏位于画布最上方左侧是文件位置和文件名中间是一排常用工具按钮选择、区域/画板、形状、文本、注释、评论、插件选择和 AI 工具等右侧是当前在线成员、分享入口以及画布缩放和预览控制入口左侧面板主要分为「图层」和「资源」两个标签停留在图层标签时可看到页面列表以及该页面下所有图层的结构和层级中间画布区具体绘制和排版的工作区所有 Frame、组件和图形都展示在这里右侧属性面板用于查看和编辑选中对象的属性例如大小、位置、对齐方式、背景填充、描边、圆角等若未选中任何对象则显示画布相关设置画布背景色、标签和导出选项。4.3 创建你的第一个 Frame放东西之前需要一个页面容器来确定界面边界和尺寸。这个容器在 MasterGo 里通常也叫Frame选择 Frame 工具在工具栏中找到 Frame / 画板工具点击后可使用预设参数直接把内容创建到画板或者使用快捷键通常是F如有差异以实际界面为准。在画布中拖出一个矩形区域拖出后看到带选中框的区域在右侧属性面板可看到该 Frame 的宽度和高度把宽度改成例如1440高度改成900一屏网页常用尺寸之一。重命名 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 可编辑组件并得到可直接使用的代码。典型流程在工具栏进入MasterGo AIBeta面板选择「AI 生成界面」用中文或英文直接输入需求面板支持选择目标框架如 React并可附带参考图页面会根据需求返回一份结构清晰的页面排布设计文档设计文档生成结束后点击「开始生成」稍作等待即可获取对应的实际网页效果。此时有两种操作选择一是点击蓝色按钮将生成结果直接插入画布二是点击代码预览功能直接获取当前完整页面的代码。将结果插入画布后你还可以对网页的整体布局、元素细节字体、颜色、间距等做更精细的调整直至最终效果完全符合预期。5. 从原型到代码衔接下一步到这里你已经能够用 Figma 和 MasterGo 创建出结构完整的界面原型。接下来的关键问题是如何把这些设计稿转化为真正能在浏览器里运行的前端代码参考 从设计原型到项目代码 一章的归纳从原型到代码通常有三条典型路径路径方法特点适用场景路径 1多模态大模型看图还原代码灵活不依赖特定工具快速验证原型、简单页面路径 2通过平台自身能力或插件导出代码还原保真度高、可编辑性强Figma / MasterGo 用户路径 3平台结合 MCP 能力导出代码自动化程度高、可定制需要深度集成的工作流该章将详细讲解多模态 AI 直接转换把设计稿截图发给 AI 生成 HTML/React 代码、Figma MakeFigma 官方 AI 工具高精度还原设计并导出代码、MasterGo AI一键生成可编辑页面并获取代码三种方法的具体操作与常见问题处理。这些方法各有优劣建议根据项目需求选择合适的工作流。6. 总结与练习建议通过本章节的学习你应该已经掌握前端设计工具的价值理解了为什么需要设计工具以及它们如何解决信息分布、团队协作的问题并掌握了从 Photoshop 切图/量尺寸/抠标注到容器、组件思维、云端协作与 AI 生成的完整演进脉络。Figma 基础操作创建 Design 文件与 Frame 画板快捷键F常用尺寸1440 × 900添加文字、形状等基础元素用 Auto Layout含 Hug contents实现自适应布局创建可复用组件母版并通过 Assets 面板复用实例。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可对照阅读。赞分享教程文档【免费下载链接】easy-vibe从 0 到 1 学会 vibe coding项目制学习项目地址https://gitcode.com/datawhalechina/easy-vibe点击查看免费下载相关推荐easy-vibe 前端设计实战用 Figma 与 MasterGo 从零搭建网页原型easy vibe 前端设计实战用 Figma 与 MasterGo 从零搭建网页原型 本篇技术指南是 easy vibe 项目 Stage 2 前端模块的一教程文档Figma MasterGo 从入门到首个网页原型Easy-Vibe 前端设计工具实战指南Figma MasterGo 从入门到首个网页原型Easy Vibe 前端设计工具实战指南 本文是 Easy Vibe 项目《Junior Develop教程文档easy-vibe 前端设计课Figma 与 MasterGo 从零搭建网页原型到设计转代码的完整入门实战easy vibe 前端设计课Figma 与 MasterGo 从零搭建网页原型到设计转代码的完整入门实战 本篇是 easy vibe 课程「初级 中级开发教程文档人工智能Vibe Coding上一篇miscii-14b-1028-4bit模型量化技术详解从FP16到INT4的压缩魔法下一篇Hoppscotch邀请协作功能团队成员加入流程详解创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考