蓝湖 MCPLanhu MCP使用指南让设计稿与开发流程无缝连接一、前言在现代前后端协作开发中设计稿的获取与对齐一直是一个高频痛点。设计师使用蓝湖Lanhu进行设计管理而开发者往往需要反复在网页中查看、切图、对齐信息效率较低。随着 MCPModel Context Protocol模型上下文协议的普及越来越多工具开始支持“AI 直接读取设计数据”的能力。本文介绍的开源项目 https://github.com/dsphper/lanhu-mcp它的核心目标是将蓝湖设计数据接入 MCP让 AI如 Cursor、Claude、ChatGPT 插件等可以直接读取设计稿信息实现自动化开发辅助。二、Lanhu MCP 是什么Lanhu MCP 是一个基于 MCP 协议封装的服务它可以 对接蓝湖 API 获取设计稿页面结构 获取组件信息颜色、字体、间距等 提供给 AI 工具使用⚡ 实现“设计稿 → 代码”的辅助生成能力简单来说它让 AI 可以“读懂蓝湖设计稿”三、适用场景Lanhu MCP 适合以下场景1. 前端开发自动生成页面布局代码获取设计稿 CSS 信息减少手动对照设计图时间2. AI 编程助手Cursor / Claude / ChatGPT 插件根据设计稿生成组件代码3. 团队协作统一设计稿数据来源减少沟通成本四、核心能力Lanhu MCP 提供的能力通常包括1. 设计稿列表查询获取项目下所有设计页面2. 页面结构解析解析画板结构、图层信息3. 样式数据提取字体大小颜色值间距对齐方式4. 图片资源获取自动下载切图获取图片 URL五、快速开始1. 克隆项目git clone https://github.com/dsphper/lanhu-mcp.git cd lanhu-mcp2. 安装依赖如果是 Node.js 项目npm install或yarn install3. 配置蓝湖 Token通常需要配置蓝湖的 API Token例如export LANHU_TOKEN你的token export LANHU_PROJECT_ID你的项目ID或者在.env文件中LANHU_TOKENxxxxxx LANHU_PROJECT_IDxxxxxx4. 启动 MCP 服务npm run start启动后会提供一个 MCP Server例如http://localhost:3000/mcp六、在 Cursor / AI 中使用如果你使用 Cursor可以在 MCP 配置中加入{ mcpServers: { lanhu: { url: http://localhost:3000/mcp } } }然后你就可以直接在 AI 中说“帮我根据蓝湖设计稿生成一个登录页面”AI 会自动拉取设计稿结构分析布局生成前端代码七、工作流程示意整体流程如下蓝湖设计稿 ↓ Lanhu MCP 服务 ↓ AICursor / Claude / ChatGPT ↓ 生成前端代码 / UI结构八、优势总结相比传统方式Lanhu MCP 的优势非常明显✔ 提升效率无需手动切图、对照 CSS✔ 降低沟通成本设计稿结构直接可被 AI 使用✔ 自动化开发支持“设计 → 代码”半自动生成✔ 可扩展性强可接入多个 AI 工具九、注意事项蓝湖 API 可能存在权限限制MCP 服务需要保持稳定运行设计稿结构复杂时 AI 生成效果依赖 prompt建议结合组件库Element Plus / Ant Design / Vue3 / React十、总结Lanhu MCP 是一个非常有价值的工具它本质上是打通设计稿与 AI 编程之间的桥梁对于前端开发者来说它可以显著提升开发效率是“AI 前端开发”的一个重要工具链补充。项目地址 https://github.com/dsphper/lanhu-mcp
