我现在最怕听到的一句话就是设计师发来消息“还原了吗”不是因为不想回答而是因为每次我都要先打开蓝湖再打开本地代码用肉眼一件事一件事地比对字号对不对、颜色差多少、间距偏没偏。这个动作特别消耗耐心尤其是当设计稿更新到第五版的时候。后来我想明白了一件事既然 Cursor 已经能读懂我的项目代码蓝湖又存着设计稿的所有标注数据为什么不让 Cursor 直接去读蓝湖呢于是我把 Cursor 接到了蓝湖上——通过一个轻量的 MCP Server 把蓝湖的设计数据喂给 Cursor让 AI 在写代码、改代码的时候能主动拉取设计稿标注直接给我输出差异清单。这篇文章就聊聊这整套思路和落地过程。适合被还原度问题反复折磨的前端适合一个人撑起一整个产品页面的独立开发者也适合想了解 MCP 到底能怎么用在真实项目里的朋友。我会把配置项目、写 MCP Server、接入 Cursor、以及我在生产环境里踩过的坑都讲一遍。1. 为什么非要把Cursor和蓝湖接起来1.1 还原度问题的本质是信息不同步设计师问“还原了吗”本质不是审美问题而是信息同步的失败。设计师基于的设计稿版本、标注数据和开发手里的代码状态可能早就分叉了。蓝湖上是最新标注代码里是旧版本甚至同一个页面开发用的还是隔壁的旧 Sketch 导出图。于是“还原”变成了一场猜谜。手动流程往往是这样的设计师上传新稿发消息“颜色改了”开发打开蓝湖放大图层看色值切回 IDE搜索 CSS改一行然后截个图再问“这样对吗”。一次修改来回几分钟一个页面下来一上午没了。如果能把“读标注”这个重复劳动交给 AI效率自然不一样。C 端产品尤其明显越复杂的页面标注的数量越多。一个中等复杂度的落地页图层数量可以轻松超过两百个单靠人去核对根本做不到客观。而 AI 最大的优势恰恰是不怕数据量大它可以把所有可量化的属性都列出来再和代码里的样式做对比。1.2 接通之后真正解决的问题把 Cursor 和蓝湖通过 MCP 连起来解决的不只是“省几分钟查标注的时间”而是三个更实际的问题实时性。MCP Server 按需拉取蓝湖接口拿到的是设计稿最新标注。设计师在蓝湖上更新任何颜色、尺寸下次 AI 调用接口时就是新数据不需要开发手动重新导图或同步文件。可量化。AI 返回的不是“挺像的”这种模糊结论而是“该行高 24px实现却是 28px按钮背景色 #1890FF写成了 #1990FF”的明细。有了数值还原度就不再是个人感觉而是可以交付、可以复盘的数据。减少打扰。以前开发改一版就问一次设计师现在开发先用 AI 自查一轮能处理的差异直接改掉只有真正的歧义才需要找设计师确认。设计师不用再追着进度问了开发也不会在群里被连环点名。这里我特别想把“减少打扰”拿出来多说一句。很多团队里“还原了吗”这句话之所以让人紧张是因为它意味着你还没自查别人就先发现了问题。而有了 AI 帮你先做一遍差异检查你在回复设计师之前就已经有了一份报告沟通的底气完全不一样。1.3 这套方案适合谁不适合谁它适合前端开发、全栈开发、小团队以及设计师大量使用蓝湖的团队。尤其是那种一个页面几个人维护、设计稿经常更新但没人能记住所有改动的项目收益最明显。独立开发者也值得做因为没人帮你检查AI 就是你唯一的审稿人。但它不适合完全没有设计规范、设计稿图层命名混乱、或需要逐帧对比复杂动画的场景。AI 现在的视觉检查能力更擅长处理“静态结构 样式数值”遇到复杂交互动效、响应式断点时还是要靠人工盯着。不要指望一个 MCP 工具解决所有视觉问题这不现实。2. 整体方案设计与技术选型2.1 MCP在中间当了一个适配器MCP 是模型上下文协议可以理解为给 AI 插上外部数据接口。Cursor 本身是模型客户端它有代码上下文但看不到蓝湖。我们需要一个 MCP Server把蓝湖设计稿标注翻译成 Cursor 能理解的 JSON 或文本。Cursor 通过 MCP 工具动态获取数据全程不需要把整个设计稿拖到对话里。我用一个类比来解释Cursor 是厨师蓝湖是仓库MCP Server 是仓库管理员。厨师不用自己扛米喊一句“给我拿米”管理员就把米和标注重量都送过来。接入 MCP 后Cursor 在对话里调用相应工具获取信息模型不用记忆所有数据也就少了很多幻觉。这也是为什么我没有直接把蓝湖标注截图丢给 Cursor。图片虽然直观但模型提取数值的稳定性不如结构化 JSON。而且多图容易把上下文塞爆对话稍长就容易丢信息。MCP 的方式是按需取数需要哪部分就拿哪部分效率要高得多。2.2 蓝湖开放API能拿到什么蓝湖除了给设计师看图还开放了部分数据接口可以拿到项目列表、文件信息、页面图层、标注数据、切图信息等。关键是对接方式设计稿分享链接里通常有 fileKeyMCP Server 带着 access_token 请求对应接口返回 JSON包含图层的宽高、坐标、颜色、字体等。我在实际实现时只暴露了三个工具get_lanhu_projects拿项目列表、get_lanhu_design_file拿设计稿基础信息、get_layer_annotations拿选中图层的标注详情。工具不在多够用就行。有一点要提醒蓝湖的图层数据粒度很细如果直接把整个文件的全部图层 JSON 都返回给模型一个复杂页面可能就有几十万个字段上下文瞬间被塞满。所以我的原则是“先粗后细”——先让 AI 拿到文件概览再从用户指定的某个页面或某个区域去拉详细标注。2.3 为什么我没有选Figma API很多团队也会用 Figma我简单做过对比最终还是选了蓝湖。不是因为 Figma 不行而是和当前团队的使用习惯、网络部署、协作流程不够顺手。维度蓝湖Figma访问接口国内访问稳定团队使用流畅服务在海外部分网络环境下调用体验不佳协作国内团队更习惯蓝湖的标注和分享设计师已经在用需要把设计稿迁移过去学习成本高权限蓝湖团队权限和开放平台应用权限清晰OAuth 配置略繁琐标注格式天然带 CSS 属性适合前端直接对照取数后还需要自己做属性归一化团队状态设计流程已经跑顺改动小需要打破现有协作习惯当然如果你团队全程用 Figma就不需要硬接蓝湖。本文的核心思路完全一样只要把 MCP Server 的数据源换成 Figma API 即可。协议是通用的真正要改的只是接口调用和字段映射。3. 核心实现把Cursor接到蓝湖的完整流程3.1 第一步准备蓝湖开放平台凭证首先在蓝湖开放平台注册一个应用创建后拿到client_id和client_secret。根据蓝湖文档需要申请对应接口权限换取 access_token。注意这个 token 相当于是你的身份凭证别写进代码仓库我建议直接塞进环境变量。同时要把设计稿里的文件命名弄规范。MCP Server 是按 fileKey 去找文件但如果页面里的图层命名像“图层1副本3”这种AI 拿到标注也很难定位。我们团队后来约定所有图层要有语义化命名例如login_submit_button这样 Cursor 返回的结果可读性高很多。这一步看起来和代码无关但实际决定了整个工具好不好用。命名规范的设计稿AI 能准确告诉你“登录按钮的高度是 44px”命名混乱的设计稿AI 只能给你一堆不知道对应哪个元素的坐标和数值反而增加人工理解成本。3.2 第二步写一个轻量MCP Server我用 Python 的 FastMCP 来写代码简洁不用自己处理协议细节。安装依赖pip install mcp[cli] requests然后新建一个lanhu_mcp_server.pyimport os import requests from fastmcp import FastMCP mcp FastMCP(lanhu-mcp) LANHU_API_BASE os.getenv(LANHU_API_BASE, https://open.lanhuapp.com/api/v1) LANHU_TOKEN os.getenv(LANHU_TOKEN, ) def _get_headers(): return {Authorization: fBearer {LANHU_TOKEN}} mcp.tool() def get_lanhu_projects(team_id: str) - list: 读取蓝湖团队下的项目列表返回项目 id 和名称。 url f{LANHU_API_BASE}/teams/{team_id}/projects resp requests.get(url, headers_get_headers(), timeout10) resp.raise_for_status() return resp.json()[data] mcp.tool() def get_lanhu_design_file(file_key: str) - dict: 读取指定设计稿文件的页面和标注概要file_key 来自蓝湖分享链接。 url f{LANHU_API_BASE}/files/{file_key} resp requests.get(url, headers_get_headers(), timeout10) resp.raise_for_status() return resp.json()[data] mcp.tool() def get_layer_annotations(file_key: str, layer_id: str) - dict: 读取指定图层的详细标注包括尺寸、坐标、颜色、字体等。 url f{LANHU_API_BASE}/files/{file_key}/layers/{layer_id}/annotations resp requests.get(url, headers_get_headers(), timeout10) resp.raise_for_status() return resp.json()[data] if __name__ __main__: mcp.run()这里的代码是简化版实际接口路径以蓝湖开放平台最新文档为准但核心逻辑是不变的用环境变量存 token用工具函数封装蓝湖接口再把返回的 JSON 交给 Cursor。我要特别强调一下函数名和描述。MCP 工具的描述是模型判断要不要调用它的关键。比如get_lanhu_design_file的 description 里如果写得含糊模型可能在你问“帮我看看这张图”的时候不去调用写清楚“读取设计稿文件信息返回页面和标注概要”模型就会在合适时机主动调用。3.3 第三步在Cursor中配置MCPCursor 支持在 Settings MCP 里添加 MCP Server也可以直接编辑配置文件。我习惯用 JSON 方式配置直观且方便放在项目里多人共享。在~/.cursor/mcp.json或项目下.cursor/mcp.json中写入{ mcpServers: { lanhu: { command: python, args: [/Users/yourname/dev/lanhu_mcp_server.py], env: { LANHU_API_BASE: https://open.lanhuapp.com/api/v1, LANHU_TOKEN: 在这里粘贴你的access_token } } } }注意三个细节command最好用 Python 的完整路径尤其是系统里装了多个 Python 版本时args指向脚本的绝对路径env中不要写死 token可以在本地维护一份环境变量文件让配置更安全。配置好之后重启 Cursor对话框旁边应该能看到 MCP 图标点开能看到lanhu服务。如果没看到检查是不是 JSON 格式有问题或者在 Cursor 里手动点一下刷新。3.4 第四步在对话里验证效果验证方式很简单在 Cursor 里输入一段带明确目标的话比如“读取蓝湖项目中login页面的设计稿检查我的src/Login.tsx的还原度。”Cursor 会调用get_lanhu_design_file获取页面和标注概要再调用get_layer_annotations获取具体图层细节然后对照你的代码给出差异清单。实际输出风格类似这样AI 返回背景色设计稿 #F5F7FA代码 #F8F9FB相差 3 个色阶按钮高度设计稿 44px代码 40px主按钮圆角设计稿 8px代码 6px登录标题字号设计稿 18px/600代码 20px/700其他项一致这个结果已经非常接近一份可交付的“还原度自查报告”了。我拿给设计师看她不需要再一个个指出来直接说“按这个清单修就行”。沟通从一个模糊的大问题变成了几个明确的待办项。4. 实操过程与还原度校验4.1 从设计稿到代码检查的完整工作流我在团队里跑顺这套流程后日常工作是这么进行的设计师上传最新稿到蓝湖完成所有标注并把分享链接贴到需求群。开发在 Cursor 中打开项目先让 AI 读取项目结构了解组件和页面大致分布。从蓝湖分享链接中复制 fileKey让 AI 调用 MCP 读取设计稿信息。AI 拿到标注后再让 AI 对照目标页面组件逐项检查。根据差异清单修改代码改的时候可以直接让 AI 给出修复建议。修改完让 AI 再做一次对比确认差异消失再截图给设计师确认。这里最容易被忽略的是第 2 步。AI 如果不知道项目结构它拿到蓝湖的 fileKey 也不知道该对应哪个页面文件。所以我通常会让 AI 先花 10 秒浏览一下目录再进入还原度检查。设计师那边也会有一个小习惯他们从 Sketch 或 Figma 里导出的文件直接拖进蓝湖网页端上传不需要额外处理。蓝湖对 Sketch 文件的支持很成熟导入后标注自动生成开发侧这边完全不用管源文件格式只需要关注分享链接里的 fileKey。4.2 还原度检查的维度与判断方法为了让 AI 的检查结果更有参考价值我整理了下面几个维度。每个维度都有数据来源和判断标准AI 照着这个框架去检查就不会漏项。维度数据来源AI 怎么判定人工复核方式尺寸标注中的 width/height对比实现样式中的 width/height打开浏览器元素面板或截图字号标注中的 fontSize/lineHeight检查 CSS 里的 font-size 和 line-height用蓝湖切图叠图对比颜色标注中的 fill/color对比样式中的 color/background截图取色间距标注中的 margin/padding 或 frame 间距对比布局中的 gap/margin/padding用浏览器测量工具拉线圆角边框标注中的 radius/border对比 border-radius 和 border视觉确认这个表里最有用的是“AI 怎么判定”这一列。因为 AI 没有浏览器渲染能力它只能从代码静态推断所以它擅长的是精确数值对比而不是视觉层面的细微观察。把这个框架喂给 Cursor它才会按照一个标准去检查而不是随机挑几个属性说“看起来没问题”。4.3 实测效果一次完整修复记录的收益我和同事实测改一个营销落地页以前从收到设计稿到基本还原大概需要一个下午其中大量时间花在反复看标注、核对数值、来回回复“改好了吗”。接入这套流程后同一个页面我们大约用了两小时其中 AI 负责信息同步我负责最终视觉决策。那次修改里最有价值的不是省下的两小时而是沟通方式变了。我在群里发的不再是“正在改”而是一张包含色值、间距、字号差异的表格设计师可以清楚看到哪些已经修复、哪些还在处理。节奏完全可控也没有人反复追问。不过我也得说清楚局限。AI 没有实时浏览器渲染能力无法判断动效曲线、悬停状态、过渡动画响应式的断点行为也只能靠代码推断。视觉上“看起来像不像”这种主观判断最终还是要由设计师做决定。AI 能做的是把那些客观、可量化的差异全部暴露出来。5. 常见问题与排查技巧实录5.1 MCP Server启动失败排查清单我把遇到的启动和连接问题整理成下面这张速查表按顺序排查基本都能解决。ModuleNotFoundError: No module named fastmcp说明当前 Python 环境没有安装依赖执行pip install mcp[cli] requests。如果系统有多个 Python确认 Cursor 配置里的command用的是同一个解释器。Cursor 界面不显示工具重启 Cursor或到 Settings MCP 里手动点刷新。如果还是没有检查 JSON 文件位置是不是放错了。Server 启动但调用超时先确认网络能否访问蓝湖开放平台域名也可以在 server 代码里设置timeout10超时就抛出明确错误。JSON 配置没生效检查mcpServers这个顶层字段拼写是否正确并确认 JSON 末尾没有多余逗号。如果你在本地命令行里能直接把 server 脚本跑起来但 Cursor 里不行问题大概率出在环境变量或 Python 路径上。可以先在命令行设置好相同的LANHU_TOKEN再启动脚本就能定位到是配置问题还是脚本问题。5.2 蓝湖token和权限相关坑Token 过期是我遇到最频繁的问题。蓝湖开放平台的 access_token 有有效期过期后 Cursor 调用工具会直接报 401。建议在 server 里加一个简单的缓存和过期判断token 失效时输出明确提示而不是让 AI 以为接口返回空数据。另一个常见坑是权限。如果应用只授权了部分项目其他项目的 fileKey 即使正确接口也会返回 403。解决方法是让蓝湖团队管理员把应用加入对应项目或者干脆申请团队级权限省得每次新增项目都要重新授权。接口限流也需要注意。蓝湖对单个应用的调用频率有限制如果 AI 在对话里反复拉取标注很容易触发 429。我在 server 里加了简单的内存缓存同一个 fileKey 在 60 秒内直接走缓存不重复请求。这样既保住了限流也加快了响应速度。5.3 顺便聊聊几个Cursor高频问题很多朋友在折腾 MCP 的时候会顺手问一句Cueur 怎么设置中文回复、怎么汉化。这里统一回复一下。新版 Cursor 没有完整汉化包但你可以直接在对话中说“请用中文回答”它会按中文回复。另外在 Settings General 里可以调整语言选项具体位置看版本不同会有一点区别。响应速度慢的话优先换模型比如把默认模型切成更快的轻量模型同时尽量精简对话上下文不要一开始就把整个项目塞进去。还有一点我特别想提醒不要在聊天里粘贴任何 token、密钥或私有 API KeyMCP 配置里的 env 字段已经足够传递敏感信息没必要让模型额外记住。如果你用的是 Codex 或 Claude Desktop也可以用同样的 MCP 配置协议是通用的。底层思路完全一样只是环境变量名和启动命令会有些差异。最重要的是理解“MCP Server 负责取数模型负责判断”这个分工剩下的事都是配置问题。6. 最后再分享一点我的经验踩过几次坑之后我最大的体会是MCP 接入不是难在写代码而是难在把“设计数据”和“代码认知”对齐。只要设计稿图层命名规范、token 权限清晰、MCP 工具的返回内容克制Cursor 就能变成一个很可靠的“还原度检查员”。再提醒一句如果你也打算接蓝湖优先级一定是“先让文件结构清晰再上工具”。否则 AI 读到的全是中文图层名照样帮不了你。先把设计稿整理清楚剩下的事情就水到渠成了。希望这套组件思路对你有用。