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., "@mcp-lanhu Analyze this Lanhu design and generate HTML/CSS: https://lanhuapp.com/xxx"
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.
让 AI 编程助手直接读取蓝湖设计稿、提取代码、解析需求文档、下载切图
mcp-lanhu 是蓝湖的 MCP 服务器，装上之后 Cursor、Windsurf、Claude Desktop、Claude Code 都能直接连接蓝湖。AI 可以读取设计稿、提取 HTML/CSS、解析 PRD、下载切图，全程不用离开编辑器。
设计稿 → 代码：生成像素级 HTML + CSS，含完整 Design Tokens（颜色、字体、阴影、渐变）
结构化 Design Tokens：提取所有颜色、字体族/字号/字重、阴影、边框、圆角，按使用频率排序
PRD 驱动开发：将 PRD 或 Axure 原型交给 AI，需求感知编码
自动切图：提取并下载设计师标记的切图到本地，可生成 manifest.json 溯源
并发 + 重试：多设计稿并行分析，网络异常自动重试
MCP Resources & Prompts：内置前端开发和设计走查 Prompt 模板
Related MCP server: Lanhu MCP Server
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。
登录 蓝湖
F12 打开开发者工具 → Network 标签
复制任意请求的 Cookie 请求头
配置完成后重启客户端，粘贴蓝湖链接即可使用。
lanhu_design — 设计稿通过 mode 参数切换功能：
Mode | 说明 |
| 列出项目所有设计图 |
| 设计图 → HTML+CSS + Design Tokens（默认） |
| 仅提取 Design Tokens（字体、颜色、阴影等） |
| 提取设计师标记的可导出切图信息 |
| 下载切图到本地目录，可写 |
analyze 模式支持 include 参数按需选择输出：html、image、tokens、layout、layers、slices，默认 ["html", "tokens", "layers", "image"]。请求 layers 时可用 layer_depth 控制嵌套深度：默认 4，0 仅返回顶层，"all" 返回完整图层树。
download 模式相关参数：
download_dir：切图保存目录（必填，绝对或相对路径）
write_manifest：设为 true 时额外生成 manifest.json，记录「本地文件 ↔ 原图层名 ↔ 语义名 ↔ 蓝湖 CDN URL」的映射
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 | 说明 |
| 列出 PRD 所有页面 |
| PRD/原型 → 结构化分析（默认） |
analyze 模式支持 analysis_mode 切换分析视角：developer（开发，默认）、tester（测试）、explorer（探索）。
lanhu_resolve_invite — 解析邀请链接将蓝湖分享链接解析为可用的项目 URL。
类型 | 名称 | 说明 |
Resource |
| 项目设计稿列表（ |
Prompt |
| 根据设计稿生成像素级前端代码 |
Prompt |
| 审查设计一致性和可实现性 |
前端开发：粘贴蓝湖链接 → AI 生成与设计稿匹配的组件代码
设计走查：对比实现与 Design Tokens（间距、颜色、字体）
需求实现：将 PRD 交给 AI，需求驱动的功能开发
资源导出：批量提取并下载图标和图片
客户端 | 支持 | 传输 |
Cursor | ✅ | stdio |
Windsurf | ✅ | stdio |
Claude Desktop | ✅ | stdio |
Claude Code | ✅ | stdio |
其他 MCP 兼容 IDE | ✅ | stdio |
git clone https://github.com/Shaolih0603/lanhu-mcp.git
cd lanhu-mcp
npm install
cp config.example.env .env # 填入 LANHU_COOKIE
npm run dev # 开发模式
npm run build # 构建
npm test # 测试Q: 什么是 MCP？ A: Model Context Protocol，让 AI 助手安全连接外部工具的开放标准。
Q: 支持哪些蓝湖套餐？ A: 任何可网页访问的蓝湖账号，通过浏览器 Cookie 认证。
Q: analyze 返回太大怎么办？
A: 用 include 参数，如 ["tokens"] 只返回 Design Tokens；不需要 base64 图片时请不要包含 image。
Q: 不用 Cursor 也能用？ A: 能。支持所有 MCP 客户端。
本项目基于 MrDgbot/lanhu-mcp 二次开发，遵循 MIT 协议。
Unified Lanhu design tool. Supports listing, analyzing, extracting tokens, and getting slices.
Modes:
list: List all designs in the project
analyze: Full design analysis with HTML+CSS, tokens, layers, and image (default)
slices: Extract slice/asset info for download
download: Download designer-marked exportable slices to a local directory and write a manifest.json mapping local files to CDN URLs
tokens: Extract design tokens only (fonts, colors, shadows, etc.)
For detailDetach URLs (contains image_id), pass design_names='all'.
| Name | Required | Description | Default |
|---|---|---|---|
| url | Yes | Lanhu project URL. Supports stage and detailDetach formats. | |
| mode | No | Operation mode. Default: analyze. | analyze |
| include | No | Content to include in analyze mode. Default: ['html', 'tokens', 'layers', 'image']. Options: html, image (base64), tokens, layout, layers, slices. | |
| layer_depth | No | Maximum nested layer depth for analyze mode. 0 returns top-level layers only; use 'all' for the complete tree. Default: 4. | |
| design_names | No | Design name(s), index, or 'all'. Required for analyze/slices/tokens. Number = index from list, exact string = match by name or id. | |
| download_dir | No | Directory to save slices in 'download' mode. May be absolute or relative to the server working directory. Only image files are written by default. | |
| slice_name_map | No | Optional map from slice download-URL id (e.g. 'SketchPng8286fec') to a semantic asset name WITHOUT extension (e.g. 'list-header-bg'). Matched by prefix against the tail of each slice downloadUrl; applied to slices/download outputs as semanticName. | |
| write_manifest | No | Write a manifest.json into download_dir. Default: false. Enable only when you need local-file ↔ CDN-URL tracking (e.g. replacing remote URLs during code generation). |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full burden, and it does disclose important behavioral traits: download persists files to a local directory and writes a manifest, analyze returns HTML+CSS/tokens/layers/image, and detailDetach URLs require design_names='all'. It omits auth/permission and error behavior, but the core side effects are covered.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is well-structured with a front-loaded mode list and a prominent special-case note. Every sentence earns its place, and there is no redundant repetition of schema details.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a complex tool with 8 parameters, nested objects, and no output schema, the description covers the modal behaviors and roughly indicates outputs. The schema supplies parameter details, and the special URL note fills a critical gap. Some return-format and edge-case details remain unspecified, but the tool is largely selectable and invocable.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100% and each parameter already has a rich description, so the description adds little beyond the schema. The detailDetach/design_names note is useful extra guidance, but most parameter semantics live in the schema, keeping this at the baseline.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states a specific resource (Lanhu design) and enumerates five concrete operations (list, analyze, slices, download, tokens), making the tool's purpose clear. While the opening 'Unified Lanhu design tool' is somewhat generic, the mode list grounds it and differentiates it from the sibling tools focused on invite links and pages.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description gives clear mode-level guidance, including which mode is the default (analyze) and what each mode is for (e.g., download saves files and writes a manifest). It also provides a specific conditional rule for detailDetach URLs. However, it does not explicitly mention sibling alternatives or when to avoid this tool.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Unified Lanhu PRD/prototype tool. Supports listing and analyzing pages.
Modes:
list: List all pages in a PRD/prototype document
analyze: Analyze specified pages (default)
| Name | Required | Description | Default |
|---|---|---|---|
| url | Yes | Lanhu project URL with docId (PRD/prototype). Example: https://lanhuapp.com/web/#/item/project/product?tid=xxx&pid=xxx&docId=xxx | |
| mode | No | Operation mode. Default: analyze. | analyze |
| page_names | No | Page name(s) to analyze. Use 'all' for all pages. Required for analyze mode. | |
| analysis_mode | No | Analysis perspective. Default: developer. | developer |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description must disclose behavior. It mentions modes but does not describe what happens during analysis, what information is returned, or any side effects. The tool's behavior beyond mode selection is opaque.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is relatively short and well-structured, with a clear breakdown of modes. It is front-loaded with the purpose. However, the sentence 'Supports listing and analyzing pages' could be integrated into the mode list more smoothly.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool has 4 parameters with enums and no output schema, the description should explain the return format and behavior for each mode. It does not describe what 'analyze' does, what information is returned, or how 'explorer' differs. This is incomplete.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100%, so baseline is 3. The description adds value by explaining the modes and hinting that 'analyze' is default, and that 'all' is a valid page_names value. This provides context beyond the schema.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states it is a unified tool for Lanhu PRD/prototype, and lists two modes: list and analyze. It distinguishes from siblings (lanhu_design, lanhu_resolve_invite_link) by specifying it handles PRD/prototype pages, while the others likely cover different aspects.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description explains the two modes and their basic purpose, but does not explicitly state when to use each mode or when to use this tool versus the sibling tools. It provides mode descriptions but no guidance on context or alternatives.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Resolve Lanhu invite/share link to actual project URL with tid/pid/docId parameters.
| Name | Required | Description | Default |
|---|---|---|---|
| invite_url | Yes | Lanhu invite link. Example: https://lanhuapp.com/link/#/invite?sid=xxx |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations provided, so description must cover behavioral traits. It explains the transformation (resolve invite link to URL with parameters) but does not mention any side effects, authentication needs, or rate limits.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Single sentence that is concise and front-loaded with the key action. No unnecessary words.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the simple tool with one parameter and no output schema, the description is adequate but lacks detail on the resolved URL format or potential errors (e.g., invalid link).
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100% and includes an example. The description does not add further meaning beyond what the schema provides, so baseline score of 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool resolves a Lanhu invite/share link to an actual project URL with parameters, distinguishing it from sibling tools that likely handle design or page operations.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No explicit guidance on when to use this tool vs alternatives, but the purpose implies it's for converting invite links, which is a distinct use case from lanhu_design and lanhu_page.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
v2.0.2lanhu_designlanhu_pagelanhu_resolve_invite_linkScored across 3 tools
The three tools have clearly distinct purposes: resolving invite links, working with designs, and working with pages. Even with modes inside design and page, the resource type separation is unambiguous.
All tools share the lanhu_ prefix, but lanhu_resolve_invite_link uses a verb_noun pattern while lanhu_design and lanhu_page are plain nouns. The naming is readable but not fully consistent in verb usage.
Three tools is a reasonable count, though the design and page tools bundle many modes, making them somewhat overloaded. Still, the scope is manageable and each tool earns its place.
The surface covers listing, analyzing, extracting tokens, downloading slices, and resolving links—all common read-only operations for a design tool. Missing create/update operations, but that may be intentional for a design inspection server.
Give AI coding agents access to your Vynix visual feedback, bug reports, and AI diagnosis.
Connect AI assistants to GitHub - manage repos, issues, PRs, and workflows through natural language.
Connect AI coding agents to Anima Playground, Figma, and your design system.
UI design from prompts, screenshots, and URLs for AI coding agents and theme tokens.
