每当我把设计稿还原得七七八八设计师就会走过来问一句“还原了吗”这一问几乎成了前端开发的“催命符”。直到我把 Cursor 接到了蓝湖上这个局面才彻底改观不是靠截图、不是来回传文件而是让 AI 编程助手直接“看见”设计稿里的真实数据——字号、间距、颜色、切图统统变成它写代码时可以引用的上下文。这篇文章不是讲概念是我自己从零到一部署蓝湖 MCP 服务、把它接进 Cursor、并且让这套流程真正跑在项目里的完整记录。适合正在被“还原度”折磨的前端开发者也适合想搞清楚 MCP 到底能干什么、但不想只停留在“听说过”这个层面的人。你会看到我怎么选型、怎么配置、踩了哪些坑以及最终这套工作流帮我省掉了多少来回确认的功夫。1. 先搞明白这件事的本质还原度问题的根子在哪1.1 “还原了吗”为什么是句恐怖提问做过前端的都懂这句话背后是一整套信息损耗链路。设计师在蓝湖上传设计稿标了注、切了图前端拿到的是一个静态页面真正要写代码的时候有几个信息是必须反复核对的这个按钮的圆角是 8px 还是 6px主色到底是#1B6BFF还是#1A6BFF间距是 16px 还是 20px标注图上写得明明白白但人眼扫过去十个里有九个会看错或者记错。更麻烦的是沟通成本。设计更新了某个模块不会有人专门跑来告诉你“第三屏的卡片间距改了”你只能靠设计师追问“还原了吗”的时候才发现自己按老数据写了两天。传统流程里解决这个问题靠的是“细心”但人不可能一直保持 100% 细心尤其是在连续切十几个页面的时候。我当时的处境就是这样蓝湖上躺着整套设计稿我这边对着 Cursor 写代码每次写到一个新组件就得切出去打开蓝湖看标注再切回来继续写。来回切窗口的时间加起来比写代码还多还容易看漏参数。所谓“还原”本质上不是技术难是信息搬运的效率太低。1.2 MCP 在这里扮演的是“翻译官”角色MCP 的全称是 Model Context Protocol翻译过来就是模型上下文协议。你不需要背这个概念只要理解一句话它让 AI 工具能够调用外部数据源的工具接口相当于给 Cursor 装了一只可以伸进蓝湖数据库的手。类比一下以前的 AI 编程助手像是坐在你旁边听你描述需求的程序员你说“按钮用蓝色”它就猜一个蓝色现在通过 MCP它自己就能打开设计标注文件看到真正的色值是#2B5AF7间距是 24px然后直接按这个数据生成代码。从“听你说”变成“自己看”这就是质的区别。蓝湖本身有开放 APIMCP Server 就是中间那层胶水把蓝湖的接口包装成 Cursor 能理解的工具列表。部署好之后你在 Cursor 对话框里可以直接说“读取当前项目的设计稿信息”它就能返回真实的样式数据。设计师再问“还原了吗”你只需要回一句“让 Cursor 自己对照设计稿检查过了”。2. 蓝湖 MCP 服务怎么部署从零开始的操作记录2.1 前置条件与工具准备动手之前先把需要准备的清单列齐免得部署到一半发现少东西。我用的是 macOS 环境Windows/Linux 操作大同小异命令略有区别我会在对应位置标注。一个蓝湖账号并且要有对应项目的访问权限。团队版或企业版通常才有开放 API 的权限个人免费版能拿到的数据有限这个要提前跟管理员确认蓝湖开放平台的密钥一般是 Access Key 和 Secret Key 的组合有的版本叫 Token具体以官方控制台为准Docker推荐用容器跑省去本地环境依赖的麻烦或者 Node.js 18 的环境Cursor 版本建议 0.80 以上旧版本对 MCP 的支持不完整容易出现“服务配置了但工具列表为空”的怪问题能访问蓝湖的网络环境这个听起来像废话但公司内网限制 API 域名的情况我见过不止一次务必先确认最后一条在终端里ping一下蓝湖的 API 域名能通再往下走。很多人在部署环节卡了一晚上最后发现是内网把域名拦了服务起不来Cursor 端自然一片红。2.2 Docker 方式部署推荐路线我推荐 Docker 部署因为蓝湖 MCP 服务依赖一些 Python 包和 Node 模块直接用本地环境跑容易因为版本冲突搞得一团糟。容器化之后镜像里什么都有起一个容器就完事。先说镜像。不同的 MCP 提供方可能发布不同名称的镜像以你实际使用的版本为准我这里用一个通用的占位名来说明整个流程# 拉取镜像 docker pull lanhu-mcp-server:latest # 启动容器 docker run -d \ --name lanhu-mcp \ -p 8231:8231 \ -e LANHU_ACCESS_KEY你的AccessKey \ -e LANHU_SECRET_KEY你的SecretKey \ -e LANHU_API_BASEhttps://api.lanhuapp.com \ lanhu-mcp-server:latest解释几个关键参数。-p 8231:8231是端口映射宿主机 8231 端口映射到容器内 8231Cursor 连的是宿主机的这个端口。LANHU_ACCESS_KEY和LANHU_SECRET_KEY是鉴权凭证相当于你打开蓝湖数据柜的钥匙一定不要泄露更不要提交到 git 仓库里。启动之后用docker logs lanhu-mcp看日志如果出现类似MCP server listening on 8231或者SSE endpoint ready的字样说明服务已经起来了。这里要特别提醒MCP 服务有两种主流协议形态一种是 JSON-RPC over HTTP一种是 SSEServer-Sent EventsCursor 对这两种的配置方式略有区别后面我会详细说明。还有一点很多人会忽略Docker 容器的时间默认是 UTC如果后面你排查问题发现时间对不上记得在启动命令里加-e TZAsia/Shanghai。2.3 Node.js 本地部署方式备选方案如果你不想用 Docker或者公司服务器不让你跑容器也可以直接用 Node.js 裸跑。先把项目克隆到本地git clone https://github.com/your-lanhu-mcp/lanhu-mcp-server.git cd lanhu-mcp-server npm install安装依赖之后需要创建一个.env文件内容如下LANHU_ACCESS_KEY你的AccessKey LANHU_SECRET_KEY你的SecretKey LANHU_API_BASEhttps://api.lanhuapp.com PORT8231注意.env文件默认被 gitignore 忽略这是好事千万别为了省事给它改名不然下次提交代码可能把密钥带出去。然后执行npm run start如果一切正常你会看到类似MCP Server running at http://localhost:8231的输出。裸跑的优点是方便调试改代码热重载缺点是本地 Node 环境依赖容易踩坑比如 OpenSSL 版本不对导致启动失败我就遇到过一次报错信息像天书一样后来升级 Node 到 20 LTS 才解决。2.4 验证服务是否真的可用服务起来之后不要急着配 Cursor先用浏览器或者命令行验证一下接口是否正常。在浏览器里打开http://localhost:8231/mcp如果能看到一个 JSON 响应或者一个可用的 HTTP 端点说明至少证明服务进程是活的。严谨一点的做法是用 curl 请求工具列表接口curl -X POST http://localhost:8231/mcp \ -H Content-Type: application/json \ -H Authorization: Bearer 你的Token \ -d {jsonrpc:2.0,id:1,method:tools/list}如果返回里包含tools数组里面列了类似get_design_info、list_projects、get_component_styles这样的工具名说明 MCP 服务已经正确接上了蓝湖的 API。这一步很关键因为很多时候推进展不了不是 Cursor 的错是服务本身就没起来你却在那边折腾半天 Cursor 配置。3. 在 Cursor 里把蓝湖 MCP 配起来3.1 Cursor 的 MCP 配置入口和方式Cursor 的 MCP 功能藏得不算深点击左下角设置图标找到MCP标签页就能看到服务管理界面。这里有两种配置路径一种是内置的傻瓜式添加另一种是手动写配置。傻瓜式添加适用于有现成服务市场或者一键安装源的情况可能是输入一条安装命令让 Cursor 自动拉起本地服务。手动配置则适用于你已经像上面那样自己部署好了服务需要把它注册进 Cursor。手动配置时需要打开配置文件不同版本位置略有不同一般是点击 MCP 页面里的Configure MCP Servers按钮会打开一个 JSON 配置文件。在这里添加一段{ mcpServers: { lanhu: { command: docker, args: [run, --rm, -i, -p, 8231:8231, lanhu-mcp-server:latest], env: { LANHU_ACCESS_KEY: 你的AccessKey, LANHU_SECRET_KEY: 你的SecretKey } } } }这段配置的意思是让 Cursor 直接拉起一个 Docker 容器来跑 MCP 服务这种方式的好处是 Cursor 启动时自动起服务不用你手动 docker run。但前提是你的 Docker 环境配置好了否则 Cursor 这边会一直显示连接失败。3.2 用远程端点方式配置如果服务已经在远端运行如果你的 MCP 服务不是跑在本机而是放在一台内网服务器或者云主机上那就要换一种配置方式直接用 HTTP 端点连接。格式一般是{ mcpServers: { lanhu: { type: http, url: http://192.168.1.100:8231/mcp, headers: { Authorization: Bearer 你的Token } } } }这里要说明一下不同时期 Cursor 对 MCP 的配置 schema 不一样有的版本用type: sse有的用url直接识别。最稳妥的办法是打开 MCP 配置页面看界面提供的表单字段有哪些按着填总不会错。如果界面里就是简单的Name、URL、Headers那就直接填就好。配完之后最重要的一步点击Enable开关或者刷新按钮让 Cursor 真正加载这个服务。加载完成后服务名旁边会显示绿灯和工具数量。如果显示红色或者Error把鼠标悬停上去看具体报错不要凭感觉乱改。3.3 验证 Cursor 里能不能读到设计数据服务显示连接成功只是第一步验证它能不能真的拿到数据最直接的方法是在 Cursor 对话框里输入一句自然语言指令“读取项目 XX 的设计稿信息列出首页头部区域的背景色、标题字号和按钮圆角。”如果配置正确Cursor 会像有了超能力一样直接返回实际设计参数而不再是它凭空猜测的“我建议用 #333”。我第一次看到它准确说出#1868F4和border-radius: 10px的时候说实话有点头皮发麻因为我知道这远远超出了常规 AI 助手的知识能力——它不是猜的是读了蓝湖上的真实标注。如果返回的是“抱歉我无法访问设计稿数据”之类的回答不要慌大概率是鉴权问题或者工具调用权限没开。检查一下蓝湖开放平台的权限设置里是否有开启对应应用的 API 访问范围以及 Token 是否有效。还有一个常见原因是Cursor 的 Agent 模式没有把 MCP 工具纳入自动调用范围需要手动指定使用某个工具。4. 接好之后的真实工作流从“猜着写”到“对着写”4.1 用自然语言直接读取设计数据接好蓝湖 MCP 之后最爽的改变是我可以丢掉“切出去看标注”这个动作完全在 Cursor 里完成信息获取。比如我正在写一个卡片组件直接在对话框里输入“从蓝湖读取‘会员中心-卡片列表’的设计稿提取卡片的背景色、圆角、内边距、阴影参数并生成对应的 Tailwind 类。”以往这种需求我得去蓝湖手动翻图层找到对应样式面板逐项抄下来。现在 Cursor 自己去调接口把参数返回给我我只需要看着它生成的代码确认是否符合需求。整个体验更像是在“审查”而不是“打样”。这里有个细节技巧指令里要说清楚“读取设计稿”而不是“帮我设计一个卡片”。因为 MCP 工具是偏工具调用的你得给 AI 一个明确的动作指令它才会去调用那个工具。含糊的说法容易让它觉得自己该“发挥创意”那就跟整个初衷背道而驰了。4.2 自动校验组件与设计稿的差异比生成代码更香的是反向校验。以前写完组件靠肉眼对照设计稿哪里有偏差只能凭感觉。现在你可以直接对 Cursor 说“检查当前这个 button 组件的样式和蓝湖设计稿里的 button 组件是否一致列出所有差异。”效果相当于有个自动化的“还原度巡检员”。背景色差了 1 个色值、字体大小差了 2px、圆角从 8px 变成了 10px它都能给你精确列出来。我实际测试下来它能发现非常细小的差异有些是我肉眼根本看不出来的比如#1A6BFF和#1B6BFF的区别写代码时很容易带过去它却能抓出来。但这个功能对设计稿数据的完整性有要求如果你的设计稿在蓝湖上没有规范标注很多样式值缺失那它就无从比对。所以为了让它当好巡检员前期的规范标注功夫要做足。4.3 设计更新后的同步效率提升设计稿不是一成不变的产品经理和设计师隔三差五会改需求。传统模式下一个模块的样式变了前端要等设计师口述或者看更新后的标注然后手动去改代码。现在我可以直接对 Cursor 说“蓝湖上‘首页金刚区’的设计已更新读取最新设计稿参数对比旧版列出变化点。”它能把前后差异列成清单图标尺寸从 44px 变成 48px背景色从浅灰改成浅蓝间距从 12px 调整为 16px。我照着清单改代码几分钟搞定。这种效率提升对高频迭代的项目来说是质变——你再也不用担心“我不知道设计改了”这种事了MCP 就是你派驻在蓝湖上的观察哨。5. 常见问题与排查技巧实录5.1 高频问题速查表把自己部署和用别人经验收集到的问题整理成表按出现频率排个序方便你直接对号入座问题现象可能原因解决方法MCP 服务名显示红色提示 Connection FailedCursor 配置的 URL 或端口不对服务没启动先 curl 验证服务是否可用再检查 Cursor 配置里的地址和端口连接成功但工具列表为空Cursor 版本过旧或 schema 配置格式不对升级 Cursor 到最新版检查配置 JSON 是否为当前版本支持的格式AI 返回“无法访问设计稿”Token 无效或权限不足到蓝湖开放平台检查 Access Key 权限确认已开启对应 API 范围能调用工具但返回数据为空传入的项目 ID 或设计稿 ID 不存在或没有访问权限确认项目名/ID 拼写用蓝湖网页端打开确认能访问Docker 方式配置后 Cursor 启动慢每次启动 Cursor 都会拉起一个容器改为远程端点方式单独管理容器生命周期MCP 服务偶尔超时蓝湖接口响应慢或网络抖动调大 Cursor 请求超时时间检查网络连接质量生成的样式值与设计稿不一致蓝湖标注本身不完整或 AI 没读最新版本检查蓝湖标注是否规范确认设计稿版本是否已更新到最新状态5.2 三个极容易踩的隐蔽坑第一个隐藏坑是 Token 权限范围。蓝湖开放平台的密钥通常区分“只读”和“读写”权限MCP 服务只需要只读权限就够了。我第一次图省事申请了读写权限结果安全审核不通过同事也提醒这存在数据泄露风险。后来改成只读密钥服务照常跑安全上也踏实。建议申请密钥时按最小权限原则。第二个坑是 Cursor 的 MCP 服务状态看起来是绿的但实际请求全超时。我遇到过几次排查下来是 Cursor 的 Agent 模式为了控制上下文长度不会总是自动调用外部工具尤其是设计稿数据量大的时候它可能选择“忽略工具”直接开写。解决办法是在提示词里强调“必须使用蓝湖设计稿数据作为唯一参照”或者先手动调用一次工具让返回的数据进入对话上下文后续再生成代码。第三个坑是版本兼容。Cursor 更新频率极高每次大版本更新都可能微调 MCP 的配置 schema。有一次我配置的type字段在更新后失效了服务直接不加载。这种问题没有特别好的办法只能养成习惯Cursor 更新后,先到 MCP 页面看一眼工具列表是否还在,不在就重新保存一遍配置通常就能恢复。5.3 排查思路遇到问题先别急着改配置我自己的排查顺序是“服务本身 → 网络 → 配置 → 权限 → 版本”。先用 curl 确认 MCP 服务能不能访问这能排除一半问题然后看 Cursor 连接的是不是同一个端口这一步又能排除四分之一最后才折腾权限和版本兼容。最忌讳的就是打开 Cursor 看到红点立刻凭感觉乱改 JSON 配置改完还不对又开始怀疑 Token 问题来回折腾一小时。先分层次排查大部分问题 5 分钟内能找到根源。6. 把“还原度”变成一次对话个人实践后的真心话我现在的工作流基本变成了这样设计更新了 → 让 Cursor 读一遍蓝湖数据 → 照着生成代码或对比差异 → 提交前再让 Cursor 自查一遍。设计师的“还原了吗”几乎不会再出现了因为我在交付前已经把 AI 变成了一道质检工序。说说我的真实感受。这套东西的意义不是帮你写代码更快——Cursor 写代码本来就快——而是把“信息对齐”这个最消耗心力的环节自动化了。以前你和设计稿之间隔着一个人眼读标注的过程现在变成了 AI 直接读数据中间损耗基本为零。我有很多次写组件写到一半拿不准某个间距参数直接在 Cursor 里问一句“这个间距是多少”它回答 24px我继续写整个过程不用离开编辑器。如果你也想搭这么一套我的建议是先小范围试点找一个信息标注最完整的项目跑通不要一上来就追求全量接入。蓝湖 MCP 服务部署本身不难花一小时跑通基本流程真正花时间的是让团队把设计标注习惯规范化以及让你自己习惯“用对话驱动信息获取”的方式。最后分享一个小技巧在 Cursor 的项目规则文件比如.cursorrules里固定写一句“涉及样式生成时必须从蓝湖设计稿获取数据并引用来源”,这样每次新开会话,AI 也会自动遵循这个规则,不用你反复叮嘱。这个小设置帮我在团队里推广这套工作流时省了很多口舌,值得一试。
蓝湖MCP接入Cursor全流程：让AI直接读取设计稿数据
每当我把设计稿还原得七七八八设计师就会走过来问一句“还原了吗”这一问几乎成了前端开发的“催命符”。直到我把 Cursor 接到了蓝湖上这个局面才彻底改观不是靠截图、不是来回传文件而是让 AI 编程助手直接“看见”设计稿里的真实数据——字号、间距、颜色、切图统统变成它写代码时可以引用的上下文。这篇文章不是讲概念是我自己从零到一部署蓝湖 MCP 服务、把它接进 Cursor、并且让这套流程真正跑在项目里的完整记录。适合正在被“还原度”折磨的前端开发者也适合想搞清楚 MCP 到底能干什么、但不想只停留在“听说过”这个层面的人。你会看到我怎么选型、怎么配置、踩了哪些坑以及最终这套工作流帮我省掉了多少来回确认的功夫。1. 先搞明白这件事的本质还原度问题的根子在哪1.1 “还原了吗”为什么是句恐怖提问做过前端的都懂这句话背后是一整套信息损耗链路。设计师在蓝湖上传设计稿标了注、切了图前端拿到的是一个静态页面真正要写代码的时候有几个信息是必须反复核对的这个按钮的圆角是 8px 还是 6px主色到底是#1B6BFF还是#1A6BFF间距是 16px 还是 20px标注图上写得明明白白但人眼扫过去十个里有九个会看错或者记错。更麻烦的是沟通成本。设计更新了某个模块不会有人专门跑来告诉你“第三屏的卡片间距改了”你只能靠设计师追问“还原了吗”的时候才发现自己按老数据写了两天。传统流程里解决这个问题靠的是“细心”但人不可能一直保持 100% 细心尤其是在连续切十几个页面的时候。我当时的处境就是这样蓝湖上躺着整套设计稿我这边对着 Cursor 写代码每次写到一个新组件就得切出去打开蓝湖看标注再切回来继续写。来回切窗口的时间加起来比写代码还多还容易看漏参数。所谓“还原”本质上不是技术难是信息搬运的效率太低。1.2 MCP 在这里扮演的是“翻译官”角色MCP 的全称是 Model Context Protocol翻译过来就是模型上下文协议。你不需要背这个概念只要理解一句话它让 AI 工具能够调用外部数据源的工具接口相当于给 Cursor 装了一只可以伸进蓝湖数据库的手。类比一下以前的 AI 编程助手像是坐在你旁边听你描述需求的程序员你说“按钮用蓝色”它就猜一个蓝色现在通过 MCP它自己就能打开设计标注文件看到真正的色值是#2B5AF7间距是 24px然后直接按这个数据生成代码。从“听你说”变成“自己看”这就是质的区别。蓝湖本身有开放 APIMCP Server 就是中间那层胶水把蓝湖的接口包装成 Cursor 能理解的工具列表。部署好之后你在 Cursor 对话框里可以直接说“读取当前项目的设计稿信息”它就能返回真实的样式数据。设计师再问“还原了吗”你只需要回一句“让 Cursor 自己对照设计稿检查过了”。2. 蓝湖 MCP 服务怎么部署从零开始的操作记录2.1 前置条件与工具准备动手之前先把需要准备的清单列齐免得部署到一半发现少东西。我用的是 macOS 环境Windows/Linux 操作大同小异命令略有区别我会在对应位置标注。一个蓝湖账号并且要有对应项目的访问权限。团队版或企业版通常才有开放 API 的权限个人免费版能拿到的数据有限这个要提前跟管理员确认蓝湖开放平台的密钥一般是 Access Key 和 Secret Key 的组合有的版本叫 Token具体以官方控制台为准Docker推荐用容器跑省去本地环境依赖的麻烦或者 Node.js 18 的环境Cursor 版本建议 0.80 以上旧版本对 MCP 的支持不完整容易出现“服务配置了但工具列表为空”的怪问题能访问蓝湖的网络环境这个听起来像废话但公司内网限制 API 域名的情况我见过不止一次务必先确认最后一条在终端里ping一下蓝湖的 API 域名能通再往下走。很多人在部署环节卡了一晚上最后发现是内网把域名拦了服务起不来Cursor 端自然一片红。2.2 Docker 方式部署推荐路线我推荐 Docker 部署因为蓝湖 MCP 服务依赖一些 Python 包和 Node 模块直接用本地环境跑容易因为版本冲突搞得一团糟。容器化之后镜像里什么都有起一个容器就完事。先说镜像。不同的 MCP 提供方可能发布不同名称的镜像以你实际使用的版本为准我这里用一个通用的占位名来说明整个流程# 拉取镜像 docker pull lanhu-mcp-server:latest # 启动容器 docker run -d \ --name lanhu-mcp \ -p 8231:8231 \ -e LANHU_ACCESS_KEY你的AccessKey \ -e LANHU_SECRET_KEY你的SecretKey \ -e LANHU_API_BASEhttps://api.lanhuapp.com \ lanhu-mcp-server:latest解释几个关键参数。-p 8231:8231是端口映射宿主机 8231 端口映射到容器内 8231Cursor 连的是宿主机的这个端口。LANHU_ACCESS_KEY和LANHU_SECRET_KEY是鉴权凭证相当于你打开蓝湖数据柜的钥匙一定不要泄露更不要提交到 git 仓库里。启动之后用docker logs lanhu-mcp看日志如果出现类似MCP server listening on 8231或者SSE endpoint ready的字样说明服务已经起来了。这里要特别提醒MCP 服务有两种主流协议形态一种是 JSON-RPC over HTTP一种是 SSEServer-Sent EventsCursor 对这两种的配置方式略有区别后面我会详细说明。还有一点很多人会忽略Docker 容器的时间默认是 UTC如果后面你排查问题发现时间对不上记得在启动命令里加-e TZAsia/Shanghai。2.3 Node.js 本地部署方式备选方案如果你不想用 Docker或者公司服务器不让你跑容器也可以直接用 Node.js 裸跑。先把项目克隆到本地git clone https://github.com/your-lanhu-mcp/lanhu-mcp-server.git cd lanhu-mcp-server npm install安装依赖之后需要创建一个.env文件内容如下LANHU_ACCESS_KEY你的AccessKey LANHU_SECRET_KEY你的SecretKey LANHU_API_BASEhttps://api.lanhuapp.com PORT8231注意.env文件默认被 gitignore 忽略这是好事千万别为了省事给它改名不然下次提交代码可能把密钥带出去。然后执行npm run start如果一切正常你会看到类似MCP Server running at http://localhost:8231的输出。裸跑的优点是方便调试改代码热重载缺点是本地 Node 环境依赖容易踩坑比如 OpenSSL 版本不对导致启动失败我就遇到过一次报错信息像天书一样后来升级 Node 到 20 LTS 才解决。2.4 验证服务是否真的可用服务起来之后不要急着配 Cursor先用浏览器或者命令行验证一下接口是否正常。在浏览器里打开http://localhost:8231/mcp如果能看到一个 JSON 响应或者一个可用的 HTTP 端点说明至少证明服务进程是活的。严谨一点的做法是用 curl 请求工具列表接口curl -X POST http://localhost:8231/mcp \ -H Content-Type: application/json \ -H Authorization: Bearer 你的Token \ -d {jsonrpc:2.0,id:1,method:tools/list}如果返回里包含tools数组里面列了类似get_design_info、list_projects、get_component_styles这样的工具名说明 MCP 服务已经正确接上了蓝湖的 API。这一步很关键因为很多时候推进展不了不是 Cursor 的错是服务本身就没起来你却在那边折腾半天 Cursor 配置。3. 在 Cursor 里把蓝湖 MCP 配起来3.1 Cursor 的 MCP 配置入口和方式Cursor 的 MCP 功能藏得不算深点击左下角设置图标找到MCP标签页就能看到服务管理界面。这里有两种配置路径一种是内置的傻瓜式添加另一种是手动写配置。傻瓜式添加适用于有现成服务市场或者一键安装源的情况可能是输入一条安装命令让 Cursor 自动拉起本地服务。手动配置则适用于你已经像上面那样自己部署好了服务需要把它注册进 Cursor。手动配置时需要打开配置文件不同版本位置略有不同一般是点击 MCP 页面里的Configure MCP Servers按钮会打开一个 JSON 配置文件。在这里添加一段{ mcpServers: { lanhu: { command: docker, args: [run, --rm, -i, -p, 8231:8231, lanhu-mcp-server:latest], env: { LANHU_ACCESS_KEY: 你的AccessKey, LANHU_SECRET_KEY: 你的SecretKey } } } }这段配置的意思是让 Cursor 直接拉起一个 Docker 容器来跑 MCP 服务这种方式的好处是 Cursor 启动时自动起服务不用你手动 docker run。但前提是你的 Docker 环境配置好了否则 Cursor 这边会一直显示连接失败。3.2 用远程端点方式配置如果服务已经在远端运行如果你的 MCP 服务不是跑在本机而是放在一台内网服务器或者云主机上那就要换一种配置方式直接用 HTTP 端点连接。格式一般是{ mcpServers: { lanhu: { type: http, url: http://192.168.1.100:8231/mcp, headers: { Authorization: Bearer 你的Token } } } }这里要说明一下不同时期 Cursor 对 MCP 的配置 schema 不一样有的版本用type: sse有的用url直接识别。最稳妥的办法是打开 MCP 配置页面看界面提供的表单字段有哪些按着填总不会错。如果界面里就是简单的Name、URL、Headers那就直接填就好。配完之后最重要的一步点击Enable开关或者刷新按钮让 Cursor 真正加载这个服务。加载完成后服务名旁边会显示绿灯和工具数量。如果显示红色或者Error把鼠标悬停上去看具体报错不要凭感觉乱改。3.3 验证 Cursor 里能不能读到设计数据服务显示连接成功只是第一步验证它能不能真的拿到数据最直接的方法是在 Cursor 对话框里输入一句自然语言指令“读取项目 XX 的设计稿信息列出首页头部区域的背景色、标题字号和按钮圆角。”如果配置正确Cursor 会像有了超能力一样直接返回实际设计参数而不再是它凭空猜测的“我建议用 #333”。我第一次看到它准确说出#1868F4和border-radius: 10px的时候说实话有点头皮发麻因为我知道这远远超出了常规 AI 助手的知识能力——它不是猜的是读了蓝湖上的真实标注。如果返回的是“抱歉我无法访问设计稿数据”之类的回答不要慌大概率是鉴权问题或者工具调用权限没开。检查一下蓝湖开放平台的权限设置里是否有开启对应应用的 API 访问范围以及 Token 是否有效。还有一个常见原因是Cursor 的 Agent 模式没有把 MCP 工具纳入自动调用范围需要手动指定使用某个工具。4. 接好之后的真实工作流从“猜着写”到“对着写”4.1 用自然语言直接读取设计数据接好蓝湖 MCP 之后最爽的改变是我可以丢掉“切出去看标注”这个动作完全在 Cursor 里完成信息获取。比如我正在写一个卡片组件直接在对话框里输入“从蓝湖读取‘会员中心-卡片列表’的设计稿提取卡片的背景色、圆角、内边距、阴影参数并生成对应的 Tailwind 类。”以往这种需求我得去蓝湖手动翻图层找到对应样式面板逐项抄下来。现在 Cursor 自己去调接口把参数返回给我我只需要看着它生成的代码确认是否符合需求。整个体验更像是在“审查”而不是“打样”。这里有个细节技巧指令里要说清楚“读取设计稿”而不是“帮我设计一个卡片”。因为 MCP 工具是偏工具调用的你得给 AI 一个明确的动作指令它才会去调用那个工具。含糊的说法容易让它觉得自己该“发挥创意”那就跟整个初衷背道而驰了。4.2 自动校验组件与设计稿的差异比生成代码更香的是反向校验。以前写完组件靠肉眼对照设计稿哪里有偏差只能凭感觉。现在你可以直接对 Cursor 说“检查当前这个 button 组件的样式和蓝湖设计稿里的 button 组件是否一致列出所有差异。”效果相当于有个自动化的“还原度巡检员”。背景色差了 1 个色值、字体大小差了 2px、圆角从 8px 变成了 10px它都能给你精确列出来。我实际测试下来它能发现非常细小的差异有些是我肉眼根本看不出来的比如#1A6BFF和#1B6BFF的区别写代码时很容易带过去它却能抓出来。但这个功能对设计稿数据的完整性有要求如果你的设计稿在蓝湖上没有规范标注很多样式值缺失那它就无从比对。所以为了让它当好巡检员前期的规范标注功夫要做足。4.3 设计更新后的同步效率提升设计稿不是一成不变的产品经理和设计师隔三差五会改需求。传统模式下一个模块的样式变了前端要等设计师口述或者看更新后的标注然后手动去改代码。现在我可以直接对 Cursor 说“蓝湖上‘首页金刚区’的设计已更新读取最新设计稿参数对比旧版列出变化点。”它能把前后差异列成清单图标尺寸从 44px 变成 48px背景色从浅灰改成浅蓝间距从 12px 调整为 16px。我照着清单改代码几分钟搞定。这种效率提升对高频迭代的项目来说是质变——你再也不用担心“我不知道设计改了”这种事了MCP 就是你派驻在蓝湖上的观察哨。5. 常见问题与排查技巧实录5.1 高频问题速查表把自己部署和用别人经验收集到的问题整理成表按出现频率排个序方便你直接对号入座问题现象可能原因解决方法MCP 服务名显示红色提示 Connection FailedCursor 配置的 URL 或端口不对服务没启动先 curl 验证服务是否可用再检查 Cursor 配置里的地址和端口连接成功但工具列表为空Cursor 版本过旧或 schema 配置格式不对升级 Cursor 到最新版检查配置 JSON 是否为当前版本支持的格式AI 返回“无法访问设计稿”Token 无效或权限不足到蓝湖开放平台检查 Access Key 权限确认已开启对应 API 范围能调用工具但返回数据为空传入的项目 ID 或设计稿 ID 不存在或没有访问权限确认项目名/ID 拼写用蓝湖网页端打开确认能访问Docker 方式配置后 Cursor 启动慢每次启动 Cursor 都会拉起一个容器改为远程端点方式单独管理容器生命周期MCP 服务偶尔超时蓝湖接口响应慢或网络抖动调大 Cursor 请求超时时间检查网络连接质量生成的样式值与设计稿不一致蓝湖标注本身不完整或 AI 没读最新版本检查蓝湖标注是否规范确认设计稿版本是否已更新到最新状态5.2 三个极容易踩的隐蔽坑第一个隐藏坑是 Token 权限范围。蓝湖开放平台的密钥通常区分“只读”和“读写”权限MCP 服务只需要只读权限就够了。我第一次图省事申请了读写权限结果安全审核不通过同事也提醒这存在数据泄露风险。后来改成只读密钥服务照常跑安全上也踏实。建议申请密钥时按最小权限原则。第二个坑是 Cursor 的 MCP 服务状态看起来是绿的但实际请求全超时。我遇到过几次排查下来是 Cursor 的 Agent 模式为了控制上下文长度不会总是自动调用外部工具尤其是设计稿数据量大的时候它可能选择“忽略工具”直接开写。解决办法是在提示词里强调“必须使用蓝湖设计稿数据作为唯一参照”或者先手动调用一次工具让返回的数据进入对话上下文后续再生成代码。第三个坑是版本兼容。Cursor 更新频率极高每次大版本更新都可能微调 MCP 的配置 schema。有一次我配置的type字段在更新后失效了服务直接不加载。这种问题没有特别好的办法只能养成习惯Cursor 更新后,先到 MCP 页面看一眼工具列表是否还在,不在就重新保存一遍配置通常就能恢复。5.3 排查思路遇到问题先别急着改配置我自己的排查顺序是“服务本身 → 网络 → 配置 → 权限 → 版本”。先用 curl 确认 MCP 服务能不能访问这能排除一半问题然后看 Cursor 连接的是不是同一个端口这一步又能排除四分之一最后才折腾权限和版本兼容。最忌讳的就是打开 Cursor 看到红点立刻凭感觉乱改 JSON 配置改完还不对又开始怀疑 Token 问题来回折腾一小时。先分层次排查大部分问题 5 分钟内能找到根源。6. 把“还原度”变成一次对话个人实践后的真心话我现在的工作流基本变成了这样设计更新了 → 让 Cursor 读一遍蓝湖数据 → 照着生成代码或对比差异 → 提交前再让 Cursor 自查一遍。设计师的“还原了吗”几乎不会再出现了因为我在交付前已经把 AI 变成了一道质检工序。说说我的真实感受。这套东西的意义不是帮你写代码更快——Cursor 写代码本来就快——而是把“信息对齐”这个最消耗心力的环节自动化了。以前你和设计稿之间隔着一个人眼读标注的过程现在变成了 AI 直接读数据中间损耗基本为零。我有很多次写组件写到一半拿不准某个间距参数直接在 Cursor 里问一句“这个间距是多少”它回答 24px我继续写整个过程不用离开编辑器。如果你也想搭这么一套我的建议是先小范围试点找一个信息标注最完整的项目跑通不要一上来就追求全量接入。蓝湖 MCP 服务部署本身不难花一小时跑通基本流程真正花时间的是让团队把设计标注习惯规范化以及让你自己习惯“用对话驱动信息获取”的方式。最后分享一个小技巧在 Cursor 的项目规则文件比如.cursorrules里固定写一句“涉及样式生成时必须从蓝湖设计稿获取数据并引用来源”,这样每次新开会话,AI 也会自动遵循这个规则,不用你反复叮嘱。这个小设置帮我在团队里推广这套工作流时省了很多口舌,值得一试。
