事情得从上周三说起。我们组的设计师小鹿又在群里发了一个微笑表情，然后私聊我：“页面那个按钮的间距，和蓝湖里差了一倍，还原了吗？”其实我没法反驳，因为我确实还没核对。后来我花了一个下午，把 Cursor 接到了蓝湖上，用 MCP 让 AI 直接读设计稿里的结构化标注，再让它对比我的代码，自动输出还原度差异报告。从那以后，小鹿的问题从“还原了吗”变成了“你那个还原报告挺准的，帮我再跑一下这个页面”。
这篇文章不聊大道理，就讲我怎么把 Cursor 和蓝湖打通，MCP 服务怎么部署，Prompt 怎么写，以及我在真实项目里踩过的坑。如果你也是前端、全栈，或者团队里负责“被设计师追着问还原度”的人，这篇应该能直接拿去用。
1. 先想清楚：Cursor 和蓝湖之间到底隔了什么
1.1 为什么“照着蓝湖写代码”这件事这么容易翻车
先说传统工作流。设计师把稿子传到蓝湖，开发打开蓝湖，看一眼标注，照着切图、间距、字号写代码。听起来很标准，但真正执行起来，到处都是信息断层。第一层是“看漏”：一个页面四五十个图层，按钮的 hover 态、空数据的兜底态、不同断言的间距，不可能每一条标注都逐个核对。第二层是“记错”：开发看的时候记住了 24px，写的时候手一抖写成 32px，肉眼检查根本发现不了。第三层是“来回确认”：设计师看到截图和稿子有出入，第一反应是来问“还原了吗”，而开发只能再去翻蓝湖、翻代码，一来一回至少二十分钟。
我以前尝试过一个偷懒的办法：把蓝湖截图发给 Cursor，让它照着图片生成代码。结果效果很飘。原因很简单，图片是一张位图，模型能猜出“大概是什么颜色”，但没法精确读取标注数据，也拿不到切图和图层关系。它是在“看图说话”，不是在“按图施工”。设计师要的是毫米级还原，AI 靠肉眼猜是做不到的。
1.2 MCP 解决了“AI 看不见设计数据”的问题
后来我接触到 MCP，全称 Model Context Protocol。你可以把它理解成 AI 界的 USB-C 接口：只要服务方实现了这个协议，Cursor 这类 AI 工具就能像插上外设一样，直接调用蓝湖的“只读工具”，拿到业务数据。这不是把设计稿截图给 AI 看，而是直接把画板、图层、间距、颜色、字体、切图这一整套结构化数据喂给模型。AI 看到的不是一张图片，而是一份精确到像素的“食材配方”。
对比下来，MCP 的收益非常明显。一是准确度，设计稿里的数值不是靠模型猜，而是从蓝湖接口原样取回来，颜色误差、间距误差可以直接算出来。二是自动化，Cursor 的 Agent 模式会在执行任务时自己决定“什么时候调用蓝湖工具、调用哪个工具、拿回来的数据放哪”，不需要我手动复制粘贴。三是可复用，这套连接不只在 Cursor 里能用，同一份 MCP 配置也可以被其他支持 MCP 的 AI 编程工具读取，之后扩展很顺。
我现在的工作方式变成了：改完代码之后，让 Cursor 同时读本地代码和蓝湖画板，自动生成一份还原度核对清单，再发给设计师确认。设计师不再追着问“还原了吗”，而是直接看报告说“OK”或“还有两个点”。这就是整个过程的核心思路。
2. 部署蓝湖 MCP 服务：十分钟跑通连接
2.1 准备工作：申请蓝湖开放平台凭证
要连 MCP，第一步是拿到一个有效的身份凭证。以蓝湖为例，需要先让团队管理员在蓝湖开放平台创建一个应用，授权范围选择“文件读取”“画板读取”这类只读权限，然后生成一串 API Token。这个 Token 就是 Cursor 访问蓝湖数据的“钥匙”，一定要放好，别提交到 Git 仓库，否则等于把你的设计数据公开了。
我在实际操作中的建议是，尽量按最小权限来申请。还原度检查这个场景只需要读设计稿，不需要任何写入权限，所以别勾“修改文件”“删除文件”之类的接口。权限越小，将来出问题的面越小。蓝湖平台里团队变更、成员离职的时候，Token 记得及时作废重发，这不仅仅是安全问题，也关系到 MCP 服务会不会突然失效。
2.2 在 Cursor 里配置 MCP 服务器的两种方式
拿到 Token 之后，在 Cursor 的 Settings → MCP 配置入口，或者项目根目录下的.cursor/mcp.json里添加服务器。现在常见的配置有两种，你可以按自己的环境选。
第一种是远程 HTTP 方式，适合团队统一维护。Cursor 里配置大概是这样的（示例地址，实际入口以蓝湖开放平台控制台为准）：
{ "mcpServers": { "lanhu": { "url": "https://mcp.lanhuapp.com/mcp", "headers": { "Authorization": "Bearer 你的_TOKEN" } } } }如果你的蓝湖开放平台给的是一个自定义网关地址，把url替掉就行。第二种是本地进程方式，适合个人电脑上调试，Cursor 会启动一个本地命令来连接蓝湖：
{ "mcpServers": { "lanhu": { "command": "npx", "args": ["-y", "蓝湖官方MCP包名"], "env": { "LANHU_API_TOKEN": "你的_TOKEN" } } } }其中“蓝湖官方MCP包名”以蓝湖开放平台文档里实际给出的为准，有些版本也可能用 Docker 启动。配置好后回到 Cursor 的 MCP 面板，点一下刷新，服务器状态变成绿色 Connected 就说明连上了。如果一直是红色 Disconnected，优先检查 Token 是否有效、地址前缀是不是https://、网络是否能访问外部的蓝湖服务。
2.3 用一句对话验证 MCP 是否真的通了
配置连上之后，先别急着生成代码，用一句话验证一下工具能不能被 AI 调到。比如在 Agent 对话里输入：
先验证蓝湖 MCP 连接：调用蓝湖的 list_projects 工具，返回当前账号可见的前三个项目，并标注每个项目的名称和 ID。正常的话，Cursor 会显示“正在调用工具”，然后给你返回一个项目列表。我看到这个列表的时候心里基本就有底了。如果返回空列表，多半是 Token 的权限范围没有覆盖这个团队，或者需要补传 teamId、spaceId 这类参数，这个问题后面会单独讲。
3. 让 Cursor 真正“看懂”设计稿并输出还原度报告
3.1 先立标准：把“还原度”定义成可检查的指标
很多人上来就告诉 Cursor “检查一下还原度”，结果模型不知道该按什么标准查。AI 需要的是一个可以量化的规则。我在实际项目中把还原度拆成了几项：
- 布局：外边距、内边距误差不超过 2px；组件之间的间距以蓝湖标注值为准。
- 颜色：设计稿色值与代码色值保持一致，色差容差小于 1%。
- 字体：字号误差不超过 1px，行高、字重、字体家族与标注一致。
- 视觉样式：圆角、阴影、边框粗细、渐变角度与设计稿一致。
- 状态覆盖：hover、active、disabled、loading 等状态在代码中有对应实现。
这些规则我写进了项目的.cursor/rules/reduction.mdc文件里，让 Cursor 每次分析时自动加载，而不是每次对话重复粘贴。文件内容大概是这样的：
# 还原度检查规范 - 所有间距、尺寸、字体、颜色、圆角、阴影，以蓝湖 MCP 返回的设计数据为基准。 - 当设计值与代码值差异不超过 2px（颜色容差 1%）时，视为已还原。 - 报告中按“严重/中等/轻微”三级分类差异。 - 每个差异项必须同时给出设计值、代码值、所在文件与行号、修改建议。有了这个规则，AI 的输出质量会稳定很多。它不再是泛泛地说“看起来还行”，而是能指出“按钮右边距设计 24px，代码里是 16px，差异 8px，严重”。
3.2 从蓝湖拉画板生成组件：一次只处理一个区块
连接稳定之后，我做的最多的操作是“让 Cursor 根据蓝湖画板生成组件”。这里有个很关键的实操经验：一次只处理一个区块，不要一次塞一整页。因为一个复杂页面可能包含上百个图层，全部塞进上下文很容易超时，也容易让 AI 抓不住重点。
我的做法是，先在对话里让 Cursor 列出某个项目的画板，拿到目标画板的 ID，然后给它一个明确指令：
读取蓝湖项目“官网改版”中画板 ID 为“123456”的图层数据。 请用 React + Tailwind 生成 Hero Section 的组件代码。 要求： 1. 外边距、内边距严格使用蓝湖标注值； 2. 颜色和字体使用项目已有的设计 token； 3. 每个关键节点用注释标注对应的设计参数。这样生成的代码，虽然不能保证 100% 不用改，但至少骨架、间距、配色都是直接从设计稿数据里推导出来的，比照着截图“盲写”要靠谱得多。遇到设计稿里是动态数据的区域，我会再补一句“把文案部分替换为项目里的真实接口字段”，效果更好。
3.3 自动对比代码和设计稿，输出还原度报表
光会生成代码还不够，更值钱的是“自动检查还原度”。我常用的一个 Prompt 长这样：
请对当前项目做一次还原度核对。 读取本地代码中相关组件，再通过蓝湖 MCP 获取画板“xxx”的设计数据， 逐项对比布局、颜色、字体、圆角、阴影和状态覆盖。 输出以下格式的报告： | 模块 | 设计值 | 代码值 | 偏差 | 严重程度 | 修改建议 | 最后给出整体还原度评分（满分 100），并列出最需要优先修复的三个差异项。在执行这个任务时，Cursor 会同时做两件事：一边通过文件工具读我的组件代码，一边通过蓝湖 MCP 拿设计稿里的对应数值，然后自己建表对比。我通常会把生成的报告粘贴到蓝湖的评论里，设计师打开就能看到哪个点没对齐，直接回复确认。从此“还原了吗”这个追问，变成了“报告里第三个差异项你看了一下吗”，沟通效率高了一大截。
3.4 把还原度检查固定成团队可复用的命令
我发现每次手敲这一段 Prompt 还是有点累，于是把流程做成了可复用命令。在 Cursor 里，Skill/Command 本质上是放在项目.cursor/commands目录下的 Markdown 文件，文件名就是触发命令。我建了一个check-design.md，内容就是把上面那段 Prompt 填进去，以后只要在对话框输入/check-design，再把画板 ID 和组件路径填进去，Cursor 就会自动执行整段检查流程。
再进一步，还可以在项目里加一个脚本包装。比如在 Cursor 的 Agent 模式下调用命令行工具，直接跑 CI 脚本，让还原度检查这件事在提测前自动执行。那不是“设计师追着问”，而是“系统自动提醒”。不过这一步建议先手动跑两天，完全稳定了再进自动化，不然会因为配置问题制造出一堆误报。
4. 常见问题与排查技巧实录
4.1 账号设备限制和订阅时间：别被提示吓到
很多人第一次遇到 Cursor 弹 “too many computers used within the last 24 hours for the same cursor account” 就慌了。其实这是触发设备频率限制的一种提示，意思是这个账号在 24 小时内激活过的电脑数量偏多。Cursor 是按活跃设备来计量的，如果你一天之内在三四台电脑上登录、重装系统、换虚拟机，就很容易中招。
我的处理办法是：先登录 Cursor 官网账户管理页，把已经不用的设备删掉，然后等 24 小时自动解除限制。以后尽量固定开发主机，同一时间不要在两台以上设备上频繁登录；如果是团队协作，就用 Cursor 的 Organization 账号来统一管理，避免个人账号被挤掉线。另外，订阅生效时间也有人说“复购不是从当前日期生效”，这个是正常的，连续包月是按自然周期叠加，不是今天买就从今天重新计 30 天，提前知道就不会踩坑。
4.2 Cursor 中文设置与常用配置：设计师也能顺手用
把这个流程介绍给团队里不熟 Cursor 的同事时，问得最多的就是“怎么设置中文”。Cursor 的界面语言跟随系统，如果想强制切中文，在 Settings → General → Appearance 里检查有没有语言选项；没有中文选项的话，最简单的办法是在项目规则里加一句“请始终使用中文回复，代码注释和总结都用中文”，这样至少沟通成本大幅降低。
另外一个高频问题是“怎么安装 Skill”。很多人以为 Skill 要装插件，其实不用。在 Cursor 项目目录下新建.cursor/commands文件夹，里面放一个.md文件，文件名就是命令名，内容就是你想要 AI 执行的指令模板。之前说的/check-design就是这么做的。这个方法不需要任何额外插件，记事本就能建，非常方便。
4.3 MCP 经常连不上、超时或返回空数据
我踩过最狠的坑是 MCP 配好了但 Cursor 一直显示 Disconnected。排查思路按顺序来：先看 Token 是不是过期了；再看.cursor/mcp.json路径对不对、JSON 有没有写错；然后用浏览器直接访问 MCP 地址看是否能返回响应；都不行再看 Cursor 输出日志里的具体报错。远程 HTTP 方式最容易出的问题是地址末尾漏了/mcp，或者没有把Authorization放进 headers，这两个缩进不多，但错一处就全凉。
数据拉到一半超时也很常见。因为蓝湖画板如果特别大，返回的 JSON 可能超过模型上下文窗口，Agent 会卡住不继续。我的处理方式是把检查范围缩小：一次只核对一个模块的画板，或者先用 MCP 把画板数据导出成 JSON 存到本地，再让 Cursor 分段读。不要试图让 AI 一口气对比整个首页，模型也是人，一次性看太多也会眼晕。
4.4 模型不主动调 MCP：提示词里要“钉死”工具
有时候 MCP 明明是好的，但 Cursor 就是不调用蓝湖工具，直接脑补设计值。这种情况多半是因为你的任务描述不够明确。AI 的决策机制是“能少干活就少干活”，如果它觉得不调工具也能回答，就会偷懒。解决办法是在提示词里明确写出“必须调用蓝湖 MCP 工具的 xxx 接口来获取数据”，并且把工具返回结果作为唯一的数据来源。
另外，我还遇到过 Agent 模式没开启，普通 Chat 模式本来就不会自动调用工具。确认一下当前对话框是不是 Agent 模式，再看工具列表里蓝湖工具是否设为 Always Allow。这些细节都检查完，基本就不会再出现“AI 一本正经瞎编设计参数”的问题。如果你在提示词里放了项目的 Token 或密钥，一定要在发布前清掉，最近很多“提示词泄露”的翻车案例，本质都是把密钥写进了共享规则或公开代码里。
5. 一些落地后的真实感受和扩展思路
5.1 我的工作流变化：设计师从“提问者”变成“验收者”
这套流程跑了大概三周，最直观的变化是沟通成本下来了。以前每天被问“还原了吗”，现在设计师会在蓝湖评论里回复“报告收到，第 2 项改一下，其余 OK”。我不用再反复解释“我还没看”“那个是间距误差”，因为报告就是证据。代码质量和交付效率也随之提升，因为每次提交前我都会顺手跑一次还原度检查，把肉眼发现不了的问题提前挡掉。
当然也不是完美无缺。AI 偶尔会把动态内容判成设计还原问题，比如接口返回的文案长度和设计稿不一致，其实不是样式问题。所以我的习惯是：报告出来人还是要过一眼，把它当成辅助工具而不是最终裁判。它最大的价值是把我从“逐像素核对”里解放出来，让我把精力放在真正需要判断的地方。
5.2 这套 MCP 思路还能做什么：切图、知识库与自动提测
打通了 Cursor 和蓝湖之后，顺手还能做很多事情。比如让 Cursor 通过 MCP 拉取蓝湖切图资源，自动压缩后放进项目 assets 目录，减少手工导图的时间；再比如把团队的设计规范文本做成知识库，用同样的 MCP 思路连接到 Cursor，让 AI 生成代码时同时遵守设计 token 和业务规范。如果团队有 Dify 之类的知识库系统，也可以把它接入 Cursor，这样 Agent 在面对业务问题时能引用更准确的上下文。
再往前走一步，可以把还原度检查脚本放进 CI，每次提测前自动生成一份还原度评分，加分项达标才允许合并。这一套加起来，设计师和开发之间那种“你追我赶”的不信任感会少很多。最后分享一个小技巧：别一上来就对全页面跑还原度检查，先挑一个小画板跑通全流程，确认 MCP、Prompt、报告格式都稳定了，再铺到所有页面，你会少踩很多坑。
