★ FEATURED ARTICLE 设计稿还原这件事本质上是一场开发与设计之间的“信息损耗战”。设计师在蓝湖上把标注、切图、间距、颜色全部摆得清清楚楚开发这边却还在对着设计稿放大镜式地量像素写完代码后再被问一句“还原了吗”然后开启新一轮的截图、对比、微调。我前段时间把 Cursor 接到了蓝湖上用两三天时间把这条链路彻底改了——现在设计资源直接被 AI 读取代码生成时就能带上设计稿里的真实参数设计师的确不再追着我问还原度了因为 AI 生成的初稿本身就贴着设计稿走。这篇文章把整个接入过程、原理、踩坑点完整写出来给正在被同样问题折磨的前端、全栈和独立开发者参考。1. 这事的本质不是“切图工具”升级而是把设计数据变成 AI 的上下文先别急着上手操作得想明白一件事过去我们用蓝湖本质上是把它当“图床 标注面板”来用——人去看、去量、去手抄参数。而接上 Cursor 之后蓝湖的角色从“给人看的图纸”变成了“给 AI 读的数据源”。1.1 “还原了吗”背后的沟通成本到底有多大我统计过自己和设计师合作的典型周期设计稿定稿后前端拿到的是一个包含多张切图、几十条标注、若干交互说明的蓝湖页面。开发如果认真还原至少要在这几个环节消耗时间逐个核对设计稿里的颜色值、字号、行高、圆角、阴影这些数据分散在不同图层里手动提取非常费神反复切换蓝湖页面和编辑器靠肉眼对比间距和尺寸稍不注意就是几像素的偏差设计师提出细节调整意见后开发在代码里找到对应位置修改再截图反馈确认。这些环节占用的时间往往比真正写组件逻辑还要多。接蓝湖 MCP 之前我一直认为 AI 编程工具做得再强也始终跟我一样“看不到”设计稿只能靠我喂给它截图和描述。但蓝湖 MCP 这种形式改变了这一点——它相当于给 AI 开了一条数据通道让 AI 能直接查询设计稿里的结构化参数。1.2 MCP 到底是什么为什么它适合干这件事MCPModel Context Protocol的理解方式很简单它是一套“AI 工具调用协议”把外部系统的能力封装成一个个可以被 AI 调用的函数。你不需要把整个蓝湖项目塞进 Cursor 的上下文里而是让 Cursor 在写代码时按需去蓝湖查询某个图层、某个样式、某张切图。这个设计很关键。设计稿文件动辄几十上百兆直接作为上下文塞给大模型不现实而 MCP 的查询式调用恰好解决了这个问题。AI 需要什么参数就调什么接口取回的数据量小且精准token 消耗也可控。这就是我选择走 MCP 而不是“把设计稿截图拖给 Cursor 让它看图写代码”的原因——后者看似简单但截图里提取参数这件事本身就有误差而且大模型对图片细节的读取远不如直接读结构化标注来得可靠。2. 接入前准备把环境理清楚后面能少踩一半坑这部分很重要。Cursor 接蓝湖不是“下载一个插件点两下”就完事它需要你理解权限模型、配置格式、服务启动方式否则会在各种暗坑里浪费大量时间。2.1 你需要准备的材料和账号体系先说最低限度的准备清单项目说明Cursor 版本建议 1.0 以上旧版本对 MCP 的支持不够完善部分配置入口对不上蓝湖账号需要在蓝湖团队里且对该设计项目有查看权限否则数据拉取会失败蓝湖访问口令蓝湖开放平台中创建的 API Token权限范围至少要覆盖“项目读取”网络环境蓝湖 MCP 服务需要能正常访问蓝湖服务器内网环境需确认防火墙策略Node.js因为蓝湖 MCP 服务端通常通过 npx 方式启动Node 环境版本建议 16 以上我在第一次接入时就吃了环境版本的亏当时 Cursor 版本比较老MCP 配置面板入口藏得很深网上教程提到的新版 UI 完全没有鼓捣了半天才发现是版本问题。所以第一个建议就是先把 Cursor 更新到最新稳定版再研究配置别让版本问题干扰排查。2.2 获取蓝湖 Token 的完整步骤蓝湖的访问口令在开放平台里创建。按照我实际操作的路径大致是这样登录蓝湖官网进入“开放平台”或“个人设置”下的“API 令牌”相关页面创建一个新 Token创建时注意看权限范围——如果你只是要解决“读取设计稿参数”那只需要勾选设计稿/项目的只读权限不需要授权写操作创建完成后Token 只会完整显示一次务必先复制保存到本地临时文件里后面配置 MCP 时要用回到蓝湖团队设置里确认你被拉进了目标项目所在团队且角色至少是“成员”。Token 的权限范围这事我建议认真对待。MCP 服务本质上是拿着你的 Token 去访问蓝湖如果 Token 权限过大一旦泄露风险也更大。用最小够用原则去授权能降低很多安全隐患。2.3 确认你的 Cursor 版本支持 MCP并找到配置入口这里确实要提醒一下Cursor 的 MCP 配置入口在不同版本里长得不一样。当前版本中通常通过设置Settings面板里的 MCP 或“集成”相关选项进入有的版本也支持在项目根目录维护一个配置文件。要点是先确认你能打开 MCP 服务器列表的空页面再往下操作。如果找不到入口优先检查版本号而不是继续翻菜单这是我和几个朋友交流后的一致结论。3. 实操环节把蓝湖 MCP 服务接进 Cursor 的完整过程环境准备好之后下面就是真正的接入过程了。我把我的操作记录整理成一份尽量能照着走的流程包含配置代码和验证方式。3.1 添加蓝湖 MCP 服务器配置代码怎么写在 Cursor 的 MCP 配置界面中选择“添加新服务器”填入名称和命令。如果蓝湖官方提供的 MCP 是 npm 包形式配置格式一般长这样{ mcpServers: { lanhu-mcp: { command: npx, args: [-y, lanhuapp/lanhu-mcp], env: { LANHU_ACCESS_TOKEN: 你创建的蓝湖 Token } } } }如果你使用的蓝湖 MCP 服务是通过远程 URL 暴露的那配置格式会更简洁一些类似这样{ mcpServers: { lanhu-mcp: { url: https://mcp.lanhuapp.com/mcp, env: { LANHU_ACCESS_TOKEN: 你创建的蓝湖 Token } } } }需要特别说明的是具体格式取决于当前蓝湖 MCP 服务商提供的接入协议。有的项目还要额外指定headers字段来传递鉴权信息。我在配置时参考的是蓝湖官方文档里当前推荐的格式你在操作时以蓝湖开放平台最新说明为准。3.2 启动服务并验证连通性配置完后回到 MCP 服务器列表手动点击启动或刷新。启动成功的标志是服务状态变成“已连接”有些版本还会列出可用的工具列表。你可以通过 Cursor 的对话窗口直接验证输入类似这样的话“调用蓝湖 MCP 工具获取当前项目列表”如果配置正常AI 会调用蓝湖工具并返回项目数据如果报错或返回空优先排查 Token 是否正确、服务进程是否存活、网络是否能访问蓝湖接口。这里有一个很实用的排查思路在 MCP 服务启动失败的场景下直接去终端手动跑一次npx -y lanhuapp/lanhu-mcp把终端里输出的日志贴出来看。很多时候不是 Cursor 的问题而是 npm 包下载失败、Node 版本过低、Token 携带错误手动跑能看到真实报错比在 Cursor 界面里瞎猜要有效率得多。3.3 让 AI 自动调用还是手动指定两种用法都值得掌握接入完成后Cursor 里其实有两种用法第一种是让 AI 自动判断。你在编写代码时提示词里提到“参考蓝湖上这个页面的样式”如果 MCP 工具描述足够清晰AI 会自主调用蓝湖工具去查数据。这种方式的优点是省心缺点是你对 AI 的工具调用时机控制力弱有时它查了多余的数据浪费 token。第二种是手动指定调用。你可以在提示词里明确要求“先调用蓝湖 MCP 获取 XXX 页面的颜色、间距、圆角参数再开始写代码”。这种方式更适合对还原度有严格要求的场景我实际工作中大量使用这种显式指令。尤其是当你负责的页面特别长、参数特别多时显式指令能让 AI 聚焦在必须的数据上生成代码的质量也会明显更稳定。3.4 打通“设计稿到提示词”的桥梁建议建一个项目约定文件让 AI 能稳定地读取蓝湖设计数据只靠对话时的临时提示词还不够。我建议在项目根目录建立一个类似AGENTS.md或design-token-guide.md的文件把团队约定写进去什么时候调用蓝湖工具、优先获取哪些参数、常见组件对应的设计稿位置是什么。这样 Cursor 在每次会话开始时都能读到这些约定AI 会更倾向主动使用蓝湖数据而不是凭训练数据里的“网页设计经验”去瞎猜样式。举个例子我在约定文件里写了类似这样的内容所有颜色值、字体大小、间距必须从蓝湖 MCP 返回的数据中提取禁止凭视觉猜测如果蓝湖工具调用失败先向用户报告错误不要继续写代码组件级的样式参数优先取“设计稿选中状态”下的标注值注意区分 hover 和默认状态。这个文件本质上是在塑造 AI 的工作习惯。我用了之后最明显的感受是AI 生成的代码在数值粒度上靠近设计稿的程度高了很多不再出现“差 2 像素看着差不多”之类的模糊实现。4. 让还原度真正变高的细节数据之外还有这些实操技巧把 Cursor 接到蓝湖只是第一步。真正让我觉得“这事值得干”的是在接入后不断打磨的几个使用细节。这一节分享几个提升实际还原效果的技巧和思路。4.1 语义化命名AI 能否高效查设计稿的关键蓝湖 MCP 是按图层、分组来组织数据的。如果设计稿里的图层名称是“矩形 17”“组 5”这类无意义名字AI 几乎无法从语义上判断哪一层是标题、哪一层是按钮。但如果设计稿规范命名比如“首页主标题”“登录按钮/默认态”“卡片阴影”AI 就能凭语义快速定位目标图层查询数据就会很准确。这一点我建议直接反馈给设计师在蓝湖里规范图层命名本身就是一种“开发协作契约”。设计稿里每个关键图层命名清楚了AI 拿到的数据质量就高而数据质量直接决定代码还原度。不要再说什么“AI 看不懂设计稿”了很多时候是设计稿自己就没给 AI 提供可理解的语义结构。4.2 切图和图片素材善用 MCP 的图片获取能力样式参数能通过 MCP 读取切图素材同样能。有些蓝湖 MCP 工具支持获取图层的图片导出地址AI 可以直接把返回的图片地址写入代码或者引导用户下载到本地。这样避免了“设计师传切图 → 开发手动保存 → 放错目录”这种沟通断层。使用提示词参考“调用蓝湖 MCP 获取这个项目的所有切图资源输出每个资源的名称和下载地址清单。”拿到清单后可以让 AI 批量下载资源到项目的 assets 目录并生成对应的import语句。我试过之后觉得这一步不仅是省时间更重要的是切图资源的准入标准化不会再出现“开发用了一张过期切图”这种事。4.3 注意 token 消耗不要频繁全量读取MCP 方便是方便但有一个隐性成本每次读取设计稿数据都会消耗 token。如果 AI 动不动就“获取整个项目的所有样式”一次调用可能让你一两千 token 直接蒸发。我建议在提示词里明确限定查询范围用类似“只需要布局信息不需要颜色值”这样的限定语来控制返回量。另外如果发现某个页面反复查询可以考虑把查询结果让 AI 整理成一份本地快照比如写成.json文件后续写代码时直接让 AI 参照这份快照既省 token 又能避免频繁调用服务导致响应变慢。这个办法在改版频繁的场景下尤其好用——快照固定了基线再改只更新差异部分。4.4 配合 Cursor 的 Agent 模式实现自动生成蓝湖 MCP 和 Cursor 的 Agent 模式结合是我觉得效率提升最高的一种用法。你可以在 Agent 模式下发出一个完整的任务指令比如“读取蓝湖项目 XXX 的首页设计稿按照返回的标注数据在项目中创建src/pages/Home.jsx完整实现布局和样式所有参数以 MCP 返回为准。”Cursor 会规划步骤调用蓝湖工具拿数据然后逐步创建文件。这个过程里它能做到“先掌握数据再动手”AI 的上下文里始终带着真实设计参数这比传统“贴截图 口头描述”的写代码方式强太多。这里要特别提一句权限设置Agent 模式下 Cursor 可能会自动执行各种操作建议你先在设置里确认自动执行Auto Run / Allow的边界避免出现 AI 在未确认的情况下连续执行写文件或安装依赖的情况。我在前期使用中遇到过 AI 自作主张跑去改了多个文件后来养成了写明“只创建新文件不修改现有文件”这种限制条件的习惯。5. 接入过程中我踩过的坑常见问题与排查思路实录这部分是我认为最有价值的部分。整个接入过程中前前后后踩了快十几个坑有几个特别典型单独列出来供你排查参考。5.1 MCP 服务一直启动失败状态显示红点排查思路从这三个方向开始先看 Token 是否正确且未过期再确认网络能访问蓝湖接口最后看 Node 环境和 npm 包是否能正常安装。实际操作中我遇到最多的情况是 npm 源慢导致包安装超时或者在公司内网环境下访问蓝湖 API 被防火墙拦截。建议动手顺序终端手动运行一次启动命令看完整报错更换 npm 镜像源后再试如果安装超时检查防火墙/代理对蓝湖域名的访问限制确认 Token 没有被团队管理员撤销权限。5.2 AI 始终不主动调用蓝湖工具很多人的 MCP 服务已经连接成功了但对话时 AI 就是不调用工具。这种问题的根源通常是工具描述不够明确或者上下文里没有足够的触发信号。我把项目约定文件建立起来之后这个问题基本消失。另外也可以把工具名称在提示词里点得更明确一些比如“用蓝湖 MCP 的get_styles工具获取按钮样式”AI 很容易按指示执行。5.3 返回的数据太多上下文直接爆掉蓝湖 MCP 会把设计稿结构拆得非常细一次全量查询的返回结果可能包含几十上百个图层的参数。上下文一旦被塞满AI 后续生成代码的质量反而会下降甚至出现“开始胡言乱语”。我的处理办法是把大任务拆小一个组件一个组件地让 AI 去查、去写不要一次性生成整个页面。还有一个小技巧让 AI 在拿到数据后先整理成精简摘要例如只提炼关键颜色、字号、间距再基于摘要写代码。这一步能显著减少 token 消耗并让 AI 保持对关键参数的注意力。5.4 蓝湖 Token 泄露和权限管理接过 MCP 之后Token 就变成了重要的敏感信息。尤其当你使用带env字段的配置文件时如果项目仓库是公开的很容易把 Token 提交进 Git 历史里。我建议配置文件里不要写明文 Token用环境变量引用例如${LANHU_ACCESS_TOKEN}在 Cursor 所在机器的环境变量中持久化 Token定期去蓝湖开放平台轮换 Token尤其是在团队成员变动后。这里再补一个我自己遇到的存活提醒Cursor 账号如果短时间内被多个设备登录可能会触发一些安全校验提示像是“too many computers used within the last 24 hours”之类。如果你在团队里同时在不同设备上试配置容易撞上这种限制。遇到这种提示不用慌等时间过后再登录或者去账号管理里清理不常用的设备即可。我自己当时急得要命后来发现只是账号策略限制不是配置问题。5.5 Cursor 卡顿或响应变慢MCP 服务如果一直常驻有可能会让 Cursor 变得有点拖沓尤其是当多个 MCP 服务同时运行时。建议只在需要的时候启动蓝湖 MCP不用就停掉。另外过长的会话历史也会拖慢响应定期在 Cursor 里清理掉旧的对话记录或者开新会话能明显感受到响应速度的提升。还有一点是关于“Cursor 怎么设置中文”这类基础问题很多网友在问。界面汉化方面Cursor 本身的语言设置可以切换而“让 AI 用中文回复”则是在对话里直接提出要求或者在项目约定文件里写明“默认使用中文回复”。这和 MCP 接入是两个层面的问题别混在一起排查起来才不会跑偏。6. 这套方案的边界和我的使用建议Cursor 接蓝湖不是银弹尤其要看到它的适用边界。对于以视觉还原为重的页面营销页、专题页、后台看板这套组合拳的收益最大。但对于强交互、复杂状态流转的功能比如可视编辑器的拖拽逻辑、复杂表单的校验流转AI 能帮你铺好视觉层面的基础业务逻辑还是得靠人主导。我的体会是把 MCP 当作“让 AI 的第一个版本更接近最终稿”的杠杆而不是当作“完全不需要人看稿”的自动化流水线。另一个边界是团队协作。蓝湖 MCP 的设计面向的是有权限的项目成员你在团队中引入这套方案时需要让每个使用 Cursor 的同事都申请自己的 Token不要共用。共用 Token 不仅权限上不安全还容易触发访问频率限制到时候排查起来很痛苦。最后给一个我的实用习惯我现在每天开始写前端任务前先让 Cursor 通过蓝湖 MCP 拉取相关页面的设计数据并把关键参数贴到一个会话开头的固定位置然后在同一个会话里连续完成多个组件的实现。比起频繁开关会话、重复让 AI 去查数据这种“一次拉取多次使用”的模式在 token 消耗和响应速度上都更划算。这个小习惯也是我踩了很多次“上下文断裂”的坑之后总结出来的实测下来挺稳。
阅读完成 · 觉得有帮助？
