上周蓝湖上新了一版登录页设计稿我照例打开 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_TOKENxxxx然后在 MCP 配置里用环境变量引用。Cursor 读取这个文件时不会把它当成业务代码也更方便团队里每个人用自己的令牌调试。3. 部署蓝湖 MCP 服务以及配置到 Cursor3.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 配置只对当前项目生效。我建议用项目级配置。原因很直接不是所有项目都需要读蓝湖如果每个项目都挂一个蓝湖 MCPAI 在无关上下文里也会尝试扫描设计稿既浪费时间又容易串信息。项目级配置只让当前这个页面项目加载蓝湖能力逻辑更清晰。实际打开 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%。如果代码里写的是 14pxAI 会直接列出这个差异不用等设计师手动量出来。我还让模板固定输出“优先级”字段颜色差异、尺寸差异属于高优先级因为这些直接影响视觉而由字体渲染导致的 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 表格速查几个高频问题怎么排现象最可能原因优先处理方式MCP 状态 Abnormal令牌失效或网络不同确认令牌有效期检查 URL对话里查不到设计稿MCP 配置层级冲突清理项目级/全局级重复配置扫描太慢导致超时请求数据量过大限制画板范围指定组件AI 回复语言不对对话上下文被英文带偏在 Project Rules 加中文回复要求账号被限设备登录共用账号过多设备改用独立账号分开权限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 给的差异清单结果让它自动把整个登录页都按设计稿重写了一遍本意是好的但改动面太大影响了几个已经完成的交互。后来我养成了习惯只在局部组件上跑自动同步全局性重构还是人来判断。技术是放大器接上蓝湖只是把设计信息放大到开发眼前真正的判断力还得留在我们自己手里。