MCP接入蓝湖：Cursor读取设计稿数据，AI写代码告别截图猜像素

上周五下午四点半设计师小周把设计稿切到第三屏抬头问我“这屏还原了吗”我说“快了”。她又切到第四屏继续等着。我盯着蓝湖上的标注心里清楚真正的问题不是我不愿答而是我看标注的速度跟不上她翻屏的速度。后来我花了一个下午把Cursor通过MCP接上了蓝湖。现在 Cursor 可以直接读取蓝湖设计稿里的图层结构、坐标、尺寸、颜色、字体和圆角数据AI 写代码的时候不再靠截图猜像素而是按设计稿的结构化数据生成。设计师那边一更新我这边拉一遍数据核一遍差异大部分“还原了吗”的问题在发生之前就被消化掉了。这篇文章就是我完整的接入记录包含选型思路、部署步骤、指令模板和踩坑经验写给所有在“还原设计稿”这件事上耗过时间的前端和独立开发者。1. 为什么是 MCP而不是继续截图喂给 Cursor1.1 我试过直接把蓝湖截图拖进 Cursor结果并不理想在做 MCP 接入之前我其实尝试过最“偷懒”的方案把蓝湖页面截图或者把设计稿导出的图片直接拖进 Cursor 的对话框里告诉它“照着这个图写页面”。前几次确实能用页面框架和配色能出来个七七八八。但用多了以后问题非常明显。第一像素值是猜出来的。截图就是一堆像素AI 看着图写width: 320px还是width: 322px本质是在估算。短几个像素在普通页面上看不出问题一旦遇到那种需要严格对齐的列表、卡片、表格差 2px 都会被 UI 走查打回来而且你还说不清是哪儿差的。第二长设计稿会被截断。蓝湖上一个完整页面往往有七八屏那么长截图要么拼成长图导致压缩变形要么切成多张导致 AI 只看到其中一段然后下半部分自由发挥生成了和设计稿完全无关的布局。我最尴尬的一次是 AI 照着第一屏的头部样式给页面底部也加了一个导航栏设计师看到之后沉默了很久。第三版本漂移。截图一旦截下来它就是一张静态图片。设计师在蓝湖上改了颜色、调了间距、换了配图我的截图还停留在旧版本。等 UI 走查的时候我对照最新设计稿才发现自己做的页面早就不是她想要的样子了。1.2 MCP 解决的核心问题从读像素变成读数据MCPModel Context Protocol这个协议本质上是在 AI 和外部系统之间搭了一座桥。AI 通过 MCP 工具调用可以拿到真实系统的数据而不是靠肉眼和猜测。放到蓝湖这个场景里区别就非常具象截图方案AI 拿到的是图片需要自己从像素里推断尺寸、颜色、间距。MCP 方案Cursor 直接调用蓝湖的设计稿数据接口拿到的是结构化的 JSON里面有图层树、坐标、宽度、高度、颜色值、字体大小、圆角半径、间距标注。打个比方截图差不多是拿着照片让裁缝做衣服照片角度歪一点尺寸就得靠猜MCP 等价于把尺码表、面料规格和版型图纸直接递到裁缝手里数值是多少就是多少。我接入之后最直观的感受是AI 生成的第一版页面和设计稿的整体吻合度明显比截图方案高了一个档次。至少颜色值不用再肉眼对比间距可以精确到margin: 16px而不是margin: 15px或者17px。1.3 这套方案适合什么样的人不是所有场景都值得折腾一遍 MCP我总结一下自己觉得最值得做的三类人业务前端每天要和设计稿打交道页面量大、改版频繁像素级还原是刚需。独立开发者一个人做完开发和设计对接没有中间人帮你确认还原度AI 能直接读设计稿数据等于多了一个不需要休息的还原审查员。做组件库或 UI 外包的人交付物本来就要求严格对标设计稿结构化数据的价值最大化。如果你只是偶尔写一个简单的落地页截图方案也够用。但如果你像我一样每周都要面对“还原了吗”这个问题MCP 这一套带来的收益是长期且稳定的。2. 蓝湖侧的准备先搞到一张 API 通行证2.1 确认账号权限读不到数据一切白搭接入之前先确认两件事你的蓝湖账号能不能访问目标项目你的账号在团队里的权限够不够MCP 服务读取设计稿数据的时候是拿你的 API Token 去请求蓝湖服务端的。如果 Token 对应的账号不在这个团队里或者所在的团队没有开通对应的开放接口权限请求会被打回来通常是 401 或者 403。这个坑我一开始就踩过折腾了十分钟才发现是用的老账号根本不在项目团队里。所以第一步很简单确保你用来接入的账号就是平时能正常打开这个蓝湖项目、能看得到设计稿的那个账号。别用小号别用已经退了团队的号省得后面排查权限的时候怀疑人生。2.2 在蓝湖开放平台创建应用获取 API Token确认权限之后去蓝湖开放平台那边创建一个开发者应用。入口通常在蓝湖团队的开发者设置或开放平台后台不同的团队版本入口位置略有区别但逻辑是一样的创建一个应用获取 API Token。创建应用的时候注意记下这几个东西Token 本身这是你后面所有配置的核心凭证。接口权限范围尽量申请到和设计稿读取相关的权限尤其是页面列表、图层树、标注信息这几个。如果权限开得太小后面拉数据的时候会发现只能看到页面名字拿不到图层和标注那就没什么用了。配额限制开放平台的接口通常会有频率限制个人使用完全够但如果整个团队共用一个 Token要考虑会不会被限流。Token 拿到之后把它当成密码一样对待。不要往公开仓库里扔不要截图发给别人。它就像是你蓝湖团队的钥匙能开多少门取决于你申请了什么权限。2.3 先验证一下 Token 能不能拉到数据很多人拿到 Token 之后直接就去配 Cursor结果发现工具挂了却什么都读不出来然后回头怀疑是 MCP 配置的问题。其实更好的做法是在配置之前先手动验证一下 Token 是否有效。用命令行工具直接调一次接口看看返回的 JSON 里有没有页面列表。我当时的验证方法很简单把 Token 拼到请求头里请求设计稿列表接口看到返回了一串页面名称和 ID就知道这条路是通的。这一步验证看起来多此一举但它能帮你把“Token 问题”和“MCP 配置问题”分开。如果 Token 本身就无效后面配置 MCP 的时候你大概率会在两个方向之间来回猜浪费不少时间。3. 把蓝湖 MCP 服务挂进 Cursor 的全过程3.1 我采用的方案开放平台接口加现成的 MCP 包装蓝湖的设计稿数据是通过开放平台的 HTTP 接口暴露的但 Cursor 不会直接去调 HTTP 接口它需要的是一个符合 MCP 协议的服务。所以中间需要一层包装把 HTTP 请求封装成 MCP 工具调用。我的做法是直接用现成的 MCP 服务。如果你拿到的不是现成服务地址也可以自己用 Node 写一个轻量包装原理很简单接收 Cursor 传来的工具调用请求转发到蓝湖的 HTTP 接口再把 JSON 结果返回给 Cursor。不过这一步对大多数使用者来说不是必须的优先找现成的没有现成的再自己包。3.2 配置文件的通用结构与我的踩坑点Cursor 里配置 MCP 服务主要是在.cursor/mcp.json里声明或者在 Settings 的 MCP 面板里添加。我最终用的配置结构大致是这样的{ mcpServers: { lanhu: { command: npx, args: [你的MCP服务启动参数], env: { LANHU_API_TOKEN: 你申请到的API Token } } } }注意具体的服务包名、启动参数和环境变量名称一定要以你实际使用的 MCP 服务为准。我在跑的时候在这里卡了大概半小时原因是我按照网上一个老版本的示例填了参数结果服务一直起不来报错信息也不够直观。后来仔细对了一遍当前版本的文档把args和env的字段名改了过来才正常连上。关于配置入口我多说一句如果你在 Settings 里改了配置建议重启一次 Cursor。MCP 服务列表有时候不会自动刷新重启之后才能正确加载。这不是什么玄学是很多本地服务的启动时机和 IDE 的扫描时机没对齐遇到这个情况不用反复重装先重启。3.3 判断连接成功的三个标志连接之后怎么确认真的通了我总结出三个可以自检的标志MCP 面板里服务状态正常。打开 Cursor 的 MCP 面板能看到这个服务已经注册而不是报错或超时。能看到工具列表。展开服务节点下面应该有一组工具对应蓝湖的页面读取、图层读取、标注读取这些能力。如果工具列表是空的大概率是服务配置有问题或者 Token 权限不足。在 Agent 模式下试一句指令。新建一个会话直接让 AI 调用蓝湖工具读取项目页面列表。如果 AI 开始调用工具并且返回了数据那就是真的通了。我当时的第三个标志等了十几秒才有反应起初还以为没启动成功其实是因为第一次调用需要初始化连接。多给它一点时间别急着下结论。3.4 权限设置的一个实际建议Cursor 对 MCP 工具有权限控制默认可能需要你每次手动确认是否允许调用某个工具。在最开始调试的时候我建议保留确认机制看看 AI 在哪些环节会触发工具调用顺便观察它的调用逻辑是不是合理。跑熟之后再把常用工具设置为 Auto Allow。不然每次写代码都要弹一次确认思路很容易被打断。这个决定因人而异我个人的体会是工具调用越顺滑你使用 AI 的意愿越强最后产出的质量也就越高。但前提是你已经对工具的行为有足够把握不会出现误调用。4. 让 Cursor 读完数据再写代码我的三条指令套路4.1 固定节奏先拉数据再写代码别跳步MCP 接好之后很多人容易犯一个错误仍然像以前一样直接说“帮我写一个登录页”然后 AI 开始自由发挥完全没有调用蓝湖工具。原因很简单AI 是懒的你给它的指令越开放它越倾向于走捷径。我的解决方案是强制一个固定的开工节奏每一步都明确要求它调用蓝湖工具。第一步先让它列出设计稿页面确认它读到的数据源是对的。第二步指定页面和区域让它读取图层树和标注。第三步基于读取到的最新数据开始生成代码。这个节奏看起来多写了两句话但能避免最尴尬的情况AI 写了半天最后发现读的是一个已经废弃的旧版本设计稿或者压根没有读设计稿纯靠猜。4.2 我个人在用的三条指令模板我常用的指令没有太高深的技巧核心是让 AI 明确数据来源和数值要求。第一条定位页面请调用蓝湖工具列出项目“某某”下的所有设计稿页面只返回页面名称和 ID不需要返回全部图层数据。找到页面“首页 v3”的 ID 之后读取该页面主画板内坐标 (0, 0) 到 (375, 812) 区域内所有图层的层级结构、尺寸、坐标、颜色、字体和圆角标注完整输出不要省略。第二条基于数据写代码基于你刚才读取到的设计稿数据为这个页面生成响应式 HTML 和 CSS。所有数值必须与标注完全一致包括宽度、高度、间距、字号、颜色值和圆角。颜色优先使用十六进制值布局使用 flex 或 grid遇到不确定的样式先从数据里找找不到再问我不许自行猜测。第三条生成还原差异清单请根据设计稿数据和当前项目里的组件代码列出还原差异清单。包括已有组件可以直接复用的部分、已有组件与设计稿不一致的地方、需要新增的组件、以及所有数值层面的差异。输出为表格形式方便我直接对照修改。这三条指令各司其职第一条负责定位数据第二条负责生成内容第三条负责兜底排查。我用了大概一周之后已经把这三条固定成了自己的模板每天开工直接复制粘贴改项目名和页面名就行。4.3 让 Cursor 帮你做“还原审查”替代你回设计师的话除了生成代码MCP 接蓝湖还有一个隐藏价值AI 可以帮你做一次还原度自检。以前我写完一个页面自己对着蓝湖标一遍眼睛都花了。现在我会让 Cursor 先读取设计稿数据再读取我写好的代码文件让它逐项比对。比如设计稿里按钮的宽度是 88px代码里是 90px一眼就列出来了。这个功能刚跑通过的时候我第一个想法是这简直是为“还原了吗”这个问题量身定做的。设计师问我的时候我不用再心虚我可以直接甩过去一句“我自检过了差异点在哪正在改”或者更直接一点“这版和设计稿的数据是一致的可以走查”。当然AI 的自检不能百分之百替代人工走查但它至少能把低级的数值偏差、颜色偏差和文字大小偏差提前筛掉绝大部分。UI 走查的效率提升了不止一倍。4.4 配合组件库使用效果比想象中更好连续用了一个月之后我发现一个更进阶的玩法让 Cursor 读取设计稿数据之后先和项目里的现有组件做匹配而不是一切从零生成。比如设计稿里有一个搜索框项目里其实已经封装好了SearchBar组件我就让 AI 先去读项目组件文件的导出的名称和传入参数再去匹配设计稿里对应的图层如果能对上直接用组件不对再改。这样生成的代码不仅还原度高而且和项目的既有代码风格保持一致后面维护起来也轻松很多。这个思路需要项目的组件命名足够规范至少导出名称是语义化的。如果你的项目组件命名也是“组件 1”“组件 2”这种可能匹配不了那就老老实实让它直接生成等到后面重构的时候再规范化。5. 跑通之后踩过的坑以及我推荐的安全姿势5.1 图层命名混乱AI 读出来的是一堆“组 128”第一次让 Cursor 读取完整图层树的时候我整个人是崩溃的。设计稿里的图层名有一半是“组 128”“矩形 45”“副本 2”连设计师本人看了都要想一会儿的东西指望 AI 从中理解语义纯属难为它。我当时的处理办法是放弃让 AI 从图层名称理解语义强制它只看标注值。在指令里明确告诉它不需要推断图层名的含义只需要严格使用标注里的坐标、尺寸、颜色和文字内容来生成代码。这样一来图层名再乱也不会影响数值的准确性。另外我后来也做了一件事推动设计师规范化命名。我是这么跟她说的现在 AI 能直接读蓝湖数据了但如果图层好好命名AI 能更准确地把图层匹配成按钮、输入框、卡片省得我手动改。她听了也挺配合后面新出的设计稿命名明显规范了不少。这属于一次投入、长期收益的事。5.2 Token 权限边界比想象中更容易踩我的 Token 一开始申请的权限范围不够大能读到页面列表但读不到更细的标注信息。当时 Cursor 调用工具没有直接报错只是返回的数据里图层部分全是空的我一度以为 MCP 服务包装有问题。排查了半天最后回头看其实是 Token 的权限范围问题。这个坑的隐蔽之处在于它不是完全不能访问而是只能访问一部分。建议在申请 Token 的时候一次性把设计稿相关的读取权限都勾上尤其是图层和标注这两项省得后期频繁回来改。5.3 多画板、多版本的设计稿数据定位要带上下文蓝湖上一个项目里往往有多个页面、多个版本页面里还有多个画板长页面会被切成好几块。如果指令里不指定具体页面和画板AI 很容易读错数据比如读到了旧版的“首页 v2”而不是最新的“首页 v3”。我的习惯是每次读取前把项目名、页面名、画板区域全部写清楚并且让 AI 先返回它找到了哪些页面再由我确认目标。多一道确认数据就准一分。同时也建议你这边跟团队约定好过期版本在设计稿里及时清理或重命名不然别说是 AI人翻起来都是个麻烦。5.4 Cursor 相关的几个小问题顺手一起说最后说几个本主题周边、但实际使用中绕不开的问题都是我自己碰过的。第一个是MCP 工具列表突然消失。有时候 Cursor 更新版本之后之前配置好的 MCP 服务会掉线表现是面板里服务还在但工具列表空了。我的处理方式是把服务停掉再启动实在不行就重启整个 Cursor基本都能恢复。第二个是界面语言设置。如果你刚开始用 Cursor界面是英文的看不太习惯可以在设置里搜索语言相关的选项切换到中文之后重启一下。语言顺手之后排查配置问题的效率会高不少别小看这个事。第三个是额度消耗。Agent 模式下频繁调用 MCP 工具额度消耗比普通对话快不少。我的策略是简单页面用普通模式复杂页面才开 Agent 模式既不浪费额度也能保证复杂页面的还原质量。第四个是我遇到过两次的一个提示大概意思是短时间内登录的设备太多。如果弹出类似提示不用慌等一段时间或者换回常用设备登录就行。5.5 我目前觉得最稳的落地姿势跑通之后我目前的日常节奏是这样的每天开工先让 Cursor 拉一遍蓝湖上最新的设计稿列表看看有没有新增或改动。如果设计师更新了设计稿我直接读取新版数据和当前已完成的页面代码做比对把差异清单列出来然后逐个修改。设计师那边我只需要在白板上加一条规则更新设计稿之后在页面上标注一下“改动区域”。如果她没标我就让 AI 按整个页面做对比数据量大的时候会慢一点但准确率没什么问题。这套链路跑了大概一个月最大的变化不是“少被追问”而是我的工作节奏从被动响应变成了主动同步。设计稿一更新我这边几乎同时就能看到差异而不是等到走查的时候被发现问题。如果你也每天被“还原了吗”追着跑我建议你试一下这条路。从申请 Token 到 MCP 跑通我用了大概一个下午其中一半时间花在配置格式和权限调整上。真正跑通之后每天节省下来的核对时间远超当时折腾的那几个小时。