Cursor接入蓝湖MCP：设计稿自动对比，前端还原不再靠人肉

上周蓝湖上新了一版登录页设计稿，我照例打开 Cursor，输了一句“查一下蓝湖登录页主按钮和输入框的间距，跟当前代码对一遍，只输出差异”，然后继续写我的接口。二十多分钟后，设计师在群里问改动好了没，我说早就按着标注改完了，她反而愣住，追问“你已经还原好了？”。说实话，那一刻我才觉得，把 Cursor 接到蓝湖这件事，真的解决了一个折磨了设计、开发很久的问题：以后不用再追着问“还原了吗”。

这篇文章是我个人这次接线的完整复盘。里面没有高大上的架构图，只有一台本地电脑、一个 Cursor、一个蓝湖账号，以及一套让设计稿自动变成代码审查上下文的工作流。如果你也在做前端开发，或者在带开发小组，经常跟设计师在还原度上互相拉扯，这篇文章应该能帮你省掉不少沟通成本。

1. 先搞清楚：把 Cursor 接到蓝湖到底解决了什么问题

1.1 “还原了吗”为什么会被反复问

做前端的人基本都有过这种经历：设计稿标注里写得很清楚，按钮高度 48px、圆角 6px、主色 #2F5BFF，但真到实现时，因为布局挤压、字体渲染差异、状态缺失，最终页面上呈现的效果跟设计稿总有几像素或几分色差。

设计师拿着蓝湖滚轮一量，发现不对劲，就跑来问“还原了吗”。开发打开本地页面看半天，觉得大差不差，两边开始对着标注一条条核对。这一个来回少说十分钟，涉及组件多了，一天能打断三四次。最痛的不是改那几像素，而是反复把同一份信息在两个系统之间倒腾。

其实大家心里都清楚，还原度问题的本质不是谁不认真，而是设计稿和代码之间缺了一个“事实同步层”。设计稿在蓝湖上更新了，代码仓库里的样式不会自动感知；开发在实现时的取舍，设计师也看不到。两边各拿一份信息，永远对不齐。

1.2 MCP 在这里面扮演了什么角色

MCP（模型上下文协议）简单理解就是一个“万能插头规范”：它让 AI 编程工具能按统一方式去读外部系统里的数据。蓝湖把自己的设计标注、图层结构、切图信息通过 MCP 暴露出来，Cursor 作为 AI 编程工具，就能在对话里直接检索这些信息。

这个过程对我最直接的变化是：我不再靠肉眼从设计稿里抄参数，也不用手动复制标注，Cursor 自己就能问蓝湖要。比如“取一下画板 LoginV2 里主按钮的尺寸和间距”，它会通过 MCP 工具读取对应的结构化数据，返回颜色、宽高、内外边距、圆角这些信息，然后把这些数据跟当前代码并排比较。

你可以把 MCP 服务理解成一个翻译官。蓝湖里存的是图形和标注，AI 本来读不懂；但 MCP 把图形标注翻译成稳定的 JSON 字段，AI 就能理解了。接入这件事的本质，并不是让 AI 替你做所有还原，而是让“设计内容”和“代码内容”第一次以机器可对比的形式出现在同一个工作台里。

2. 接入前的一小时准备

2.1 我这边最终用到的工具清单

整个接线过程没有想象中复杂，但准备工作确实值得花点时间一次性做对。我最后稳定在用的组合是：Cursor 桌面版 0.46 以上版本、蓝湖团队版账号、本机 Node.js 18+、蓝湖开放平台生成的只读令牌，以及一个基于 MCP 的蓝湖连接服务。因为 Cursor 更新很快，MCP 相关的界面位置可能微调，但核心逻辑没怎么变。

比较容易被忽略的是 Node 环境。蓝湖的 MCP 服务端大多数情况下跑在本地，如果你的电脑上没有装 Node 或者版本停留在 14 以下，连接时容易报各种莫名其妙的网络错误。我一开始就是在旧机器上踩了坑，后来把 Node 升到 LTS 版本才稳定。

还有一点，令牌权限尽量给到“只读”。蓝湖开放平台的令牌支持不同权限范围，我只勾了设计稿读取和标注读取，没有开写操作。对还原审查这件事来说，AI 只需要读取设计信息并反馈结果，并不需要它去改动蓝湖上的文件。令牌权限给得越窄，后面出问题的可能性就越小。

2.2 顺手把 Cursor 改成中文，省得两边找设置

我自己的使用习惯是工具界面保持中文，AI 回复也用中文，因为团队里的设计规范和沟通记录都是中文，让 AI 用中文输出差异报告，后续贴到工单里更省事。

