Lanhu MCP Collaboration
Lanhu MCP 协作
Skill by
ara.so — MCP Skills collection.
由
ara.so 开发的Skill —— MCP Skills 合集。
Lanhu MCP Server is a Model Context Protocol server that connects AI coding assistants to the Lanhu (蓝湖) design collaboration platform. It enables automated requirements analysis, UI design extraction, team knowledge sharing, and design-to-code conversion with vision-capable AI models.
Core capabilities:
- Requirements Analysis: Automatic Axure prototype extraction with 3 analysis modes (Development/Testing/Exploration)
- UI Design Support: Design spec extraction with precise parameters (spacing, colors, fonts) + HTML/CSS code generation
- Team Message Board: Shared knowledge base across all AI assistants, breaking IDE silos
- Smart Asset Export: Automatic design slice extraction with semantic naming
- Performance: Version-based caching, incremental updates, concurrent processing
Supported AI Clients: Cursor, Windsurf, Claude Code, OpenClaw, ClawBot, Trae, Cline, and any MCP-compatible tool
Lanhu MCP Server 是一款 Model Context Protocol 服务器,可将AI编码助手与蓝湖设计协作平台相连。它借助具备视觉能力的AI模型,实现自动化需求分析、UI设计提取、团队知识共享以及设计转代码功能。
核心能力:
- 需求分析:自动提取Axure原型,支持3种分析模式(开发/测试/探索)
- UI设计支持:提取包含精确参数(间距、颜色、字体)的设计规范 + 生成HTML/CSS代码
- 团队留言板:跨所有AI助手共享知识库,打破IDE信息孤岛
- 智能资源导出:自动提取设计切片并进行语义化命名
- 性能优化:基于版本的缓存、增量更新、并发处理
支持的AI客户端:Cursor、Windsurf、Claude Code、OpenClaw、ClawBot、Trae、Cline,以及任何兼容MCP的工具
- Python 3.10+
- Vision-capable AI model (Claude, GPT-4V, Gemini, Kimi, Qwen, DeepSeek)
- Lanhu account with valid cookie authentication
- Python 3.10+
- 具备视觉能力的AI模型(Claude、GPT-4V、Gemini、Kimi、Qwen、DeepSeek)
- 蓝湖账号及有效的Cookie认证
Quick Install (Recommended)
快速安装(推荐)
Simply ask your AI assistant:
"Help me clone and install https://github.com/dsphper/lanhu-mcp"
The AI will guide you through cloning, dependency installation, cookie configuration, and server startup.
直接向你的AI助手提问:
"Help me clone and install https://github.com/dsphper/lanhu-mcp"
AI会引导你完成克隆、依赖安装、Cookie配置和服务器启动步骤。
Option 1: Docker (Recommended)
Clone repository
Clone repository
Configure environment (interactive cookie setup)
Configure environment (interactive cookie setup)
bash setup-env.sh # Linux/Mac
bash setup-env.sh # Linux/Mac
Start service
Start service
docker-compose up -d
**Option 2: Source Code**
```bash
Clone repository
Clone repository
One-click installation (includes cookie setup)
One-click installation (includes cookie setup)
bash easy-install.sh # Linux/Mac
bash easy-install.sh # Linux/Mac
easy-install.bat # Windows
**Manual dependency installation:**
```bash
pip install -r requirements.txt
playwright install chromium
easy-install.bat # Windows
**手动安装依赖:**
```bash
pip install -r requirements.txt
playwright install chromium
Required: Lanhu Cookie
必填:蓝湖Cookie
Export your Lanhu cookie (obtained from browser DevTools after logging into lanhuapp.com):
bash
export LANHU_COOKIE="your_lanhu_cookie_here"
导出你的蓝湖Cookie(登录lanhuapp.com后,从浏览器开发者工具获取):
bash
export LANHU_COOKIE="your_lanhu_cookie_here"
Optional: Feishu Webhook
可选:飞书Webhook
For team notifications and @mentions:
bash
export FEISHU_WEBHOOK_URL="https://open.feishu.cn/open-apis/bot/v2/hook/your-webhook-url"
python
DEFAULT_FEISHU_WEBHOOK = "https://open.feishu.cn/open-apis/bot/v2/hook/your-webhook-url"
用于团队通知和@提及:
bash
export FEISHU_WEBHOOK_URL="https://open.feishu.cn/open-apis/bot/v2/hook/your-webhook-url"
python
DEFAULT_FEISHU_WEBHOOK = "https://open.feishu.cn/open-apis/bot/v2/hook/your-webhook-url"
Optional: Server Configuration
可选:服务器配置
bash
export SERVER_HOST="0.0.0.0"
export SERVER_PORT=8000
export DATA_DIR="./data"
export HTTP_TIMEOUT=30
export VIEWPORT_WIDTH=1920
export VIEWPORT_HEIGHT=1080
export DEBUG="false"
bash
export SERVER_HOST="0.0.0.0"
export SERVER_PORT=8000
export DATA_DIR="./data"
export HTTP_TIMEOUT=30
export VIEWPORT_WIDTH=1920
export VIEWPORT_HEIGHT=1080
export DEBUG="false"
Source code:
bash
python lanhu_mcp_server.py
Docker:
bash
docker-compose up -d
docker-compose logs -f # View logs
docker-compose down # Stop
Server runs at
http://localhost:8000/mcp
源代码方式:
bash
python lanhu_mcp_server.py
Docker方式:
bash
docker-compose up -d
docker-compose logs -f # 查看日志
docker-compose down # 停止服务
服务器运行地址:
http://localhost:8000/mcp
AI Client Configuration
AI客户端配置
In
claude_desktop_config.json
:
json
{
"mcpServers": {
"lanhu": {
"type": "http",
"url": "http://localhost:8000/mcp?role=Developer&name=YourName"
}
}
}
在
claude_desktop_config.json
中:
json
{
"mcpServers": {
"lanhu": {
"type": "http",
"url": "http://localhost:8000/mcp?role=Developer&name=YourName"
}
}
}
Cursor / Windsurf / Others
Cursor / Windsurf / 其他工具
In MCP settings:
json
{
"mcpServers": {
"lanhu": {
"url": "http://localhost:8000/mcp?role=Developer&name=YourName"
}
}
}
URL Parameters:
- : User role (Developer/Frontend/Backend/Tester/Product)
- : Username for collaboration tracking and @mentions (use English to avoid encoding issues)
在MCP设置中:
json
{
"mcpServers": {
"lanhu": {
"url": "http://localhost:8000/mcp?role=Developer&name=YourName"
}
}
}
URL参数说明:
- : 用户角色(Developer/Frontend/Backend/Tester/Product)
- : 用于协作追踪和@提及的用户名(建议使用英文避免编码问题)
Key Tools & Commands
核心工具与命令
1. Requirements Analysis
1. 需求分析
Tool: analyze_requirements_document
Analyze Axure prototypes with AI-powered extraction:
工具: analyze_requirements_document
借助AI提取功能分析Axure原型:
User prompt example:
用户提示示例:
analyze_requirements_document(
url="
https://lanhuapp.com/web/#/item/project/product?tid=xxx&pid=xxx&docId=xxx",
mode="development" # Options: development | testing | exploration
)
**Analysis Modes:**
- **`development`**: Detailed field rules, business logic, global flowcharts
- **`testing`**: Test scenarios, test cases, boundary values, validation rules
- **`exploration`**: Core feature overview, module dependencies, review points
**Four-Stage Workflow:**
1. Global text scanning (establish overall understanding)
2. Grouped detailed analysis (based on selected mode)
3. Reverse validation (ensure zero omissions)
4. Generate deliverables (requirements doc/test plan/review slides)
analyze_requirements_document(
url="
https://lanhuapp.com/web/#/item/project/product?tid=xxx&pid=xxx&docId=xxx",
mode="development" # 可选值:development | testing | exploration
)
**分析模式:**
- **`development`**: 详细字段规则、业务逻辑、全局流程图
- **`testing`**: 测试场景、测试用例、边界值、验证规则
- **`exploration`**: 核心功能概述、模块依赖、评审要点
**四阶段工作流:**
1. 全局文本扫描(建立整体认知)
2. 分组详细分析(基于所选模式)
3. 反向验证(确保无遗漏)
4. 生成交付物(需求文档/测试计划/评审幻灯片)
2. UI Design Analysis
2. UI设计分析
Extract design specs with precise parameters and generated code:
- Design image previews
- 设计图片预览
- Precise parameters (dimensions, spacing, colors, fonts)
- 精确参数(尺寸、间距、颜色、字体)
- HTML + CSS code conversion
- HTML + CSS代码转换结果
**Output includes:**
- Component dimensions and spacing
- Color values (HEX/RGB)
- Font sizes and weights
- Auto-generated HTML/CSS code matching Lanhu's native export
**输出包含:**
- 组件尺寸与间距
- 颜色值(HEX/RGB)
- 字体大小与权重
- 匹配蓝湖原生导出的自动生成HTML/CSS代码
3. Design Asset Export
3. 设计资源导出
Download design slices with semantic naming:
"Export all design slices from this Lanhu page"
**Features:**
- Automatic slice detection
- Semantic file naming based on layer paths
- Organized folder structure
- Supports PNG, SVG, and other formats
"Export all design slices from this Lanhu page"
**特性:**
- 自动检测切片
- 基于图层路径的语义化文件名
- 结构化文件夹目录
- 支持PNG、SVG等格式
4. Team Message Board
4. 团队留言板
Share knowledge and context across all team AI assistants:
Create knowledge entry
创建知识库条目
create_message(
project_url="
https://lanhuapp.com/web/#/item/project/...",
content="User authentication requires OAuth2 flow with refresh token rotation",
message_type="knowledge", # Options: knowledge | task | question | experience
tags=["auth", "security", "backend"]
)
create_message(
project_url="
https://lanhuapp.com/web/#/item/project/...",
content="User authentication requires OAuth2 flow with refresh token rotation",
message_type="knowledge", # 可选值:knowledge | task | question | experience
tags=["auth", "security", "backend"]
)
Search team knowledge
搜索团队知识
@mention team member (triggers Feishu notification)
@提及团队成员(触发飞书通知)
create_message(
project_url="
https://lanhuapp.com/web/#/item/project/...",
content="@zhangsan Please review the API error handling logic",
message_type="task",
mentioned_users=["zhangsan"]
)
**Message Types:**
- **`knowledge`**: Permanent knowledge base entries (pitfalls, best practices)
- **`task`**: Task assignments with @mention support
- **`question`**: Questions for team discussion
- **`experience`**: Lessons learned and implementation notes
create_message(
project_url="
https://lanhuapp.com/web/#/item/project/...",
content="@zhangsan Please review the API error handling logic",
message_type="task",
mentioned_users=["zhangsan"]
)
**消息类型:**
- **`knowledge`**: 永久知识库条目(陷阱、最佳实践)
- **`task`**: 支持@提及的任务分配
- **`question`**: 用于团队讨论的问题
- **`experience`**: 经验总结与实现笔记
Pattern 1: Full Requirements Analysis Workflow
模式1:完整需求分析工作流
Step 1: User provides Lanhu URL
步骤1:用户提供蓝湖URL
Step 2: AI calls analyze_requirements_document
步骤2:AI调用analyze_requirements_document
Step 3: AI processes four-stage analysis
步骤3:AI执行四阶段分析
- Stage 1: Scans all pages and extracts text
- 阶段1:扫描所有页面并提取文本
- Stage 2: Groups pages and analyzes by business modules
- 阶段2:分组页面并按业务模块分析
- Stage 3: Reverse validates for missing items
- 阶段3:反向验证检查遗漏项
- Stage 4: Generates structured requirements document
- 阶段4:生成结构化需求文档
Step 4: Save insights to team knowledge base
步骤4:将洞察保存到团队知识库
Pattern 2: Design-to-Code Implementation
模式2:设计转代码实现
Step 1: View design and get parameters
步骤1:查看设计并获取参数
Step 2: Extract design parameters
步骤2:提取设计参数
"preview_image": "base64_image_data",
"preview_image": "base64_image_data",
"parameters": {
"parameters": {
"width": "375px",
"width": "375px",
"height": "812px",
"height": "812px",
"spacing": {"top": "20px", "left": "16px"},
"spacing": {"top": "20px", "left": "16px"},
"colors": {"primary": "#1677FF", "text": "#333333"},
"colors": {"primary": "#1677FF", "text": "#333333"},
"fonts": {"title": "16px/bold", "body": "14px/regular"}
"fonts": {"title": "16px/bold", "body": "14px/regular"}
"html_css": "<div class='container'>...</div>\n<style>...</style>"
"html_css": "<div class='container'>...</div>\n<style>...</style>"
Step 3: Export required assets
步骤3:导出所需资源
Step 4: AI generates implementation code using parameters + HTML/CSS reference
步骤4:AI结合参数与HTML/CSS参考生成实现代码
Pattern 3: Team Collaboration Tracking
模式3:团队协作追踪
Developer A's AI analyzes requirements
开发者A的AI分析需求
Save analysis results
保存分析结果
Tester B's AI searches team knowledge
测试人员B的AI搜索团队知识
Returns Developer A's analysis — no duplicate work!
返回开发者A的分析结果 —— 无需重复工作!
Tester B's AI now performs test-focused analysis
测试人员B的AI现在执行测试聚焦的分析
Pattern 4: Environment Variable Best Practices
模式4:环境变量最佳实践
Never hardcode secrets
切勿硬编码敏感信息
✅ GOOD: Use environment variables
✅ 正确示例: 使用环境变量
import os
LANHU_COOKIE = os.getenv("LANHU_COOKIE")
FEISHU_WEBHOOK = os.getenv("FEISHU_WEBHOOK_URL")
import os
LANHU_COOKIE = os.getenv("LANHU_COOKIE")
FEISHU_WEBHOOK = os.getenv("FEISHU_WEBHOOK_URL")
Validate required config
验证必填配置
if not LANHU_COOKIE:
raise ValueError("LANHU_COOKIE environment variable is required")
if not LANHU_COOKIE:
raise ValueError("LANHU_COOKIE environment variable is required")
Issue: "No vision-capable model detected"
问题:"No vision-capable model detected"
Cause: Using text-only AI model (e.g., GPT-3.5, Claude Instant)
Solution: Switch to vision-capable model:
- Claude 3+ (Sonnet, Opus)
- GPT-4V, GPT-4o
- Gemini Pro Vision
- Kimi, Qwen-VL, DeepSeek-VL
原因: 使用纯文本AI模型(如GPT-3.5、Claude Instant)
解决方案: 切换到具备视觉能力的模型:
- Claude 3+(Sonnet、Opus)
- GPT-4V、GPT-4o
- Gemini Pro Vision
- Kimi、Qwen-VL、DeepSeek-VL
Issue: "Cookie authentication failed"
问题:"Cookie authentication failed"
Cause: Invalid or expired Lanhu cookie
Solution:
- Login to https://lanhuapp.com in browser
- Open DevTools → Network tab
- Find any API request to lanhuapp.com
- Copy full header value
- Update environment variable
- Restart server
原因: 蓝湖Cookie无效或已过期
解决方案:
- 在浏览器登录https://lanhuapp.com
- 打开开发者工具 → 网络标签
- 找到任意lanhuapp.com的API请求
- 复制完整的头值
- 更新环境变量
- 重启服务器
Issue: "Design-to-code conversion unavailable"
问题:"Design-to-code conversion unavailable"
Cause: Design file uploaded with outdated Lanhu plugin
Solution:
- Ask UI designer to update Lanhu plugin (Figma/Sketch/Adobe XD)
- Re-upload design file
- Retry design analysis
原因: 使用过时的蓝湖插件上传设计文件
解决方案:
- 请UI设计师更新蓝湖插件(Figma/Sketch/Adobe XD)
- 重新上传设计文件
- 重试设计分析
Issue: "Message board not syncing across AI assistants"
问题:"Message board not syncing across AI assistants"
Cause: Different MCP server instances or cache issues
Solution:
- Ensure all AI clients connect to same MCP server URL
- Verify is identical across calls
- Clear cache:
- Restart MCP server
原因: 不同的MCP服务器实例或缓存问题
解决方案:
- 确保所有AI客户端连接到同一个MCP服务器URL
- 验证所有调用的完全一致
- 清除缓存:
- 重启MCP服务器
Issue: Docker container fails to start
问题:Docker容器启动失败
Cause: Port conflict or missing environment variables
Solution:
Check port availability
检查端口可用性
Verify environment variables
验证环境变量
docker-compose logs lanhu-mcp
docker-compose logs lanhu-mcp
Restart with clean state
清理状态后重启
docker-compose down -v
docker-compose up -d
docker-compose down -v
docker-compose up -d
Issue: Slow requirements analysis
问题:需求分析速度慢
Cause: Large prototype with many pages, no caching
Solution:
- Enable version-based caching (automatic)
- Use mode for quick overview
- Increase concurrent processing:
bash
export HTTP_TIMEOUT=60
export VIEWPORT_WIDTH=1920
export VIEWPORT_HEIGHT=1080
- Subsequent analyses will use cached data (much faster)
原因: 原型页面数量多,未启用缓存
解决方案:
- 启用基于版本的缓存(自动生效)
- 使用模式快速概览
- 增加并发处理能力:
bash
export HTTP_TIMEOUT=60
export VIEWPORT_WIDTH=1920
export VIEWPORT_HEIGHT=1080
- 后续分析将使用缓存数据(速度大幅提升)
Custom Analysis Modes
自定义分析模式
Modify
to add custom analysis perspectives:
python
ANALYSIS_MODES = {
"development": "Developer perspective with detailed field rules",
"testing": "QA perspective with test cases and validation",
"exploration": "Quick overview for stakeholder review",
"security": "Security-focused analysis for audit" # Custom mode
}
python
ANALYSIS_MODES = {
"development": "Developer perspective with detailed field rules",
"testing": "QA perspective with test cases and validation",
"exploration": "Quick overview for stakeholder review",
"security": "Security-focused analysis for audit" # 自定义模式
}
Feishu User ID Mapping
飞书用户ID映射
Enable @mention notifications by updating
:
python
FEISHU_USER_ID_MAP = {
"zhangsan": "ou_1234567890abcdef",
"lisi": "ou_abcdef1234567890",
# Add your team members
}
python
FEISHU_USER_ID_MAP = {
"zhangsan": "ou_1234567890abcdef",
"lisi": "ou_abcdef1234567890",
# 添加团队成员
}
Increase concurrent downloads
增加并发下载超时时间
Larger viewport for high-res screenshots
更大视窗用于高分辨率截图
export VIEWPORT_WIDTH=2560
export VIEWPORT_HEIGHT=1440
export VIEWPORT_WIDTH=2560
export VIEWPORT_HEIGHT=1440
Enable debug logging
启用调试日志
Cursor AI Integration
Cursor AI集成
typescript
// In Cursor, add to .cursor/mcp.json
{
"mcpServers": {
"lanhu": {
"url": "http://localhost:8000/mcp?role=Frontend&name=Alice"
}
}
}
// Then prompt:
// "Using Lanhu MCP, analyze the design at https://lanhuapp.com/...
// and generate React components with Tailwind CSS"
typescript
// 在Cursor中,添加到 .cursor/mcp.json
{
"mcpServers": {
"lanhu": {
"url": "http://localhost:8000/mcp?role=Frontend&name=Alice"
}
}
}
// 然后输入提示:
// "Using Lanhu MCP, analyze the design at https://lanhuapp.com/...
// and generate React components with Tailwind CSS"
Windsurf Cascade Integration
Windsurf Cascade集成
json
// In Windsurf settings
{
"mcp": {
"servers": {
"lanhu": {
"url": "http://localhost:8000/mcp?role=Fullstack&name=Bob"
}
}
}
}
json
// 在Windsurf设置中
{
"mcp": {
"servers": {
"lanhu": {
"url": "http://localhost:8000/mcp?role=Fullstack&name=Bob"
}
}
}
}
Claude Code Integration
Claude Code集成
json
// In claude_desktop_config.json
{
"mcpServers": {
"lanhu": {
"type": "http",
"url": "http://localhost:8000/mcp?role=Backend&name=Charlie"
}
}
}
json
// 在claude_desktop_config.json中
{
"mcpServers": {
"lanhu": {
"type": "http",
"url": "http://localhost:8000/mcp?role=Backend&name=Charlie"
}
}
}
MIT License - See
file for details.