The Lanhu MCP Server enables AI coding assistants (e.g., Cursor, Claude) to directly access and utilize Lanhu design and PRD content. It can:
Convert designs into pixel-perfect HTML/CSS with structured Design Tokens (colors, fonts, shadows, etc.).
Extract only design tokens for consistency checks, sorted by usage frequency.
Retrieve design slices, icons, and image assets automatically.
Analyze PRD or Axure prototypes from developer, tester, or explorer perspectives.
List all designs in a project or pages in a PRD/prototype.
Resolve Lanhu share/invite links into usable project URLs.
Allow fine-grained control over output content (HTML, images, tokens, layout, layers, slices) and layer depth.
Support parallel analysis of multiple designs with automatic retry on errors.
Provide built-in MCP prompt templates for frontend development and design review, plus resource URIs for project design lists.
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 Analyze this design link and generate the HTML and CSS code"
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、下载切图，全程不用离开编辑器。
一行命令，零配置 —
npx -y mcp-lanhu，粘贴蓝湖链接就能用。
设计稿 → 代码：生成像素级 HTML + CSS，含完整 Design Tokens（颜色、字体、阴影、渐变）
结构化 Design Tokens：提取所有颜色、字体族/字号/字重、阴影、边框、圆角，按使用频率排序
PRD 驱动开发：将 PRD 或 Axure 原型交给 AI，需求感知编码
自动切图：直接从蓝湖提取切图、图标和图片，无需手动导出
并发 + 重试：多设计稿并行分析，网络异常自动重试
MCP Resources & Prompts：内置前端开发和设计走查 Prompt 模板
Related MCP server: lanhu-context-mcp
复制下面这段话，发给你的 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。
登录 蓝湖
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" 返回完整图层树。每个设计会按请求项返回 success、partial_success 或 error，结构化图层标注位于 layer_annotations。
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/原型 → 结构化分析（默认） |
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/MrDgbot/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 客户端。
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, layout (default)
slices: Extract slice/asset info for download
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 |
| 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. | |
| include | No | Content to include in analyze mode. Default: ['html', 'tokens']. Options: html, image (base64), tokens, layout, layers, slices. |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries full burden. It discloses the unified nature, modes, and special URL handling. However, it does not mention any side effects, authentication needs, or rate limits, which would be helpful.
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 clear overview, bulleted modes, and a concise note on detailDetach URLs. Every sentence is informative and earns its place.
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 no output schema and no annotations, the description covers the essential functionality well. It could mention what each mode returns, but the modes are self-explanatory. The lack of output schema is compensated by the detailed mode descriptions.
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 the description adds value beyond schema by explaining the relationship between modes and parameters, especially design_names requirement for analyze/slices/tokens and include default. It also explains special URL formats.
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 'Unified Lanhu design tool' and lists four distinct modes (list, analyze, slices, tokens), each with a specific verb and resource. It distinguishes itself from siblings lanhu_page and lanhu_resolve_invite_link by focusing on design-level 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?
The description explains when to use each mode and mentions special handling for detailDetach URLs with design_names='all'. However, it doesn't explicitly state when not to use this tool or provide alternatives for overlapping functionality.
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.0lanhu_designlanhu_pagelanhu_resolve_invite_linkScored across 3 tools
lanhu_design and lanhu_page both have 'list' and 'analyze' modes, which could cause confusion. Their names distinguish designs from pages, but the modes overlap. lanhu_resolve_invite_link is clearly distinct.
Two tools follow a noun-based pattern (lanhu_design, lanhu_page) while the third uses a verb phrase (lanhu_resolve_invite_link). The naming is mostly consistent but the third tool breaks the pattern.
3 tools is reasonable for a design collaboration server, covering design assets, pages, and link resolution. It could potentially be expanded, but it's not too few.
The server covers design listing/analysis, page listing/analysis, and link resolution. Missing are operations like creating or updating designs/pages, or managing slices directly. Core viewing and analysis are covered.
UI design from prompts, screenshots, and URLs for AI coding agents and theme tokens.
AI-powered design and management for Webflow Sites
Build and edit app screen mockups and clickable prototypes from your AI assistant.
Give your AI agents a design superpower. Generate, edit, and publish publication-grade decks, reports, landing pages, resumes, and marketing visuals directly within your agent workflow. Delivering frontier-level design quality at 3× the speed and 53× lower cost -from conversational prompt to live link or vector PDF in minutes.