Cursor 的中文设置其实分两层。第一层是软件界面语言，在 Cursor 的 Settings 里能找到 Language 选项，切换成“简体中文”后重启就生效。第二层是 AI 回复语言，Cursor 是跟随对话上下文的，所以你可以在规则或自定义提示词里加一句“始终使用简体中文回复”，它会一直保持中文输出，不会因为代码是英文就切回英文。

有人习惯把中文回复要求在每次新建对话时手打一遍，我自己更推荐把它写进 Project Rules 里，这样任何一个新会话都自动带中文回复。如果不小心手滑建了英文回复的会话，也可以直接说“接下来请用中文回答”，模型会立刻切换，不需要重开窗口。

2.3 把令牌放进环境变量而不是代码里

准备令牌的时候要养成一个习惯：不要把令牌明文写在项目文件里。Cursor 的项目配置检索能力很强，如果你把 token 写在某个公共配置里，被 AI 当上下文复用是小问题，真正的问题是一旦仓库推送到远端，等于把蓝湖账号权限也公布出去了。

我习惯的做法是新建一个.env.local文件，在里面写LANHU_ACCESS_TOKEN=xxxx，然后在 MCP 配置里用环境变量引用。Cursor 读取这个文件时不会把它当成业务代码，也更方便团队里每个人用自己的令牌调试。

3. 部署蓝湖 MCP 服务，以及配置到 Cursor

3.1 在蓝湖开放平台侧把 MCP 服务先跑起来

蓝湖的 MCP 服务部署现在有好几种方式：可以直接用蓝湖官方提供的云服务地址，也可以根据开放文档在本地用 Node 把社区维护的服务端跑起来。我个人因为项目的隐私要求和内网环境，选择在本地起了一个服务端，用起来其实跟官方云服务差别不大。

如果你用的是社区维护的服务包，启动前先确认两件事：令牌是否有效、网络是否能访问到蓝湖的接口域名。本地跑的时候，服务端默认监听某个端口，比如 3100 或 8080，最后会输出一个 MCP 地址，类似http://localhost:3100/mcp。这个地址后面要填到 Cursor 里。

如果你不想维护本地服务，也可以直接在蓝湖开放文档里看有没有现成的远程 MCP 地址。远程方式的好处是团队里每个人都能用同一个地址，不用各自部署；缺点是如果你的网络环境限制较多，访问远程地址可能比访问本机更麻烦。

3.2 把服务登记到 Cursor 的 MCP 列表

Cursor 目前支持 Global MCP Configuration 和 Project MCP Configuration 两处配置。Global 配置对所有项目生效，Project 配置只对当前项目生效。

我建议用项目级配置。原因很直接：不是所有项目都需要读蓝湖，如果每个项目都挂一个蓝湖 MCP，AI 在无关上下文里也会尝试扫描设计稿，既浪费时间又容易串信息。项目级配置只让当前这个页面项目加载蓝湖能力，逻辑更清晰。实际打开 Cursor 的 MCP 面板，点“Add new MCP server”，填写名称和地址。填完后在列表里能看到状态变成 Enabled，然后再回到输入框里测试一句跟设计稿相关的话。

这里提供一个配置示例，用本地服务的方式：

{ "mcpServers": { "lanhu": { "command": "npx", "args": ["-y", "lanhu-design-mcp"], "env": { "LANHU_ACCESS_TOKEN": "替换成你的只读令牌" } } } }

我再强调一遍：具体包名和参数要以蓝湖开放平台的最新文档为准，上面这段是通用结构示意，不过拿来做配置模板完全没问题。

3.3 连接好后先做一次“空测”

配置完成别急着直接写“把我整个页面都还原好”，先做一个最小测试。我给新接 MCP 项目的流程很简单：打开 Cursor 的对话，输入“你现在能访问蓝湖吗？列出 Design Assets 里第一个画板的名称和宽度”。

如果连接正常，Cursor 会调用相应的 MCP 工具，返回画板名称、尺寸、图层数之类的结构化信息。能返回这些数据，说明设计稿已经被 AI 读到了。这一步花不了三十秒，但能排除 80% 的配置问题。不要跳过去，后续所有工作流都建立在这个连通基础上。

3.4 不想折腾服务时的 Skill 替代方案

如果你只是一个人用，暂时不想部署完整的 MCP 服务，也有一个轻量替代方案：把蓝湖设计稿的关键信息整理成一份“设计规范摘要”，写成 Cursor Skill 文件，通过/skill命令调用。Skill 本质上是一个带固定指令和上下文的提示词模板，里面可以包含设计文件的访问地址、规范摘要、颜色变量表等。

这个方案的好处是部署为零，缺点是无法实时读取最新设计稿。只要设计稿更新，就必须手动更新那份摘要。所以我个人对它的定位是“单兵作战快速方案”，适合在犹豫要不要上 MCP 之前先验证流程。如果验证下来觉得确实好用，再花半小时把 MCP 服务接上，做完我会选后者。

