蓝湖MCP实现-AI自动读取设计稿及切图下载

蓝湖MCP实现-AI自动读取设计稿及切图下载

主要内容

本文主要介绍蓝湖MCP的搭建以及如配置到AI IDE中使用，实现AI自动读取设计稿及完成切图下载，便可以实现设计稿一比一还原前端页面。

背景

最近在做一款游戏SDK，其中有一个【个人中心】的功能，其中包含什么账号申诉啊，bug反馈啊等等功能，这块儿一般都是通过网页实现，鉴于现在AI编码的火热，我也试着使用AI开发实现看看，方便以后提高开发效率，看能不能花小钱办大事。

技术选型

1、Trae国际版 – 我选择trae的原因，是因为它的使用门槛不高（当然，这个话题这里不讨论，我也是从朋友那里取经的，毕竟我也是第一次尝试完全由AI来完成一个项目），而且它能用支付宝直接开通套餐，方便
2、蓝湖
3、GPT – 截止目前，Trae IDE中能使用的GPT为5.4版本
4、蓝湖MCP – 这是个开源项目，致敬作者。

Trae IDE

1、Trae IDE的安装：

从Trae IDE下载安装桌面版，我使用的是SOLO版本。

2、注册账号并登录

这个没啥好说的，登录之后，默认是免费套餐，有一定用量限制，一般来说都是不够用的，当你的免费额度用完之后，AI会提示你，自行决定是升级套餐还是买其他模型的token用量配置都行。

界面左下角能看到你的用户名以及套餐，我这里是开了PRO套餐，目前是一个月10刀。包含10刀的用量，但是实际上它有赠送，我目前已经用到了40刀，还能用，据朋友说，能用到65刀左右。

3、创建项目

我是一个全新的项目从头开始，所以我新建了一个目录，然后选择它作为工作目录，当然如果你是现有工程，你可以选择工程目录，然后跟AI对话，让它分析工程，你接着提需求让它实现。
模型根据自己需要选择，可以多多尝试，不过用惯了贵的模型，你就回不去了。。另外这里是可以添加模型的，你自己去其他地方买的token也是可以使用的。

这个时候，你已经可以跟AI对话开始工作了，就是这么简单。当然，IDE的使用不是本文重点，也就介绍到这里。

4、为什么要使用蓝湖？ – 大量文字预警。哈哈哈

一开始我也没有引入蓝湖MCP，我直接丢给AI一个设计稿的链接，它会自己启动浏览器，去打开页面，让我手动输入账号密码，它就会接着看设计稿。 – 这中间是有一些操作的，你需要点界面上的，接管，然后输入账号密码登录，以及让AI接管接着干活儿。

我一开始让它自己查看蓝湖的设计稿，分析各个页面的跳转流程，然后出一份需求文档以及技术架构说明文档，AI确实能分析的头头是道，出一份详尽的需求文档，它会问你是不是OK，OK的话，它就继续开发，你也可以提出修改的地方让它接着改需求文档，直到符合你的需求。

我一开始只是尝试一波，就让它按照设计稿先实现两三个页面，它默默地开始做事，十来分钟之后做完，它甚至贴心的给你启动了服务，你直接可以在浏览器或者它内置的浏览器中查看效果，但是我发现它做出来的东西和设计稿不能说是一模一样，只能说是完全不同。🤣

它做出来的页面，各个功能要素都有，但是用的切图和各个组件的宽度，高度都和设计稿不一致。经过和AI一番讨论，它说它读取不到蓝湖设计稿的具体宽高、切图等信息。只能通过视觉方案来实现，这也导致我的额度消耗噌噌的涨。。🥶

此时我才意识到需要蓝湖的api让AI来获取这些东西，才能做到一比一还原。我去网上搜了一圈儿，没有API可用。。想想也是，蓝湖不太可能提供这样的接口给你，那它存在的意义就真的只是表现一下设计稿了。

转变思路，一开始我让AI自己去想办法读取到精确的数据和下载切图。它确实能读取到一些数据，甚至自己写了脚本去获取设计稿页面的源码等等，从里面整理数据出来，搞得似模似样的，而且最终做出来的页面看起来也像那么回事儿了。有90%的还原度。
但是始终有地方设计稿不符合，需要我一点点的去告诉它怎么改，这里高度改小一点，那里宽度改大一点等等。

