Trae x Figma MCP一键将设计稿转化为精美网页

前言

在当今快节奏的数字化产品开发中，设计师与开发者的协作效率至关重要。为了打破设计与开发之间的壁垒，我们引入了一种创新的工作流，将强大的设计工具Figma与智能体应用创建平台Trae相结合。借助蓝耘MCP广场提供的Figma MCP（多能力组件），我们能够无缝连接Figma的设计能力与Trae的自动化流程，从而实现将Figma设计稿一键转化为功能完备的网页。这种集成不仅极大地提升了开发效率，减少了手动转换的人为错误，还让设计师能够更专注于创作，而开发者则可以更快地将设计落地为产品。

1. 获取Figma账号 token。

在官网下载好Figma之后，本地登录上点击左上角头像->点击Setting进入到设置界面在设置界面点击上方导航栏Security 点击Generate new token进行token的创建选择你的token的时间，这里我选择的是90天 然后将右侧的权限都设置到最高权限设置好之后点击右下角Generate token进行token的生成然后他就会生成你的专属token了，这里我们一定要进行保存，不然的话我们就得重新创建一个了

2. 获取Figma MCP代码

点击console.lanyun.net/#/register?...进行注册，输入对应的信息即可进行登录进入到主界面，点击上方导航栏上的MCP广场在搜索框中输入figma进行对应MCP的检索，选择框出来的这个Figma 这款MCP的具体代码如下：

JSON 复制代码

{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

因为我是Windows系统的，固然我使用的就是Windows版本的JSON代码

根据代码的分析，我们可以看到我们需要填入一个token 将上面我们创建的token填入即可

这个时候其实还有一个更加方便的方法，在蓝耘MCP广场的工具详情这里，你直接把你获取到的token填写进去，他会生成一个专属的JSON代码了，这种会减少很多的麻烦

因为蓝耘已经将这款MCP进行托管了，所以可以在线进行JSON代码的生成效果如下：

JSON 复制代码

{
  "mcpServers": {
    "Figma-Context-MCP": {
      "type": "sse",
      "url": "http://xxxxxxxxxxxxxxx.mcp.lanyun.net:8088/sse/Figma-Context-MCP"
    }
  }
}

并且8月蓝耘还在举办 MaaS 特价/折扣资源包和周周抢免费无门槛代金券活动

大量的token都在送，感兴趣的赶紧来吧 console.lanyun.net/#/register?...

3.打开trae进行mcp的链接以及智能体集成

点击右上角的齿轮进入到设置界面，点击导航栏MCP，选择手动添加输入我们的JSON代码，点击确定，然后他就会进行加载操作如果链接成功的话效果如下：我来解释下这两个功能的作用

get_figma_data 功能

作用：用于获取 Figma 文件的全面数据，涵盖布局（比如设计元素的位置、层级关系）、内容（像文本内容、组件属性等），能让外部系统深度了解 Figma 设计文件的结构与细节。
应用场景：在设计协同流程中，可将 Figma 设计数据同步到研发文档平台，辅助开发人员精准理解设计逻辑；或者用于设计资产分析，统计多个 Figma 文件里重复组件的使用情况。
技术逻辑 ：需调用 Figma 的 API（如 Figma REST API ），通过文件 key 等参数，请求获取文件的 JSON 格式数据，解析后整理出布局、内容等结构化信息返回。

download_figma_images 功能

作用：依据 Figma 文件，下载其中用到的 SVG（矢量图，缩放不失真，利于前端灵活适配）和 PNG（位图，保留像素细节，适合固定尺寸展示）格式图片，方便离线使用或在其他系统嵌入这些设计用图。
应用场景：前端开发时，快速下载 Figma 里的图标、切图，用于页面开发；或者在制作设计资源包时，批量导出 Figma 中的图片素材归档。
技术逻辑：先借助 Figma API 获取文件中图片节点的信息（含图片哈希等标识），再通过 API 提供的图片下载链接（结合图片标识拼接），发起 HTTP 请求下载对应格式（SVG/PNG ）的图片文件到本地或指定存储位置。

在mcp连接成功之后，我们点击设置来到智能体界面，点击新建提示词如下，可以参考一二

bash 复制代码

你是资深 Figma 设计大师，精通界面设计全流程。以专业、清晰、高效的语气，为用户解决 Figma 设计难题：

  

- **角色与能力**：深度掌握 Figma 功能，能指导组件库搭建、自动布局运用，解析设计系统逻辑；精准把控版式、色彩、交互原型设计，输出符合用户体验与品牌规范的方案。
- **工作流程**：先明确用户需求（如 "设计官网首页" 需问清风格、功能模块 ），用`get_figma_data`获取 / 分析现有文件结构，结合需求规划布局；需出图时，用`download_figma_images`规整导出素材，全程同步思路、交付设计文件 / 切图 / 标注说明 。
- **规则与偏好**：优先复用成熟组件库；注重可访问性设计（色彩对比度、语义化标签 ）；输出设计时，同步标注关键参数（如响应式断点、动效时长 ），帮用户落地开发 。

填写好提示词时候，在下方勾选上我们的Framelink Figma MCP 点击创建，智能体就能创建好了，点击立即使用

4、Figma挑选合适的模版

在Templates and tools挑选上你喜欢的模版点击Open in Figma 进入到设置界面，我们就能看到详细的设计稿信息了点击右上角的share，点击Copy Link复制链接

bash 复制代码

https://www.figma.com/design/kIqXy1T1keaSx72KhjdUaj/Presentation-Template-with-Yuppies-Illustrations--Community-?node-id=0-1&t=tQDg2P5lgKBRyD7g-1

5、复制元素链接并交给AI，预览结果

接下来，将链接给ai，让他帮我们根据当前的设计稿生成一个网页他先先获取这个 Figma 设计文件的数据，分析其结构和内容然后他将设计稿中的图片进行下载下来了然后就进行了网页的设计这里还帮我们进行演示了具体效果，效果说实话真的特别好

并且这里还有详细的README文件来介绍这个设计稿生成的网页

如果你想在Figma中针对某个板块进行设计的话，Figma 可以直接定位到某个元素的链接，我们选中一个区域后，右键复制链接

我将已经将这个网页部署到了云端，感兴趣的可以来看看设计稿网页

总结

通过本文的实践，我们成功展示了如何利用Trae、Figma以及蓝耘MCP广场，将繁琐的设计稿转换工作流程，革新为一套高效、自动化的解决方案。从获取Figma的个人访问令牌，到在蓝耘MCP广场配置专属的MCP服务，再到Trae中创建并集成能够理解设计语言的智能体，每一步都旨在简化操作，提升协同效率。

整个流程的核心优势在于其高度的自动化和智能化。智能体通过get_figma_data功能深入理解设计稿的布局与内容，再利用download_figma_images功能精准获取所需的设计素材，最终自动生成结构清晰、样式精美的网页代码。这不仅为开发者节省了大量重复性的切图和样式编写时间，也确保了最终产品能最大程度地忠于原始设计。

无论是针对整个设计文件，还是具体到某一个设计元素，该方法都展现出了极大的灵活性和实用性。这套工作流的建立，无疑为设计师和开发者之间架起了一座坚实的桥梁，让"所见即所得"的开发体验不再遥远。对于追求极致效率和高质量交付的团队而言，这套Trae与Figma的集成方案，无疑是一个值得尝试和推广的优秀实践。