1. 设计师第 101 次问我“还原了吗”我决定把 Cursor 接到蓝湖上做前端的朋友大概率都经历过这个场景设计稿刚在蓝湖上更新完设计师在群里 你“这个按钮的圆角改了你还原了吗”过了半小时产品经理又甩来一张截图“这个间距怎么和设计稿不一样”你打开蓝湖对着标注量了半天发现是 8px 和 12px 的差别改完提交设计师又说“颜色不对是 #1A1A1A 不是 #000000”。这种沟通成本一天下来能吃掉两三个小时。更难受的是这些工作本身并不需要多少创造力纯粹是“人肉比对像素”的体力活。我一直在想能不能让 Cursor 直接读蓝湖的设计稿数据自动生成或校验样式代码这样设计师问我的时候我至少能说一句“代码里已经是这个值了”。后来我研究了一圈发现蓝湖本身提供了 MCP 服务而 Cursor 支持接入 MCP 协议。把这两件事串起来理论上就能实现“设计稿数据直达编辑器”。我花了一个周末把这条链路跑通现在设计师再问我“还原了吗”我直接让 Cursor 去读蓝湖的标注数据几秒钟就能给出答案。这篇文章就把整个搭建过程、踩过的坑、以及实际使用中的经验完整分享出来。提示本文涉及的 MCP 是指 Model Context Protocol是一种让 AI 工具与外部数据源对接的协议规范和网络代理没有任何关系。蓝湖 MCP 服务是其官方提供的设计稿数据接口能力。2. 蓝湖 MCP 到底能拿到什么数据以及为什么值得接2.1 蓝湖 MCP 服务的能力边界蓝湖 MCP 服务本质上是一个数据桥接层。它把蓝湖云端的设计稿信息包括图层结构、尺寸标注、颜色值、字体属性、间距关系等通过标准化的协议暴露出来。Cursor 作为支持 MCP 的编辑器可以通过配置连接到这个服务然后在对话中直接查询设计稿的具体参数。我实测下来能拿到的核心数据包括这几类图层基础信息图层名称、类型矩形、文本、组、组件等、层级关系尺寸与位置宽高、X/Y 坐标、相对父级的位置样式属性填充色、描边色、圆角、阴影、透明度文本属性字号、字重、行高、字间距、对齐方式间距标注元素之间的水平/垂直间距切图资源图标的导出链接和格式信息这些数据覆盖了前端还原设计稿时 90% 以上的查询需求。以前你需要手动在蓝湖上点选图层、看右侧面板、复制数值现在可以直接在 Cursor 里用自然语言问“首页那个主按钮的圆角和背景色是什么”它会去调蓝湖 MCP 拿数据然后告诉你。2.2 为什么不是直接看蓝湖网页你可能会问我直接打开蓝湖网页看不就行了吗何必多此一举区别在于工作流的连续性。写代码的时候你的注意力在编辑器里频繁切到浏览器、找到对应图层、读取数值、再切回来每次切换都是注意力损耗。而且当你需要批量核对多个元素的样式时手动一个个查非常低效。接入 MCP 之后你可以直接在 Cursor 的对话里说“帮我检查一下当前页面所有按钮的圆角是否和蓝湖设计稿一致”它会自动去拉取设计稿数据然后和你代码里的值做比对。这种批量校验的能力是手动查看完全做不到的。另外一个关键点是减少人为误读。设计稿上的标注有时候会有歧义比如“间距 16px”到底是指外边距还是内边距是相对于哪个父级容器。MCP 返回的是结构化的数据包含了图层层级关系能帮你更准确地理解设计意图。2.3 适合接入的团队规模和使用场景这套方案并不是所有团队都需要。我总结了几种最适合的场景场景是否推荐原因个人开发者接外包项目推荐设计稿频繁变更时能快速核对3-10 人前端团队强烈推荐沟通成本占比高自动化收益明显大型团队有专门还原工具看情况如果已有成熟的设计稿同步方案可能重复设计稿极少变更的项目不推荐接入成本大于收益纯移动端原生开发部分推荐如果样式代码也是手写同样适用我自己的情况是团队里 4 个前端、2 个设计师设计稿平均每周更新 2-3 次。接入之前每次更新后核对样式大概要花 1-2 小时接入之后这个时间压缩到了 15 分钟左右主要是用来处理 MCP 返回数据和实际代码之间的映射关系。3. 从零搭建蓝湖 MCP 服务的部署与 Cursor 接入3.1 蓝湖侧的准备工作首先你需要在蓝湖上有一个团队账号并且对目标项目有访问权限。个人免费版也能用但 MCP 服务通常需要团队版或以上才能开启。我用的就是团队版管理员在团队设置里可以找到“开放平台”或“开发者选项”相关的入口。具体操作路径大致是这样的进入蓝湖团队主页点击右上角的设置图标在侧边栏找到“开放能力”或“MCP 服务”选项。不同版本的蓝湖界面可能略有差异但核心逻辑是一样的——你需要生成一个访问令牌Token这个 Token 是 Cursor 连接蓝湖的凭证。生成 Token 的时候有几个参数需要注意权限范围建议只勾选“读取设计稿数据”不要给写入权限避免误操作有效期可以设置长期有效但建议每 90 天轮换一次绑定项目如果团队有多个项目可以限定 Token 只能访问特定项目拿到 Token 之后蓝湖会给你一个 MCP 服务地址格式类似wss://api.lanhuapp.com/mcp/xxx或者https://api.lanhuapp.com/mcp/sse。这个地址就是 Cursor 需要配置的端点。注意Token 相当于密码不要直接提交到 Git 仓库里。我一般放在本地的环境变量文件里通过${env:LANHU_TOKEN}的方式在配置中引用。3.2 Cursor 的 MCP 配置详解Cursor 从某个版本开始支持 MCP 协议配置入口在设置里。打开 Cursor按CmdShiftPMac或CtrlShiftPWindows输入“MCP”就能看到相关命令。或者直接进 Settings在左侧找到“MCP”或“Extensions”下的 MCP 配置项。配置文件通常是一个 JSON 文件路径在~/.cursor/mcp.jsonMac/Linux或%USERPROFILE%\.cursor\mcp.jsonWindows。如果你之前没配置过这个文件可能不存在需要手动创建。配置内容的基本结构是这样的{ mcpServers: { lanhu: { command: npx, args: [ -y, lanhu/mcp-server, --token, ${env:LANHU_TOKEN} ], env: { LANHU_TOKEN: 你的实际Token } } } }这里用的是npx方式启动蓝湖官方的 MCP 服务包。如果你网络环境访问 npm 比较慢也可以先全局安装再直接调用npm install -g lanhu/mcp-server然后配置改成{ mcpServers: { lanhu: { command: lanhu-mcp-server, args: [--token, ${env:LANHU_TOKEN}], env: { LANHU_TOKEN: 你的实际Token } } } }保存配置文件后重启 Cursor。在 Cursor 的对话面板里你应该能看到 MCP 工具已经加载成功。可以试着问一句“列出蓝湖上我最近访问的项目”如果配置正确它会返回项目列表。3.3 验证连接是否成功配置完成后不要急着去查设计稿数据先做几个基础验证检查 MCP 服务状态在 Cursor 设置里找到 MCP 面板看 lanhu 服务是否显示为绿色或“已连接”状态测试基础查询在对话里输入“蓝湖 MCP 有哪些可用工具”它会列出所有支持的操作拉取一个简单项目问“帮我看看蓝湖上 XX 项目的页面列表”确认能返回数据如果连接失败最常见的原因是 Token 无效或过期、网络无法访问蓝湖 API、或者 MCP 服务包版本不兼容。我遇到过一次是 Node.js 版本太低导致npx拉包失败升级到 Node 18 以上就解决了。4. 实际使用中我是怎么让 Cursor 帮我核对设计稿的4.1 单元素样式查询从“人眼比对”到“一句话确认”最简单的用法就是直接问。比如设计师说首页的“立即购买”按钮圆角改了我不需要打开蓝湖直接在 Cursor 里输入“帮我查一下蓝湖上尚品汇项目首页的‘立即购买’按钮圆角、背景色、字号分别是多少”Cursor 会调用蓝湖 MCP返回类似这样的结果图层立即购买按钮 类型矩形文本 圆角8px 背景色#FF6B00 字号16px 字重600 文字颜色#FFFFFF 内边距左右 24px上下 12px然后我再看一眼代码里的样式如果一致就回复设计师“已确认”不一致就顺手改掉。整个过程不到 30 秒。这里有个小技巧把常用的查询语句存成 Cursor 的快捷指令。Cursor 支持自定义 prompt 模板你可以把“查蓝湖上 XX 项目的 XX 元素样式”做成一个模板以后只需要填项目名和元素名就行。4.2 批量校验一次性检查整个页面的样式一致性单元素查询解决的是点的问题批量校验解决的是面的问题。当设计稿做了一次大改版涉及几十个元素的样式调整时一个个查效率太低。我的做法是先把当前页面的关键元素列出来然后让 Cursor 批量去查“帮我查一下蓝湖上尚品汇项目商品详情页的这几个元素样式商品标题、价格文本、原价删除线、销量标签、加入购物车按钮、立即购买按钮。返回每个元素的字号、颜色、圆角、内边距。”Cursor 会依次调用 MCP 接口把数据整理成表格返回。我拿到表格后和代码里的样式变量做对比找出差异项集中修改。实测下来一个包含 20 个元素的页面批量查询大概需要 1-2 分钟比手动一个个查快了至少 5 倍。而且返回的数据是结构化的可以直接复制到代码里做对比。4.3 结合代码上下文做智能比对Cursor 的强项在于它能同时理解你的代码和 MCP 返回的数据。你可以直接选中一段样式代码然后问“这段代码里的按钮样式和蓝湖上尚品汇项目首页的‘立即购买’按钮一致吗不一致的地方帮我指出来。”Cursor 会做三件事读取你选中的代码、调用蓝湖 MCP 获取设计稿数据、然后逐项比对并给出差异报告。返回结果类似差异项 1. 圆角代码中为 4px设计稿为 8px 2. 背景色代码中为 #FF5500设计稿为 #FF6B00 3. 字号代码中为 14px设计稿为 16px 建议修改...这种用法特别适合 code review 阶段或者接手别人代码时快速了解还原度。4.4 处理设计稿中的组件和变体蓝湖上的设计稿经常使用组件和变体Variant比如一个按钮组件有默认、悬停、禁用三种状态。MCP 返回的数据会包含组件的变体信息但需要你在查询时明确指定。我一般会这样问“蓝湖上尚品汇项目的按钮组件默认状态和禁用状态的背景色分别是什么”Cursor 会去解析组件的变体结构返回不同状态下的样式值。如果组件嵌套层级比较深有时候 MCP 返回的数据会比较冗长。这时候可以让 Cursor 帮你做一层过滤“只返回和背景色、文字颜色相关的属性忽略尺寸和位置信息。”5. 踩过的坑Token 失效、图层命名混乱、数据映射偏差5.1 Token 过期导致的“假连接”状态最开始我把 Token 硬编码在配置文件里用了大概两个月突然有一天 Cursor 说“无法连接到蓝湖 MCP 服务”。我检查了网络、重启了 Cursor、甚至重装了 MCP 服务包都没解决。后来才想起来可能是 Token 过期了。蓝湖的 Token 默认有效期是 90 天到期后需要重新生成。但坑在于Cursor 的 MCP 面板仍然显示服务为“已连接”状态因为进程还在运行只是实际调用 API 时返回 401 错误。这种“假连接”状态很容易误导排查方向。我的解决方案是在 Token 快到期前一周设置日历提醒提前轮换。另外在 Cursor 的对话里做一次实际查询来验证连接而不是只看 MCP 面板的状态灯。5.2 设计师的图层命名不规范导致查询不到这个问题比 Token 过期更常见。设计师在蓝湖上给图层命名往往很随意比如“矩形 12”、“编组 5”、“Frame 23”这种。你问 Cursor“帮我查一下‘立即购买’按钮的样式”它可能找不到因为图层实际叫“按钮-拷贝-3”。我的应对策略分两步第一步是推动设计师规范命名。我跟团队里的设计师约定了一个简单的命名规则功能模块_元素类型_状态比如product_detail_buy_button_default。虽然不能保证 100% 执行但至少核心元素有了可读的名字。第二步是在查询时用更灵活的描述。如果精确名称查不到可以试着用位置或视觉特征来描述“商品详情页底部、价格右侧的那个橙色大按钮”。Cursor 会结合图层的位置信息和视觉属性来匹配虽然不如精确名称可靠但大多数情况下能找到。另外蓝湖 MCP 支持按图层 ID 查询。如果你能在蓝湖网页上选中图层复制它的 ID然后直接让 Cursor 按 ID 查这是最准确的方式。5.3 设计稿数值和代码数值的映射偏差这是最隐蔽的坑。设计稿上的数值和代码里的数值并不总是一一对应原因有几个单位换算设计稿可能是 2x 或 3x 图标注的 16px 在实际代码里应该是 8px盒模型差异设计稿的“间距”可能指的是视觉间距而代码里需要计算 margin padding border字体渲染差异设计稿用的字体和浏览器实际渲染的字体行高可能不同我遇到过一个典型案例设计稿上按钮高度标注 44px我代码里写height: 44px但设计师说“看起来矮了一点”。后来发现设计稿的 44px 包含了 1px 的描边而代码里height不包含 border。改成height: 42px; border: 1px solid之后才完全一致。处理这类问题我的经验是不要盲目相信 MCP 返回的数值要结合盒模型和实际渲染效果做判断。Cursor 可以帮你拿到数据但最终的解释和映射还是需要人来把关。5.4 MCP 服务响应慢或超时蓝湖 MCP 服务在查询大型项目或复杂图层结构时响应时间可能会比较长。我遇到过查询一个包含几百个图层的页面时等了将近 30 秒才返回结果有时候甚至超时。优化思路有几个缩小查询范围不要一次性查整个页面而是按模块分批查指定图层 ID如果知道具体图层 ID直接按 ID 查比按名称搜索快很多缓存常用数据把不常变的设计稿数据比如颜色变量、字体规范缓存到本地文件减少重复查询我在项目里建了一个design-tokens.json文件把蓝湖上常用的颜色、字号、间距值手动同步进去。Cursor 查询时优先读本地缓存只有缓存里没有的才去调 MCP。这样既快又稳定。6. 让这套方案真正落地的几个关键习惯6.1 把设计稿查询纳入日常开发流程工具再好如果不在流程里用起来也是白搭。我给自己定了一个简单的规则每次提交 UI 相关代码前必须用 Cursor 查一次蓝湖对应元素的样式。这个动作只需要几十秒但能避免 90% 的“还原度”问题。具体操作是在 Git commit 之前在 Cursor 里跑一遍查询确认关键元素的样式和设计稿一致。如果团队用 CI/CD也可以考虑把这一步做成自动化检查但实现成本较高小团队手动做就够了。6.2 和设计师建立“数据对话”而不是“感觉对话”以前设计师说“这个颜色不对”我会问“哪里不对”然后两个人对着屏幕猜。现在我会直接让 Cursor 查蓝湖数据然后回复“设计稿上是 #FF6B00我代码里是 #FF5500已改。”设计师一看数据确认无误沟通结束。这种“数据对话”的好处是消除了主观判断的空间。颜色、尺寸、间距这些客观属性直接用数据说话不需要争论“我觉得”“你觉得”。6.3 定期同步设计稿变更而不是等到被问我现在养成了一个习惯每天早上花 5 分钟让 Cursor 拉一遍蓝湖上我负责项目的最近更新记录。如果发现有设计稿变更主动去看一眼变更内容评估是否需要改代码。这样设计师还没开口我已经知道哪里要调整了。蓝湖 MCP 支持查询项目的更新历史虽然不如网页上直观但足够让你知道“哪些页面有变动”。结合 Cursor 的总结能力可以让它帮你生成一份变更摘要“昨天尚品汇项目有 3 个页面更新主要涉及按钮样式和间距调整。”6.4 注意安全边界Token 管理和权限控制最后再强调一下安全相关的事项。蓝湖 Token 是访问设计稿数据的凭证一旦泄露别人可以读取你团队的所有设计稿。所以Token 不要提交到 Git用环境变量或本地配置文件管理定期轮换 Token建议 90 天一次在蓝湖侧限制 Token 的权限范围只给读取权限如果团队成员离职及时在蓝湖后台撤销其 TokenCursor 的 MCP 配置文件里如果写了明文 Token注意不要把这个文件同步到云端或分享给他人。我一般会在.gitignore里加上.cursor/mcp.json避免误提交。这套方案我用了大概半年最大的感受是它把“还原度”从一个沟通问题变成了一个数据问题。设计师不再需要追着我问“还原了吗”因为我可以随时给出基于数据的确认。前端也不再需要反复切换工具查标注所有信息都在编辑器里触手可及。如果你也在被类似的问题困扰不妨花一个周末把这条链路搭起来长期收益远超投入。