★ FEATURED ARTICLE 从“还差一个像素”到“直接看 AI 的回填清单”这中间只隔了一个蓝湖 MCP 服务。我在这篇文章里不只讲怎么把 Cursor 接到蓝湖上还会把接入前前后后踩的坑、为什么选这条技术路线、以及接入后实测两周的还原度变化全部摆出来。给正在被“还原了吗”追着跑的前端同学以及想减少设计对账成本的团队一份可以直接抄作业的参考。1. “还原了吗”背后的信息断层设计师和前端其实在说两种语言1.1 一个典型的还原度返工现场先说个我自己的经历。之前在做一个 B 端后台项目设计方案阶段一切顺利等真到了开发联调那几天我和设计师的对话基本就变成了这样设计师“侧边栏按钮的内边距还原了吗我看着比稿子胖了一圈。” 我“我按标注写的啊可能是字体渲染的问题我这机器上没问题。” 设计师“那 hover 状态呢列表悬停的背景色对不上。” 我“等下你那个是设计稿第几版我看下……”这种对话循环个三五次情绪消耗比技术消耗还大。问题的关键在于前端拿到的信息和设计师脑中的信息从来都不是同一份。设计师交付的是一张带标注的图片或链接前端看到的是一个又一个孤立的数值。间距、颜色、字号、圆角、阴影这些数值在浏览器里组合出来的效果会和设计稿产生肉眼可见的偏差。这个偏差可能来自字体渲染、断点边界、深浅色模式更可能来自——设计稿本身更新了而我手里这份标注还是三天前的版本。“还原了吗”这个问题表面上是在问页面像不像实际上是在问一个更底层的东西你拿到的是不是和我看到的是同一份设计。1.2 蓝湖在协作里的角色以及它到 AI 编程这一步的缺口蓝湖在团队里的定位其实就是“设计交付的中转站”。设计师把稿子传上去标注好尺寸、颜色、切图前端去上面取。它解决了“文件版本统一”的问题也在很长时间里解决了“人工测量标注”的问题。但它有一个天然的缺口蓝湖上的数据是给人看的不是给代码生成工具直接吃的。用 Cursor 这类 AI 编程工具写页面的时候我的常规流程是开一个蓝湖链接肉眼读取设计数据再把它们喂给 Cursor。说到这你就明白了前面那个“信息断层”其实根本没有消失只是从我脑子里借道走了一遍。我一度试过把蓝湖截图直接拖给 Cursor让它“看着办”。AI 确实能写出大概的布局可一旦涉及精确的颜色值、间距、阴影层级的对应它就很容易发挥“想象力”把设计稿里的数据变成它熟悉的风格。问题就出在图片里没有数据结构AI 只能猜。这也让我开始琢磨能不能让 Cursor 直接读取蓝湖上结构化的设计数据而不是靠截图残影去猜后来我了解到蓝湖开放了基于 MCP 协议的服务能力这件事就成了。Cursor 作为支持 MCP 客户端的编辑器可以通过标准协议去调用蓝湖的设计信息服务让 AI 在写代码的时候手里拿的是一份实时、可校验的设计数据。2. 为什么最终选了蓝湖 MCP 而不是“截图提示词”2.1 截图和大模型的“视觉还原”偏差来自哪里很多同学喜欢直接把设计截图丢给 AI然后说“照着写”。说实话这种方式在小 Demo 里挺唬人的一间卧室一张图AI 给你生成一个客厅看起来很像。可真到了生产项目的页面这种方式的偏差会在几个地方放大缩放比和物理尺寸截图拿到的宽度不是设计稿实际逻辑像素。前端要的是 CSS 像素AI 从截图反推时拿到的比例是估算性质的一旦涉及百分比和媒体查询边界偏差就出现了。命名色彩与色值截图里同一个品牌色在不同区域可能因为叠加了阴影或透明层呈现不同的 RGB。AI 如果“看色取色”会把同一个 token 拆成好几个近似颜色这是灾难。字体、行高、间距语义截图里看不到字重是 500 还是 600也看不到行高是基于多少倍率计算的。AI 只能用“常见做法”去猜结果就是看起来差不多量起来差很多。这些问题加在一起让“截图提示词”成为一个只适用于原型演示、不适用于交付级代码的方案。我试过在提示词里补充大量规格描述来尽量纠偏但提示词越长上下文越乱最后还是会被某些细节反杀。2.2 蓝湖 MCP 让我能传给 Cursor 的不再是图片而是设计数据MCP 的用户价值在于把“喂给 AI 的内容”从非结构化文本和图片升级成可命名的结构化数据。蓝湖 MCP 服务把设计稿里的颜色、字号、间距、组件规格、图层说明等内容包装成一个个可供 AI 调用的工具接口。我在 Cursor 里接入后AI 就可以通过“获取设计 Token”“获取页面结构”“获取选中元素的标注信息”这类工具调用实时拉取蓝湖项目里的设计数据。Cursor 写代码时就不再依赖截图了而是像开发时调用目己公司的接口一样直接取数。这个转变确实是根本性的。以前我说“颜色要 #1B6AFF”现在 AI 可以直接从蓝湖拉取 design token 数据得到的是一个已经同步过的规范值。而且这个过程是可回溯、可校准的设计师在蓝湖更新了标注后AI 下次拉到的就是新值不再存在“我手里的标注过期了”的尴尬。2.3 和官方 API 自建脚本相比MCP 省掉了什么也有人会问蓝湖本身有开放 API我写个脚本把设计数据拉下来再塞给 Cursor不也行吗行但是要维护的东西不少。API 鉴权要自己封装过期了要重刷数据结构要自己设计每次蓝湖更新字段都要同步维护拉取的结果要写文件、传上下文跨机器使用很不方便MCP 相当于把这一整套工作从应用层抽到了协议层 —— 鉴权、工具发现、参数传递、返回结果格式化都有标准约定。Cursor 能直接识别 MCP 服务里有哪些工具、工具需要什么参数返回的数据也会自动进入模型上下文。省掉的那部分就是自建脚本里最琐碎、最容易出问题的协议对接和鉴权处理。对于个人开发者来说这意味着接入成本从几天降到几小时对于团队来说这意味着工具链可以被多个成员共享不需要每人维护一套自己的拉数脚本。3. Cursor 接入蓝湖 MCP 的全部配置过程与踩坑记录3.1 连接前必须落实的前置条件和权限先别急着填地址我把连接前花在“准备”上的时间也说一下。很多人 MCP 接不上多半是前置条件没覆盖完。Cursor 版本MCP 是编辑器里比较新的能力建议把 Cursor 更新到较新版本。旧版本或者某些测试版会有菜单入口找不到的情况。如果你的 Cursor 还没更新过在设置里找到 Language 也可以顺便把界面切到中文团队成员操作起来阻力会小很多。蓝湖账号与组织权限你要连的蓝湖项目必须是你所在组织内可见的。个人版账号只能看到自己加的项目团队项目的权限配置在蓝湖组织设置里。项目文件位置蓝湖上的设计文件最好提前做好整理根目录的名称、关键页面的命名尽量稳定。AI 通过工具拉取文件时如果整个项目里几十个同名页面它识别起来会混淆。访问凭证蓝湖 MCP 服务的访问令牌需要在蓝湖后台生成。生成后注意它是敏感信息别直接贴在团队公开文档里。有一个容易被忽略的地方蓝湖的“分享链接权限”和“MCP 访问权限”是两回事。分享链接能让任何人看到页面但 MCP 工具一次能读取哪些文件、能看到什么层级的标注取决于你在蓝湖后台为这个 MCP 服务开通的数据范围。我一开始图省事只给了全组织权限后来觉得风险大又收成了指定项目权限。3.2 添加 MCP 服务器远程 URL 与本地进程两种方式Cursor 添加 MCP 服务器在设置界面里能找到 MCP 相关的入口。添加的方式有两种我分别说下。第一种远程 HTTP 方式推荐这种方式是把蓝湖 MCP 服务作为一个远程地址填进 Cursor。好处是不需要本地安装额外的依赖团队成员各自配置也很快适合多台机器共用同一套服务。在 Cursor 的 MCP 配置里新增一个服务器填写成类似下面的 JSON 结构{ mcpServers: { lanhu: { url: https://api.lanhuapp.com/mcp, headers: { Authorization: Bearer 你的访问令牌 } } } }提示这里的 url 只是示例形态蓝湖 MCP 的实际接入地址请以蓝湖官方文档发布的最新信息为准。不同时期的服务地址可能会有调整。第二种本地进程方式如果你更希望 MCP 服务跑在本机蓝湖方面也提供了本地运行的部署包通常是一条命令比如npx方式。配置时在 Cursor 里选择“本地进程”然后把启动命令填进去即可。我为什么推荐第一种因为团队协作时远程地址只要配一次大家复制相同的 JSON 就能用而本地进程方式每台机器都要安装依赖、处理版本问题新同事入职那天的配置成本会高不少。3.3 连接失败的三个常见原因我的接入过程不是一次成功的。前前后后折腾了一个下午最后归纳起来问题出在下面三个点你踩到哪个可以对号入座现象根因解决方式工具列表一直加载不出来Authorization 请求头带了单引号或多余空格规范填写访问令牌去掉多余空白连接成功但拉取数据提示无权限蓝湖 MCP 服务的数据范围没包含目标项目回到蓝湖后台调整项目授权团队网络环境复杂连接超时远程 MCP 服务请求被网络策略拦截检查代理设置必要时配置白名单还有一个小坑Cursor 的 MCP 配置中“类型”选错也会导致连接失败。如果你填的是一个 HTTP 地址却在类型里选了“本地进程”Cursor 会尝试用进程方式去执行这个地址结果自然是找不到命令。检查配置时报错信息要看“启动情况”那一栏不要只看第一行的连接状态。新增的服务器保存后Cursor 会给出一份可用的工具清单。我看到蓝湖 MCP 暴露出来的工具大致包含获取项目列表、获取页面详情、获取设计 Token、获取选中标注信息、获取资源下载地址等。工具的具体命名会随蓝湖服务版本更新有所变化核心是以“读设计数据”为主的一组接口。4. 接入后的工作流把设计稿变成 Cursor 的“上下文”4.1 项目级规则文件让生成的代码一开始就符合设计 token光把 MCP 接上还不够。如果不告诉 Cursor 怎么理解这些设计数据它拿到一堆 JSON 之后还是会按它自己的偏好去生成代码。这里的关键是驯化——通过项目级规则约束 AI 的产出方式。我在项目根目录建了.cursor/rules/design.mdc内容是按照我日常踩坑经验写的转换规则--- description: 蓝湖设计稿转代码规则项目初始化时自动加载 globs: [**/*.{tsx,jsx,css,less}] --- - 所有颜色值必须从蓝湖 MCP 拉取的设计 Token 映射不得自行调整或近似替代。 - 间距调整使用 4pt 网格对齐体系避免出现 2,3,7 这类非整数间距。 - 布局优先使用 flex 和 grid非必要不使用绝对定位实现静态效果。 - 响应式断点严格参考蓝湖页面标注里的断点数据禁止用习惯性的 768/1024 覆盖。 - 阴影、圆角、透明度如涉及效果叠加以蓝湖标注的有效值为准不要自行添加默认过渡。 - 生成组件时优先拆分子组件公共样式提取到样式表避免内联样式膨胀。这份规则文件的作用是让 Cursor 在生成代码上下文里多一层“确定性”。这类规则文件本身是通用约束AI 就能减少自由发挥的空间。4.2 实操拿到蓝湖链接让 Cursor 拉取并落码配置好之后真正干活时的交互流程是这样的第一步从蓝湖上复制目标页面的链接。注意是页面链接不是截图。 第二步在 Cursor 的对话框里告诉它“请读取这个蓝湖页面的设计数据并按照项目规则生成首页的完整代码。”然后把链接贴进去。 第三步Cursor 内部会调用蓝湖 MCP 的工具去拉取数据比如先获取项目信息、页面结构再顺手拉设计 token。 第四步生成代码。在这个过程中我实际观察到的行为是Cursor 会先输出一屏“我正准备读取蓝湖上的页面数据”然后调用工具拿到返回后再和我确认关键参数比如是否还原卡片列表、是否要接入现有路由最后才开始写代码。一个值得注意的技巧是不要让 AI 一次性生成整张完整的页面。页面里的区块多设计数据量大一次生成的上下文可能超出窗口限制导致后半段精度下降。我的做法是把页面拆成 Header、数据列表、筛选区、弹窗四个区块逐个让 Cursor 生成最后交给它汇总成完整页面。这样每一步的还原度都更容易检查出错也好定位。4.3 关键细节响应式断点、字体族、阴影就是“高保真”的胜负手在实操过程中你会发现颜色和间距反而是最容易还原的部分真正把“还原度”拉开差距的是下面这几个看着不起眼的点响应式断点很多前端同学习惯用 768、1024 这类老标准。蓝湖设计稿里设计师可能会在 1440、1280、390 这几个宽度各出一版布局。如果 AI 直接套用习惯断点中等屏幕下的还原会明显走样。我在规则文件里明确要求 Cursor 以蓝湖标注的断点为唯一依据实践下来效果提升最明显的就是这一段。字体族设计稿里的字体往往用的是品牌的字体栈本地没装就会回退到系统字体。AI 生成时如果只写font-family: PingFang SC到 Windows 机器上就变味了。正确做法是生成字体栈fallback 链我在规则里补充了系统字体回退的写法跨端表现更稳。阴影层级蓝湖上标注的阴影数据通常包含多层叠加比如一层的投影 一层的内阴影。AI 生成时经常只取第一层导致卡片浮起效果不够。这一点可以通过检查 MCP 返回的结构化数据来发现——数据里如果有多个 shadow 段说明设计稿本身做了多层效果。这些点的共性是什么它们都是“图片肉眼能看到、但语言描述很难说清楚”的细节。传统方式下前端要根据视觉经验一个个手调MCP 方式下AI 可以从源头读取这些参数并且因为有了规则约束便不会轻易忽略。5. 用两周实测数据复盘还原度确实上去了但别指望全自动5.1 真实对比我记录的还原率变化接入蓝湖 MCP 之后我拿一个内部的报表项目做了两周试运行。每周和设计师做一次还原度走查评判维度是布局、颜色、间距、字号、交互状态五个维度每项按下发分数 1 到 10 分评估取平均。维度接入前截图提示词接入后第一周接入后第二周布局结构7.58.59.2颜色准确8.29.59.8间距细节7.08.89.4字号字体7.89.09.5交互状态6.58.08.8平均7.48.89.3两周后设计师主动说过的一句话让我印象深刻“你最近给的东西基本不用怎么改了第一次给我看的就是我想要的样子。”但必须诚实地说这个提升不是白来的。第一周的开始阶段还原度其实只到 8.8因为 AI 会把某些复杂组件理解成简化版本。到了第二周我把常见的简化模式补充进了规则文件才稳到 9.3 左右。这说明 MCP 提供的是“数据底座”真正的还原度提升还要靠规则迭代去磨。5.2 仍然会翻车的三个具体场景即便 MCP 接入顺利下面这三个场景我目前仍然没有实现全自动每次都要手动补刀第一个交互动效和过渡。蓝湖上设计师通常只标注了静态样式偶尔会给关键手势和页面转场的描述。AI 如果只凭设计数据很容易把动效忽略掉或者生成离谱的“通用动画”。我的做法是在规则里单独一类“动效摘自需求文档”并且在生成后人工核对关键过渡。第二个图标和素材文件。MCP 可以把图片资源地址给到 Cursor但如果蓝湖上的素材是 SVG 源文件AI 拉过去后未必能直接拿来用尤其是含多个渐变或高光的图标。出于性能考量也可能需要前端手动切成字体图标。这类“素材加工”还不是纯流程能搞定的。第三个特殊字体与排版。设计稿里如果用了稀缺的 Web 字体本地没预加载时 AI 生成的代码会触发字体回退导致换行和字距全部跑偏。解决方式只能是项目里显式引入字体资源而不是指望 AI 自动做好。这三个场景的共同特征是它们的信息要么不在设计数据里要么数据能读但转化链路复杂。换句话说MCP 只是把静态设计读进来了动效逻辑和素材加工是另一层上下文需要后续方案专门去补。5.3 把“AI 生成代码”变成“可交付代码”的最后一道人工检查接入 MCP 之后“人工检查”的环节并没有消失但检查的内容发生了变化。以前我逐行手写代码检查的是样式是否写对现在 AI 出初稿我检查的是组件拆分、状态管理、事件绑定这类工程问题。我现在的最小检查清单是设计数据核对颜色、间距、断点是否和 MCP 拉出的值一致组件结构是否生成了过多行内样式公共部分是否抽成样式类状态逻辑弹窗开合、列表加载、错误处理是否完整而不是只有视觉还原资源引用图片、字体、图标是否有可用的线上地址这套人工检查其实不需要花很多时间因为前两项在规则文件里约束后已经很少出错了重点精力放在后两项也就是“视觉之外的工程质量”上。6. 给团队的落地建议别把 MCP 当“一键生成”要当“设计上下文”6.1 让设计师、前端、AI 三方对同一份数据负责我挺怕团队引入这个方案后出现一种新混乱前端依赖 AI设计师直接改 AI 的产出最后设计稿反而没人维护了。所以我把流程定成了甲方乙方清楚的模式设计师负责在蓝湖上维护设计稿包括标注数据、断点数据和组件命名。这是团队里唯一的信息源。前端负责维护.cursor/rules里那些 AI 生成规则以及资源引用和组件拆分。AI做的只是一件事在前后端之间做“数据到代码”的转换而不是生产新的设计规范。这一条特别重要。MCP 接上后AI 有了一个数据源如果团队因为觉得省事就不再去蓝湖同步设计稿维护那 MCP 拉到的数据就会变成旧数据问题的性质就变了。项目最终要形成迭代节奏蓝湖更新 → AI 拉取 → 代码更新别让人工散乱路径从中截断。6.2 建议建立的验收基线团队里如果每个人都有 MCP 权链接过去效果会很宽松但没有验收机制就去检查漏网场景就容易滑回去。我自己在项目里做的验收基线主要有每次页面开发完成需要附带一份由 Cursor 自己填写的“还原度自查清单”里面列出拉取到的设计 token 值、核对过的断点、未覆盖的动效。每周由设计师做一次抽查走查抽查比例大概 30%覆盖新增页面和改动较强的模块。MCP 拉取失败或数据缺项时前端必须标记反馈不能默默用习惯值填充。这套验收的价值在于它把“还原了吗”从口头询问变成了一个数据和规则支撑的工作链条。设计师不再需要追着前端问一个页面像不像因为交付物里已经带上了“这份代码到底拿了哪些设计数据”的自证信息。6.3 下一步能扩的方向接入蓝湖 MCP 只是第一层。我们在实际使用中发现设计 token 一旦进入 AI 上下文很多东西都可以延伸比如把设计 token 同步到样式变量文件在 CI 里做设计数据与代码变量的一致性校验或者把 MCP 拉取的能力封装成团队内部的“设计规范检查”工具。这些方向并不复杂都是在同一个数据链路里做文章但能解决的问题会从“还原度高”升级到“规范和实现的一致性”。把 Cursor 接到蓝湖上并不是说 AI 从此就能替我把页面写得和稿子一模一样而是说从设计到代码之间的信息传递终于有了稳定通道。我自己这两周最深的体会是技术的终点不是替代谁而是让之前那种靠追问、靠记忆、靠第六感维护“还原”的协作方式自然地从流程里消失。下次设计师再问我“还原了吗”我就把 Cursor 的生成记录和自查清单一并甩过去——这比我说一百句“还原了”都有用。
阅读完成 · 觉得有帮助？
