Huolala Figma MCP 原理与实践
货拉拉技术约 11 分钟简介：（huolala-figma-mcp）是货拉拉自研的将 Figma 设计稿自动转换为高还原度UI代码的 MCP 服务。AI 客户端（如 Cursor、Qorder）调用后可获得包含 index.html、切图、字体等资源的 ZIP 包，再借助 LLM 进一步转换为目标平台代码（HTML、React、Vue、ObjectC、Swift、Kotlin、React Native等）。
还原度高：对冗余图层和控件做了清洗，对红点气泡、系统栏、homebar做了识别
布局能力完备：分散对齐、居中对齐、线形布局、重叠布局、列表识别、文字宽高自动去除识别等，代码可用性高
可扩展：DSL 加工采用处理器注册 ，可按需启用/禁用步骤。此外自定义SKILLS，定制大模型运行流程。开源地址：https://github.com/HuolalaTech/huolala-figma-mcp
一、背景
1.1 UI编程痛点
一直以来，客户端工程师们需要花费大量精力在重复还原UI视觉稿的工作上，UI开发耗时约占移动端开发总耗时的 1/3。
1）效率痛点：大量重复劳动，开发极慢。按钮、卡片、间距、阴影、圆角… 都要写一遍，复制粘贴改参数，纯体力活，对齐、居中、间距差 1px 都要反复改、刷新、看效果。
2）多端维护：要同时维护开发安卓、iOS、鸿蒙三个端的UI代码。
3）视觉还原度低。 纯靠眼睛和经验还原设计稿，很难做到 1:1 精准还原，需要花费大量时间走查
1.2 AI技术飞速发展
自2022年底ChatGPT发布后，先后出了Agent、MCP、SKILLS等一系列AI相关的技术，传统的手写UI代码已经无法适应当前AI编程趋势。
二、现有技术方案
目前开发团队主要使用以下方式生成 UI 代码，但都存在明显不足：
原始设计稿 | ||||||
正常情况： | ||||||
原始设计稿： | ||||||
产品定位：UI 开发日常必备工具
为了解决上述方案的不足，我们自研了 Huolala Figma MCP，核心目标：
高 UI 还原度：通过独家图层清洗和精简算法，在复杂/不合理设计稿上实现更高还原度
准确切图：自研icon 识别算法，能同时导出 2x、3x 多倍切图，满足多个平台场景
便捷使用：一键安装到 Cursor，无需手动配置，SSO 登录即用
高扩展性：提供prompts模板、SKILLS，可开箱即用，也可自由组装定制
多语言支持：支持 React、Vue、Objective-C、Kotlin、React Native 等
三、Huolala Figma MCP 原理
3.1 MCP整体架构
主要功能模块：
用户输入参数提取。分析用户输入的提示词，将用户输入的figma url等关键参数提取后转换成MCP工具需要的参数。
获取 Figma 数据：通过 Figma REST API 获取设计稿的节点信息、图层结构、样式属性等原始数据
AI服务： 通过独家算法对 Figma 图层进行清洗，去除冗余图层，处理不合理的 autolayout，优化图层结构。同时自动识别设计稿中的ICON，去重后导出。
智能IDE转码：根据用户需求，动态加载对应的 Skills（如循环组件调整、转码风格适配等）。最后将 HTML、切图等产物交给智能IDE，结合用户提示词生成目标语言代码
3.1.1 MCP功能
| Tool | ||
| Prompt | ||
| Prompt | ||
| Resource |
3.1.2 产物说明
Huolala Figma MCP 返回的 ZIP 包包含以下产物：
| index.html | |
| vlm_result.json | |
| images_2 / images_3 | |
| fonts |
3.1.3 Skills 机制
Huolala Figma MCP 内置多种 Skills，实现功能的可扩展性：
adjust-list-group：循环组件调整，自动识别列表/网格布局
多语言转码：支持 React、Vue、Objective-C、Swift、Kotlin、React Native 等
用户还可自定义 Skills，满足个性化需求，如图片压缩、上传 CDN 等。
3.2 AI算法服务
算法服务涉及技术点众多，下面选取部分重点算法进行解析：
3.2.1 列表识别与合并
组件后，然后编写skills让智能IDE自动处理层级。
1）多模态大模型提示词：
识别UI结构 ,输出前端可用json结构,要求包含x,y,width,height,type,text(如有),children(如有)字段
{"type":"tabBar",
"x":0,
"y":768,
"width":375,
"height":44,
"backgroundColor":"#FFFFFF",
"items":[
{
"text":"首页",
"icon":"home",
"x":28,
"y":770,
"width":40,
"height":40
},
{
"text":"订单",
"icon":"order",
"x":108,
"y":770,
"width":40,
"height":40
},
{
"text":"消息",
"icon":"msg",
"x":188,
"y":770,
"width":40,
"height":40
},
{
"text":"我的",
"icon":"my",
"x":268,
"y":770,
"width":40,
"height":40
}]
}
2）列表skills编写
对横向、纵向、网格排布的列表分别进行识别与处理。
---
name: adjust-list-layout
description: 根据vlm_result.json识别 JSON 文件中的列表控件，并调整 HTML 代码中的布局结构，使其更符合语义化和响应式布局要求。
---
# 调整列表布局层级
根据 JSON 布局描述文件识别列表控件类型（横向、纵向、网格），并自动调整 HTML 代码中的布局结构。
## When to Use
- 当需要将设计稿转换后的 HTML 代码进行布局优化时
- 当 HTML 中的列表元素层级结构不合理时
- 当需要将平铺的元素转换为语义化的列表、表格或 Flex 布局时
- 当存在 `vlm_result.json` 等布局描述文件，需要据此调整代码结构时
## Instructions
### 参数说明
| 参数名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| `json_file` | string | `vlm_result.json` | JSON 布局描述文件路径 |
| `code_file` | string | `index.html` | 需要调整的 HTML 代码文件路径 |
### 前置条件
- 检查 `${json_file}` 是否存在（可选，不存在则跳过 JSON 相关步骤）
### 第 1 步：识别列表控件
从 `${json_file}` 中找出列表控件，判断条件如下：
| 列表类型 | 判断条件 |
|----------|----------|
| 横向列表 | 子元素的 y 和 height 一致；或者两组交错 y 和 height 一致的元素交错排列 |
| 纵向列表 | 子元素的 width 和 x 坐标都一致；或者局部连续的元素 width 和 x 坐标相同，且子元素的结构相似 |
| 网格列表 | 子元素 height 相同，存在多行，同行 y 坐标相同 |
### 第 2 步：控件匹配
遍历列表控件，在 `${code_file}` 中进行控件匹配：
- **横向列表匹配**：找到 `${code_file}` 中一个容器，其包含的文本大部分都能与横向列表元素匹配成功
- **纵向列表匹配**：找到 `${code_file}` 中一个容器，其包含的文本大部分都能与纵向列表元素匹配成功
- **网格列表匹配**：将网格拆成多行，逐行文本匹配，每行中的文字大部分都能匹配成功
### 第 3 步：调整布局
将原始 `${code_file}` 备份为 `${code_file}.backup`，然后修改 `${code_file}` 调整布局。
#### 3.1 横向列表调整
| 子类型 | 处理方式 |
|--------|----------|
| 交错列表 | 将 `${code_file}` 中相邻的交错元素用一个新容器进行包裹和分组，变成标准横向列表 |
| 带分割线列表 | 如果横向列表元素中包含垂直分割线，且分割线和其他元素间隔分布，则将分割线提取出来，剩余的元素包裹容器宽度进行等分，内部元素垂直居中 |
#### 3.2 局部纵向列表调整
如果 `${code_file}` 中的局部纵向列表元素未被包裹，用一个新容器将这些元素包裹起来。
#### 3.3 网格列表调整
> ⚠️ **必须按顺序判断**
如果 `${code_file}` 中每一行的文本匹配到的容器都不一样，将这些容器合并成一个大的网格布局：
| 判断顺序 | 类型 | 条件 | 处理方式 |
|----------|------|------|----------|
| 1 | 表格 | 行列元素间距都 ≤ 2px，且同一列的元素宽度相同（误差 ≤ 1px） | 不要用flex-wrap: wrap布局，改成 `<table>` 结构 |
| 2 | 折行布局 | 不满足表格条件（不同列元素宽度不一致） | 采用 `display: flex; flex-wrap: wrap`，并计算设置 `row-gap` 和 `column-gap` |
3）列表识别与合并结果截图
3.2.2 红点和气泡识别
在前面列表识别的时候，我们经常碰到一些红点和气泡，做循环组件分组的时候需要单独剔除。
红点气泡样式很多，而且部分红点非常小，通用多模态模型对于小尺寸的红点和气泡组件识别准确率不高，因此我们专门训练了一个基于yolo的小模型做红点气泡识别。
采用目标检测模型YOLO v8，自己标注数据和人工合成数据集，训练了红点和气泡识别模型，识别准确率>90%，识别案例如下：
3.2.3 icon识别
原始设计稿中的icon是由多个矢量图形组合而成,开发期望导出成一个图片后放到代码中。目前的多模态大模型，开源的figma contex mcp和官方的figma mcp都无法精确的导出这种需要合并的icon，我们采用控件属性+几何特征+元素排布的方式，对icon进行识别与合并。算法流程如下：
在打包阶段，我们还会对图标进行像素级相似度检测，去除重复的图标图片。
3.2.4 图层清洗
两个大小一模一样的图标叠加一起
设计稿中会出现一些开发不可见，但是存在于设计稿中，导出时候存在的冗余元素或者图层。比如上图中圆形头像下面就盖住了一个大小一模一样的图层。
我们采用投影方法，得到一个控件树不可见图层的层级序号矩阵。如果一个控件的区域的投影矩阵值的最小值大于当前层级序号,表示被完全覆盖，可以删除。投影时候还要考虑透明、圆角的情况。
3.2.5 布局计算
设计稿中存在很多布局方式不合理的情况，例如图中8个原始应该是一个分组，内部用折行或者网格布局实现，但设计稿中是多个行布局组成，因此需要进行布局识别，根据不同局部类型重新计算布局。
四、Huolala Figma MCP 实践
4.1 同类方案对比
2.顶部背景渐变色不对 3.输入卸货地下单渐变色边框不对 | 2.冷藏车的布局不对 3.顶部渐变背景和标题排布错乱 4.对多层嵌套的边框处理不好 | 2 啥车都有都便宜没有加粗字体 3选车地址图标不对 4.我的图标拉伸了 |
4.2 具体业务实践
目前已经在货拉拉企业、司机、专送、多拉等多个业务中落地使用。下面以其中一个业务的应用举例说明：
2. 当用户点击了零担拼车后， 将价格样式从EConfirmOrderOptionPriceCell换成前面的新样式。 3. 用户点击新样式上的“查看【快车】等更多价格”单元格样式切回EConfirmOrderOptionPriceCell | ||||
2 按钮的UI细节通过/user-mdap-u2c/get_figma_property url 链接 获取 |
实际业务中，不同的项目、语言风格差异很大，除了huolala figma mcp提供的能力，业务还会自己定制skills、commands、rules的方式来适配自己的业务。
4.3 多语言转码
货拉拉figma mcp 支持多种语言转码，目前在H5、Object- C、swift、Kotlin、React Native语言上均有落地经验，还原度都比较高。
| Objective-C | ||
| Swift | ||
| Kotlin | ||
| React Native |
五、小结
5.1 成果总结
Huolala Figma MCP 结合 Cursor 后功能大幅提升，不仅可应用于新增页面，也可应用于局部 UI 改版，在写 UI 代码的同时能顺带生成逻辑代码。
Huolala Figma MCP 补齐了三方 MCP 复杂设计稿 UI 还原差和切图不对问题，还能自定义 Skills 实现个性化功能。
5.2 经验与不足
新增页面：提示词相对简单，提效明显，界面总体还原度高
局部改版：UI 占比小，逻辑部分占比更重，提示词会相对复杂，微调会更多
工程适配：图片存放路径、组件实现偏好等需要手动指定，增加提示词复杂度
5.3 后续优化方向
自动分析工程组件：能够自动分析用户工程的组件实现和使用偏好，减少指定基类、图片存放路径的提示词
界面自动定位：能自动分析用户界面，定位到某个设计稿界面对应的类实现
Skills 扩展：支持更多个性化需求，如图片压缩、上传 CDN 等
视觉还原度计算：自动计算生成代码与设计稿的还原度差异，实现UI代码自动生成和自动验收闭环
参考资料
https://github.com/glips/figma-context-mcp
https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Figma-MCP-server
https://docs.ultralytics.com/
https://modelcontextprotocol.io/docs/getting-started/intro
https://agentskills.io/specification