写点什么

MCP 教程:将 Figma 设计稿转化为前端代码

  • 2025-05-09
    北京
  • 本文字数:2759 字

    阅读完需:约 9 分钟

MCP 教程:将 Figma 设计稿转化为前端代码

还在手动从设计稿提取样式、编写基础代码?试试 Trae IDE 的模型上下文协议(MCP)功能吧。通过使用 MCP Server - Figma AI Bridge,自动将你的 Figma 设计稿转换为整洁的前端代码,并生成相应的网页。简单高效,无需复杂配置,跟随文中的步骤操作,即可体验智能化的设计交付。让我们开始吧!


效果展示

演示环境


本教程中,小编使用的系统环境如下:

  • Trae IDE 版本:0.5.5(Trae IDE 下载链接

  • macOS 版本:14.7

  • Node.js 版本:20.19.1

  • npx 版本:10.9.2

  • Python 版本:3.13.3

  • uvx 版本:0.6.16

操作步骤


跟随教程,在项目中集成 MCP Server - Figma AI Bridge,配置智能体,然后使用指令自动生成前端页面。

第一步:安装 Trae IDE


Trae IDE 与 AI 深度集成,提供智能问答、代码自动补全以及基于 Agent 的 AI 自动编程能力。使用 Trae 开发项目时,你可以与 AI 灵活协作,提升开发效率。前往 Trae 官网(Trae IDE),下载 Trae IDE 的安装包,然后将其安装至你的计算机。

第二步:配置 MCP Sever 的运行环境


为确保正常启动 MCP Server,你需要安装以下依赖:

  • npx:依赖于 Node.js,版本需大于等于 18。

  • uvx:命令行工具,用于快速运行 Python 脚本。


首先,为便于后续通过命令行安装依赖,让我们在 Trae IDE 中打开终端。步骤如下:


  1. 启动 Trae IDE。

  2. 在顶部菜单栏中,点击 终端 > 新建终端



界面底部显示 终端 面板。



打开终端后,使用以下步骤安装 uvx:

  1. 前往 Python 官网,下载并安装 Python 3.8 或更高版本。

  2. 安装完成后,在终端中执行以下命令确认是否安装成功。


python3 --version
复制代码


若安装成功,终端中会输出已安装的 Python 的版本号。


  1. 执行以下命令,安装 uv(包含 uvx)。


  • macOS / Linux 安装命令:

curl -LsSf https://astral.sh/uv/install.sh | sh
复制代码


  • Windows 安装命令(PowerShell):

powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"
复制代码


  1. 执行 source $HOME/.local/bin/env 命令,加载 uvx 所需的运行时环境变量和初始化配置。

  2. 执行以下命令,验证是否安装成功。


uvx --version
复制代码


若安装成功,终端中会输出已安装的 uvx 的版本号。


uvx 安装完成后,使用以下步骤安装 Node.js:

  1. 请前往 Node.js 官网,下载并安装 Node.js 18 或更高版本。

  2. 安装完成后,在终端中运行以下命令确认是否安装成功。

node -vnpx -v
复制代码


若安装成功,终端中会输出已安装的 Node.js 的版本号,例如:


v18.19.010.2.0
复制代码


  1. 重启 Trae IDE 以使 Node.js 生效。

第三步:获取 Figma 的 Access Token


配置 Figma AI Bridge 时,需要填入你的 Figma Personal Acccess Token。你可以在 Figma 安全设置中心获取它。步骤如下:


  1. 登录 Figma

  2. 点击页面左上角的用户头像,然后在菜单中选择 Settings



界面上显示设置窗口。


  1. 在窗口的顶部菜单中,选择 Security



你已进入安全设置面板。


  1. 移动至 Personal access tokens 部分,然后点击 Generate new token 按钮。



界面上显示 Generate new token 弹窗。



  1. 配置你的 Figma Personal Access Token:

  • 输入 Token 的名称。

  • 设置 Token 的有效期。

  • 配置 Token 的权限。直接复用下表中的配置:


  1. 点击窗口底部的 Generate token 按钮。


Figma Personal Access Token 已生成,你会在后续配置 MCP Server - Figma AI Bridge 时用到它。


第四步:添加 MCP Server - Figma AI Bridge


  1. 打开 Trae IDE。

  2. 在 AI 对话框的右上角,点击 设置 图标,然后在菜单中选择 MCP



界面上显示 MCP 页签。


  1. 在 MCP 页签中,点击 + 添加 MCP Servers 按钮。若你已添加过 MCP Server,则点击右侧区域的 + 添加 按钮。


你已进入 MCP Server 市场。


  1. 找到 Figma AI Bridge,然后点击右侧的 + 按钮。



界面上显示 添加 MCP Server 弹窗。


  1. 在 Figma 页面上复制先前创建的 Figma Personal Access Token,然后粘贴至输入框中。



  1. 点击底部的 确认 按钮。


MCP Server - Fimga AI Bridge 配置完成,并已自动添加至内置智能体 - Builder with MCP。



你可以直接使用 Builder with MCP 来体验 Figma AI Bridge(参考“第六步”)。若你希望创建一个自定义智能体,通过配置提示词和工具来使其更好地处理你的需求,请继续往下操作。


第五步:创建自定义智能体并为其配置 Figma AI Bridge


智能体(Agent)是你面向不同开发场景的编程助手。你可以创建自定义智能体,通过灵活配置提示词和工具集,使其更高效地帮你完成复杂任务。


  1. 在 AI 对话框的右上角,点击 设置 图标,然后在菜单中选择 智能体



界面上显示 智能体 页签。


  1. 点击右侧区域的 + 创建智能体 按钮。



智能体配置面板已打开。


  1. 配置该智能体:(可选) 上传智能体的头像。输入智能体的名称(例如:Figma 助手)。(可选) 配置智能体的提示词。参考提示词如下,你可以直接使用或根据需求制订提示词。

根据用户提供的 Figma 链接,精准还原 UI 设计,生成响应式的 HTML 格式的前端页面代码。代码结构清晰,视觉细节与设计稿高度一致。禁止擅自修改设计内容,确保忠实还原。
复制代码


  • 工具-MCP 部分,仅勾选 Figma AI Bridge

  • 工具-内置 部分,勾选 文件系统(File System)终端(Terminal)联网搜索(Web Search)预览(预览)。三个内置工具的作用如下:

  • 文件系统:对文件进行增删改查。

  • 终端:在终端运行命令,并获取命令的运行状态和结果。

  • 联网搜索:搜索和用户任务相关的网页内容。

  • 预览:在生成可预览的前端结果后提供预览入口。


配置完成后的面板如下:



  1. 点击底部的 创建 按钮。


配置了 Figma AI Bridge 的智能体创建成功。你可以点击 立即使用 按钮,开启与智能体的对话。


第六步:开启对话,完成设计需求


在上一环节中,点击 立即使用 按钮后,Trae IDE 会将你引导至 AI 对话框,并默认选用 Figma 助手 智能体(若未创建自定义智能体,则使用 Builder with MCP)。你可以与该智能体对话,输入 Figma 设计稿的地址,然后描述你的需求,让智能体创建相应的前端页面。


提示

请确保配置 Access Token 的账号拥有设计稿的访问权限。


  1. 在本地新建一个文件夹,然后在 Trae IDE 中打开它。

  2. 在 AI 对话输入框右下角,选择你想使用的模型(本教程使用 DeepSeek-V3- 0324)。

  3. 前往 Figma 设计稿页面,选中设计稿并右击,然后在菜单中选择 Copy/Paste as > Copy link to selection

已复制该设计稿的链接。



  1. 在 AI 对话输入框中,粘贴所复制的设计稿的链接。

  2. 在设计稿链接的标签后输入你的需求并发送。例如:“请严格按照我提供的 Figma 链接内容生成 HTML 前端页面。UI 要严格还原设计稿,需要实现响应式设计”。



智能体开始调用 Figma AI Bridge 中的工具和服务,读取设计稿的内容,自动生成文件,填入前端代码,并生成一个 index.html 文件供你预览效果。以下输出过程供参考:



  1. 智能体完成输出后,双击文件夹中的 index.html 文件,在浏览器中预览效果。

  2. 持续与智能体对话,优化前端页面,直至达到让你满意的效果。

参考信息:Figma AI Bridge 支持的能力


Figma AI Bridge 支持的能力如下:



2025-05-09 14:197249

评论 2 条评论

发布
用户头像
node -v
npx -v

node -vnpx -v

2025-05-09 15:08 · 北京
回复
感谢指正,已修改
2025-05-09 15:10 · 北京
回复
没有更多了

IntelliJ IDEA开发最佳配置

爱好编程进阶

Java 程序员 后端开发

ansible 模块:set_fact

ghostwritten

ansible

「码」力集结!他们用作品为FinClip黑客松打造出一道靓丽的风景线

Speedoooo

小程序 hackathon 黑客马拉松 黑客松 小程序容器

Apache DolphinScheduler 2.X保姆级源码解析,中国移动工程师揭秘服务调度启动全流程

白鲸开源

Apache 大数据 开源 DolphinScheduler workflow

Go1.18泛型浅谈

CodeWithBuff

golang 泛型 新特性 Go 语言

等保三级全称是什么?是什么意思?

行云管家

网络安全 等级保护 等保三级 等保2.0

无聊科技正经事周刊(第6期):纯粹的程序员与必然的中年危机

潘大壮

程序员 周刊 行业趋势 科技周刊

docker下kibana搭建

爱好编程进阶

Java 程序员 后端开发

“银行家算法”大揭秘!在前端表格中利用自定义公式实现“四舍六入五成双”

葡萄城技术团队

银行家算法 纯前端表格技术

ansible 模块:script

ghostwritten

ansible

Eclipse中查看源代码

爱好编程进阶

Java 程序员 后端开发

hive踩过的小坑

爱好编程进阶

Java 程序员 后端开发

容器化 | 构建 RadonDB MySQL 集群监控平台

RadonDB

MySQL 数据库 容器化 RadonDB KubeSphere

idea启动tomcat报错,org

爱好编程进阶

Java 程序员 后端开发

IO流详细解答,博主亲自手敲代码,快速上手

爱好编程进阶

Java 程序员 后端开发

HIVE3 深度剖析 (上篇)

明哥的IT随笔

大数据 hie

无形资产管理系统解决方案

低代码小观

资产管理 CRM 财务审核系统 CRM系统 企业管理软件

还在写SQL做SAP二开?通过RFC调用NetWeaver,让HANA数据库操作更可靠

葡萄城技术团队

ERP 全套信息化系统 二开

当.Net撞上BI可视化,这3种“套路”你必须知道

葡萄城技术团队

看板 数据大屏 BI数据分析

拿起手中的键盘做公益侠客,让你的第一个低代码应用为公益发光发热!

InfoQ写作社区官方

低代码 公益 大学生 热门活动 码上公益

AIRIOT物联网低代码平台如何配置MQTT驱动?

AIRIOT

物联网 低代码平台 驱动配置

有趣、实用、全面,是程序员心中理想人工智能教材的样子了

图灵教育

深度学习 PyTorch

基于 FFI 的 PyFlink 下一代 Python 运行时介绍

Apache Flink

大数据 flink 编程 流计算 实时计算

美哭了,一款开发者必备的接口管理工具!

Liam

Postman 开发工具 API API接口管理 接口管理工具

如何开发 LAXCUS 分布式应用软件(三):编写终端软件

LAXCUS分布式操作系统

集群架构 并行计算 端边云 分布式操作系统 分布式应用软件

萌新看过来,你还学不懂VScode插件吗?

葡萄城技术团队

报表

企业文档爆炸,如何管?

小炮

企业文档管理工具

windows服务器是什么?运维管理用什么工具好?

行云管家

windows 服务器 自动化运维 服务器运维

ansible template jinja2 渲染

ghostwritten

ansible

Hugging Face创始人亲述:一个GitHub史上增长最快的AI项目

OneFlow

人工智能 深度学习 nlp 开源社区

netty系列之:我有一个可扩展的Enum你要不要看一下?

程序那些事

Java Netty 程序那些事 5月月更

MCP 教程:将 Figma 设计稿转化为前端代码_AI&大模型_Trae_InfoQ精选文章