开源了！用 MCP 把蓝湖设计稿直接接进 Cursor，AI 按你的 Vue/React 项目写组件

前言设计稿和 AI 之间还隔着一堵墙做前端的朋友大概都经历过这种场景你把蓝湖链接丢给 Cursor说「帮我还原这个页面」。AI 吭哧吭哧生成一份index.html打开一看——样式大概像但跟你的 Vue 项目八竿子打不着切图得自己下颜色字号对不上设计规范PRD 还得另开网页对照。问题不在 AI 不够聪明而是 AI 根本「进不去」蓝湖。蓝湖的设计数据锁在 Web 里Cursor 默认只能看到你仓库里的代码。中间缺一层桥梁。这就是MCPModel Context Protocol要解决的问题给 AI 装「外挂」让它能调用外部工具读取真实数据。我开源了lanhu-server-mcp——一个本地运行的蓝湖 MCP Server。配好后Cursor 可以直接读设计稿结构、Design Tokens、切图、PRD 原型并且引导 AI 在你的项目里写.vue/.tsx/ 小程序代码而不是交一份孤立的 HTML。⚠️免责声明本项目为第三方开源工具非蓝湖官方产品。通过浏览器 Cookie 访问蓝湖 Web 接口仅供学习与个人开发使用。什么是 MCP30 秒理解MCP 是 Anthropic 推动的开放协议可以理解为AI 的 USB 接口HostCursor、Claude Desktop 等 AI 客户端Server你本地或远程跑的工具服务比如本项目的蓝湖 MCPTools / Prompts / ResourcesServer 暴露给 AI 的能力Cursor 在mcp.json里配置好 Server 后对话时 AI 会自动决定何时调用工具——你不需要手写 API。lanhu-server-mcp 能做什么核心亮点能力说明 读设计稿图层树、Design Tokens颜色/字体/阴影/圆角、预览图 按项目写码自动识别 Vue/React/uni-app/Tailwind 等输出实现指引️ 切图下载批量下载 mapping.json路径映射 读 PRDAxure / 原型页面目录与正文提取 Cookie 热更新过期了一条命令重写一般不用重启 MCP 短链解析邀请链接 / 分享短链转成可用项目 URL和其他方案的差异很多「设计转代码」工具只管吐 HTML。本项目重点在lanhu_implement_context读取蓝湖设计规格Tokens、文案、组件分组建议扫描当前 Git 仓库的技术栈框架、UI 库、样式方案、组件目录给 AI 一份写码约束必须改项目源码、复用现有组件、禁止只交 HTML这才是真正可落地的 Design-to-Code 工作流。功能一览14 工具工具用途lanhu_whoami验证 Cookie 是否有效lanhu_set_cookie对话中写入 Cookielanhu_list_designs列出项目全部设计稿lanhu_get_design图层 Tokens 预览可附图lanhu_get_tokens仅提取 Design Tokenslanhu_get_slices切图列表支持下载到指定目录lanhu_implement_context⭐按项目写码上下文推荐lanhu_project_stack检测当前仓库前端技术栈lanhu_to_html转 HTML仅作视觉参考lanhu_resolve_invite解析邀请/分享短链lanhu_list_pagesPRD / 原型页面列表lanhu_analyze_page提取原型页正文还内置两个 Promptimplement-design引导 AI 在仓库里实现设计design-review对照 Tokens 做 UI 走查快速上手3 步5 分钟环境要求Node.js20Cursor或其他支持 MCP 的客户端蓝湖账号能正常登录 Web 版第一步配置 Cursor MCP在项目或用户目录创建 / 编辑.cursor/mcp.json{mcpServers:{lanhu:{command:npx,args:[-y,lanhu-server-mcp]}}}保存后重启 Cursor或刷新 MCP 连接。此时 Server 已通过 npx 拉取无需 clone 仓库。安全提示不要把 Cookie 写进mcp.json。npm 包不会包含任何人的 Cookie每位使用者各自配置。第二步获取并写入蓝湖 Cookie浏览器打开 lanhuapp.com 并登录按F12→ 切到Network网络刷新页面点任意lanhuapp.com的请求在Request Headers里找到Cookie复制冒号后面的完整字符串不要带Cookie:前缀在终端执行Cookie 已在剪贴板时npx-ylanhu-server-mcp set-cookie --from-clipboardCookie 会写入当前目录的./.lanhu-cookie立即生效一般不需要重启 MCP。验证是否成功——在 Cursor 里说调用 lanhu_whoami 检查登录态第三步开干直接粘贴蓝湖链接对话即可。几个实用示例列出项目设计稿列出这个项目的设计稿 https://lanhuapp.com/web/#/item/project/stage?tid你的tidpid你的pid按当前项目实现 UI推荐用蓝湖这个设计按当前 Vue 项目实现首页 https://lanhuapp.com/web/#/item/project/detailDetach?tidxxxpidxxximage_idxxxAI 会自动调用lanhu_implement_context结合你仓库里的package.json、目录结构生成实现方案并写代码。下载切图到项目把这个设计稿的切图下载到 src/assets/lanhu并给出 mapping 粘贴蓝湖链接推荐工作流实战版① lanhu_whoami → 确认 Cookie 没过期 ② lanhu_list_designs → 确认设计稿名称 / ID ③ lanhu_implement_context → 拿 Tokens 技术栈 写码指引 ④ lanhu_get_slices → download:truedownload_dir 指向 assets ⑤ AI 写 .vue / .tsx → 直接改项目文件 ⑥ design-review Prompt → 走查颜色、字号、间距是否对齐设计比「一次性生成 HTML」多几步但产出是能进 CI、能 Code Review 的项目代码。技术实现简述项目用TypeScript编写stdio 模式跑 MCP Server核心模块src/ lanhu/ # 蓝湖 API 客户端Cookie 鉴权、重试、超时 transform/ # Tokens / 切图 / HTML 转换 project/ # 技术栈检测、implement context 组装 tools/ # MCP Tools 注册 prompts/ # implement-design / design-review几个值得提的设计Cookie 热加载每次调用重新读.lanhu-cookie过期后重写即可输出控量超大 JSON/HTML 自动落盘到.lanhu-mcp-data/outputs/避免撑爆 AI 上下文HTTP 重试429 / 5xx 指数退避网络抖动更稳结构化错误[AUTH_EXPIRED]、[RATE_LIMIT]等失败时明确告诉你下一步常见问题 FAQQ1Cookie 多久过期过期了怎么办蓝湖 Cookie 会随登录态失效通常几天到几周不等。过期后工具返回[AUTH_EXPIRED]重新执行npx-ylanhu-server-mcp set-cookie --from-clipboardQ2团队能用吗会不会共用我的 Cookie可以。npm 包不含发布者 Cookie。每人用自己的蓝湖账号 Cookie存在本机./.lanhu-cookie或~/.lanhu-mcp/。代码协作走 GitCookie 各管各的。Q3AI 还是给我 HTML 怎么办明确说「按项目技术栈写组件不要只输出 HTML」或使用 Promptimplement-design。核心工具是lanhu_implement_context不是lanhu_to_html。Q4支持 Photoshop 稿吗支持。PS 导出结构用board.layersTokens 提取已适配fillColor/strokeColor等字段。Sketch 稿同样支持。Q5转 HTML 报错「版本数据不存在」lanhu_to_html依赖 DDS schema部分设计稿可能没有。不影响Tokens、图层树、切图读取。正式开发走lanhu_implement_context即可。Q6可选环境变量有哪些变量默认说明LANHU_TIMEOUT_MS30000API 超时LANHU_MAX_OUTPUT_CHARS20000落盘阈值LANHU_RETRY_ATTEMPTS3重试次数DATA_DIR./.lanhu-mcp-data缓存目录本地开发 / 二次定制如果你想改源码或贡献 PRgitclone https://gitee.com/qiu-hongling/lanhu-mcp.gitcdlanhu-mcpnpminstallnpmrun buildCursor 里把 MCP 命令改为{mcpServers:{lanhu:{command:node,args:[G:/你的路径/lanhu-mcp/dist/index.js]}}}Windows 用户还可以双击项目里的更新蓝湖Cookie.cmd快速更新 Cookie。总结lanhu-server-mcp做的事情很简单给 Cursor 接上蓝湖的数据管道让 AI 从「瞎猜设计长什么样」变成「真的读过设计稿再写代码」。如果你也在用 Cursor 蓝湖欢迎试试npmnpx -y lanhu-server-mcpGiteehttps://gitee.com/qiu-hongling/lanhu-mcpnpm 页面https://www.npmjs.com/package/lanhu-server-mcp觉得有用的话Gitee 点个 Star有问题提 Issue欢迎 PR。附录文章摘要发布时可作「导语」本文介绍开源项目lanhu-server-mcp一个本地 MCP Server让 Cursor 直接读取蓝湖设计稿的图层、Design Tokens、切图和 PRD。相比只生成 HTML 的方案它通过lanhu_implement_context检测 Vue/React/uni-app 等项目技术栈引导 AI 在仓库内写可运行组件。npm 一行安装Cookie 本地自填MIT 开源。