设计师又发来一条消息“那页还原了吗”以前看到这个问题我第一反应是打开蓝湖链接对着标注一个个量间距、调颜色、切图片再切回编辑器改代码操作下来少说二十分钟最后回复一个“差不多了”。直到我把 Cursor 通过 MCP 协议接到蓝湖上这个流程被彻底改写了——现在 Cursor 里的 AI 可以直接读取蓝湖设计稿的页面结构、标注、颜色和切图数据再据此生成前端代码设计师只需要发一个链接和页面名我甚至不用打开浏览器。这套方案不是用截图喂给 AI 猜而是让 AI 通过 MCP Server 去蓝湖拉真实的设计稿数据包括坐标、字号、色值、间距、切图资源。这篇内容就把完整思路、部署步骤、配置写法、实测表现和避坑经验一次讲清楚适合正在用 Cursor 写代码、同时被设计稿还原沟通折磨的前端工程师、全栈开发以及所有对 AI 编程工具链感兴趣的人。1. 内容整体设计与思路拆解1.1 为什么偏偏是 Cursor 加蓝湖先说痛点。传统的前端还原流程是设计师在蓝湖上传设计稿工程师打开蓝湖看标注测量间距、确认色值、下载切图再回编辑器手写代码。这件事本身不难但极其琐碎而且设计师和工程师之间永远隔着一层信息差设计师觉得自己已经给了全部信息工程师还反复问“这个按钮 hover 效果是什么”“这个间距是 16 还是 20”。工程师觉得看标注已经够认真了但常有漏看细节比如只切了 3x 图忘了 2x 图或者把字体粗细看错一个级别。截图沟通更不靠谱放大缩小之后比例直接失真AI 纯看截图猜代码出来的东西只能叫“参考”而不是“还原”。Cursor 解决了“AI 写代码”的问题但 AI 一直缺少设计稿数据。你可以把截图拖给 Cursor可以描述“左边一个 300px 的侧边栏”但没法让它直接打开蓝湖去读取每个像素的真实标注。这就好比你让一个新来的工程师干活却不给他看设计稿只让他凭感觉写。蓝湖这边其实是有 Open API 的数据都在云端关键是缺一个环节让 Cursor 能“顺手”取数。MCP 就是补上这个环节的协议Cursor 作为客户端通过统一协议连上蓝湖数据服务AI 在对话里需要某个页面的标注时会自动调用工具去拉取数据直接进入上下文再生成代码。链路打通之后设计师的“还原了吗”就变成了“你让 AI 再对一眼就行”。1.2 为什么选择 MCP 而不是插件或脚本从技术选型上看有几种方式可以把蓝湖数据喂给 Cursor我逐一比较过方案实现方式优点缺点手动看标注再描述人肉读蓝湖把信息敲给 AI最直接不用做任何额外开发效率没有本质提升还是人工搬运写 CLI 脚本拉 API自己写脚本下载标注、存成 JSON可控能批量处理每次都要手动跑AI 上下文里还得粘 JSON体验割裂截图 视觉提示把蓝湖截图拖给 Cursor操作简单AI 读取像素级信息有误差且无法区分图层层级MCP Server 接入Cursor 通过 MCP 协议调用蓝湖 OpenAPIAI 按需自动取数对话式交互结果结构化需要一次性配置 Server首次部署有学习成本我最后选了 MCP核心原因是它最贴合 AI 的使用方式。写脚本的痛点是AI 并不知道数据在哪个文件里你得先查、再跑脚本、再把结果贴回去等于还是有人肉环节。MCP 把“取数”变成了 AI 的一种能力它自己决定什么时候调用工具、调用哪个工具、怎么用返回的数据。打个比方MCP 就像是给 Cursor 插了一个“USB 接口”插上之后蓝湖就成了它的一块外接设备需要时自动读写不需要时也不占地方。1.3 整体链路与各环节职责这套方案的完整链路是四层Cursor 客户端主要负责对话、代码生成以及管理 MCP 客户端的连接状态。MCP ClientCursor 内置负责把 AI 的工具调用请求转换成标准协议消息发给 MCP Server。MCP Server独立进程封装蓝湖 OpenAPI暴露给 AI 一组工具比如“获取项目列表”“读取页面标注”“获取切图资源”。蓝湖云端提供设计稿原始数据通过 OpenAPI 鉴权和访问控制。MCP Server 可以和 Cursor 跑在同一台机器上也可以部署在远端通过 URL 访问。我建议先从本地方式开始等稳定了再考虑远端部署因为本地模式排障更容易——你可以在命令行手动启动 Server直接用 curl 测试接口确认数据没问题再让 Cursor 连接。2. 核心细节解析与实操要点2.1 MCP Server 需要暴露哪些能力一个能真正帮到前端开发的蓝湖 MCP Server至少要覆盖以下工具能力工具名称示意作用典型使用场景list_projects列出当前账号有权限的项目确定设计稿在哪个项目下list_files列出项目下的文件即设计稿文档找到具体的设计稿文件list_pages列出文件内的页面或画板锁定“登录页”“首页”等目标页面get_page_markup获取页面标注数据坐标、尺寸、文本、颜色AI 生成页面骨架时获取结构信息get_assets获取切图资源及下载地址提取图标、图片素材get_style_guide获取设计规范色板、字体规范统一主题样式变量实际部署时具体工具名以你选用的 MCP Server 实现为准但能力范围大致就是这些。最关键的是get_page_markup和get_assets前者解决了“页面长什么样”后者解决了“图片素材从哪来”。我建议在配置完成后先做一个验证直接让 Cursor“帮我列出蓝湖上所有项目”如果它真的能返回项目列表说明整条链路已经通了再往下一步。2.2 Cursor 的安装、中文设置与基础配置很多人在搜“cursor 怎么设置中文”“cursor 汉化”这跟接蓝湖属于两条线但既然要长期用强烈建议先花五分钟把基本环境和语言习惯调好。我实测下来的做法是下载安装直接从官网下载对应系统版本安装后打开注册账号并绑定邮箱或 GitHub 登录。基础编辑操作和 VS Code 几乎一样不需要额外学习成本。界面语言Cursor 本身的界面至今没有完全官方的简体中文汉化包网上流传的汉化补丁我不建议碰改动安装目录文件会导致升级失败或异常报错代价不小。更实用的做法是让 AI 用中文回复打开 Cursor 设置里的 Rules for AI填入“请始终使用简体中文回复代码注释也要用简体中文”。这个设置是全局的之后所有对话都会自动用中文。在某次对话中临时切换直接输入“接下来请用中文回复”即可AI 会记住本次会话的语言偏好。还有一个高频问题是“cursor 注册账号可以用多久”“cursor pro 有多少额度”。注册免费账号是长期有效的但免费账号的 AI 调用次数有限付费按订阅周期计费具体额度和价格以官网最新说明为准因为这东西变动比较快我写死反而容易误导人。2.3 MCP 配置文件写法与参数解析Cursor 支持两种方式配置 MCP Server图形界面添加以及项目级配置文件。我推荐用项目级.cursor/mcp.json好处是可以随仓库提交、团队成员共享。配置文件的核心结构是一个 JSON 对象{ mcpServers: { lanhu: { command: npx, args: [-y, lanhu-mcp-server, --api-token, ${LANHU_API_TOKEN}], env: { LANHU_API_TOKEN: 你的蓝湖API Token } } } }几个参数逐个说mcpServers固定顶层字段里面可以挂多个 Server比如你还可以加一个 GitHub MCP Server。lanhu给这个 Server 起的名字随便起但建议用英文日志里好认。command启动命令。Mac/Linux 下通常用npxWindows 下如果遇到npx无法识别改成npx.cmd这是 Windows 下最容易踩的坑。args命令行参数。-y表示自动确认安装 npm 包lanhu-mcp-server是包的名称--api-token是包的 CLI 参数。注意具体包名和参数以你选用的开源项目说明为准换成你自己的。env环境变量。把 Token 放在这里而不是硬编码进args是因为部分 Server 会优先从环境变量读取密钥这样即使命令行被截屏也不容易泄漏密钥。配置完成后在 Cursor 的 MCP 面板里检查状态。正常情况对应 Server 会显示绿色 connected如果显示红色或 error按文末的排查章节处理。3. 实操过程与核心环节实现3.1 获取蓝湖 API Token要把蓝湖数据开放给 MCP Server需要先拿到一个有访问权限的 Token。具体路径在蓝湖平台上是“个人设置”或“开发者中心”里申请开放 API 的访问令牌不同团队版本的菜单位置略有差异但逻辑是一样的登录蓝湖进入个人设置页面。找到开放 API / 开发者选项选择申请 Token。按需选择权限范围这里强烈建议选只读权限。MCP Server 只需要读取设计稿和标注数据完全不需要写权限。如果你误把写权限交给 AI它一旦被恶意提示词诱导理论上可以修改你在蓝湖上的数据风险不值当。生成后立刻复制保存这个 Token 通常只在创建时完整显示一次。把这个 Token 放到你本机的环境变量里比如写入 shell 配置文件export LANHU_API_TOKEN你的Token不要把它提交到 Git 仓库。就算.cursor/mcp.json里不直接写 Token也别把带真实 Token 的配置文件推到远端我见过有人把 Token 发到团队群里导致整个团队都要轮换密钥的场面真的很麻烦。3.2 部署 MCP Server三种方式对比我实测下来有三种部署方式从简单到复杂排列。第一种本地 npx 方式。如果社区已经有一个lanhu-mcp-server之类的 npm 包这是最快的验证方式npx -y lanhu-mcp-server --api-token $LANHU_API_TOKEN运行后会出现一些启动日志看到类似“MCP server running on stdio”的输出就表示进程起来了。这时候不要关掉终端因为 Cursor 需要这个进程持续运行。首次运行会下载包有点慢别急着反复重启。第二种Docker 方式。适合要长期稳定跑、或者在远端服务器部署的场景docker run -d --name lanhu-mcp \ -e LANHU_API_TOKEN你的Token \ -p 8768:8768 \ 你的镜像名/lanhu-mcp-server:latestDocker 方式的好处是环境隔离、可复现换电脑重装也方便。缺点是 macOS 上首次配置 Docker 本身就有学习成本所以新手我不建议一上来就用它。第三种源码构建。去 GitHub 上找一个蓝湖 MCP Server 开源项目clone 下来执行npm install npm run build然后用node dist/index.js启动。适合你想改功能、或者官方包还没有发布的情况。源码方式最大的价值是你能看到底层调了哪些 API排障的时候心里有数。从落地效率来看先用 npx 验证链路是正确的路子确认没问题之后再用 Docker 固化把 npx 和 Docker 背后的包源码都留一份。3.3 Cursor 内配置与连接验证在 Cursor 里接 MCP 有两种入口。如果你走图形界面打开 Settings找到 MCP 选项卡点击 Add new MCP server选择 Command 类型把 npx 命令和环境变量填进去。如果你像我一样喜欢把配置入库直接编辑项目根目录的.cursor/mcp.json即可。配置完成后重点检查三件事Server 状态是否是 connected。不是绿色说明进程没起来或者网络有问题。给 AI 一个下探问题直接在对话里输入“你能访问到哪些蓝湖工具”如果它返回工具列表说明 MCP Client 和 Server 已经握手成功。再进一步让它“用蓝湖工具列出第一个项目的文件列表”这里成功的话说明 Token 权限和网络链路都通了。配置完成后建议重启一次 Cursor有时候 MCP Client 不会热加载配置重启后最保险。我在第一次配置时遇到过配置保存了但工具始终不出现的情况重启后立刻恢复正常。3.4 实战让 AI 读取设计稿生成登录页链路通了之后重点就变成怎么向 AI 提需求。我的经验是把提示词写成“指出数据来源 指出目标页面 指定技术栈 明确输出格式”四段式请使用蓝湖 MCP 工具查看设计稿文件 [{fileId}] 找到名为“登录页”的页面读取该页面的布局结构、所有组件的坐标与尺寸、 颜色值、字体样式以及文案内容。 然后使用 React Tailwind CSS 实现一个响应式登录页 要求布局比例尽量与设计稿一致颜色用设计稿中的色值。 先调用工具获取数据再输出代码。注意我在提示词里明确说了“先调用工具获取数据再输出代码”这是为了避免 AI 偷懒凭经验直接生成一个“差不多的登录页”。实测下来加了这句之后 AI 会先调用蓝湖工具再基于返回数据写代码。AI 的返回通常会分成几个步骤先是工具调用日志你会看到类似Calling get_page_markup with pageIdxxx的记录然后它会总结从蓝湖读取到的关键信息比如“页面宽度 1440px主色 #4F46E5标题字号 32px”最后才是代码输出。有一点要提前知道AI 生成的代码只能算“第一轮还原稿”不要指望一次就完美。但它已经把最耗时的信息搬运工作做完了你只需要做代码 review 和微调。这一步节省的时间占整个还原任务的大头。4. 常见问题与排查技巧实录4.1 MCP Server 显示 error / 连接失败现象Cursor 的 MCP 面板里lanhu 显示红色 error或者对话里 AI 说“无法访问蓝湖工具”。排查顺序我建议从下往上先在命令行手动运行启动命令看有没有报错。最常见的是 Token 未设置或失效命令行会直接提示鉴权失败。确认网络能访问蓝湖 OpenAPI。如果本地网络本身访问不了蓝湖MCP Server 拿到数据也是白搭。检查配置文件里的命令路径。Windows 上把npx改成npx.cmd这个坑我踩过一次直接占用了我半小时。如果你用了${LANHU_API_TOKEN}这种变量展开写法部分 Cursor 版本不支持在 JSON 配置里展开 shell 变量建议把 Token 直接放到env字段里或者干脆硬编码进args注意别提交 Git。最后还有一个容易被忽略的点改完配置之后 Cursor 并不会自动重连需要重启应用或者手动移除 Server 再重新添加。4.2 Cursor 登录异常与账号风控问题很多人搜过“too many computers used within the last 24 hours for the same cursor account”我也遇到过。这是 Cursor 官方对账号登录设备数量的风控策略短时间内太多设备或太多网络环境登录同一个账号就会触发这个提示。解决办法很简单停止在这台设备上反复登录等 24 小时后重试如果急着用就换回常用设备和网络环境。这类限制本质上是防共享账号滥用不是系统故障所以不要试图绕过等它自动解除就行。另外“cursor 注册账号可以用多久”这个问题本质上取决于账号类型。免费账号长期有效订阅则按周期扣费。如果你复购时发现生效日期不是从当前日期开始这通常是订阅平台的计算规则一般是按原账单周期顺延不是按购买当日重新起算。4.3 Agent 执行缓慢或提示 Taking longer than expected这个提示我理解是一种“超时保护”。出现它的原因大多是蓝湖 MCP 工具返回的数据量太大一次性把所有页面、所有标注都塞进上下文模型处理不动了。优化手段有三个方向缩小数据范围。不要对整份设计稿说“读取所有页面”要明确“只读取‘登录页’这一个页面”“只要首页首屏的布局数据”。减少工具调用轮次。对话历史里已经调用过的工具结果不需要重复调用你可以提醒 AI“直接用上一次获取的标注数据继续”。开启 Allow 和 Auto-run 权限时要有意识你给 AI 的权限越大它可能越激进地并行调用工具。首次运行建议选 “Allow Once”确认整个调用链没问题之后再说“以后蓝湖相关操作可以直接运行”。4.4 中文设置到底怎么弄这是搜索里最高频的问题集中回答一次。Cursor 界面汉化的正确姿势是等官方语言包或者使用基于插件机制的汉化方案修改安装目录文件的汉化方式会在软件更新后失效并可能触发校验问题。对话中文设置的两种做法全局设置Settings → Rules for AI加入“请始终使用简体中文回复代码注释使用简体中文”。单会话设置在对话输入框直接输入“接下来的所有回复请用中文”。顺带说一句“vibcoding”这类用法其实就是把 AI 当作主要编码工具、人只负责描述需求、review 结果的开发方式。接了蓝湖之后这种方式的准确率才真正提上来因为 AI 终于有了设计稿数据基础而不是凭空“ vibe”。4.5 数据对不上标注不准、权限缺失、版本不对如果你发现 AI 读到的数据和蓝湖网页上看到的不一致先检查三件事Token 权限。只读 Token 如果没被加进对应的团队或项目MCP Server 能连上但拉不到数据AI 会返回“无权限”或“资源不存在”。设计稿版本。蓝湖链接通常对应一个具体版本如果你给 AI 的文件 ID 是一周前的旧文件而设计师早改过了那数据自然对不上。让设计师直接复制当前生效的分享链接给你。页面命名。设计稿里的页面名可能是“未命名- 2”这种没有任何信息量的名字。建议要求团队统一规范画板命名比如“登录页- 桌面端”“登录页- 移动端”这能让 AI 更精确地定位目标页面。4.6 几个独家避坑心得这套链路跑通之后我总结出几个在实操中真正有价值的习惯把 Token 权限最小化是底线。AI 编程工具给你的便利越大你越要考虑它的边界。蓝湖只开放读取设计稿数据就足够完成还原任务绝不给写权限。就算某天真需要自动化标注也应该由专人手动控制写操作。不要盲目信任 AI 的“工具调用成功”日志。有时候 MCP 工具成功返回了数据但 AI 在生成代码时因为上下文长度限制只用了其中一部分标注剩下的按经验补了。所以 prompt 里尽量让 AI“如数据不完整则明确说明”这会逼它在遇到缺失信息时说出来而不是自己脑补。给团队立一个规矩后端接口、设计稿链接、需求变更记录都尽可能结构化地提供给 AI。MCP 只能帮你拿到蓝湖数据拿不到需求背景那句话还得靠人写清楚。我可以让 AI 写 90% 的代码但那 10% 的业务理解永远是我的职责。我个人在实际操作中最大的体会是把 Cursor 接到蓝湖不是要让 AI 取代工程师而是让 AI 取代“机械搬运标注”的那部分工作。设计师不再需要追问我也从重复劳动里解放出来省下来的每一分钟都在为真正的业务判断留出空间。如果你也在被设计稿还原折腾按这篇的方法走一遍大概率能找到同样的自由感。 
长河君 · 2026/11/3 5:20:15 · 阅读 1.2k Cursor通过MCP接入蓝湖：AI读取设计稿自动生成前端代码
设计师又发来一条消息“那页还原了吗”以前看到这个问题我第一反应是打开蓝湖链接对着标注一个个量间距、调颜色、切图片再切回编辑器改代码操作下来少说二十分钟最后回复一个“差不多了”。直到我把 Cursor 通过 MCP 协议接到蓝湖上这个流程被彻底改写了——现在 Cursor 里的 AI 可以直接读取蓝湖设计稿的页面结构、标注、颜色和切图数据再据此生成前端代码设计师只需要发一个链接和页面名我甚至不用打开浏览器。这套方案不是用截图喂给 AI 猜而是让 AI 通过 MCP Server 去蓝湖拉真实的设计稿数据包括坐标、字号、色值、间距、切图资源。这篇内容就把完整思路、部署步骤、配置写法、实测表现和避坑经验一次讲清楚适合正在用 Cursor 写代码、同时被设计稿还原沟通折磨的前端工程师、全栈开发以及所有对 AI 编程工具链感兴趣的人。1. 内容整体设计与思路拆解1.1 为什么偏偏是 Cursor 加蓝湖先说痛点。传统的前端还原流程是设计师在蓝湖上传设计稿工程师打开蓝湖看标注测量间距、确认色值、下载切图再回编辑器手写代码。这件事本身不难但极其琐碎而且设计师和工程师之间永远隔着一层信息差设计师觉得自己已经给了全部信息工程师还反复问“这个按钮 hover 效果是什么”“这个间距是 16 还是 20”。工程师觉得看标注已经够认真了但常有漏看细节比如只切了 3x 图忘了 2x 图或者把字体粗细看错一个级别。截图沟通更不靠谱放大缩小之后比例直接失真AI 纯看截图猜代码出来的东西只能叫“参考”而不是“还原”。Cursor 解决了“AI 写代码”的问题但 AI 一直缺少设计稿数据。你可以把截图拖给 Cursor可以描述“左边一个 300px 的侧边栏”但没法让它直接打开蓝湖去读取每个像素的真实标注。这就好比你让一个新来的工程师干活却不给他看设计稿只让他凭感觉写。蓝湖这边其实是有 Open API 的数据都在云端关键是缺一个环节让 Cursor 能“顺手”取数。MCP 就是补上这个环节的协议Cursor 作为客户端通过统一协议连上蓝湖数据服务AI 在对话里需要某个页面的标注时会自动调用工具去拉取数据直接进入上下文再生成代码。链路打通之后设计师的“还原了吗”就变成了“你让 AI 再对一眼就行”。1.2 为什么选择 MCP 而不是插件或脚本从技术选型上看有几种方式可以把蓝湖数据喂给 Cursor我逐一比较过方案实现方式优点缺点手动看标注再描述人肉读蓝湖把信息敲给 AI最直接不用做任何额外开发效率没有本质提升还是人工搬运写 CLI 脚本拉 API自己写脚本下载标注、存成 JSON可控能批量处理每次都要手动跑AI 上下文里还得粘 JSON体验割裂截图 视觉提示把蓝湖截图拖给 Cursor操作简单AI 读取像素级信息有误差且无法区分图层层级MCP Server 接入Cursor 通过 MCP 协议调用蓝湖 OpenAPIAI 按需自动取数对话式交互结果结构化需要一次性配置 Server首次部署有学习成本我最后选了 MCP核心原因是它最贴合 AI 的使用方式。写脚本的痛点是AI 并不知道数据在哪个文件里你得先查、再跑脚本、再把结果贴回去等于还是有人肉环节。MCP 把“取数”变成了 AI 的一种能力它自己决定什么时候调用工具、调用哪个工具、怎么用返回的数据。打个比方MCP 就像是给 Cursor 插了一个“USB 接口”插上之后蓝湖就成了它的一块外接设备需要时自动读写不需要时也不占地方。1.3 整体链路与各环节职责这套方案的完整链路是四层Cursor 客户端主要负责对话、代码生成以及管理 MCP 客户端的连接状态。MCP ClientCursor 内置负责把 AI 的工具调用请求转换成标准协议消息发给 MCP Server。MCP Server独立进程封装蓝湖 OpenAPI暴露给 AI 一组工具比如“获取项目列表”“读取页面标注”“获取切图资源”。蓝湖云端提供设计稿原始数据通过 OpenAPI 鉴权和访问控制。MCP Server 可以和 Cursor 跑在同一台机器上也可以部署在远端通过 URL 访问。我建议先从本地方式开始等稳定了再考虑远端部署因为本地模式排障更容易——你可以在命令行手动启动 Server直接用 curl 测试接口确认数据没问题再让 Cursor 连接。2. 核心细节解析与实操要点2.1 MCP Server 需要暴露哪些能力一个能真正帮到前端开发的蓝湖 MCP Server至少要覆盖以下工具能力工具名称示意作用典型使用场景list_projects列出当前账号有权限的项目确定设计稿在哪个项目下list_files列出项目下的文件即设计稿文档找到具体的设计稿文件list_pages列出文件内的页面或画板锁定“登录页”“首页”等目标页面get_page_markup获取页面标注数据坐标、尺寸、文本、颜色AI 生成页面骨架时获取结构信息get_assets获取切图资源及下载地址提取图标、图片素材get_style_guide获取设计规范色板、字体规范统一主题样式变量实际部署时具体工具名以你选用的 MCP Server 实现为准但能力范围大致就是这些。最关键的是get_page_markup和get_assets前者解决了“页面长什么样”后者解决了“图片素材从哪来”。我建议在配置完成后先做一个验证直接让 Cursor“帮我列出蓝湖上所有项目”如果它真的能返回项目列表说明整条链路已经通了再往下一步。2.2 Cursor 的安装、中文设置与基础配置很多人在搜“cursor 怎么设置中文”“cursor 汉化”这跟接蓝湖属于两条线但既然要长期用强烈建议先花五分钟把基本环境和语言习惯调好。我实测下来的做法是下载安装直接从官网下载对应系统版本安装后打开注册账号并绑定邮箱或 GitHub 登录。基础编辑操作和 VS Code 几乎一样不需要额外学习成本。界面语言Cursor 本身的界面至今没有完全官方的简体中文汉化包网上流传的汉化补丁我不建议碰改动安装目录文件会导致升级失败或异常报错代价不小。更实用的做法是让 AI 用中文回复打开 Cursor 设置里的 Rules for AI填入“请始终使用简体中文回复代码注释也要用简体中文”。这个设置是全局的之后所有对话都会自动用中文。在某次对话中临时切换直接输入“接下来请用中文回复”即可AI 会记住本次会话的语言偏好。还有一个高频问题是“cursor 注册账号可以用多久”“cursor pro 有多少额度”。注册免费账号是长期有效的但免费账号的 AI 调用次数有限付费按订阅周期计费具体额度和价格以官网最新说明为准因为这东西变动比较快我写死反而容易误导人。2.3 MCP 配置文件写法与参数解析Cursor 支持两种方式配置 MCP Server图形界面添加以及项目级配置文件。我推荐用项目级.cursor/mcp.json好处是可以随仓库提交、团队成员共享。配置文件的核心结构是一个 JSON 对象{ mcpServers: { lanhu: { command: npx, args: [-y, lanhu-mcp-server, --api-token, ${LANHU_API_TOKEN}], env: { LANHU_API_TOKEN: 你的蓝湖API Token } } } }几个参数逐个说mcpServers固定顶层字段里面可以挂多个 Server比如你还可以加一个 GitHub MCP Server。lanhu给这个 Server 起的名字随便起但建议用英文日志里好认。command启动命令。Mac/Linux 下通常用npxWindows 下如果遇到npx无法识别改成npx.cmd这是 Windows 下最容易踩的坑。args命令行参数。-y表示自动确认安装 npm 包lanhu-mcp-server是包的名称--api-token是包的 CLI 参数。注意具体包名和参数以你选用的开源项目说明为准换成你自己的。env环境变量。把 Token 放在这里而不是硬编码进args是因为部分 Server 会优先从环境变量读取密钥这样即使命令行被截屏也不容易泄漏密钥。配置完成后在 Cursor 的 MCP 面板里检查状态。正常情况对应 Server 会显示绿色 connected如果显示红色或 error按文末的排查章节处理。3. 实操过程与核心环节实现3.1 获取蓝湖 API Token要把蓝湖数据开放给 MCP Server需要先拿到一个有访问权限的 Token。具体路径在蓝湖平台上是“个人设置”或“开发者中心”里申请开放 API 的访问令牌不同团队版本的菜单位置略有差异但逻辑是一样的登录蓝湖进入个人设置页面。找到开放 API / 开发者选项选择申请 Token。按需选择权限范围这里强烈建议选只读权限。MCP Server 只需要读取设计稿和标注数据完全不需要写权限。如果你误把写权限交给 AI它一旦被恶意提示词诱导理论上可以修改你在蓝湖上的数据风险不值当。生成后立刻复制保存这个 Token 通常只在创建时完整显示一次。把这个 Token 放到你本机的环境变量里比如写入 shell 配置文件export LANHU_API_TOKEN你的Token不要把它提交到 Git 仓库。就算.cursor/mcp.json里不直接写 Token也别把带真实 Token 的配置文件推到远端我见过有人把 Token 发到团队群里导致整个团队都要轮换密钥的场面真的很麻烦。3.2 部署 MCP Server三种方式对比我实测下来有三种部署方式从简单到复杂排列。第一种本地 npx 方式。如果社区已经有一个lanhu-mcp-server之类的 npm 包这是最快的验证方式npx -y lanhu-mcp-server --api-token $LANHU_API_TOKEN运行后会出现一些启动日志看到类似“MCP server running on stdio”的输出就表示进程起来了。这时候不要关掉终端因为 Cursor 需要这个进程持续运行。首次运行会下载包有点慢别急着反复重启。第二种Docker 方式。适合要长期稳定跑、或者在远端服务器部署的场景docker run -d --name lanhu-mcp \ -e LANHU_API_TOKEN你的Token \ -p 8768:8768 \ 你的镜像名/lanhu-mcp-server:latestDocker 方式的好处是环境隔离、可复现换电脑重装也方便。缺点是 macOS 上首次配置 Docker 本身就有学习成本所以新手我不建议一上来就用它。第三种源码构建。去 GitHub 上找一个蓝湖 MCP Server 开源项目clone 下来执行npm install npm run build然后用node dist/index.js启动。适合你想改功能、或者官方包还没有发布的情况。源码方式最大的价值是你能看到底层调了哪些 API排障的时候心里有数。从落地效率来看先用 npx 验证链路是正确的路子确认没问题之后再用 Docker 固化把 npx 和 Docker 背后的包源码都留一份。3.3 Cursor 内配置与连接验证在 Cursor 里接 MCP 有两种入口。如果你走图形界面打开 Settings找到 MCP 选项卡点击 Add new MCP server选择 Command 类型把 npx 命令和环境变量填进去。如果你像我一样喜欢把配置入库直接编辑项目根目录的.cursor/mcp.json即可。配置完成后重点检查三件事Server 状态是否是 connected。不是绿色说明进程没起来或者网络有问题。给 AI 一个下探问题直接在对话里输入“你能访问到哪些蓝湖工具”如果它返回工具列表说明 MCP Client 和 Server 已经握手成功。再进一步让它“用蓝湖工具列出第一个项目的文件列表”这里成功的话说明 Token 权限和网络链路都通了。配置完成后建议重启一次 Cursor有时候 MCP Client 不会热加载配置重启后最保险。我在第一次配置时遇到过配置保存了但工具始终不出现的情况重启后立刻恢复正常。3.4 实战让 AI 读取设计稿生成登录页链路通了之后重点就变成怎么向 AI 提需求。我的经验是把提示词写成“指出数据来源 指出目标页面 指定技术栈 明确输出格式”四段式请使用蓝湖 MCP 工具查看设计稿文件 [{fileId}] 找到名为“登录页”的页面读取该页面的布局结构、所有组件的坐标与尺寸、 颜色值、字体样式以及文案内容。 然后使用 React Tailwind CSS 实现一个响应式登录页 要求布局比例尽量与设计稿一致颜色用设计稿中的色值。 先调用工具获取数据再输出代码。注意我在提示词里明确说了“先调用工具获取数据再输出代码”这是为了避免 AI 偷懒凭经验直接生成一个“差不多的登录页”。实测下来加了这句之后 AI 会先调用蓝湖工具再基于返回数据写代码。AI 的返回通常会分成几个步骤先是工具调用日志你会看到类似Calling get_page_markup with pageIdxxx的记录然后它会总结从蓝湖读取到的关键信息比如“页面宽度 1440px主色 #4F46E5标题字号 32px”最后才是代码输出。有一点要提前知道AI 生成的代码只能算“第一轮还原稿”不要指望一次就完美。但它已经把最耗时的信息搬运工作做完了你只需要做代码 review 和微调。这一步节省的时间占整个还原任务的大头。4. 常见问题与排查技巧实录4.1 MCP Server 显示 error / 连接失败现象Cursor 的 MCP 面板里lanhu 显示红色 error或者对话里 AI 说“无法访问蓝湖工具”。排查顺序我建议从下往上先在命令行手动运行启动命令看有没有报错。最常见的是 Token 未设置或失效命令行会直接提示鉴权失败。确认网络能访问蓝湖 OpenAPI。如果本地网络本身访问不了蓝湖MCP Server 拿到数据也是白搭。检查配置文件里的命令路径。Windows 上把npx改成npx.cmd这个坑我踩过一次直接占用了我半小时。如果你用了${LANHU_API_TOKEN}这种变量展开写法部分 Cursor 版本不支持在 JSON 配置里展开 shell 变量建议把 Token 直接放到env字段里或者干脆硬编码进args注意别提交 Git。最后还有一个容易被忽略的点改完配置之后 Cursor 并不会自动重连需要重启应用或者手动移除 Server 再重新添加。4.2 Cursor 登录异常与账号风控问题很多人搜过“too many computers used within the last 24 hours for the same cursor account”我也遇到过。这是 Cursor 官方对账号登录设备数量的风控策略短时间内太多设备或太多网络环境登录同一个账号就会触发这个提示。解决办法很简单停止在这台设备上反复登录等 24 小时后重试如果急着用就换回常用设备和网络环境。这类限制本质上是防共享账号滥用不是系统故障所以不要试图绕过等它自动解除就行。另外“cursor 注册账号可以用多久”这个问题本质上取决于账号类型。免费账号长期有效订阅则按周期扣费。如果你复购时发现生效日期不是从当前日期开始这通常是订阅平台的计算规则一般是按原账单周期顺延不是按购买当日重新起算。4.3 Agent 执行缓慢或提示 Taking longer than expected这个提示我理解是一种“超时保护”。出现它的原因大多是蓝湖 MCP 工具返回的数据量太大一次性把所有页面、所有标注都塞进上下文模型处理不动了。优化手段有三个方向缩小数据范围。不要对整份设计稿说“读取所有页面”要明确“只读取‘登录页’这一个页面”“只要首页首屏的布局数据”。减少工具调用轮次。对话历史里已经调用过的工具结果不需要重复调用你可以提醒 AI“直接用上一次获取的标注数据继续”。开启 Allow 和 Auto-run 权限时要有意识你给 AI 的权限越大它可能越激进地并行调用工具。首次运行建议选 “Allow Once”确认整个调用链没问题之后再说“以后蓝湖相关操作可以直接运行”。4.4 中文设置到底怎么弄这是搜索里最高频的问题集中回答一次。Cursor 界面汉化的正确姿势是等官方语言包或者使用基于插件机制的汉化方案修改安装目录文件的汉化方式会在软件更新后失效并可能触发校验问题。对话中文设置的两种做法全局设置Settings → Rules for AI加入“请始终使用简体中文回复代码注释使用简体中文”。单会话设置在对话输入框直接输入“接下来的所有回复请用中文”。顺带说一句“vibcoding”这类用法其实就是把 AI 当作主要编码工具、人只负责描述需求、review 结果的开发方式。接了蓝湖之后这种方式的准确率才真正提上来因为 AI 终于有了设计稿数据基础而不是凭空“ vibe”。4.5 数据对不上标注不准、权限缺失、版本不对如果你发现 AI 读到的数据和蓝湖网页上看到的不一致先检查三件事Token 权限。只读 Token 如果没被加进对应的团队或项目MCP Server 能连上但拉不到数据AI 会返回“无权限”或“资源不存在”。设计稿版本。蓝湖链接通常对应一个具体版本如果你给 AI 的文件 ID 是一周前的旧文件而设计师早改过了那数据自然对不上。让设计师直接复制当前生效的分享链接给你。页面命名。设计稿里的页面名可能是“未命名- 2”这种没有任何信息量的名字。建议要求团队统一规范画板命名比如“登录页- 桌面端”“登录页- 移动端”这能让 AI 更精确地定位目标页面。4.6 几个独家避坑心得这套链路跑通之后我总结出几个在实操中真正有价值的习惯把 Token 权限最小化是底线。AI 编程工具给你的便利越大你越要考虑它的边界。蓝湖只开放读取设计稿数据就足够完成还原任务绝不给写权限。就算某天真需要自动化标注也应该由专人手动控制写操作。不要盲目信任 AI 的“工具调用成功”日志。有时候 MCP 工具成功返回了数据但 AI 在生成代码时因为上下文长度限制只用了其中一部分标注剩下的按经验补了。所以 prompt 里尽量让 AI“如数据不完整则明确说明”这会逼它在遇到缺失信息时说出来而不是自己脑补。给团队立一个规矩后端接口、设计稿链接、需求变更记录都尽可能结构化地提供给 AI。MCP 只能帮你拿到蓝湖数据拿不到需求背景那句话还得靠人写清楚。我可以让 AI 写 90% 的代码但那 10% 的业务理解永远是我的职责。我个人在实际操作中最大的体会是把 Cursor 接到蓝湖不是要让 AI 取代工程师而是让 AI 取代“机械搬运标注”的那部分工作。设计师不再需要追问我也从重复劳动里解放出来省下来的每一分钟都在为真正的业务判断留出空间。如果你也在被设计稿还原折腾按这篇的方法走一遍大概率能找到同样的自由感。