先交代一下背景。今年年初我们把设计协作平台从 Sketch 手工切图彻底切到了蓝湖设计师出稿、标注、切图全部在蓝湖上完成。稿子倒是集中了但紧接着就冒出一个新的麻烦每个迭代设计师都要在群里追着问还原了吗前端同学则要对着设计稿一遍遍核对尺寸、颜色、边距稍微有个组件复用就得重新翻标注效率低到让人怀疑人生。后来我想了个办法把 Cursor 直接接到了蓝湖上。现在前端在 Cursor 里写代码时AI 能自己去蓝湖拉设计稿的结构化信息间距、字号、色值、切图 URL 全部自动落到代码里还原度核对从设计师追着问、开发手动对变成了AI 拉数据、代码直接对齐。这篇文章不聊概念只讲实际操作包括为什么选 MCP 而不是让 AI 看截图、怎么在 Cursor 里配蓝湖数据源、跑通之后的工作流长什么样以及我踩过的几个坑。1. 为什么非要把 Cursor 接到蓝湖上1.1 还原度核对是前端和设计师之间的一道坎先说痛点。做过前端的人应该都经历过这种场景设计师在群里发一条消息首页这个按钮的高度和间距跟稿子对一下你打开蓝湖找到对应画板先看标注里的尺寸再看颜色代码然后再回代码里改。一次两次还好一个迭代几十个页面每个页面改个三五轮时间全耗在这上面了。更麻烦的是切图。以前用 Ps 批量导出后来蓝湖能直接下载切图但下载下来之后还得手动放目录、手动命名。如果哪个图标换了又得重新下一遍。这些重复劳动其实不创造价值但它是还原度达标的前提。还有个隐形的痛点信息差。设计师在设计稿里改了某个圆角、某个层级结构开发可能根本不知道因为蓝湖不会主动提醒你这个图层更新了。等设计师问起来才发现代码跟设计稿已经差了十万八千里。1.2 传统工作流里的隐形损耗把还原度核对这件事拆开看它其实包含三个环节读取设计稿信息、对照代码差异、修正不一致的地方。真正花时间的不是改代码而是读设计稿。读取设计稿信息这个环节最常见的方式是切到蓝湖网页端鼠标悬停图层看标注。一个稍微复杂点的组件比如商品卡片包含图片、标题、价格、标签、按钮光是把这些元素的间距、字号、色值抄下来就得花好几分钟。而且抄的过程容易出错色值复制错一位字母肉眼很难看出来。再往深了说蓝湖的标注信息本身是结构化的但人肉去读的时候它就变成了散装的信息。你读到的是一段文字而不是一个可以直接映射到代码变量的对象。这就导致信息在传递过程中不断损耗——先损耗在读取效率上再损耗在人为抄写上。1.3 我想要的其实是设计稿信息直连代码所以问题的本质不是设计师追着问而是信息链路太长。设计师出稿 → 蓝湖标注 → 前端读取 → 手写代码每个环节都是一次人工搬运。搬运次数越多损耗越大沟通成本越高。我在想如果 Cursor 这个 AI 编程工具能直接访问蓝湖的数据让 AI 把设计稿里的结构化信息直接翻译成代码那搬运这件事就可以交给模型去做。前端要做的是审核 AI 生成的结果而不是自己去翻标注、抄数据。这就是我把 Cursor 接到蓝湖上的核心思路把蓝湖变成 Cursor 的一个数据源AI 写代码前先去蓝湖查一下设计稿的参数写出来的代码天然就更接近设计稿。2. 方案选型为什么是 MCP而不是让 AI 看截图2.1 MCP 到底是个什么东西Cursor 接入蓝湖听起来很玄乎技术上其实用的是 MCPModel Context Protocol中文直译是模型上下文协议。Anthropic 提出来的一个开放标准目的是让 AI 模型能以统一的方式连接外部工具和数据源。你可以把它理解为 AI 应用里的USB-C 接口。以前 AI 要接一个设备得单独写一套适配逻辑现在大家都是统一接口接上就能用。Cursor 从很早的版本就开始支持连接 MCP Server用户可以通过配置一个本地服务或远程服务把外部数据喂给 AI。MCP 的工作方式大致是这样客户端Cursor连接一个 MCP Server这个 Server 里面注册了若干个工具。AI 在对话中判断需要用某个工具时会以标准化的格式去调用它拿到返回结果后再继续生成内容。对蓝湖来说它其实有开放平台提供了很多数据接口。问题在于 Cursor 不能直接调蓝湖的 HTTP 接口——模型并不知道该往哪个 URL 发什么参数。MCP 中间层刚好补上这个缺口它把蓝湖 API 包成了一个 AI 能调用的工具。2.2 让 AI 直接读设计图的坑也有人问过我为什么不让 Cursor 直接看图反正模型有视觉能力把设计稿截图丢给它不就行了这个思路乍一看没问题实际用起来全是坑。第一设计稿是高分辨率大图直接丢给模型Token 消耗非常夸张算下来比开会员还贵。第二视觉模型读图会有误差尤其是小字号、细边框、特殊圆角这类细节AI 一眼扫过去经常看走眼。第三设计稿上只有视觉信息没有结构信息层级关系、自动布局、组件复用这些靠肉眼是看不出来的。蓝湖标注之所以好用正是因为它把图层信息结构化了。哪个元素是图片哪个元素是文本色值是什么间距是多少它全给你拆得明明白白。这种结构化信息更适合用文本方式喂给模型模型读 JSON 比读图片准确得多。所以我的结论是截图方案只能用来看个大概真正要精确还原必须走结构化数据路线也就是 MCP。2.3 通过 MCP 能把蓝湖里的哪些信息喂给 Cursor我用 MCP 把蓝湖的设计稿数据接进来之后Cursor 能拿到的信息主要分为这几类。第一类是元素参数。包括设计稿里某个图层的位置坐标、宽高、圆角、透明度、边框粗细。AI 写 CSS 的时候可以直接拿这些数值用不靠猜。第二类是样式 Token。色值、字体大小、字重、行高蓝湖标注里都有。AI 拿到这些值可以自动生成统一的样式变量而不是散落在各个组件里的魔法数字。第三类是切图和资源链接。蓝湖生成的切图 URLAI 可以直接拿回去用在 img 标签或者 CSS 背景上。我不用手动下载也不用担心命名规范不统一。第四类是文本内容和图层结构。设计稿里写的文案、图层之间的嵌套关系AI 可以用这些信息搭出组件树减少我猜这个结构应该是这样的随机性。有了这四类信息还原度就从凭感觉变成了按数据。AI 写的代码不是它想象出来的而是基于设计稿参数推导出来的。3. 完整实操从安装到跑通全流程3.1 前置准备Cursor 环境与蓝湖开放平台令牌动手之前先确认基础环境。第一步安装 Cursor。这个不多说去官网下载对应平台的安装包安装后用邮箱或者账号登录即可。新手容易卡在注册环节其实现在 Cursor 是支持常规邮箱注册的也能用其他账号方式登录按引导填信息就能过。第二步注册登录蓝湖进入你要对接的团队和项目确认自己的账号有查看设计稿的权限。如果设计稿还在 Sketch 里没导入蓝湖先需要完成导入。Sketch 设计稿导入蓝湖这件事本身不复杂蓝湖提供了 Sketch 插件安装之后选中画板直接上传。这个动作很关键因为后面所有自动化都建立在设计稿已经上蓝湖这个前提下。第三步去蓝湖的开放平台申请一个 API 令牌。个人令牌类似一把钥匙MCP 服务拿它去请求蓝湖的数据接口。申请的时候注意权限范围只勾选你自己团队需要的那几个项目最小权限原则在自动化工具里同样适用。令牌千万别提交到公开仓库不然别人拿到你的令牌就能读你们团队所有设计稿。准备这三样东西就够了一个能登录的 Cursor一个已经有设计稿的蓝湖项目一个 API 令牌。3.2 在 Cursor 里配置 MCP 服务器Cursor 配置 MCP Server 的位置在设置里的 Features 或者 Servers 相关入口不同版本位置略有差别但核心逻辑一致需要把一段 JSON 配置填进去告诉 Cursor我这里有一个 MCP Server启动方式是什么样。我这边用的是本地运行一个 MCP 桥接服务的方案。这个服务是一个进程Cursor 启动时会自动拉起它然后通过标准输入输出流跟它通信。配置长这样{ mcpServers: { lanlan: { command: python, args: [/path/to/lanlan_bridge/server.py], env: { LANLAN_API_TOKEN: 你的令牌 } } } }其中lanlan是给这个数据源起的名字command和args告诉 Cursor 怎么启动桥接脚本env里放蓝湖令牌。Cursor 每次启动都会运行这个脚本所以路径一定要写对。我建议第一次配置完先回到 AI 对话框问它一句你现在能看到哪些工具正常情况下它会回答出类似我有get_frame_info、get_image_url这些工具可用的话。如果它说看不到工具八成是配置没生效按照第 4 节里的排查思路去处理。3.3 第一次让 Cursor 自己看蓝湖设计稿MCP 服务起起来之后最关键的一步来了让 AI 实际调用蓝湖数据写代码。我拿一个商品卡片组件举例。正常流程是这样的你先在蓝湖里找到商品卡片这个画板的分享链接或者至少知道它的名称然后把链接或名称告诉 Cursor。Cursor 接到指令后会先去调用 MCP 工具兜一圈找到对应画板拉出里面所有图层的结构化信息包括宽度、高度、圆角、背景色、文本内容、字号、行高等。然后它再基于这些参数写代码。下面是我实际跑通过的指令和代码结构简化版你在蓝湖上找一下叫商品卡片的 Frame照着它的布局和样式写一个 React 组件。Cursor 给我的结果大致长这样div style{{ width: 280, padding: 16, borderRadius: 12, backgroundColor: #FFFFFF, boxShadow: 0 2px 8px rgba(0, 0, 0, 0.06) }} img src{imageUrl} style{{ width: 248, height: 160, borderRadius: 8 }} / div style{{ fontSize: 16, fontWeight: 500, color: #1A1A1A, marginTop: 12 }} 商品标题文本 /div div style{{ fontSize: 14, color: #595959, marginTop: 8 }} 商品描述信息 /div div style{{ display: flex, justifyContent: space-between, alignItems: center, marginTop: 16 }} span style{{ fontSize: 18, fontWeight: 600, color: #F5222D }}¥129/span button style{{ width: 72, height: 32, borderRadius: 6, backgroundColor: #1A1A1A, color: #FFF, fontSize: 13 }} 购买 /button /div /div这里面的 280、16、12、#FFFFFF、#1A1A1A全是 Cursor 从蓝湖设计稿里拉出来的真实参数不是我手动填的。我只需要检查一遍逻辑对不对要不要抽成公共组件然后就能直接提交。这种做事方式跟以前相比核心变化在于AI 不再是猜设计意图而是读设计意图。它写出来的代码天生就是带还原度的。3.4 把还原了吗变成自动核对流程MCP 通了之后我顺手把工作流也改了。现在设计师发来首页改版了我不再一页一页手动翻标注而是让 Cursor 把蓝湖上的最新设计稿跟我代码里的样式参数做一遍对比。具体做法是让 AI 读取设计稿里的关键样式值同时打开我代码里对应的组件文件把两者并排比较自动标出不一致的地方。比如有次设计师把按钮圆角从 8 像素改成了 12 像素我代码里还是 8Cursor 对比完直接告诉我按钮的圆角设计稿是 12px当前代码是 8px需要更新一下。 这种颗粒度的核对放在以前我不盯得那么细根本发现不了。反过来的场景也有用我这边为了实现某个效果改掉了设计稿里的间距以前全靠自觉去跟设计师同步。现在 AI 会发现两者有差异至少能提醒我这个值跟设计稿不一致你是故意改的还是改错了。省掉了大量不必要的来回沟通。当然这个流程不是万能的。设计稿的交互逻辑、动效节奏、视觉权重AI 目前还理解不了这些还是需要人来判断。但它确实把最机械、最费时间的参数对齐这件事做掉了。4. 遇到的坑和排查记录4.1 Cursor 中文设置与汉化问题先回应一下很多新手会问的问题Cursor 怎么设置中文回复怎么汉化。先说结论Cursor 的官方界面目前并没有完整的中文语言包完全汉化要靠额外手段效果也有局限。但更实用的是设定让 AI 用中文回复这个在 Cursor 里是能做到的。我在项目根目录放了一个.cursorrules文件里面就一句话你是一名资深前端工程师始终使用简体中文回复代码注释也用中文。这样不管是对话、代码生成还是代码审查它都会默认用中文。如果你没有.cursorrules也可以用全局 Rules 实现位置在 Cursor 设置里的 Rules 相关配置原理一样。如果你实在想要中文界面可以试试编辑器插件市场里的汉化扩展。安装方法类似于 VS Code 装扩展直接在扩展栏里搜索 Chinese Language Pack 之类的关键词装完重启生效。不过这类汉化包更新往往滞后Cursor 一升级界面又变回英文我自己的习惯是界面英文 回复中文用习惯了反而更稳。4.2 MCP 服务连接失败处理MCP 配置好之后最常碰到的坑就是 AI 说看不到工具或者工具调用报错。首先排查启动路径。command里的 python 和args里的脚本路径必须确保在你电脑上能直接跑通。我自己就踩过坑脚本路径写的是相对路径Cursor 的工作目录跟终端不一致服务根本没起来。建议先写绝对路径跑通后再考虑优化。其次排查令牌权限。如果 AI 能读到工具但调用时报权限或者数据为空大概率是蓝湖 API 令牌配置不对或者令牌对应的账号没有目标项目权限。回到开放平台确认一下令牌的权限范围重新生成一个再试试。还有一个低频坑是网络代理问题。有些公司内网环境访问蓝湖 API 需要走代理而本地 MCP 服务默认不走系统代理。这种情况我是在启动命令里加上了代理相关的环境变量配置完就正常了。4.3 响应慢和上下文过长的改善接上数据源之后很多人会抱怨 Cursor 变慢了。我自己也碰到过第一次读取一个包含几百个图层的大页面AI 需要先把所有图层信息读进来Token 消耗巨大回复时间直接翻倍。我的对策是缩小读取范围。不要一次性让 AI 读整个页面或整块画板精确到某一个 Frame 或者某一个组件区域数据量小很多响应速度明显提升。另外对话过程中如果上下文已经很长我会开一个新对话继续避免累赘的历史信息拖慢模型。还有一点如果团队设计稿里存在大量隐藏图层或重复分组蓝湖返回的信息会有不少噪音。我处理这些的方式是在 MCP 服务端做一层过滤把隐藏图层和冗余信息剔除只保留实际渲染可见的元素。这样一来喂给模型的数据更干净准确率和速度都会改善。4.4 蓝湖令牌权限与旧版本设计稿最后说一下版本管理的问题。蓝湖上经常存在同一页面的多个版本MCP 读取默认拿哪一版直接影响还原度对不对。我建议给项目的 MCP 工具加一个参数支持传入画板分享链接里的特定标识或者指定按设计稿的最后更新时间排序。这样 AI 读取的一定是设计师最新发布的一版而不是你上一次看过的旧版。另外团队成员之间最好约定好设计稿更新后主动在蓝湖里 对应的开发人员。MCP 能做到数据同步但做不到主动通知这一步还是得靠流程规范。自动化解决的是读取的效率沟通规范解决的是变化的感知两者缺一不可。5. 最后再聊几句实在话跑通 Cursor 接蓝湖这整套流程之后我最大的感受是AI 编程工具接入设计数据源价值被严重低估了。过去大家把 Cursor 当成一个写代码快一点的编辑器但接入蓝湖之后它变成了一个懂设计稿的结对编程搭档。设计师那边最直观的变化是群里那句还原了吗减少了很多。我当然不会说 AI 生成的代码直接就能上线但至少前端每次提交之前参数对齐这件事是 AI 已经做过一遍的剩下的是代码质量和交互逻辑的判断这些本来就是我们该干的活。最后提醒一句MCP 服务虽然好用但令牌安全一定要重视。蓝湖令牌相当于你们设计资产的钥匙千万不要写进任何公开仓库。我见过有人把令牌硬编码在代码里提交到 GitHub结果被外部扫描工具抓到整个项目数据全部泄露代价极大。个人项目这样玩还好团队项目这么干就是给自己埋雷。这个方向其实还有很多可以扩展的地方。代码生成只是第一步后面还可以把设计稿变更自动生成差异报告或者把 UI 组件图直接转成测试用例数据链路一旦打通想象力就打开了。我的经验分享到这里希望对被还原了吗困扰的团队有点帮助。