1. 从“还原了吗”这句追问说起做前端的人对这句话应该都不陌生。设计稿交付之后设计师隔三差五就会在群里冒一句“还原了吗”或者更让人头皮发麻的版本“这个间距怎么和设计稿不一样”每次听到这句话我都得切回浏览器、打开开发者工具、量间距、对颜色、截图发过去然后等对方确认。来来回回一天的时间就这么碎掉了。这个项目要解决的就是这件事。我把 Cursor 和蓝湖接了起来让 AI 能直接读到设计稿的结构化数据然后自动生成对应的前端代码。设计师再问“还原了吗”我可以直接把生成结果甩过去甚至让他们自己看代码对比。核心关键词就几个Cursor、蓝湖、MCP、前端、设计稿。适合有一定前端基础、正在用或准备用 Cursor 做开发的同行参考也适合想了解 MCP 协议怎么落地到实际工作流的人。先说清楚这个方案能做什么它能让 Cursor 通过 MCP 协议读取蓝湖设计稿的图层信息、样式参数和标注数据然后基于这些数据生成 HTML、CSS 或者组件代码。不能做什么它不会自动帮你处理复杂的交互逻辑也不会替你做设计决策生成结果仍然需要人工校验和调整。但光是“不用手动量间距、不用一个个复制色值”这一点就已经值回票价了。我踩过的坑不少从 MCP 服务部署到 Cursor 配置再到实际生成效果的调优中间折腾了好几天。下面把整个思路、操作步骤和避坑经验完整梳理一遍尽量让后来的人少走弯路。2. 整体方案设计与技术选型拆解2.1 为什么选 MCP 而不是直接调 API蓝湖本身有开放平台接口理论上你可以写个脚本直接调它的 API 拿数据然后喂给 Cursor。我一开始也想过这条路但很快就放弃了。原因有三个第一蓝湖的 API 需要处理鉴权、分页、数据格式转换写起来工作量不小第二Cursor 本身不支持直接执行外部脚本获取上下文你得手动复制粘贴第三每次设计稿更新你都得重新跑一遍脚本。MCP 协议的出现改变了这个局面。MCP 全称 Model Context Protocol是一个让 AI 模型和外部工具、数据源之间建立标准化连接的协议。你可以把它理解成 AI 世界的“USB 接口”——只要双方都支持这个协议就能即插即用。Cursor 从某个版本开始支持 MCP意味着你可以把蓝湖封装成一个 MCP ServerCursor 就能直接读取蓝湖的数据不需要你手动搬运。这个方案的核心优势在于实时性和自动化。设计稿一更新Cursor 重新读取一次就能拿到最新数据不需要你重新导出、重新复制。而且 MCP 是双向的理论上 AI 不仅能读还能写回——虽然目前蓝湖的 MCP 服务主要支持读取但未来扩展空间很大。2.2 蓝湖 MCP 服务的部署方式选择蓝湖官方和社区都有 MCP 服务的实现方案我实际试过两种一种是本地部署 MCP Server另一种是使用蓝湖提供的云端 MCP 服务。两种方式各有优劣选择哪种取决于你的团队规模和安全要求。本地部署的好处是数据不出内网适合对数据安全要求高的团队。你需要一台常驻的机器或者本地开发机来跑这个服务配置稍微麻烦一点但可控性强。云端服务的好处是开箱即用不需要自己维护服务器缺点是设计稿数据需要经过第三方服务器有些团队可能不接受。我最终选了本地部署因为我们的设计稿涉及一些未公开的产品功能走云端不太放心。本地部署的核心步骤包括安装 Node.js 环境、拉取 MCP Server 代码、配置蓝湖的访问凭证、启动服务并监听端口。下面会详细展开。2.3 Cursor 侧的配置逻辑Cursor 连接 MCP Server 的方式是在设置里添加一个 MCP 配置项指定 Server 的地址和认证信息。这里有个关键点Cursor 支持两种连接方式一种是 stdio标准输入输出一种是 SSEServer-Sent Events。stdio 方式适合本地进程直接通信SSE 方式适合远程服务。我一开始用的是 stdio因为配置简单但后来发现一个问题每次 Cursor 重启都要重新拉起 MCP Server 进程偶尔会卡住。换成 SSE 之后稳定了很多因为 MCP Server 是独立运行的Cursor 只是作为一个客户端去连接。如果你也遇到连接不稳定的情况可以试试换成 SSE 方式。配置的时候需要注意 token 的格式和有效期。蓝湖的访问凭证一般是有有效期的过期之后需要重新生成。我建议把这个凭证配置成环境变量而不是硬编码在配置文件里方便轮换。3. 核心细节解析与实操要点3.1 蓝湖设计稿的数据结构长什么样要让 AI 正确理解设计稿首先得知道蓝湖返回的数据是什么结构。蓝湖的 MCP 服务通常会返回一个 JSON 格式的图层树每个节点包含图层名称、类型、位置、尺寸、样式等属性。比如一个按钮图层会包含它的 x/y 坐标、宽高、背景色、圆角、字体、字号、字重、行高、内边距等信息。这些数据看起来很多但 AI 处理起来其实很擅长。关键在于你要告诉它怎么映射哪个字段对应 CSS 的哪个属性。比如蓝湖的backgroundColor对应 CSS 的background-colorborderRadius对应border-radiusfontSize对应font-size。这些映射关系需要在提示词里说清楚否则 AI 可能会猜错。我实测下来蓝湖返回的数据里有两个地方容易出问题。一个是颜色格式有时候是 RGBA有时候是十六进制需要统一转换。另一个是尺寸单位蓝湖默认用像素但如果你要做响应式布局需要让 AI 自己换算成 rem 或者百分比。这些细节在后面讲提示词设计的时候会具体说。3.2 MCP Server 的部署与配置细节本地部署 MCP Server 的第一步是确认环境。你需要 Node.js 18 以上版本因为很多 MCP 相关的库依赖较新的运行时特性。安装完成后用 npm 或者 yarn 拉取 MCP Server 的代码仓库。目前社区有几个开源的蓝湖 MCP 实现选择 star 数较多、最近有更新的那个。拉下来之后找到配置文件通常是一个.env文件或者config.json。你需要填入蓝湖的访问凭证这个凭证在蓝湖的个人设置里可以生成。注意凭证的权限要包含“读取设计稿”这一项否则 MCP Server 拿不到数据。配置完成后启动服务。如果是 stdio 模式直接运行启动命令即可如果是 SSE 模式需要指定监听端口比如--port 3001。启动成功后你会看到日志输出“MCP Server listening on port 3001”之类的信息。这时候可以用 curl 测试一下接口是否正常比如发一个简单的请求看能不能返回数据。注意如果你在公司内网部署需要确认防火墙没有拦截这个端口。我有一次折腾了半天最后发现是安全组没放行。3.3 Cursor 连接 MCP 的配置方法Cursor 的 MCP 配置入口在设置里的“Features”或者“Extensions”部分不同版本位置可能略有差异。找到“MCP Servers”选项点击添加。如果你用的是 SSE 模式填入 Server 的地址比如http://localhost:3001/sse然后填入 token。如果是 stdio 模式需要填入启动命令和参数。配置完成后Cursor 会尝试连接。连接成功后你在对话里就能看到 MCP 工具可用的提示。这时候你可以直接问 Cursor“帮我读取蓝湖上这个设计稿的图层信息”它会自动调用 MCP 工具去获取数据。这里有个小技巧把常用的设计稿链接保存成 Cursor 的快捷指令这样每次不用手动输入链接。另外如果你有多个设计稿需要同时处理可以在配置里添加多个 MCP Server 实例分别对应不同的蓝湖项目。3.4 提示词设计的核心原则MCP 只是打通了数据通道真正决定生成质量的是提示词。我试过很多版本最后总结出几个原则。第一明确输出格式。你要告诉 AI 生成什么是纯 HTMLCSS还是 React 组件还是 Vue 单文件组件。不同格式的生成逻辑差别很大提前说清楚能避免返工。第二指定样式方案。是用 Tailwind CSS还是 CSS Modules还是 styled-components。我用的是 Tailwind因为生成速度快而且 AI 对 Tailwind 的类名掌握得比较好。第三给出映射规则。比如“蓝湖的 fontSize 字段直接对应 text-{size} 类名”“backgroundColor 需要转换成 Tailwind 的 bg-{color} 格式”。这些规则越具体生成结果越准确。第四要求保留语义化标签。AI 有时候会生成一堆 div你需要明确告诉它用 header、main、section、button 这些语义化标签。第五要求处理边界情况。比如文字过长时怎么截断、图片加载失败时怎么显示占位符。这些细节如果不提前说AI 不会主动处理。4. 实操过程与核心环节实现4.1 环境准备与依赖安装先列一下我用的环境macOS 14Node.js 20.11Cursor 0.45 版本蓝湖 MCP Server 用的是社区开源的lanhu-mcp项目。Windows 环境理论上也可以但路径处理和进程管理会有些差异建议用 WSL。安装步骤# 确认 Node.js 版本 node -v # 应该输出 v18.x 或更高 # 克隆 MCP Server 仓库 git clone https://github.com/xxx/lanhu-mcp.git cd lanhu-mcp # 安装依赖 npm install # 复制配置文件模板 cp .env.example .env然后编辑.env文件填入蓝湖的凭证LANHU_ACCESS_TOKENyour_token_here LANHU_API_BASEhttps://api.lanhuapp.com PORT3001凭证的获取方式是登录蓝湖进入个人设置找到“开放平台”或者“API 访问”生成一个访问令牌。注意选择“只读”权限避免误操作修改设计稿。4.2 启动 MCP Server 并验证配置完成后启动服务npm run start:sse如果一切正常你会看到类似这样的输出MCP Server started Listening on port 3001 SSE endpoint: http://localhost:3001/sse这时候用 curl 验证一下curl -N http://localhost:3001/sse如果返回一串事件流数据说明服务正常运行。如果报错检查端口是否被占用、凭证是否有效。实操心得我建议用 pm2 或者 systemd 把这个服务做成守护进程不然终端一关服务就停了。pm2 的配置很简单pm2 start npm --name lanhu-mcp -- run start:sse。4.3 Cursor 侧配置与连接测试打开 Cursor进入设置找到 MCP 配置。添加一个新的 Server{ mcpServers: { lanhu: { url: http://localhost:3001/sse, token: your_token_here } } }保存后Cursor 会自动尝试连接。你可以在对话窗口输入/mcp查看连接状态。如果显示已连接就可以开始使用了。测试方法是在 Cursor 对话里输入“读取蓝湖设计稿 https://lanhuapp.com/xxx 的图层信息”看它能不能返回数据。如果返回了 JSON 格式的图层树说明整条链路已经打通。4.4 生成前端代码的完整流程假设你有一个设计稿包含一个登录页面。操作流程如下第一步在 Cursor 里新建一个文件比如LoginPage.tsx。第二步输入提示词请读取蓝湖设计稿 [链接] 的图层信息然后生成一个 React 组件。 要求 1. 使用 Tailwind CSS 进行样式编写 2. 使用语义化标签 3. 颜色值从设计稿中提取不要自己编 4. 间距使用设计稿中的实际数值转换成 Tailwind 的 spacing 类名 5. 字体大小和字重严格按照设计稿 6. 生成后附上每个主要元素的样式对照表第三步等待 Cursor 调用 MCP 工具获取数据并生成代码。这个过程通常需要 10 到 30 秒取决于设计稿的复杂度。第四步检查生成结果。重点看几个地方颜色是否准确、间距是否一致、字体是否匹配、布局是否合理。如果有问题直接在对话里指出让 AI 修正。我实测下来一个中等复杂度的页面大约 20 个图层首次生成准确率大概在 70% 左右。剩下的 30% 主要是间距微调、特殊效果比如渐变、阴影和响应式处理。但即便如此也比手动写快了很多。4.5 样式对照表的生成与使用生成代码的同时我让 AI 输出一个样式对照表格式如下元素设计稿属性生成代码是否一致登录按钮背景色 #1890FFbg-[#1890FF]是登录按钮圆角 8pxrounded-lg是输入框边框 1px solid #D9D9D9border border-[#D9D9D9]是标题字号 24px 字重 600text-2xl font-semibold是这个表格的好处是你可以快速定位不一致的地方然后针对性修正。设计师问起来的时候你也可以直接把这个表发过去比截图更有说服力。5. 常见问题与排查技巧实录5.1 连接类问题排查问题一Cursor 显示 MCP Server 连接失败。排查思路先确认 MCP Server 是否在运行用curl测试端口是否可达。如果端口不通检查防火墙和安全组。如果端口通但 Cursor 连不上检查 token 是否正确、是否过期。还有一个容易忽略的点Cursor 的 MCP 配置里URL 末尾是否需要加/sse不同版本的 Cursor 要求不一样可以两种都试试。问题二连接成功但读取设计稿返回空数据。这种情况通常是凭证权限不够或者设计稿链接不对。确认凭证有“读取设计稿”权限确认链接是蓝湖的分享链接而不是编辑链接。另外有些设计稿设置了访问密码需要在 MCP Server 配置里额外填入密码。问题三服务运行一段时间后自动断开。SSE 连接默认有超时时间长时间没有数据传输会被断开。解决办法是在 MCP Server 里配置心跳机制定期发送心跳包保持连接。或者改用 stdio 模式但 stdio 模式需要 Cursor 每次启动时重新拉起进程。5.2 生成质量类问题排查问题四生成的颜色和设计稿不一致。蓝湖返回的颜色格式可能是 RGBA而 Tailwind 需要十六进制。你需要在提示词里明确要求 AI 做格式转换。另外有些设计稿使用了透明度AI 可能会忽略这一点。建议在提示词里加上“如果颜色包含透明度请使用 rgba 格式”。问题五间距总是差几个像素。这是最常见的问题。原因是蓝湖的坐标是相对于父容器的而 AI 可能会把它当成绝对定位。解决办法是在提示词里说明“请根据图层树计算相对间距不要直接使用绝对坐标”。另外Tailwind 的 spacing 刻度是 4px 的倍数如果设计稿用的是 5px、10px 这种非标准值需要让 AI 做近似处理或者使用自定义值。问题六生成的代码结构混乱div 嵌套太深。这是 AI 的通病。解决办法是在提示词里明确要求“使用语义化标签避免不必要的 div 嵌套保持 DOM 结构扁平”。如果生成结果仍然不理想可以要求 AI 先输出一个结构大纲确认后再生成代码。问题七图片资源无法加载。蓝湖的图片资源需要额外的鉴权才能访问。MCP Server 通常会返回图片的临时链接但这些链接有有效期。建议在生成代码时让 AI 把图片链接替换成占位符后续手动替换成项目中的实际资源。5.3 性能与稳定性优化问题八设计稿图层太多生成速度很慢。一个复杂页面的图层可能上百个AI 处理起来确实吃力。我的做法是分模块生成先让 AI 读取整个设计稿输出一个模块划分方案然后逐个模块生成代码。这样每次处理的图层数量可控生成质量也更稳定。问题九MCP Server 内存占用越来越高。这通常是缓存没有清理导致的。蓝湖的图层数据比较大如果 MCP Server 把所有请求都缓存下来内存会持续增长。建议在配置里设置缓存过期时间比如 5 分钟。或者定期重启服务。问题十多人同时使用时互相干扰。如果团队多人共用一个 MCP Server可能会出现请求排队或者数据混淆的问题。解决办法是每个人在本地跑一个 MCP Server 实例或者用不同的端口区分。如果必须共用建议加一个请求队列机制避免并发冲突。5.4 常见问题速查表问题现象可能原因解决方法连接失败服务未启动/端口不通检查进程和防火墙返回空数据凭证权限不足重新生成只读凭证颜色不一致格式未转换提示词要求 RGBA 转 HEX间距偏差绝对坐标误用要求计算相对间距结构混乱缺少语义化要求提示词明确标签规范图片加载失败链接过期替换为占位符生成速度慢图层过多分模块生成内存增长缓存未清理设置缓存过期时间6. 实际使用中的经验与建议这个方案跑通之后我最大的感受是AI 辅助还原设计稿这件事瓶颈不在 AI 的能力而在数据的质量和提示词的精度。蓝湖返回的数据越规范生成结果越好提示词写得越具体返工越少。有几个经验值得分享。第一不要指望一次生成就完美把 AI 当成一个速度很快但需要指导的初级工程师你的提示词就是需求文档。第二建立自己的提示词模板库把常用的页面类型登录页、列表页、详情页、表单页的提示词固化下来下次直接复用。第三生成结果一定要人工校验尤其是交互逻辑和边界情况AI 目前还处理不好。另外MCP 协议本身还在快速演进蓝湖的 MCP 服务也在更新。建议定期关注社区动态看看有没有新的功能和优化。我最近看到有人在尝试把 Figma 也接入 MCP思路类似如果你用的是 Figma 而不是蓝湖可以参考同样的架构。最后说一个实际收益以前一个中等复杂度的页面从设计稿到前端代码大概需要半天到一天。现在用这套流程首次生成加上人工调整大概两到三个小时就能完成。设计师再问“还原了吗”我可以直接把代码链接发过去让他们自己看。省下来的时间用来处理更复杂的交互逻辑和性能优化这才是前端真正有价值的地方。
