1. 这个项目到底在解决什么问题先说说我做这个事的起因。我们团队做的是中后台管理系统前端用 Vue 3 加 SCSS设计稿全部走蓝湖。日常流程就是设计师在蓝湖上传新稿或者改一版我这边对着标注量间距、取色值、扒字号写完页面截图丢群里设计师看一眼说“这个圆角不对”“这块间距少了 4px”“按钮的 hover 色你用的哪个色值”然后我再改再截图再等回复。一个页面来回三四轮是常态复杂点的表单页能来回七八轮。最要命的是“还原了吗”这四个字。设计师问这句话的时候其实他自己也不确定因为他也没法直接看到我本地跑起来的页面。他只能看截图截图又有缩放、有压缩、有浏览器渲染差异两个人对着两张图争论一个像素的差别纯属内耗。所以我就想能不能让 Cursor 直接读到蓝湖的设计稿数据让它自己去做“设计稿到代码”的比对和生成。这样设计师改完稿我这边让 Cursor 重新拉一次数据它自己就能告诉我哪些地方和设计稿不一致甚至直接把 SCSS 变量改好。这个想法落地下来核心就是标题里说的那件事把 Cursor 接到蓝湖上。这里要先说清楚一个概念免得有朋友误会。Cursor 本身是个代码编辑器它不会凭空知道蓝湖里有什么。中间需要一个“桥”这个桥就是 MCP。MCP 全称 Model Context Protocol你可以把它理解成一套让 AI 工具去调用外部数据源的约定。打个比方Cursor 是个很聪明的实习生但他进不了你们公司的设计系统MCP 就是给他配的一张门禁卡加一份操作手册告诉他“蓝湖的设计稿数据从这个接口拿字段长这样你按这个格式读”。这个项目适合谁参考三类人。第一类是前端开发尤其是做中后台、做设计稿还原比较多的Vue、React 都行思路是通的。第二类是前端团队的技术负责人想给团队搭一套设计稿和代码之间的自动化校验流程。第三类是对 MCP 这套东西好奇、想找个真实场景练手的开发者蓝湖这个场景比那些玩具 demo 实在得多。需要什么基础你得会用 Cursor知道它的 Agent 模式和 Rules 怎么配得懂 Vue 3 的组件写法SCSS 变量和嵌套要熟最重要的是你得能拿到蓝湖的开放接口权限这个后面会细说是整个项目能不能跑起来的前提。2. 整体方案怎么设计为什么这么选2.1 为什么是 MCP 而不是写个脚本一开始我想的很简单写个 Node 脚本调蓝湖的接口把设计稿数据拉下来存成 JSON然后让 Cursor 读这个 JSON 去比对。这个方案能跑但有几个硬伤。第一个硬伤是数据新鲜度。设计稿是会变的设计师上午改一版下午改一版我脚本得手动跑跑完还得手动告诉 Cursor“数据更新了你重新读一下”。这个手动环节一多人就会偷懒偷懒的结果就是 Cursor 拿着旧数据在比对比出来的结论全是错的比不比还糟糕。第二个硬伤是交互方式。脚本方案里Cursor 是被动的它只能读我喂给它的文件。但实际开发中我是希望它能主动去查的。比如我写到某个组件我想问“这个卡片在蓝湖里对应的圆角是多少”我希望 Cursor 自己去查而不是我先跑脚本再回来问。MCP 恰好解决这两个问题。它把蓝湖的数据源封装成一组“工具”Cursor 在对话过程中可以自己决定什么时候调用哪个工具。数据是实时拉的交互是主动的。这就是我选 MCP 而不是脚本的根本原因不是技术炫技是工作流顺不顺的问题。2.2 蓝湖 MCP 服务的两种接入形态蓝湖这边提供 MCP 服务实际落地有两种形态我两种都试过说下区别。第一种是官方托管的远程 MCP 服务。你拿到一个服务地址配到 Cursor 的 MCP 配置里Cursor 通过这个地址去访问蓝湖的数据。这种形态的好处是省事不用自己维护服务蓝湖那边接口升级你也不用管。坏处是依赖网络而且有些企业版蓝湖的权限体系比较严远程服务能不能拿到你项目的数据得看你们管理员怎么配的。第二种是本地部署的 MCP 服务。蓝湖提供服务的代码或者镜像你自己跑在本地或者内网服务器上配置里填本地的地址。这种形态适合数据敏感、不想让设计稿数据出内网的团队。坏处是要自己维护接口变了要自己更新。我们团队最后选的是本地部署原因很直接设计稿里有未发布的产品信息走远程服务过不了安全审查。这个选择没有绝对的对错看你们团队的合规要求。2.3 数据流是怎么走的把整个链路画清楚后面配置的时候不容易懵。蓝湖设计稿 → 蓝湖开放接口 → MCP 服务本地或远程→ Cursor 的 MCP 客户端 → Cursor Agent → 你的代码文件。这里有个关键点Cursor 拿到的不是图片是结构化的数据。蓝湖的接口返回的是图层树每个图层有名字、类型、位置、尺寸、样式属性。比如一个按钮图层它会告诉你宽度 88、高度 32、圆角 6、背景色 #1890FF、字号 14、字重 500。Cursor 拿到这些数字才能和你的 SCSS 做精确比对。如果只是给 Cursor 一张设计稿截图它靠视觉识别去猜色值和尺寸误差大到没法用。所以整个方案的核心价值不在于“让 AI 看图写代码”而在于“让 AI 拿到精确的设计参数去做校验”。这个定位想清楚了后面的配置和提示词设计才有方向。2.4 和纯人工还原相比省在哪我算过一笔账。一个中等复杂度的列表页纯人工还原加校对从拿到设计稿到设计师确认平均 2.5 小时。其中写代码大概 1 小时剩下 1.5 小时全花在来回沟通和微调上。接入 MCP 之后同样的页面写代码还是 1 小时左右但校对环节压缩到 20 分钟以内。因为 Cursor 能直接列出“第 3 个卡片的 padding 设计稿是 16px你写的是 12px”这种精确差异我改完再让它复查一遍基本就过了。省下来的不是写代码的时间是沟通和返工的时间这部分才是真正的大头。3. 环境准备和 MCP 服务配置实操3.1 前置条件清单动手之前先把这几样东西确认齐了缺一样后面都会卡住。Cursor 版本建议用较新的版本MCP 功能在持续迭代老版本可能配置项对不上。我用的版本 MCP 配置入口在设置里能直接找到。蓝湖账号权限你的账号得能看到目标项目的设计稿并且有权限调用开放接口。如果是企业版可能需要管理员给你开接口权限。蓝湖项目的项目 ID 和团队 ID这两个后面配置和调用都要用在蓝湖项目设置里能找到。Node 环境如果走本地部署机器上要有 Node版本别太老。一个能跑起来的 Vue 3 项目用来做比对和验证空项目也行但最好是有真实页面的。提示蓝湖的接口权限这块不同企业配置差异很大。如果调用一直返回权限错误先别怀疑代码去找你们蓝湖的管理员确认接口权限开没开这一步能省你半天时间。3.2 本地 MCP 服务的部署本地部署的步骤我按实际操作顺序写。第一步拿到 MCP 服务的代码或镜像。蓝湖这边会给一个服务包里面包含服务主体和配置文件。解压到一个你习惯的目录路径里别带中文和空格这个坑我踩过某些依赖处理中文路径会出问题。第二步装依赖。进到服务目录跑安装命令。这一步如果卡在某个包下载不动换个源重试属于网络问题不是配置问题。cd lanhu-mcp-server npm install第三步改配置文件。配置文件里主要填三样东西蓝湖的接口地址、你的访问凭证、服务监听的端口。访问凭证这块有的版本用的是 token有的用的是账号密码换取的临时凭证按你拿到的文档填。端口默认给一个不冲突的就行我用的是 3100。{ lanhu: { apiBase: 蓝湖接口地址, token: 你的访问凭证, teamId: 你的团队ID }, server: { port: 3100 } }第四步启动服务。启动之后看日志正常的话会打印监听地址。用浏览器或者 curl 访问一下健康检查接口能返回正常状态就说明服务起来了。npm start注意本地服务启动后别关终端关了服务就停了。想让它常驻用 pm2 之类的进程管理工具挂起来不然你每次开发前都得手动启动一次很容易忘。3.3 在 Cursor 里配置 MCP服务起来了接下来让 Cursor 认识它。打开 Cursor 的设置找到 MCP 相关的配置入口。不同版本入口位置略有差异有的在 Features 里有的单独一个 MCP 菜单。找到之后新增一个 MCP Server配置内容大概长这样。{ mcpServers: { lanhu: { url: http://localhost:3100/mcp } } }如果走的是远程托管服务url 换成蓝湖给的服务地址可能还需要在 header 里带上认证信息。配置保存之后Cursor 会尝试连接连接成功的话MCP 列表里这个服务会显示为可用状态并且能看到它暴露出来的工具列表。这里有个细节值得说。MCP 服务暴露的工具不是越多越好。工具太多Cursor 在选择调用哪个的时候会犹豫甚至选错。蓝湖这个服务一般会暴露“获取项目列表”“获取设计稿详情”“获取图层样式”这几个核心工具就够了。如果服务支持工具开关把用不上的关掉Cursor 的调用准确率会明显提升。3.4 验证连接是否真的通了配置完别急着写业务代码先做个最小验证。在 Cursor 的对话里直接问它“帮我列出蓝湖里 XX 项目的设计稿列表。”如果配置正确它会调用 MCP 工具然后返回项目下的设计稿名称列表。这一步能返回数据说明整条链路是通的。如果返回的是“我无法访问蓝湖”或者类似的拒绝按这个顺序排查先看本地服务日志有没有收到请求没收到就是 Cursor 到服务的连接问题检查 url 和端口收到了但报错就是服务到蓝湖接口的问题检查凭证和权限。我第一次配的时候卡在凭证上服务日志显示 401折腾半天发现是 token 复制的时候多带了一个空格。这种低级错误说出来丢人但确实常见复制粘贴完扫一眼。4. 核心功能实现让 Cursor 做设计稿比对4.1 设计稿数据的结构长什么样要让 Cursor 做比对得先让它理解蓝湖返回的数据结构。蓝湖的设计稿数据本质是一棵图层树根节点是画板往下是各种分组和图层。每个图层节点大概包含这些字段字段含义示例name图层名称btn-primarytype图层类型RECT / TEXT / GROUPx, y相对位置24, 16width, height尺寸88, 32borderRadius圆角6backgroundColor背景色#1890FFfontSize字号14fontWeight字重500color文字颜色#FFFFFF这棵树的层级关系很重要。比如一个按钮它可能是一个 GROUP里面套一个 RECT 做背景再套一个 TEXT 做文字。Cursor 在比对的时候需要把 GROUP 的结构和你的组件结构对应起来。所以我在提示词里会明确告诉它蓝湖里 GROUP 类型的图层对应 Vue 组件里的一个容器元素RECT 对应背景样式TEXT 对应文字样式。4.2 提示词怎么写才有效这是整个项目里最考验经验的部分。提示词写不好Cursor 要么比对得乱七八糟要么干脆不调用 MCP 工具自己瞎猜。我的提示词分三段。第一段定角色和任务第二段给比对规则第三段给输出格式。第一段大概是这样“你是一个前端还原校验助手。你的任务是读取蓝湖设计稿的图层数据和我当前打开的 Vue 组件文件做比对找出样式不一致的地方。比对时你必须调用蓝湖 MCP 工具获取真实数据不要凭截图或记忆猜测。”第二段给规则这是核心。我会明确列出比对哪些属性尺寸、间距、圆角、颜色、字号、字重。并且规定容差比如颜色必须完全一致尺寸允许 1px 误差间距允许 2px 误差。为什么要设容差因为设计稿的标注和实际渲染有时候会有亚像素差异卡太死会产生大量无意义的告警反而淹没真正的问题。第三段给输出格式我要求它输出一个表格三列属性、设计稿值、代码值。最后再给一个结论是“一致”还是“存在 N 处差异”。实操心得提示词里一定要强调“必须调用 MCP 工具”。我遇到过 Cursor 偷懒不调工具直接根据组件代码反推设计稿应该是什么样然后告诉我“一致”。这种自欺欺人的结果比不比对还危险。加上强制调用的约束后这种情况就没了。4.3 把设计稿图层和组件元素对应起来这是实际用起来最麻烦的一步。蓝湖里的图层名是设计师起的可能是“按钮/主要/默认”这种中文带斜杠的而我的组件里类名是 btn-primary。两者对不上Cursor 就没法自动对应。我的解决办法是在组件里加注释做映射。比如template !-- lanhu: 按钮/主要/默认 -- button classbtn-primary span classbtn-text提交/span /button /template这个注释就是给 Cursor 看的路标。它在比对的时候先读注释找到对应的蓝湖图层再往下比对具体属性。这个做法有点笨但极其有效比让 Cursor 去猜图层和元素的对应关系靠谱得多。如果图层特别多一个个加注释太累可以退一步只给关键图层加。什么是关键图层就是那些容易还原错的带圆角的卡片、有特殊间距的列表项、颜色比较特殊的按钮。纯文字段落这种不太会错的可以不加。4.4 SCSS 变量的自动对齐比对出差异之后改代码这一步也可以让 Cursor 做但要谨慎。我的做法是分两类处理。颜色和字号这类有全局变量的让 Cursor 直接改。比如设计稿按钮背景是 #1890FF我代码里写的是 #1677FF而项目里有个变量 $primary-colorCursor 会把代码改成用变量同时检查变量值对不对。间距和尺寸这类我不让 Cursor 直接改只让它列出差异我自己判断。原因是间距往往涉及布局逻辑比如一个 padding 从 12 改成 16可能导致整个卡片高度变化进而影响相邻元素。这种连锁反应 Cursor 不一定能考虑到让它直接改容易改出新问题。// 让 Cursor 改这类风险低 .btn-primary { background-color: $primary-color; // 对齐设计稿 #1890FF font-size: $font-size-base; // 对齐设计稿 14px } // 这类让它只报告我自己改 .card { padding: 12px; // 设计稿是 16px需人工确认是否影响布局 }这个分寸感是用了两三周之后才摸索出来的。一开始我什么都让 Cursor 改结果有次它把一个列表项的间距改了整个页面滚动高度变了分页组件的位置跟着偏又得回头查。从那以后我就定了规矩样式值可以自动改布局值只报告。5. 实际开发中的问题排查和经验5.1 常见问题速查用下来遇到的问题不少整理成表方便对照排查。问题现象可能原因解决方向Cursor 说无法访问蓝湖MCP 服务没启动或端口不对检查服务进程和配置里的 url调用返回 401凭证过期或格式错误重新获取凭证检查有无多余空格返回数据为空项目 ID 或团队 ID 填错核对蓝湖项目设置里的 ID比对结果全是差异图层和元素没对应上检查组件里的 lanhu 注释Cursor 不调用工具提示词没强制要求在提示词里明确必须调用 MCP比对速度很慢设计稿图层太多缩小比对范围只比对当前组件相关图层5.2 图层命名混乱怎么办这是最普遍的问题。设计师起名很随意同一个按钮这版叫“按钮”下版叫“btn”再下版叫“主要按钮”。图层名一变我的注释就对不上了Cursor 找不到对应图层比对直接失效。我的应对策略是双保险。第一和设计师约定一套命名规范至少保证同一类元素命名稳定。这个沟通成本不高设计师一般也愿意配合因为规范的命名对他们自己管理图层也有好处。第二在提示词里加一层模糊匹配逻辑告诉 Cursor 如果精确匹配不到就按位置和尺寸去推断最可能的图层并在结果里标注“此结果为推断请人工确认”。第二招是兜底不能完全依赖。模糊匹配偶尔会匹配错把 A 按钮的样式套到 B 按钮上得出错误结论。所以推断出来的结果我一定会人工扫一眼。5.3 设计稿版本更新的处理设计师改稿是常态改完之后旧的数据就失效了。MCP 服务每次调用都是实时拉取所以数据新鲜度没问题。但有个坑设计师改稿之后图层结构可能变了比如原来一个 GROUP 拆成了两个或者图层顺序调整了。这时候我的注释映射可能就失效了。我的做法是在每次设计师通知改稿之后先让 Cursor 拉一次新的图层树打印出来我扫一眼结构有没有大变化。有变化就更新注释没变化就直接比对。这个检查动作花不了两分钟但能避免拿着旧映射去比对新稿子。5.4 性能上的取舍图层特别多的设计稿一次拉全量数据会很慢Cursor 处理起来也吃力。我的做法是分而治之。一个页面通常由多个组件组成我一次只比对当前正在开发的那个组件对应的图层。在提示词里明确告诉 Cursor 只关注某个图层分组其他忽略。这样做的另一个好处是比对结果聚焦。全量比对会输出一大堆差异其中很多是还没开发的组件看了也没用。聚焦到当前组件输出的差异都是马上要处理的效率高很多。5.5 几个容易忽略的细节第一个细节颜色格式。蓝湖返回的颜色有时候是 #1890FF有时候是 rgba(24,144,255,1)格式不统一。Cursor 比对的时候如果直接做字符串比较会把同一个颜色判成不一致。我在提示词里要求它先把颜色统一转成十六进制再比对这个小处理能消掉大量误报。第二个细节字号单位。设计稿里字号是 px但有些项目用了 rem 或者 vw。Cursor 比对的时候要做单位换算换算基准得在提示词里告诉它比如“1rem 16px”。不说的话它可能拿 0.875rem 和 14px 直接比判成不一致。第三个细节字体。设计稿用的字体和实际渲染的字体可能不同导致文字宽度对不上。这个属于环境差异不是代码问题。我在比对规则里把字体相关的属性排除掉了只比字号和字重避免这类无意义的告警。6. 这套流程跑顺之后的变化用了一个多月最大的变化不是省了多少时间是沟通方式变了。以前设计师问“还原了吗”我只能说“你等等我截图”。现在设计师问我直接让 Cursor 跑一遍比对把差异表格发群里。表格里写得清清楚楚哪个属性差多少设计师一眼就能看到不用再对着截图猜。有时候差异是设计稿本身标注有问题设计师看到表格自己就发现了主动说“这个是我标错了你按代码的来”。还有一个意外收获。因为比对过程把每个样式值都列出来了我在写代码的时候会更有意识地用变量、用规范的值。以前随手写个 13px 觉得无所谓现在知道这个值会被比对出来就会去查设计规范里对应的值是多少。代码的规范性反而被这套流程倒逼着提升了。要说这套东西的局限也很清楚。它只能比对样式值比不了交互和动效。按钮点击的反馈、列表加载的动画、响应式断点的表现这些还是得人工看。所以它是个提效工具不是替代品。把它用在合适的地方省下的是最枯燥的那部分工作用错地方比如指望它校验交互那就是给自己找麻烦。最后分享一个我踩过的坑。刚开始我把 MCP 配置和提示词都写好了兴冲冲地拿去比对结果 Cursor 返回的结果驴唇不对马嘴。查了半天发现我打开的组件文件路径不对Cursor 读的是另一个同名组件。这个错误很低级但特别容易犯尤其是项目里组件多了之后。后来我在提示词开头加了一句“请先确认你当前读取的文件路径并在结果里输出这个路径”这样每次比对结果里都会带上文件路径一眼就能看出读对没读对。这个习惯救了我好几次。