lanhu-mcp-server
This server lets AI coding tools read Lanhu (Blue Lake) design data and automate Design-to-Code workflows.
List Lanhu teams, projects, folders, and design drafts.
Get design draft details, preview image URLs, and annotation data (layer trees with exact positions, sizes, colors, fonts).
Fetch complete structured design documents with absolute coordinates, full styles (fill/border/shadow/typography), and Design Tokens.
Retrieve DDS semantic UI component trees (e.g., NavBar, Avatar, Input, ImageText) with row/col layout and precise styles.
Generate front-end code from DDS data, including Vue 3 SFC or pure HTML.
One-click download design packages via Puppeteer: official HTML/CSS code plus sliced images, with CDN images replaced by local paths.
Download design covers or arbitrary images to local directories.
Set the active project from a Lanhu URL or project UUID so subsequent tool calls don't need projectId.
Inspect project sectors/groups to understand design organization.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@lanhu-mcp-server Show my recent Lanhu projects"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
蓝湖 MCP Server
让 AI 编程工具(Claude Code / Cursor / Cline 等)直接读取蓝湖设计稿数据,实现 Design to Code 自动化。
功能
项目浏览 — 列出团队项目、设计稿列表、分区信息
精确设计数据 — 获取完整图层树(@1x 绝对坐标、全量样式 fill/border/shadow/typography)
DDS 语义化组件树 — 获取蓝湖 AI 识别的 UI 组件结构(NavBar / Avatar / Input / ImageText 等),包含 row/col 布局和精确样式
代码生成 — 基于 DDS 语义数据生成 Vue 3 SFC 或纯 HTML 代码
一键下载 — 通过 Puppeteer 从 DDS 页面提取官方 HTML/CSS 代码 + 下载所有切图并替换为本地路径
Design Tokens — 自动提取颜色、字体、间距、圆角等设计变量
资源下载 — 封面图、切图、导出图片下载
Related MCP server: lanhu-mcp
安装
npm install -g dc-lanhu-mcp-server或免安装直接使用:
npx dc-lanhu-mcp-server30 秒接入指南
全局安装后,按你使用的 AI 编程工具复制对应配置即可:
Claude Code(CLI)
claude mcp add lanhu-mcp \
-e LANHU_COOKIE="你的cookie" \
-e LANHU_AUTHORIZATION="你的token" \
-- dc-lanhu-mcp-serverCursor
在项目根目录创建 .cursor/mcp.json:
{
"mcpServers": {
"lanhu-mcp": {
"command": "dc-lanhu-mcp-server",
"env": {
"LANHU_COOKIE": "你的cookie",
"LANHU_AUTHORIZATION": "你的token"
}
}
}
}Codex(OpenAI)
codex mcp add lanhu-mcp \
-e LANHU_COOKIE="你的cookie" \
-e LANHU_AUTHORIZATION="你的token" \
-- dc-lanhu-mcp-serverWindsurf
在 ~/.codeium/windsurf/mcp_config.json 添加:
{
"mcpServers": {
"lanhu-mcp": {
"command": "dc-lanhu-mcp-server",
"env": {
"LANHU_COOKIE": "你的cookie",
"LANHU_AUTHORIZATION": "你的token"
}
}
}
}VSCode Copilot Chat
在项目 .vscode/mcp.json 添加:
{
"servers": {
"lanhu-mcp": {
"command": "dc-lanhu-mcp-server",
"env": {
"LANHU_COOKIE": "你的cookie",
"LANHU_AUTHORIZATION": "你的token"
}
}
}
}Cline(VSCode 扩展)
在 VSCode settings.json 添加:
{
"cline.mcpServers": {
"lanhu-mcp": {
"command": "dc-lanhu-mcp-server",
"env": {
"LANHU_COOKIE": "你的cookie",
"LANHU_AUTHORIZATION": "你的token"
}
}
}
}Cherry Studio / 其他 GUI 客户端
设置 → MCP Servers → 添加:
Type:
stdioCommand:
dc-lanhu-mcp-serverEnv:
LANHU_COOKIE=xxx,LANHU_AUTHORIZATION=xxx
验证接入
在任意 agent 中输入:"列出我的蓝湖项目" → 返回项目列表即接入成功 ✅
⚠️ 安全须知
重要:
LANHU_COOKIE和LANHU_AUTHORIZATION是你的蓝湖账号凭证,等同于密码。
.env文件已自动设置chmod 600(仅文件所有者可读写)务必 将
.env和.mcp.json加入.gitignore,切勿提交到代码仓库若凭证泄露,请立即在蓝湖网页端退出登录使 Cookie 失效
Docker 环境下请通过环境变量注入凭证,不要挂载含凭证的配置文件到镜像中
Puppeteer 默认启用沙箱保护;如需在 Docker 中关闭,设置
LANHU_PUPPETEER_NO_SANDBOX=1
配置方式
只需 2 个字段:
LANHU_COOKIE+LANHU_AUTHORIZATION。tenantId自动发现为"0"(已验证可用),projectId通过lanhu_set_project从 URL 自动提取,或在工具参数中直接传入。
5 种配置方式总览
# | 方式 | 优先级 | 配置位置 | 适用场景 |
① | 环境变量 | 最高 |
| CI/CD、Docker、临时测试 |
② |
| 高 | 项目根目录 | 团队协作,配置随代码走 |
③ |
| 中 | 包安装目录 | 本地开发,不提交 git |
④ |
| 低 |
| 个人开发者,全局生效 |
⑤ | 交互引导 | 兜底 | 运行时输入 | 首次使用,零配置启动 |
优先级:① > ② > ③ > ④ > ⑤(高优先级覆盖低优先级)① 环境变量(优先级最高)
通过进程环境变量注入,适用于 CI/CD、Docker 容器或临时测试:
# 方式 A:export 后启动
export LANHU_COOKIE="你的cookie"
export LANHU_AUTHORIZATION="你的token"
npx dc-lanhu-mcp-server
# 方式 B:一行命令
LANHU_COOKIE="你的cookie" LANHU_AUTHORIZATION="你的token" npx dc-lanhu-mcp-server
# 方式 C:Docker / CI 环境变量
# 在 Dockerfile 或 CI 配置中设置 LANHU_COOKIE 和 LANHU_AUTHORIZATION会覆盖所有配置文件中的值。
② .mcp.json 项目级配置(推荐团队使用)
在项目根目录创建 .mcp.json,配置随代码走,可提交到 git:
{
"mcpServers": {
"lanhu-mcp": {
"type": "stdio",
"command": "npx",
"args": ["dc-lanhu-mcp-server"],
"env": {
"LANHU_COOKIE": "你的cookie",
"LANHU_AUTHORIZATION": "你的token"
}
}
}
}优势:
✅ 只需 2 个字段,
tenantId/projectId自动发现✅ 配置跟随项目,新成员 clone 后即可使用
✅ 可加入
.gitignore保护敏感信息
支持路径:
.mcp.json(标准,Claude Code / Cursor 通用).cursor/mcp.json(Cursor 专用)
③ .env 本地文件
在 dc-lanhu-mcp-server 包安装目录下创建 .env 文件:
LANHU_COOKIE=你的cookie
LANHU_AUTHORIZATION=你的token文件权限自动设为 600(仅所有者可读写)。
适用:本地开发,不想污染全局配置。
④ settings.json 全局配置(推荐个人使用)
通过 Claude Code CLI 注册,配置写入 ~/.claude/settings.json,所有项目通用:
# 注册
claude mcp add lanhu-mcp \
-e LANHU_COOKIE="你的cookie" \
-e LANHU_AUTHORIZATION="你的token" \
-- npx dc-lanhu-mcp-server
# 验证
claude mcp list
# 使用本地安装路径(更快启动)
claude mcp add lanhu-mcp \
-e LANHU_COOKIE="你的cookie" \
-e LANHU_AUTHORIZATION="你的token" \
-- node /path/to/dc-lanhu-mcp-server/dist/index.js也支持手动编辑 ~/.claude/settings.json:
{
"mcpServers": {
"lanhu-mcp": {
"command": "npx",
"args": ["dc-lanhu-mcp-server"],
"env": {
"LANHU_COOKIE": "你的cookie",
"LANHU_AUTHORIZATION": "你的token"
}
}
}
}⑤ 交互引导(首次兜底)
无任何配置时,首次运行自动进入交互引导:
npx dc-lanhu-mcp-server引导流程:
提示输入
LANHU_COOKIE提示输入
LANHU_AUTHORIZATION(可选,直接回车跳过)提示输入
tenantId(可选,直接回车跳过 → 自动发现)粘贴蓝湖项目 URL(可选,直接回车跳过 → 通过
lanhu_set_project设置)选择写入位置(
.env/settings.json/ 两者)自动保存,下次启动无需重复输入
引导只在交互式终端中进行。若 stdin 不是 TTY(例如被 MCP 客户端以管道方式启动)且没有任何配置, 服务器会直接打印配置指引并退出,不会阻塞等待输入。
配置优先级
多个配置源共存时,按以下优先级加载(局部 > 全局):
process.env → .mcp.json → .env → settings.json → 交互引导
↑ ↑ ↑ ↑ ↑
环境变量 项目级配置 本地env Claude全局 首次兜底示例:
同时有
.mcp.json和.env→ 使用.mcp.json同时有环境变量和配置文件 → 使用环境变量
只有
settings.json→ 自动回填.env
获取蓝湖凭证
登录 蓝湖网页版
F12 打开开发者工具
进入 Network 标签
刷新页面,选择任意 Fetch/XHR 请求
在 Request Headers 中复制:
Cookie→LANHU_COOKIE(必需)Authorization→LANHU_AUTHORIZATION(推荐,部分接口需要)
只需这 2 个凭证,
tenantId和projectId不需要手动获取。
使用流程
配置凭证(2 个字段)→ 设置项目(URL 自动提取)→ 获取设计数据第一步:配置凭证 — 选择上述 5 种方式之一,只需 LANHU_COOKIE + LANHU_AUTHORIZATION
第二步:设置项目 — 两种方式任选:
调用
lanhu_set_project传入蓝湖 URL,自动提取projectId(推荐)或在每个工具调用中直接传
projectId参数
第三步:获取设计数据 — 调用 lanhu_get_design_document 等工具
# 示例:在 Claude Code 中对话
> "从这个蓝湖链接获取设计稿并生成 Vue 组件:
> https://lanhuapp.com/web/#/item/project/detailDetach?pid=xxx&project_id=xxx&image_id=yyy"
# MCP Server 自动完成:
# 1. 从 URL 提取 projectId 和 imageId
# 2. autoDiscover() 设置 tenantId = "0"
# 3. 调用 getDesignDocument(imageId, projectId)
# 4. 返回完整设计数据(图层树 + 样式 + Design Tokens)MCP Tools
Tool | 说明 |
| 从蓝湖 URL 中提取并设置默认 projectId(设置后后续工具免传) |
| 列出团队项目/文件夹 |
| 获取项目下的设计稿列表 |
| 获取设计稿详情(尺寸、预览图、版本) |
| 获取完整精确结构化设计数据(核心) |
| 获取标注数据(图层树) |
| 获取预览图 URL |
| 提取 Design Tokens |
| 获取项目分区信息 |
| 获取 DDS 语义化 UI 组件树 |
| 基于 DDS 数据生成 Vue / HTML 代码 |
| 一键下载设计稿(DDS 代码 + 切图) |
| 下载设计稿封面图 |
| 下载任意图片到本地 |
环境变量
变量 | 必需 | 说明 |
| 是 | 蓝湖登录 Cookie |
| 否 | Authorization Token(部分接口需要) |
| 否 | 租户 ID(不配置则自动发现,默认 |
| 否 | 默认项目 ID(不配置则通过工具参数传入,或使用 |
| 否 | Chrome 路径( |
| 否 | 设为 |
测试
方式一:MCP Inspector(推荐)
MCP Inspector 是官方调试工具,提供 Web UI 可以直接调用 Tools:
# 设置环境变量
export LANHU_COOKIE="你的cookie"
export LANHU_AUTHORIZATION="你的token"
# 启动 Inspector
npx @modelcontextprotocol/inspector node dist/index.js浏览器会打开 http://localhost:5173,可以:
查看所有注册的 Tools
手动调用每个 Tool 并查看返回结果
调试输入参数
方式二:直接在 Claude Code 中测试
# 1. 添加 MCP Server
claude mcp add lanhu-mcp -e LANHU_COOKIE="你的cookie" -- node $(pwd)/dist/index.js
# 2. 启动 Claude Code,直接对话测试
claude
# 然后在对话中说:
# "列出我的蓝湖项目"
# "获取设计稿 xxx 的数据"使用流程
配置凭证 —
.mcp.json中只需LANHU_COOKIE+LANHU_AUTHORIZATION设置项目(二选一):
调用
lanhu_set_project传入蓝湖 URL,自动提取projectId或在每个工具调用中直接传
projectId参数
获取设计数据 — 调用
lanhu_get_design_document等工具
# 示例对话流程:
> "从这个蓝湖链接获取设计稿:https://lanhuapp.com/web/#/item/project/detailDetach?pid=xxx&project_id=xxx&image_id=yyy"
# MCP Server 自动:
# 1. 提取 projectId 和 imageId
# 2. 调用 getDesignDocument(imageId, projectId)
# 3. 返回完整设计数据方式三:命令行快速验证
# 确认 Server 能正常启动(会等待 stdio 输入)
echo '{"jsonrpc":"2.0","id":1,"method":"initialize","params":{"protocolVersion":"2024-11-05","capabilities":{},"clientInfo":{"name":"test","version":"0.1.0"}}}' | LANHU_COOKIE="你的cookie" node dist/index.js方式四:开发模式 + Inspector
# 使用 tsx 直接运行,改代码无需重新构建
npx @modelcontextprotocol/inspector npx tsx src/index.ts错误日志
Server 会自动捕获所有异常并记录到日志文件,方便排查问题。
日志位置:
~/.lanhu-mcp/error.log监控内容:
TOOL_ERROR— Tool 调用失败(含工具名、参数、完整堆栈)UNCAUGHT_EXCEPTION— 未捕获异常UNHANDLED_REJECTION— 未处理的 Promise 拒绝SIGTERM/SIGINT— 进程退出信号
常用命令:
# 实时查看(推荐,调试时开一个终端窗口常驻)
tail -f ~/.lanhu-mcp/error.log
# 查看全部内容
cat ~/.lanhu-mcp/error.log
# 只看最后 50 行
tail -50 ~/.lanhu-mcp/error.log
# 分页查看(按 q 退出,/ 搜索)
less ~/.lanhu-mcp/error.log
# 只查某个工具的错误
grep "lanhu_download_design" ~/.lanhu-mcp/error.log
# 统计错误次数
grep -c "TOOL_ERROR" ~/.lanhu-mcp/error.log
# 清空日志
> ~/.lanhu-mcp/error.log
# 用编辑器打开
code ~/.lanhu-mcp/error.log # VSCode / Cursor日志格式:
[2026-07-15T02:02:50.582Z] TOOL_ERROR [lanhu_get_design_document]: 获取详情失败: Image not exist
Error: 获取详情失败: Image not exist
at LanhuClient.getDesignDetail (...)
at ...
Args: {
"imageId": "invalid-image-id-12345",
"projectId": "b27d22f6-..."
}
────────────────────────────────────────────────────────────────────────────────每条日志包含:时间戳 / 类型 / 工具名 / 错误信息 / 调用堆栈 / 调用参数。
项目结构
src/
├── index.ts # MCP Server 入口(首次配置引导 + stdio 启动)
├── client.ts # 蓝湖 API 客户端(图层解析、DDS、下载)
├── tools.ts # MCP Tools 注册
├── dds-codegen.ts # DDS → Vue / HTML 代码生成器
├── dds-puppeteer.ts # Puppeteer 提取 DDS 官方代码 + 切图下载
└── types.ts # 类型定义参考
MCP Inspector — 官方调试工具
dsphper/lanhu-mcp — 社区参考实现
Puppeteer — DDS 代码提取依赖
Available Tools
14 toolslanhu_download_coverB
下载设计稿封面图(完整设计截图)到本地目录。
Inputs: imageId (required), outputPath (required), projectId.
lanhu_download_designA
一键下载蓝湖设计稿:通过 Puppeteer 从 DDS 页面提取官方生成的 HTML/CSS 代码 + 下载所有 CDN 切图并替换为本地路径。输出 index.html / index.css / flexible.js / common.css + img/。
Inputs: imageId (required), outputPath (required), projectId.
lanhu_download_imageC
下载任意图片 URL 到本地目录。
Inputs: url (required), fileName (required), outputPath (required).
lanhu_generate_codeB
基于蓝湖 DDS 语义化数据生成前端代码。支持 Vue 3 SFC (.vue) 和 HTML 输出。
Inputs: imageId (required), format, outputPath.
lanhu_get_annotationsB
获取设计稿的标注数据(图层树),包含每个元素的尺寸、位置、颜色、字体等精确参数。
Inputs: imageId (required), projectId.
lanhu_get_dds_schemaA
获取蓝湖 DDS 语义化 UI 组件树。返回经过 AI 识别的 UI 组件结构(NavBar/Avatar/Input/ImageText 等),包含 row/col 布局和精确样式。用于 300% 精确还原设计稿。
Inputs: imageId (required), versionId.
lanhu_get_design_detailB
获取设计稿详情,包含尺寸、预览图 URL、版本信息、json_url(标注数据地址)。
Inputs: imageId (required), projectId.
lanhu_get_design_documentA
获取设计稿的完整精确结构化数据。返回图层树(绝对坐标@1x、全量样式fill/border/shadow/typography)、Design Tokens。供 iOS/Android/Flutter/Web/H5 代码生成器使用。
Inputs: imageId (required), projectId.
lanhu_get_designsA
获取项目下的设计稿列表。使用项目的 UUID(sourceId)作为 projectId。
Inputs: projectId.
lanhu_get_previewB
获取设计稿的预览图 URL。
Inputs: imageId (required), projectId.
lanhu_get_sectorsB
获取项目的分区(分组)信息,了解设计稿的组织结构。
Inputs: projectId.
lanhu_get_tokensB
从设计稿标注数据中提取 Design Tokens(颜色变量等)。
Inputs: projectId.
lanhu_list_projectsB
列出蓝湖团队下的所有项目/文件夹,返回 ID 和名称。parentId=0 表示根目录。
Inputs: parentId.
lanhu_set_projectA
从蓝湖项目 URL 中提取并设置默认 projectId。之后所有工具调用无需再传 projectId。支持格式:完整 URL 或直接粘贴 projectId UUID。
Inputs: url (required).
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
TDQS
Scored across 14 tools
Each tool has a clearly distinct purpose: downloading covers, designs, or images; generating code; retrieving annotations, DDS schema, design details, documents, previews, sectors, tokens; listing projects; and setting the project. No two tools do the same thing, and any apparent overlap (e.g., annotations vs. design document) is well-differentiated by description.
All tools follow a consistent 'lanhu_verb_noun' pattern in snake_case (e.g., lanhu_download_cover, lanhu_get_annotations, lanhu_list_projects). The verbs are specific and predictable, making it easy to infer the action and target resource.
With 14 tools, the server is well-scoped for interacting with the Lanhu design platform. Each tool addresses a specific need (listing, getting details, downloading, code generation), and the count is neither too sparse nor overwhelming.
The tool surface covers core workflows: browsing projects and designs, retrieving detailed structural data and tokens, downloading assets, and generating code. Minor gaps exist (e.g., no direct tool for searching designs or managing project metadata), but the set is sufficient for common tasks.
Maintenance
Related MCP Connectors
Connect AI coding agents to Anima Playground, Figma, and your design system.
Serves your design system and coding standards to coding agents, so they stop guessing.
Give AI coding agents access to your Vynix visual feedback, bug reports, and AI diagnosis.
Run accessibility, contrast, and design token audits and file QA issues from your AI coding tool.
Related MCP Servers
- AlicenseAqualityCmaintenanceEnables 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.3292 npm148MIT
- AlicenseAqualityCmaintenanceProvides AI coding agents with structured access to Lanhu design data, enabling direct inspection of artboards, extraction of pixel-perfect layer styles and CSS attributes, and downloading of design assets without vision token overhead.9MIT
- AlicenseAqualityCmaintenanceEnables AI coding assistants to directly access Lanhu design drafts, generate frontend code, parse PRDs, and download design assets.3292 npmMIT
- AlicenseNot gradedqualityBmaintenanceEnables AI assistants to read Lanhu design collaboration content: extracting and analyzing Axure prototype pages, downloading UI designs and slices, and converting design specs into HTML+CSS for implementation. It also provides a shared team message board so multiple AI tools can reuse requirement analyses and knowledge across projects.MIT