4. 接入后的完整工作流长什么样

4.1 一条指令触发整个还原度审查

现在我在 Cursor 里会固定用一套提示词模板，名字就叫“按蓝湖还原”。模板内容大致是：让 AI 先去蓝湖读取指定页面或组件的设计属性，再读取当前项目里的样式代码，最后输出一个标记为差异的清单。每一处差异要标明设计值、当前代码值、差异像素和影响元素。

这个过程的本质是让 AI 做一遍机器层面的视觉 diff。但机器 diff 不是只比对像素，而是比对标注数据与实际 CSS 计算后的值。比如设计标注显示内边距是 16px，代码里的内边距也确实写成了 16px，那还原度就是 100%。如果代码里写的是 14px，AI 会直接列出这个差异，不用等设计师手动量出来。

我还让模板固定输出“优先级”字段：颜色差异、尺寸差异属于高优先级，因为这些直接影响视觉；而由字体渲染导致的 1px 偏差会被归为低优先级，减少无效返工。

4.2 真实案例：登录页卡片间距的一次自动对齐

有一次我实现完登录页，顺手在 Cursor 里跑了一遍工作流。蓝湖设计稿里，卡片标题和副标题的间距是 12px，卡片内部左右内边距是 24px。但我当时写代码时觉得 10px 看起来更紧凑，就把间距改成了 10px。

放在以前，这个问题要等设计师截图问我，或者我自己感觉不稳妥，主动跑过去对齐。但那次 MCP 直接返回数据后，Cursor 在差异清单里标出了“标题间距：设计值 12px / 当前值 10px / 差异 2px”。我核对了一眼，发现自己确实是故意为之，不是笔误。如果走旧流程，这会变成一次微信扯皮；现在直接看数据决定是保留还是还原，效率完全不在一个量级。

上面这个例子也说明：接蓝湖不是为了消灭所有例外，而是把“例外情况”摆到台面上，让开发做决定时有数据支撑。

4.3 设计 token 自动同步，这步价值最大

如果只拿 MCP 来查间距，那有点浪费了。我最推荐团队上的是“token 增量同步”。具体做法是让 Cursor 通过 MCP 读取蓝湖设计稿中的颜色变量、字体、间距规范，然后生成或更新前端项目的tailwind.config.js或tokens.json。

比如蓝湖某个团队规范里定义了一组主色调：

{ "color": { "brand-primary": "#2F5BFF", "brand-primary-hover": "#1B3FE1", "bg-base": "#FFFFFF", "text-primary": "#1A1A1A" }, "spacing": { "xxs": "4px", "xs": "8px", "sm": "12px", "md": "16px", "lg": "24px" } }

让 AI 生成这个文件并不难，难的是保持它跟设计稿一致。以前是我们前端维护一份，设计师在蓝湖维护一份，两边不同步时就会出现设计稿说 16px，代码里叫md，但md实际值是 20px 的问题。接上 MCP 后，AI 可以直接读最新设计稿来校验这份 token 文件，不一致的地方会列出来。这在组件库里价值最大，一次同步能帮几十个组件同时对齐。

4.4 直接生成沟通单据，省掉一遍人工截图

过去做还原度确认，开发改完代码还得回蓝湖截图、标注，写明哪里已对齐哪里还有出入。现在我会让 Cursor 把差异清单直接按模板整理成一段文字，直接黏进飞书或钉钉对话。设计同事看到的不再是一句“已经还原了”，而是一份带设计值、当前值、差异值的说明。

设计师要做的只是核对清单、给出取舍意见，不用再打开蓝湖一处处测量。原先需要打字的沟通变成了纯决策。这种方式的后续收益也很明显：当团队里积累了几十条这样的差异记录，就能总结出高频问题出在哪些组件上，是从根上优化协作规范的依据。

5. 常见故障和排查经验

5.1 MCP 连不上，八成是令牌和网络问题

新接 MCP 最容易遇到的问题就是连接失败。我的排查顺序是固定的：先看 Cursor 的 MCP 状态是不是 Enabled，再确认令牌还有效，最后检查网络链路。

令牌失效的情况很常见，尤其是团队里共用令牌时，一过期全部一起挂。另外如果你在公司内网办公，本机 Node 服务访问蓝湖开放接口可能需要对应的白名单配置，不然服务端能启动，但调用设计数据时会在网络请求这一层被拦下来。判断方法很简单：用浏览器直接访问蓝湖开放平台的一个接口试试，如果浏览器能通但 Cursor 的 MCP 不通，基本就是 MCP 服务端的网络配置问题。

5.2 Cursor 提示 taking longer than expected 怎么办

