用途:将 Figma 设计自动转换为高保真 UI 代码。流程为 Figma API → 中间 DSL → 处理流水线(规则引擎与可选 VLM)→ ZIP 资源包。
主要能力:通过 API 获取 Figma 设计并转为 DSL;执行 8 步处理流水线(DSL 树构建、系统栏移除、VLM 识别(可选)、红点处理、图标识别、图层清理、布局计算、资源打包);导出含 index.html、切图、字体、dsl.json 与设计截图的 ZIP;支持分布式对齐、居中、线性/重叠布局、列表检测与文本自适应;向 AI 客户端(Cursor、Cline 等)暴露 MCP 工具。
使用方式:需 Python 3.11+ 与 Figma Personal Access Token。安装:git clone https://github.com/HuolalaTech/huolala-figma-mcp.git,cd huolala-figma-mcp,python3.11 -m venv venv,source venv/bin/activate,pip install -e .,cp .env.example .env 并在 .env 中设置 MDAP_FIGMA_TOKEN。启动:python -m mdap_u2c --port=10001。在 MCP 客户端配置 http://localhost:10001/mcp。核心工具 figma_to_code_package 参数为 figma_url、image_scale(1-4)、target_platform(h5、vue、react、react native、ios、android),返回 zip_url、metadata 等。另提供 /get_figma_property 与 /ui2code_with_skills 提示模板。
适用场景:把设计稿快速转成 React/Vue 等组件、按平台转 Native 代码、仅提取文本样式等属性用于局部更新、批量比较测试转换效果。
限制:ZIP 为临时文件需及时下载;复杂布局建议启用 VLM(需配置 provider、API key、模型与 base URL);大文件可能内存不足,建议转换较小帧;字体需 Figma 设计与 assets/fonts/ 匹配,并注意字体授权;低保证真度可通过提高 image_scale 或检查 dsl.json 排查。费用、性能与准确性等资料暂未提供。