用途:将 Figma 设计稿自动转换为高保真 UI 代码,供 AI 客户端(Cursor、Claude、Qorder 等)调用。
主要能力:清理冗余图层,识别红点角标、系统栏、Home 栏;支持分布式对齐、居中、线性布局、重叠布局、列表检测与文本自适应;提供可扩展的 DSL 处理器管线(优先级注册);可选 VLM 多模态识别复杂 UI。输出 ZIP 包含 index.html、images/、fonts/、dsl.json、design.png,可选 vlm_result.json。
使用方式:需 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 并设置 MDAP_FIGMA_TOKEN。启动:python -m mdap_u2c --port=10001。MCP 客户端配置 url 为 http://localhost:10001/mcp,transport 为 http。核心工具 figma_to_code_package 参数:figma_url(必填)、image_scale(默认 [2])、target_platform(h5、vue、react、react native、ios、android,默认 h5)。内置提示模板 get_figma_property 与 ui2code_with_skills。
适用场景:设计稿转前端或移动端代码、批量处理多个设计、按平台定制转换流程。
限制:需有效 Figma Token;VLM 默认关闭,需配置 MDAP_VLM_* 环境变量;复杂重叠元素可能影响布局检测;端口冲突或依赖缺失会导致启动失败。具体收费与平台支持范围暂未提供。