# uni-agent 使用 Figma / 蓝湖 MCP 实现设计稿转代码
本文面向希望借助设计稿提升页面还原效率的开发者，介绍如何在 uni-app (x) 开发场景中，结合 Figma 或蓝湖 MCP 服务，让 uni-agent 基于设计稿生成页面代码。
# 概述
设计稿转代码的效果，通常与 uni-agent 是否能够读取结构化设计数据有关。
如果仅提供一张截图，uni-agent 只能依赖图像内容推断布局、样式和层级关系，生成结果通常不够稳定；如果接入 Figma 或蓝湖 MCP，uni-agent 可以直接读取设计结构、图层信息、样式数据和资源引用，页面还原效果会更好。
从实际测试情况看：
- 基于结构化设计数据生成代码，整体效果通常优于仅根据截图生成代码
- 在页面结构较复杂、存在横向滑动区域、多卡片列表等场景时，结构化数据更容易生成完整页面
- 如果蓝湖设计稿开启了“设计图转代码”能力，uni-agent 获取到的结构化信息会更完整，生成效果也更稳定
# Figma 与蓝湖的选择建议
Figma 和蓝湖本质上都可以为 uni-agent 提供结构化设计数据，因此在设计稿转代码场景下，整体差异并不大。选择时更应关注接入成本和可用性。
# Figma MCP
Figma 官方提供了 MCP 服务。
注意
- 使用 Figma MCP 通常需要专业版及以上订阅
- 免费账号每月调用次数有限，不适合频繁使用
- Figma Web 版本主要使用远程 MCP 服务
- Figma 本地客户端支持启用本地 MCP 服务
# 蓝湖 MCP
蓝湖 MCP 目前常见方案多为社区提供的第三方服务，不属于蓝湖官方 MCP。
注意：本文引用的蓝湖 MCP 方案（lanhu-mcp）为社区开发者维护的第三方项目，DCloud 不对其稳定性、安全性及后续维护状态负责。使用前请自行评估风险。部署过程中产生的
.env文件包含账号凭据，请勿上传至任何代码仓库或分享给他人。
注意
- 可免费使用
- 需要开发者自行在本地部署
- 如果设计稿原本在 Figma 中，也可以先上传到蓝湖，再通过蓝湖 MCP 使用设计稿转代码能力
- 使用蓝湖上传设计稿时，建议开启”设计图转代码”功能
# 使用蓝湖 MCP
# 前置条件
本地部署蓝湖 MCP 服务需要以下环境：
- Git：用于克隆项目仓库
- Docker（含 Docker Compose）：用于运行 MCP 服务容器
- 操作系统：macOS、Linux 或 Windows（均支持）
# 1. 本地部署蓝湖 MCP 服务
蓝湖 MCP 通常需要本地部署，初次配置相对更多一些。
# 1. 克隆项目
git clone https://github.com/dsphper/lanhu-mcp.git
cd lanhu-mcp
# 2. 配置环境（会引导输入 Cookie）
bash setup-env.sh # macOS / Linux
# 或
setup-env.bat # Windows
# 3. 启动服务
docker-compose up -d
# 2. 检查服务是否正常运行
curl http://localhost:8000/mcp
如果该地址可以正常返回数据，说明服务已启动成功；否则请检查容器日志或环境变量配置。
# 3. 获取蓝湖 Cookie
登录 蓝湖，打开浏览器开发者工具，在 Network 面板中过滤 /api/ 请求，任选一个请求，复制完整的 Cookie 信息。
注意：蓝湖 Cookie 存在有效期，过期后 MCP 服务将无法正常读取设计稿数据（通常表现为工具调用返回鉴权错误）。遇到此情况，重新登录蓝湖并按上述步骤获取新的 Cookie，更新
.env文件后重启服务即可。
# 4. 配置环境变量
打开本地 lanhu-mcp 项目的 .env 文件，将 LANHU_COOKIE 的值替换为上一步复制的 Cookie，然后重启 MCP 服务。
docker compose restart
# 5. 在 uni-agent 中配置蓝湖 MCP
蓝湖 MCP 默认运行在 8000 端口，访问地址通常为：
http://localhost:8000/mcp?role=Developer&name=me
URL 参数说明：
role：用户角色，例如Developer、Frontend、Backend、Tester、Productname：用户名，用于协作追踪和 @ 提醒
注意
- URL 中不要使用中文参数值，建议统一使用英文
- 具体 MCP 配置文件位置，请参考 uni-agent 文档
# 全局配置示例
{
"mcp": {
"lanhu": {
"type": "remote",
"url": "http://localhost:8000/mcp?role=Developer&name=me",
"enabled": true
}
}
}
如果现有 config.json 中已经存在 mcp 字段，只需将 lanhu 节点合并到 mcp 对象下即可。
# 项目配置示例
{
"type": "remote",
"url": "http://localhost:8000/mcp?role=Developer&name=me",
"enabled": true
}
# 6. 验证配置是否生效
完成配置后，重启 HBuilderX，然后直接询问 uni-agent：
蓝湖 MCP 可用吗？
如果 uni-agent 可以返回蓝湖 MCP 的工具信息或可用状态，说明配置成功，此时即可继续读取蓝湖设计稿并生成代码。
蓝湖 MCP 详细使用方式可参考其项目说明：
# 蓝湖设计稿补充说明
蓝湖本身更适合作为设计稿协作与交付平台，设计稿通常由其他设计工具上传而来，不能直接在蓝湖中完整创建设计图。
以 Figma 为例，可以安装蓝湖插件后，将 Figma 设计稿上传到蓝湖。
相关文档：
# 使用 Figma MCP
Figma MCP 分为远程 MCP 服务和本地 MCP 服务。
在常见开发场景下：
- Figma Web 版本通常使用远程 MCP 服务
- Figma 本地客户端可以启用本地 MCP 服务
# 1. 启用 Figma 本地 MCP 服务
- 打开 Figma 本地客户端，并升级到较新版本
- 创建或打开一个 Figma 设计文件
- 切换到 开发者模式，或使用快捷键
Shift + D
- 在检查面板的 MCP 服务器区域，点击“启用桌面 MCP 服务器”
启用后，界面底部会出现服务已启用的提示。
启用成功后，本地 MCP 服务地址通常为：
http://127.0.0.1:3845/mcp
# 2. 在 uni-agent 中配置 Figma MCP
具体 MCP 配置文件位置，请参考 uni-agent 文档
# 全局配置示例
{
"mcp": {
"figma": {
"type": "remote",
"url": "http://127.0.0.1:3845/mcp",
"enabled": true
}
}
}
如果现有 config.json 中已经存在 mcp 字段，只需将 figma 节点合并到 mcp 对象下即可。
# 项目配置示例
{
"type": "remote",
"url": "http://127.0.0.1:3845/mcp",
"enabled": true
}
# 3. 验证配置是否生效
完成配置后，重启 HBuilderX，然后询问 uni-agent：
Figma MCP 工具可用吗？
如果 uni-agent 可以识别并返回 Figma MCP 的相关工具信息，说明配置成功。
Figma MCP 详细说明可参考官方文档：
# 设计稿转代码实践建议
在 uni-app (x) 项目中使用 Figma 或蓝湖 MCP 时，建议优先采用以下方式：
- 优先让 uni-agent 读取结构化设计数据，而不是只提供截图
- 如果使用蓝湖，尽量在上传设计稿时开启“设计图转代码”能力
- 对于轮播、横向滚动、瀑布流、复杂卡片列表等区域，生成后仍建议人工复核
- 将 uni-agent 生成结果作为页面初稿，再结合 uni-app (x) 组件规范和项目样式体系进行调整