搜索热词里“cursor taking longer than expected”也是个高频问题。我遇到这种情况，绝大多数不是因为 Cursor 本身变慢，而是因为一次要扫描的画板太多，MCP 返回的数据量把上下文撑爆了。

解决办法是缩小扫描范围。比如不要让它读整个设计文件夹，而是只读“登录页”这一个画板；不要提取所有图层属性，只提取你需要的那几个组件的标注。我一般会在提示词里明确写“只读取 LoginV2 画板中主按钮和输入框图层，其余忽略”，这样响应速度会快很多。

如果提示仍然超时，可以把 MCP 返回的超时时间调大一点，但这不是根本方案。根本方案还是让每次读取的数据更聚焦。AI 干活不怕复杂，怕的是没边界地吃下一大堆无关信息。

5.3 配置了但没生效，先看项目级和全局级配置

我见过不少同事配置完 MCP，发现对话里一点反应都没有。排查下来常是配置放错了层级。如果当前项目里已经有一个全局级配置，又添加了项目级配置，Cursor 默认会加载全局还是项目级取决于版本和配置合并逻辑，一旦冲突，MCP 列表会显示 Abnormal。

这时候把项目级和全局级都打开看一眼，把冲突项删掉即可。还有一个隐蔽点：Cursor 对大小写敏感，服务名称里写了Lanhu，后面调用时写了lanhu，匹配不上不报错但也不生效。建议统一用小写字母和连字符。

5.4 多人共用账号触发 too many computers 提示

团队协作时经常有人图省事用同一个 Cursor 账号，然后一段时间后弹出一个“太多设备同时使用”的提示。这个提示本身是账号安全机制的一部分，但落到协作场景里，其实是个很好的提醒：不要用共享账号开发。

这个提示也倒逼团队把账号权责分开，开发用独立账号，设计还原检查的权限通过蓝湖令牌来控制。分离之后，MCP 环境变量里配的 token 是只读令牌，即使 AI 在对话里意外读取到，也做不了破坏性操作。

5.5 表格速查：几个高频问题怎么排

6. 折腾完之后的一些个人经验

6.1 顺手把 Cursor 的自动运行权限调整好

很多 Cursor 新手一上来就被“要不要 Allow”弹窗搞懵。默认状态下，Cursor 每次要执行命令或修改文件都会弹个提示，这是安全机制。但我个人建议不要把“Auto-run and allow”权限全放开，尤其在接了蓝湖 MCP 的场景下，AI 看完设计稿可能会自主修改代码，如果全自动执行，改动依据对不对就没机会审查了。

我自己的配置是允许 AI 自动运行读取类命令（比如查询文件、读取 MCP 数据），但写文件这类操作保留手动确认。这样既不打断 AI 的探索效率，又能保证每一处对代码的修改我都能过目。说实话，AI 改代码的能力再强，最终背锅的还是自己，宁可多花两秒盯屏幕。

6.2 蓝湖上的标注不是越多越好，要有意识筛选

蓝湖对单个图层的标注其实有很多维度：尺寸、位置、圆角、阴影、描边、自动布局属性。如果全量让 AI 读出来，上下文会被淹没，反而分不清重点。我在提示词里一般会统一写“需要尺寸、间距、颜色、圆角、字体信息，不需要图层坐标和阴影参数”，这样减少无关输出。

如果团队有特定的设计规范，比如规定按钮一律用 48px 高度、6px 圆角，那这些规则最好放在项目规范文件里，再配合 MCP 读取的实时数据，AI 的判断才会更贴近你们自己的标准。只靠 MCP 给原始标注，它只能做基础比对；加上规范，它才能做有取舍的建议。

6.3 下一步我想把蓝湖 MCP 接进 CI 流程

把 Cursor 接到蓝湖只是一个起点。我现在在尝试让这个比对能力脱离编辑器，变成 CI 里的一个检查项。每次前端代码提交后，CI 自动调用蓝湖 MCP 去读取相关设计稿，然后在构建日志里输出一份还原度报告。这样的话，设计还原不再是开发或设计师手动触发，而是每次代码变更后的自动反馈。

这对团队最大的影响是“设计验收”从节点式变成了持续式。以前是版本交付时集中检查，现在每次提交都能知道改动是否偏离了设计稿。如果真能跑通，团队里关于“还原了吗”的对话方式就会从“在吗，帮忙看下还原了没”变成“这次提交的差异报告里显示全部一致，已自动通过”。

最后再说一个我自己踩过的坑：刚接好的那几天，我特别迷信 AI 给的差异清单，结果让它自动把整个登录页都按设计稿重写了一遍，本意是好的，但改动面太大，影响了几个已经完成的交互。后来我养成了习惯，只在局部组件上跑自动同步，全局性重构还是人来判断。技术是放大器，接上蓝湖只是把设计信息放大到开发眼前，真正的判断力，还得留在我们自己手里。