MCP 服务器

Lanhu MCP Server

Enables AI to directly read and analyze Lanhu design drafts and requirement documents to generate HTML, CSS, and structural analyses. It allows users to extract design slices and process prototype pages directly within AI clients.

README

🎨 Lanhu MCP Server

The official MCP server for Lanhu (蓝湖) — Bridge AI coding assistants with your design system

English · 中文

</div>

Overview

Lanhu MCP Server (mcp-lanhu) is a Model Context Protocol (MCP) server that connects AI coding assistants — such as Cursor, Windsurf, Claude Desktop, and Claude Code — directly to your Lanhu (蓝湖) design projects. It enables AI to read design specs, extract HTML/CSS, parse PRD documents, and download image assets without leaving the editor.

One command, zero config — just npx -y mcp-lanhu and paste your Lanhu link in chat.

Why Lanhu MCP?

Design-to-code in seconds: AI reads your Lanhu design and generates pixel-accurate HTML + CSS, complete with design tokens (colors, fonts, shadows, gradients).
PRD-aware coding: Feed your product requirements document (PRD) or Axure prototype to AI for context-aware implementation.
Asset pipeline: Extract slices, icons, and images directly from Lanhu — no manual export needed.
Works with any MCP client: Cursor, Windsurf, Claude Desktop, Claude Code, and any future MCP-compatible IDE.
Stdio transport: Standard MCP stdio protocol — lightweight, fast, and universally compatible.

概述

Lanhu MCP Server（mcp-lanhu）是一个 Model Context Protocol (MCP) 服务器，让 Cursor、Windsurf、Claude Desktop、Claude Code 等 AI 编程助手直接连接你的蓝湖设计项目。AI 可以读取设计稿、提取 HTML/CSS、解析需求文档（PRD）、下载切图资源，全程无需离开编辑器。

一行命令，零配置 — 只需 npx -y mcp-lanhu，在对话中粘贴蓝湖链接即可使用。

为什么选择 Lanhu MCP？

设计稿秒变代码：AI 读取蓝湖设计稿，生成像素级精准的 HTML + CSS，包含完整的 Design Tokens（颜色、字体、阴影、渐变）。
需求文档驱动开发：将 PRD 或 Axure 原型交给 AI，实现需求感知的智能编码。
自动化资源管线：直接从蓝湖提取切图、图标和图片，无需手动导出。
兼容所有 MCP 客户端：Cursor、Windsurf、Claude Desktop、Claude Code，以及任何未来的 MCP 兼容 IDE。
Stdio 传输协议：标准 MCP stdio 协议，轻量、高效、通用兼容。

安装 / Quick Start

无需 clone 代码，直接在 AI 客户端配置中使用 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

然后在环境变量或 .env 文件中设置 LANHU_COOKIE。

本地开发 / Local Development

{
  "mcpServers": {
    "lanhu": {
      "command": "node",
      "args": [
        "--env-file=/absolute/path/to/lanhu-mcp/.env",
        "/absolute/path/to/lanhu-mcp/dist/server.js"
      ],
      "cwd": "/absolute/path/to/lanhu-mcp"
    }
  }
}

先执行 npm run build 生成 dist/。可选配置项（日志级别、超时等）见 config.example.env。

获取 Cookie

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

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

Tools / 工具一览

Tool	Description	说明
`lanhu_analyze_designs`	Design → HTML + CSS + Design Tokens	设计图 → HTML+CSS + 设计令牌
`lanhu_analyze_pages`	PRD / Axure → Structured analysis	PRD/原型 → 结构化分析
`lanhu_list_designs`	List all design images in a project	列出项目设计图
`lanhu_list_pages`	List all pages in a PRD document	列出 PRD 页面
`lanhu_get_slices`	Extract icon & image assets (slices)	提取切图资源
`lanhu_resolve_invite_link`	Resolve Lanhu invite/share links	解析蓝湖邀请链接

Use Cases / 使用场景

Frontend development: Paste a Lanhu design link → AI generates responsive components matching the design spec.
前端开发：粘贴蓝湖设计链接 → AI 生成与设计稿匹配的响应式组件。
Design QA: Compare implementation against design tokens (spacing, colors, typography).
设计走查：对比实现与设计令牌（间距、颜色、字体）。
PRD implementation: Feed PRD pages to AI for requirement-aware feature development.
需求实现：将 PRD 页面交给 AI，实现需求驱动的功能开发。
Asset export: Batch-extract icons and images without opening Lanhu manually.
资源导出：批量提取图标和图片，无需手动打开蓝湖。

Compatibility / 兼容性

MCP Client	Supported	Transport
Cursor	✅	stdio
Windsurf	✅	stdio
Claude Desktop	✅	stdio
Claude Code	✅	stdio
Any MCP-compatible IDE	✅	stdio

开发 / Development

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       # 运行测试