这一过程让我也开始体会到其中的痛苦，额度消耗也是一路飞奔，朋友一个月都用不到40刀（当然这可能和具体用来干啥也相关，朋友是Android开发，根据设计稿实现下xml布局文件，AI肯定能实现这个体力活，细节的宽高，手动调整就好），我一天就能跑出去20刀，而且总感觉它没有完全读到准确的数据。在我的追问之下，它终于吐露真言。。它还是使用视觉方案实现的，只是切图它自己搞定了下载，使用了正确的切图。

这也让我坚定了一定要找到一个解决方案，能准确获取设计稿的宽高、切图等信息。不然永远都会和AI拉扯，不是在拉扯的过程中，就是在拉扯的路上。

Tips: 这整个过程中，还有更搞笑的事情，AI真是鸡贼，它甚至把设计稿的整个图片下载来下，然后当做页面的背景图，在其上添加透明button，实现点击效果，一度让我以为，哇塞，这么牛逼，真就一比一还原。

蓝湖MCP

我发现问题之后，就去仔细阅读了trae的文档，发现它能够配置MCP（这肯定是标配啦），这让我我突然想到，有没有别人实现了蓝湖的MCP，一开始我确实陷入思维误区了，老想着api的方式来实现。一搜还真有。。就是它蓝湖MCP

这个项目实现了读取蓝湖设计稿的元素细节，宽高读取准备，切图也能下载并且自动归类重命名。这正是我想要的东西。

1、部署蓝湖MCP

项目提供了docker部署的方案，肯定优先选择这个方案，所以我在自己的阿里云服务器上拉取源码根据文档开始部署。
docker部署方式的指南

这块儿的其实很简单，你有git环境，能拉代码，当然没有也行，你下载zip包，传上去就行。你有docker环境。关键在于蓝湖cookie的获取以及配置。
cookie获取教程

将获取出来的cookie配置到.env文件中。

然后按照文档，build镜像，run启动容器。你会发现非常顺畅。甚至访问health健康检查页面也返回OK。（当然这里会有坑，后续会讲）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 1. 构建镜像
docker build -t lanhu-mcp-server .

# 2. 运行容器
docker run -d \
  --name lanhu-mcp \
  -p 8000:8000 \
  --env-file .env \
  -v $(pwd)/data:/app/data \
  -v $(pwd)/logs:/app/logs \
  --restart unless-stopped \
  lanhu-mcp-server

# 3. 查看日志
docker logs -f lanhu-mcp

# 4. 检查服务状态
docker ps | grep lanhu-mcp

2、配置MCP

然后咱们到trae中去配置这个MCP。
点击左下角的头像 -> 设置 -> MCP -> 添加 -> 手动配置。添加如下配置：

1
2
3
4
5
6
7
{
  "mcpServers": {
    "lanhu": {
      "url": "http://你服务器的ip:8000/mcp?role=Backend&name=John"
    }
  }
}

此时你去对话窗口中告诉AI，你新增了一个lanhu-mcp，让它自己学习一下怎么使用，并且测试一下你给的蓝湖设计稿连接是否可以使用这个MCP读取到数据。我到这里都一切正常，并且AI告诉我测试成功，也能读取到数据。

3、使用MCP

此时我让它帮我读取设计稿，并生成页面。
它报了错误，说角色什么的不对。好吧，看看issue有没有相关答案，还真有，最终将MCP配置中的 ?role=Backend&name=John 去掉，就可以了。这个我没有去细看原因，但是感觉这些是锦上添花的配置，没有也能正常读取数据。

最终配置效果：

1
2
3
4
5
6
7
{
  "mcpServers": {
    "lanhu": {
      "url": "http://你服务器的ip:8000/mcp"
    }
  }
}

之后，再次尝试，
它报了418！

然后去服务端查看docker运行的日志

1
docker logs -f lanhu-mcp

它确实报错了，类似如下的日志（我实际的报错日志没有留存，这里是截取的项目issue中别人的截图）：

