Huolala Figma MCP 原理与实践

简介：Huolala Figma MCP（huolala-figma-mcp）是货拉拉自研的将 Figma 设计稿自动转换为高还原度UI代码的 MCP 服务。AI 客户端（如 Cursor、Qorder）调用后可获得包含 index.html、切图、字体等资源的 ZIP 包，再借助 LLM 进一步转换为目标平台代码（HTML、React、Vue、ObjectC、Swift、Kotlin、React Native等）。

还原度高：对冗余图层和控件做了清洗，对红点气泡、系统栏、homebar做了识别

布局能力完备：拥有分散对齐、居中对齐、线形布局、重叠布局、列表识别、文字宽高自动去除识别等，生成的代码可用性高

可扩展：DSL 加工采用处理器注册，可按需启用/禁用步骤。此外还能自定义SKILLS，自己定制大模型运行流程。

目前代码已在github开源：github.com/HuolalaTech...

一、背景

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 还原度	自动切图	原理	缺点
figma插件+低代码平台	支持H5，rn等web语言，不支持kotlin、object c等原生客户端语言	不开源	较高	有	figma插件提取UI信息后规则转码，然后低代码平台编辑和预览	生成的代码灵活性和语义化差
图片输入+多模态大模型	H5，RN、Object C、swift、kotlin等	多模态大模型有些开源，有些不开源	比较低	基本不可用原始设计稿	利用多模态大模型识别图片中的UI细节	还原度最差，无法精确还原设计稿属性
开源figma contex mcp	H5，RN、Object C、swift、kotlin等	开源	高	复杂图层切图大小不对情况正常情况：	调用restful api后，提取关键信息和相同属性合并后送大模型转码	没有融合多模态大模型，对循环组件分组处理不是很好
figma官方MCP	H5，RN、Object C、swift、kotlin等	不开源	高	部分case切图不对：原始设计稿：	会同时获取设计稿的json信息+设计稿截图调用多模态大模型后融合	复杂页面还原度差
百度自研F2C	H5，RN、安卓、iOS、鸿蒙、小程序等	不开源	高	支持	自研F2C插件+自研大模型+自研大模型	不对外开放

产品定位：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	figma_to_code_package	获取 Figma 设计稿数据，返回包含 HTML、切图资源、字体、多模态数据的 ZIP 包
Prompt	ui2code_with_skills	预设的提示词模板，一键触发完整转码流程，适合全线界面或者UI模块
Prompt	get_figma_property	获取 Figma 节点的属性，用于局部UI界面修改
Resource	Skills 列表	内置多种 Skills资源，支持按需加载。

3.1.2 产物说明

Huolala Figma MCP 返回的 ZIP 包包含以下产物：

产物	说明
index.html	通过规则转码生成的精确还原页面，可作为大模型转码的参考基准。包含图层、布局、样式等完整信息
vlm_result.json	多模态大模型对设计稿的理解结果
images_2 / images_3	2x 和 3x 倍率的切图资源，语义化命名
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 列表识别与合并

列表识别一直是UI组件识别难度，循环组件样式多样，传统的规则算法只能处理简单的场景，复杂的场景会存在case by case问题，逐个适配成本高。因此我们采用多模态大模型识别循环组件。

组件后，然后编写skills让智能IDE自动处理层级。

1）多模态大模型提示词：

识别UI结构 ,输出前端可用json结构,要求包含x,y,width,height,type,text(如有),children(如有)字段

JSON 复制代码

{              "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编写

对横向、纵向、网格排布的列表分别进行识别与处理。

Markdown 复制代码

---
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个原始应该是一个分组，内部用折行或者网格布局实现，但设计稿中是多个行布局组成，因此需要进行布局识别，根据不同局部类型重新计算布局。

类别	方案选型	图示
网格类别	多行相同列表合并成网格网格布局计算
红点气泡	绝对定位
底部tab栏	绝对定位
分散对齐识别	flex布局
宽度自适应容器识别	flex布局
文本宽高去除	要结合文本渲染宽度、容器宽度、是否多行、左右间距等综合去除
分割线处理	分割线分组，转成bottom_line属性
左中布局	flex+绝对定位布局
重叠布局	flex+绝对定位

四、Huolala Figma MCP 实践

4.1 同类方案对比

原始设计稿	多模态大模型	开源figma context mcp	figma官方MCP	货拉拉figma MCP

首页	1图标不对 2.顶部背景渐变色不对 3.输入卸货地下单渐变色边框不对	1.气泡布局处理不对 2.冷藏车的布局不对 3.顶部渐变背景和标题排布错乱 4.对多层嵌套的边框处理不好	1.右上角图标不对 2 啥车都有都便宜没有加粗字体 3选车地址图标不对 4.我的图标拉伸了	叫车流程字体不对，其他基本还原

4.2 具体业务实践

目前已经在货拉拉企业、司机、专送、多拉等多个业务中落地使用。下面以其中一个业务的应用举例说明：

场景	手写耗时	Huolala Figma MCP 耗时	提示词
新页面	0.5d	2min	/user-mdap-u2c/ui2code_with_skills url链接 $2x,3x$ 转码风格：这个半屏弹窗用 EBaseBottomModalView 实现，代码入口：点击"车长车型"单元格后弹出这个页面
原有页面上新增一种卡片样式	30min	2min	/user-mdap-u2c/get_figma_property url链接生成一种新的单元格样式，切图同时导出2x，3x，参考当前目录的资源存放方法 2. 当用户点击了零担拼车后，将价格样式从EConfirmOrderOptionPriceCell换成前面的新样式。 3. 用户点击新样式上的"查看【快车】等更多价格"单元格样式切回EConfirmOrderOptionPriceCell
界面上新增一个按钮	10min	1min	1.修改viewWithCommodityModel，当model.title=="零担拼车" 时候，进入零担拼车显示模式，初始化gotoUserBtn按钮， 2 按钮的UI细节通过/user-mdap-u2c/get_figma_property url 链接获取