蓝湖 MCP让管理端页面更简单

蓝湖 MCP（Lanhu MCP）使用指南：让设计稿与开发流程无缝连接

一、前言

在现代前后端协作开发中，设计稿的获取与对齐一直是一个高频痛点。设计师使用蓝湖（Lanhu）进行设计管理，而开发者往往需要反复在网页中查看、切图、对齐信息，效率较低。

随着 MCP（Model 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-mcp

2. 安装依赖

如果是 Node.js 项目：

复制代码

npm install

或：

复制代码

yarn install

3. 配置蓝湖 Token

通常需要配置蓝湖的 API Token，例如：

复制代码

export LANHU_TOKEN=你的token
export LANHU_PROJECT_ID=你的项目ID

或者在 .env 文件中：

复制代码

LANHU_TOKEN=xxxxxx
LANHU_PROJECT_ID=xxxxxx

4. 启动 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 服务
     ↓
AI（Cursor / 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