按照issue上的回答，我开始检查cookie，发现我获取的方式以及cookie的格式确实没问题，但是各种回答都指向，确实是cookie不对。我经过各种测试和修改，最终也没有找到为什么程序读取的cookie不对的原因，最终我放弃了。

4、cookie问题的临时解决方案

解决不了cookie错误的问题，我转头参考项目文档，使用 bash setup-env.sh 命令来启动（脚本的内部最终还是使用docker启动容器的）。
但是问题依旧，它还是报418错误，这让我一度觉得这个项目不能使用，我也查看了脚本的源码，发现脚本中也有个配置cookie的地方，但是它的代码是会读取.env文件中的cookie配置来使用的，甚至通过setup-env.sh脚本启动项目后，.env文件中配置反而被覆盖了。
最终我只能在setup-env.sh中写死我的cookie，然后启动项目。它确实能正常读取数据和下载切图了。不过这毕竟不是好的方式，cookie是会过期的，虽然时间也比较长。

5、最终解决方案（当前未验证，因为我的MCP跑着，我现在在用，也不想重启它）

经过问豆包，它说setup-env.sh这个脚本的代码，是会用这里的值覆盖掉.env文件中的cookie的，这就是现在的表现。可能我从一开始就理解错了作者的设计，就应该时在setup-env.sh脚本中配置cookie，然后使用setup-env.sh脚本来启动项目。感觉一开始的无奈之举，反而是走在了正确的道路上。

6、继续出问题

当我继续使用MCP时，又出现了新的问题，它能读取一部分设计稿的数据，但是有一部分设计稿的数据，它死活读取不了。
报错：DDS Schema 不可用

在仓库搜索，发现这个issue：DDS Schema 不可用

这个问题在于，蓝湖的设计稿没有开启转代码，所以它无法读取到数据。我一脸懵逼，还有这东西？我怎么在设计稿上找不到开关，原谅我用蓝湖比较少，孤陋寡闻了。但是这个issue中有人回答他也碰到相同的问题，并且解决了，继续查看相关issue。

使用lanhu_get_ai_analyze_page_result获取结构化数据的一个问题

这个issue中提到，

我的蓝湖链接，确实是没有蓝湖转代码的开关，导致返回错误信息：蓝湖的图层标注数据依赖 store_schema_revise 接口，该接口返回”版本数据不存在”——大概原因是设计师未通过 Sketch/Figma 插件同步图层的 Schema 数据

所以我也明白了，为什么我的设计稿拿不到准确数据，因为给我做原型图的人就不是专业设计师，她可能是一点点在蓝湖拼出来的效果图！！！没辙，我能怎么办？也不能让人家现学重新做啊。

一波三折的是，这个人在issue中还提到他解决了这个问题，是从另外一个项目中找到的解决方案，并且他提供了代码，因为他也尝试了另外一个项目，那个项目同样的设计稿是能获取到数据的。这里附上项目地址lanhu-mcp。

怎么办？我不会改啊。。有代码我也改不了。

7、最终解决

纠结了好久，我突然灵光一闪。妈的，原谅我爆粗口，我不会，AI会啊。马上回到trae，告诉AI，我找到了lanhu_get_ai_analyze_page_result报错的原因，而且issue中有解决方案，但是我不会改，需要它帮忙。它查看了issue地址之后，告诉我它没有源码，让我给它源码，它来改。
立马下载源码，并且将其放在工作目录中，

告诉AI，我下载了源码，并且将其放在工作目录中，然后让它帮我修改源码。AI一通操作之后，告诉我改好了。仅仅是修改到了lanhu_mcp_server.py文件。那简单啊，替换掉服务器上的文件重启服务试试看。

最后的结果当然是，成功了！

附上下载地址：lanhu_mcp_server.py

总结

最终虽然解决了这个问题，但是过程中各种尝试遇到问题还是很蛋疼的，现在的AI确实强大，强大到让我有些恐惧，它比我们学习快多了，虽然它现在能帮我么做这做那，会不会真的有一天，取代了大家的工作，取代了大家存在的意义呢？