mcp-lanhu

v2.0.1

Published

17 days ago

MCP server for Lanhu (蓝湖) design collaboration platform — lets AI assistants read designs, PRDs and slices.

🎨 蓝湖 MCP Server

让 AI 编程助手直接读取蓝湖设计稿、提取代码、解析需求文档

这是什么

mcp-lanhu 是蓝湖的 MCP 服务器，装上之后 Cursor、Windsurf、Claude Desktop、Claude Code 都能直接连接蓝湖。AI 可以读取设计稿、提取 HTML/CSS、解析 PRD、下载切图，全程不用离开编辑器。

一行命令，零配置 — npx -y mcp-lanhu，粘贴蓝湖链接就能用。

核心能力

设计稿 → 代码：生成像素级 HTML + CSS，含完整 Design Tokens（颜色、字体、阴影、渐变）
结构化 Design Tokens：提取所有颜色、字体族/字号/字重、阴影、边框、圆角，按使用频率排序
PRD 驱动开发：将 PRD 或 Axure 原型交给 AI，需求感知编码
自动切图：直接从蓝湖提取切图、图标和图片，无需手动导出
并发 + 重试：多设计稿并行分析，网络异常自动重试
MCP Resources & Prompts：内置前端开发和设计走查 Prompt 模板

安装

最快方式：让 AI 帮你装

复制下面这段话，发给你的 AI 助手（Cursor / Claude Code / Windsurf）：

帮我安装蓝湖 MCP 服务器：https://github.com/MrDgbot/lanhu-mcp

AI 会自动读取仓库说明并完成配置，你只需要提供蓝湖 Cookie。

手动配置

无需 clone 代码，npx 自动安装。

Cursor / Windsurf — 编辑 .cursor/mcp.json（或 .windsurf/mcp.json）：

{
  "mcpServers": {
    "lanhu": {
      "command": "npx",
      "args": ["-y", "mcp-lanhu"],
      "env": { "LANHU_COOKIE": "your_cookie_here" }
    }
  }
}

Claude Desktop — 编辑 claude_desktop_config.json：

{
  "mcpServers": {
    "lanhu": {
      "command": "npx",
      "args": ["-y", "mcp-lanhu"],
      "env": { "LANHU_COOKIE": "your_cookie_here" }
    }
  }
}

Claude Code：

claude mcp add lanhu -- npx -y mcp-lanhu

然后设置环境变量 LANHU_COOKIE。

获取 Cookie

登录蓝湖
F12 打开开发者工具 → Network 标签
复制任意请求的 Cookie 请求头

配置完成后重启客户端，粘贴蓝湖链接即可使用。

工具

`lanhu_design` — 设计稿

通过 mode 参数切换功能：

| Mode | 说明 | |------|------| | list | 列出项目所有设计图 | | analyze | 设计图 → HTML+CSS + Design Tokens（默认） | | tokens | 仅提取 Design Tokens（字体、颜色、阴影等） | | slices | 提取切图资源 |

analyze 模式支持 include 参数按需选择输出：html、image、tokens、layout、layers、slices。默认 ["html", "tokens"]。

Design Tokens 输出示例：

=== Design Tokens ===

Colors (12 unique):
  rgba(140,140,140,1) x48
  rgba(255,255,255,1) x28
  rgba(51,51,51,1) x12
  ...

Fonts (7 unique):
  Source Han Sans CN / Regular / 14px x25
  PingFang SC / Bold / 10px x3
  ...

Shadows (3 unique):
  rgba(0,81,187,0.03) 0px 0px 0px 1px x3
  ...

`lanhu_page` — PRD / 原型

| Mode | 说明 | |------|------| | list | 列出 PRD 所有页面 | | analyze | PRD/原型 → 结构化分析（默认） |

`lanhu_resolve_invite` — 解析邀请链接

将蓝湖分享链接解析为可用的项目 URL。

MCP Resources & Prompts

| 类型 | 名称 | 说明 | |------|------|------| | Resource | project-designs | 项目设计稿列表（lanhu://project/{pid}/designs?tid={tid}） | | Prompt | frontend-dev | 根据设计稿生成像素级前端代码 | | Prompt | design-review | 审查设计一致性和可实现性 |

使用场景

前端开发：粘贴蓝湖链接 → AI 生成与设计稿匹配的组件代码
设计走查：对比实现与 Design Tokens（间距、颜色、字体）
需求实现：将 PRD 交给 AI，需求驱动的功能开发
资源导出：批量提取图标和图片

兼容性

| 客户端 | 支持 | 传输 | |--------|------|------| | Cursor | ✅ | stdio | | Windsurf | ✅ | stdio | | Claude Desktop | ✅ | stdio | | Claude Code | ✅ | stdio | | 其他 MCP 兼容 IDE | ✅ | stdio |

开发

git clone https://github.com/MrDgbot/lanhu-mcp.git && cd lanhu-mcp
npm install && cp config.example.env .env  # 填入 LANHU_COOKIE
npm run dev    # 开发模式
npm run build  # 构建
npm test       # 测试

FAQ

Q: 什么是 MCP？ A: Model Context Protocol，让 AI 助手安全连接外部工具的开放标准。

Q: 支持哪些蓝湖套餐？ A: 任何可网页访问的蓝湖账号，通过浏览器 Cookie 认证。

Q: analyze 返回太大怎么办？ A: 用 include 参数，如 ["tokens"] 只返回 Design Tokens。默认不含 base64 图片。

Q: 不用 Cursor 也能用？ A: 能。支持所有 MCP 客户端。

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme