★ FEATURED ARTICLE 先交代个背景。我是做前端开发的日常被设计师“还原了吗”这四个字支配了三年。以前每到联调阶段我的桌面必然同时开着蓝湖网页、编辑器、浏览器三个窗口像素级对照属性面板里的间距、字号、圆角然后在代码里手动填数值十有八九还会填错。直到我把 Cursor 的 MCP 配置指向了蓝湖的服务地址让 AI 编程助手直接接入了设计稿的数据源这个“还原了吗”的追问频率才真正降了下来。这篇就完整复盘一下这件事是怎么做成的包括思路、配置、实际用法以及那些只有踩过坑才会知道的细节。1. 先说清楚我解决的是什么问题1.1 “还原了吗”本质上不是态度问题是链路断点问题先别急着怪我偷懒。设计师反复问“还原了吗”背后其实是一个很现实的协作链路断点设计稿存在蓝湖代码存在编辑器这两个系统之间没有任何数据通路。我作为前端每还原一个界面都要经历一轮机械劳动打开蓝湖页面找到对应画板或图层手动读取标注面板的数值比如内边距 24px、字号 16px、行高 24px把这些数值逐个复制进代码写进 style 或 className肉眼对比页面效果和设计稿发现偏差再回头改这个流程的痛点很明显交互成本高人工转录容易错而且极其消耗耐心。更尴尬的是很多设计细节在蓝湖上要一层一层点开图层才能看到某些标注藏在组件的深层嵌套里找起来比写代码还累。时间一久我拿到设计稿的第一反应不是“怎么做”而是“怎么又要手动对参数了”。后来我了解到 Cursor 支持 MCP也就是让 AI 助手通过标准协议去访问外部工具和数据源。我当时的第一个念头就是如果能让 Cursor 直接访问蓝湖里的设计稿信息把间距、色彩、字体这些参数直接“喂”给 AI由它来完成临摹和生成代码那我的机械劳动就全部可以省掉了。这不是偷懒这是把人力从低价值转录里解放出来。1.2 为什么选蓝湖以及为什么是 MCP 而不是截图国内设计团队用蓝湖的比例相当高设计规范、切图、标注、版本管理都在上面。我所在的项目组设计交付物就是蓝湖分享链接这是客观前提。至于为什么选 MCP 而不是更土的方案比如截图给 AI 看我可以对比一下截图方案把设计图丢给 Cursor 的视觉模型让它照着截图写页面。问题是截图只有像素信息没有精确数值AI 要靠猜还原度完全靠运气间距差 2px 根本看不出来。MCP 方案Cursor 通过 MCP 服务直接读取蓝湖的标注数据拿到的是结构化的数值和规范比如某个文本的 font-size、某个容器的 padding、某个按钮的 border-radius。AI 是在“看着参数写代码”不是“看着图猜参数”准确率完全不在一个级别。这就是我下定决心做集成的根本原因。MCP 方案解决的不只是“省事”它解决的是“信息精确度”的问题。AI 拿到的是设计师真正落定的参数而不是一张截图的模糊像素。2. 核心思路拆解MCP 到底在这个场景里扮演了什么角色2.1 MCP 是什么用一句人话解释MCP全称 Model Context Protocol模型上下文协议。你可以把它理解成一个 USB-C 接口标准只不过它连接的不是 U 盘和显示器而是 AI 模型和外部数据源。在 Cursor 里AI 默认只能看到当前打开的代码文件和你的提问。它不知道蓝湖上有什么也不知道设计稿的标注数值。MCP 干的事情就是给 AI 开一扇“数据窗口”通过配置一个本地或远程的服务进程AI 可以实时调用这个服务去查询蓝湖上的项目、画板、图层、标注数据然后把返回值作为上下文的一部分参与代码生成。这么说可能还是抽象我拿实际流程举例。过去我写一个按钮组件是什么状态我打开蓝湖看到按钮尺寸 120x40、圆角 8、主色 #1677FF、文字 14px然后我带着这些信息在 Cursor 里写提示词让 AI 生成代码。现在呢我在 Cursor 里直接输入“请读取蓝湖画板首页里的主按钮组件按它的标注生成一个 React 组件”AI 会自己通过 MCP 调蓝湖服务拿到结构化参数然后生成代码。整个过程中间没有人工转录环节。2.2 这套方案的核心优势到底在哪我总结下来至少有三个层面的收益不是简单“方便一点”这么简单。第一层是信息不失真。以前我手动转录标注眼睛看漏一个 0、小数点和单位抄错都是家常便饭。现在 AI 直接读取原始标注数据从源头上就消除了这类低级错误。第二层是效率的质变。以前还原一个中等复杂度的页面光查标注、对属性就要花一两个小时。现在相当于把“读设计稿”这个动作交给 AI 去并发处理我只需要把精力集中在业务逻辑和交互细节上整体的开发时长能压缩一半以上。第三层是沟通成本的降低。以前设计师问“还原了吗”我要么含糊回答要么截图证明要么现场改。现在我可以直接告诉设计师“页面上所有间距、色彩、字号都是通过蓝湖 MCP 读取标注后生成的数值层面零偏差。”这句话虽然不能完全替代视觉走查但至少能把问题聚焦在真正需要人工判断的视觉细节上而不是浪费在“数字有没有抄错”这种低级环节。3. 实操环节把 Cursor 接到蓝湖 MCP 服务的完整过程下面进入正题我把从零到一的配置过程写出来。不同团队的蓝湖环境可能稍有差异比如自建私有化版本和 SaaS 版本但核心配置思路是通用的。3.1 前置条件你需要准备什么在动手之前确认以下几样东西是齐的Cursor 已安装且能正常使用版本建议更新到较新的正式版蓝湖账号并且对目标项目有至少“成员”级别的访问权限一个能从命令行启动 Node.js 的环境因为蓝湖 MCP 服务是以 Node 包形式提供的蓝湖项目中的“项目令牌”或对应的认证凭据关于第 4 点我要特别解释一下。蓝湖的 MCP 服务设计上是基于“项目令牌”来鉴权的。因为设计稿属于团队内部资产不能让任何拿到 Cursor 配置的人都能随便读取所以必须在蓝湖的项目设置里创建一个令牌Token这个令牌决定了访问范围一般建议范围收窄到你正在开发的那一个或几个项目。注意项目令牌属于敏感凭据和密码一样重要。不要把它提交到 Git 仓库也不要在截图或视频里露出。如果怀疑泄露及时在蓝湖后台吊销并重新生成。3.2 配置 MCP 服务的两种路径我实际尝试过两种配置路径都可以用具体看你习惯用 UI 还是改配置文件。方式一通过 Cursor 的 MCP 设置面板操作打开 Cursor点击左下角设置图标找到“MCP”相关的菜单项不同版本菜单位置略有不同一般叫 MCP 或 Add MCP Server。点击“添加新服务器”然后按提示填写名称可以随便起个方便识别的比如 Lanhu MCP类型选择 command本地命令命令填写npx -y lanhu/mcp-server或你的蓝湖服务对应包名环境变量把蓝湖需要的鉴权信息填进去一般是令牌相关的键值对保存之后Cursor 会去拉取并启动这个 MCP 服务。如果配置正确服务状态会显示为已连接。方式二直接编辑 MCP 配置文件如果你更喜欢把配置纳入版本管理比如团队统一分发可以编辑 Cursor 的mcp.json配置文件。文件位置一般是用户目录下的.cursor文件夹或者项目根目录下的.cursor/mcp.json。结构大致如下{ mcpServers: { lanhu: { command: npx, args: [-y, lanhu/mcp-server], env: { LANHU_API_TOKEN: 你的项目令牌, LANHU_PROJECT_ID: 目标项目ID } } } }这里字段含义依次是服务名称、启动命令、命令参数、环境变量。配置完成后重启 Cursor让配置生效。3.3 项目 ID 和令牌从哪里获取第一次配置的时候最容易卡住的就是“我上哪儿找这些 ID 和令牌”。我的经验是在蓝湖的网页端进入目标项目后看浏览器的地址栏URL 里通常会带一串数字或字符串那个一般就是项目 ID。令牌则需要在蓝湖的项目设置或团队管理后台里找“API 访问令牌”或“开发者 Token”之类的入口有的版本叫“开放接口”有的叫“集成配置”名称略有差异但逻辑都是创建一个受控的访问密钥。如果实在找不到入口最简单的办法是问一下你们团队的蓝湖管理员或者查一下蓝湖官方针对 MCP 服务发布的接入文档里面会标注最新的令牌申请入口和配置参数。我自己配置时也翻过官方文档确实是不同版本的入口位置有区别。小技巧可以把LANHU_PROJECT_ID配置成多个项目的 ID用逗号分隔。这样同一个 MCP 服务可以覆盖多个项目不用来回切换配置文件。不过也要注意令牌权限和项目列表越收越窄越安全别图省事一把梭。3.4 配置完怎么判断成功了配置完成后不会自动弹窗告诉你“成功”。最直接的验证方式是在 Cursor 的对话框里向 AI 提问比如“帮我看看蓝湖项目里有没有一个叫‘首页’的画板里面有几个主要组件”如果配置成功AI 会通过 MCP 工具调用返回结果比如告诉你画板名称、图层数量、组件列表。如果配置有问题AI 一般会回复“没有可用的MCP工具”或“调用失败”之类的错误信息这时候就要回头检查配置项了。我个人的习惯是配置完成后先跑两个最小测试查项目列表确认鉴权通了查某个具体画板的图层摘要确认数据结构能正常读这两个通了那就可以放心进入实际使用阶段了。4. 实际使用体验那些让我“回不去”的日常操作4.1 从“写代码”变成了“审代码”接上 MCP 之后我日常工作流最大的变化是从一个“手动抄参数的码农”变成了一个“审核 AI 产出质量的工程师”。举个例子上个月我需要还原一个列表页包含筛选区、列表卡片、空状态、加载状态四种形态。以前我至少要花半天现在我只需要在 Cursor 里逐步下达指令“请从蓝湖读取列表页的筛选区标注按标注生成对应的 JSX 和 CSS”“请继续读取列表卡片的组件标注注意它的间距、阴影和字体层级”“空状态和加载状态也按蓝湖标注补齐”AI 每次都会先通过 MCP 拉取对应图层的数据再根据返回值写代码。我做的事是审核它拿到的数据对不对、生成的代码有没有歧义以及最终的视觉效果是否符合预期。这种工作方式的最大好处是让我把注意力从“转录参数”上解放出来放到真正需要人来决策的地方比如状态管理、接口设计、交互边界。毕竟 AI 再强也不可能替我跟后端对齐接口字段。4.2 更精准的提示词写法这里我必须强调一件事MCP 的接入不等于 AI 能自动完成一切提示词的质量依然决定产出的质量。我总结了几个比较实用的提示词模式分享给大家参考。模式一指定画板加指定组件“读取蓝湖项目 {项目名} 里‘登录页’画板的‘手机号输入框’组件标注按标注生成 React 组件样式用 styled-components 实现。”这种写法信息给得很充分AI 不需要猜你要什么直接按部就班执行。模式二让 AI 自行浏览后给出建议“先浏览蓝湖里‘个人中心’画板的所有图层整理出包含哪些区块和组件然后告诉我你的实现计划再逐个实现。”这种适合页面结构比较复杂的场景先让 AI 梳理信息再分步执行降低一次性生成的出错概率。模式三对比差异“把我当前代码里按钮组件的样式参数和蓝湖上的标注做一个对比列出不匹配的地方。”这是还原走查阶段的神器。以前我肉眼对照都要盯半天现在 AI 直接帮我做差异比对省下的时间非常可观。4.3 一个完整的实战复现示例我用一个具体的组件来演示整体流程会更有说服力。假设我要还原一个蓝色主按钮。以前的流程打开蓝湖找到按钮图层查看标注记下宽高、圆角、字号、颜色、阴影回到编辑器新建组件手动填入参数运行页面肉眼对比提交现在的流程在 Cursor 输入“请读取蓝湖项目里‘通用组件’画板的‘主按钮 Primary Button’图层标注生成一个 React 按钮组件输出 TypeScript 代码”AI 自动调用 MCP读取标注AI 生成以下类似的代码示意import React from react; interface PrimaryButtonProps { children: React.ReactNode; disabled?: boolean; onClick?: () void; } export function PrimaryButton({ children, disabled, onClick }: PrimaryButtonProps) { return ( button onClick{onClick} disabled{disabled} style{{ width: 120px, height: 40px, borderRadius: 8px, backgroundColor: #1677FF, color: #FFFFFF, fontSize: 14px, border: none, cursor: disabled ? not-allowed : pointer, }} {children} /button ); }这里每一个数值都来自蓝湖标注不需要我人工核对二次。我只需要确认这个组件的交互逻辑是否符合需求。5. 常见问题与排查技巧实录5.1 MCP 服务连接超时或被拒绝这是最高频的问题。配置完 MCP 之后发现 AI 调不到蓝湖数据优先排查以下三个方向环境变量是否正确。令牌有没有多一个空格、少一个字符这类低级错误占大头网络策略是否拦截。公司内网有时候会拦截未经审批的外部服务连接需要确认蓝湖 MCP 服务的域名是否在放行名单里本地 Node 版本是否过旧。有些 MCP 服务需要较新的 Node 运行时老版本启动直接报错排查方法是在终端手动运行一遍同样的 npx 命令看能否正常启动。如果在终端里就报错那肯定不是 Cursor 的问题先把服务跑起来再说。5.2 权限不足或找不到某个画板这种情况通常不是配置问题而是令牌的访问范围不够。蓝湖的项目令牌一般有只读和读写等不同等级而且令牌可能只授予了特定项目。如果你能连接到服务但查不到某个画板第一反应应该是回蓝湖后台检查该令牌的项目授权范围而不是反复重装服务。5.3 读取到的标注数据不完整蓝湖上不是所有设计对象都有完整标注尤其是一些由多个图层组成的复杂组件标注可能散落在各个子图层上。这种情况我的处理方法是要求 AI 先列出该组件的图层树再一层层读取子图层的标注最后综合生成代码。5.4 AI 生成的代码和标注不一致的排查思路如果 AI 已经读取了标注但生成的代码里数值对不上原因大概率是 AI 在“理解并转述”的过程中做了自以为是的主观调整比如把 16px 圆整或把多个阴影合并了。这时候需要在提示词里强调“严格按标注返回值输出不要做任何主观优化”。我常用的兜底话术是“以上所有样式数值都必须严格来自蓝湖标注返回值不得自行猜测、取整、合并如果标注缺失就直接告诉我不要编造。”这样能显著降低 AI 自由发挥的概率。毕竟 AI 对话模型天然有“把话补全”的倾向你不强调它就容易给你“脑补”一个合理但非设计的数值。5.5 多个团队成员共用一个 Cursor 配置的注意点如果团队打算把这套配置同步给所有前端建议把令牌通过环境变量的方式注入而不是直接写在明文配置文件里分发给所有人。比如在各自电脑上配置系统环境变量mcp.json 里引用占位符。这样可以避免令牌在聊天记录、截图、仓库里到处乱飞。6. 关于“提示词泄露”和权限边界我得单独提醒一下最近圈子里关于 Cursor 提示词泄露的话题讨论很多。配合 MCP 接入蓝湖之后这个风险是真实存在的因为 AI 的对话上下文是可以被用户主动导出的。如果团队的设计稿涉及敏感业务建议做两个安全措施第一蓝湖项目令牌权限尽量只读、只限项目不要把团队管理员的令牌拿来配置 MCP毕竟管理员令牌能覆盖的范围太大了超出真正需要的边界。第二不要在设计稿里放置非设计类的敏感信息也不要指望蓝湖是保密容器关键词性质的内部代号、未公开的业务逻辑不要出现在画板命名和注释里。安全方面宁可保守一点。在我眼里这套集成的价值在于“效率”但如果因为效率而引入数据泄露风险那得不偿失。7. 使用边界哪些场景适合哪些场景别硬套7.1 适合的场景页面级还原列表页、表单页、详情页、个人中心这类信息密度大、数值繁多的页面收益最明显组件库建设通用组件如按钮、输入框、弹窗、卡片非常适合通过 MCP 批量读取规范后沉淀成统一的组件代码多端适配Web、H5、小程序等多端需要同步还原同一套设计时AI 读取一次标注可以基于相同参数生成不同端的代码7.2 不适合的场景复杂交互动效带复杂动画、手势交互、视觉动效的部分光有标注数据远远不够还是需要开发者手动实现和调优MCP 帮不上太多忙设计本身还在频繁变动的早期阶段如果画板天天改每次生成代码都要重新拉取标注反而浪费 tokens不如等设计收敛后再做还原设计规范严重缺失的团队蓝湖标注数据只是“点状”的如果团队没有沉淀全局的设计变量比如统一的色板、间距体系AI 只能生成孤立的组件样式无法保证整体风格统一这里我要多提一句。MCP 接入解决的是“读数据”的效率问题不是“搞设计”的问题。如果团队本来就没有设计规范接再多的 MCP 也变不出统一的设计语言来。所以别把 MCP 当成万能药它是在整洁的设计稿基础上放大效率不是从零建立设计体系的工具。8. 个人总结这项集成让我对“还原”这件事彻底换了心态8.1 从“怕被问”到“不怕问了”以前设计师问“还原了吗”我心里多少有点虚因为我确实没法保证每个像素都记得核对。现在我不虚了因为我知道代码里的关键参数都来自蓝湖的原始标注这种信心不是靠加班堆出来的而是靠数据链路给的。8.2 一个值得养成的习惯最后分享一个我后来养成的习惯每次完成一个页面的还原我都会在 Cursor 里发一句话“请把当前页面所有组件的样式参数和蓝湖标注做一次自动比对汇总不一致项。”这个动作花费不到一分钟但能让我在上线前发现绝大多数数值错位问题。它已经成了我的个人质量门禁。8.3 给还没接 MCP 的朋友一个行动建议如果你和我一样受困于设计还原的反复沟通我的建议是别把 MCP 想得很玄乎它本质上就是给 AI 开一个数据通道配置过程也就一顿饭的功夫。你需要的只是勇气去试一下然后在试的过程中不断调整提示词和权限边界。这套流程跑顺之后你大概率也会和我一样回不到以前那个“手动抄参数”的日子了。
阅读完成 · 觉得有帮助？
