/ Directory / Playground / Lanhu MCP
● Community dsphper 🔑 Needs your key

Lanhu MCP

by dsphper · dsphper/lanhu-mcp

Designed for the China design-to-code workflow: pulls 蓝湖 specs, marks 切图, and lets Claude write 前端 + 后端 from the spec.

Lanhu MCP exposes 蓝湖's design boards as MCP tools. Claude can fetch spec values (px sizes, colors, fonts), download slices, and use the structured spec to author React/Vue components or Mini Program pages.

Why use it

Key features

Live Demo

What it looks like in practice

ready

Install

Pick your client

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "lanhu-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "lanhu-mcp"
      ],
      "env": {
        "LANHU_TOKEN": "${LANHU_TOKEN}"
      }
    }
  }
}

Open Claude Desktop → Settings → Developer → Edit Config. Restart after saving.

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "lanhu-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "lanhu-mcp"
      ],
      "env": {
        "LANHU_TOKEN": "${LANHU_TOKEN}"
      }
    }
  }
}

Cursor uses the same mcpServers schema as Claude Desktop. Project config wins over global.

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "lanhu-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "lanhu-mcp"
      ],
      "env": {
        "LANHU_TOKEN": "${LANHU_TOKEN}"
      }
    }
  }
}

Click the MCP Servers icon in the Cline sidebar, then "Edit Configuration".

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "lanhu-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "lanhu-mcp"
      ],
      "env": {
        "LANHU_TOKEN": "${LANHU_TOKEN}"
      }
    }
  }
}

Same shape as Claude Desktop. Restart Windsurf to pick up changes.

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "lanhu-mcp",
      "command": "npx",
      "args": [
        "-y",
        "lanhu-mcp"
      ]
    }
  ]
}

Continue uses an array of server objects rather than a map.

~/.config/zed/settings.json
{
  "context_servers": {
    "lanhu-mcp": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "lanhu-mcp"
        ]
      }
    }
  }
}

Add to context_servers. Zed hot-reloads on save.

claude mcp add lanhu-mcp -- npx -y lanhu-mcp

One-liner. Verify with claude mcp list. Remove with claude mcp remove.

Use Cases

Real-world ways to use Lanhu MCP

Generate a React component from a 蓝湖 board

👤 Developers ⏱ ~15 min intermediate

When to use: 设计师 just shipped a board; you want the component scaffolded with correct tokens.

Flow
  1. Fetch board
    lanhu_get_board with board URL.✓ Copied
    → Spec returned
  2. Download slices
    lanhu_download_slices into /assets.✓ Copied
    → Images saved
  3. Generate
    Author component using spec tokens.✓ Copied
    → Component ready

Outcome: Component matches the spec without you eyeballing pixel values.

Combinations

Pair with other MCPs for X10 leverage

lanhu-mcp + filesystem

Save downloaded slices into your project tree

Combine lanhu-mcp with filesystem: Save downloaded slices into your project tree✓ Copied

Tools

What this MCP exposes

ToolInputsWhen to callCost
get_board (see docs) Fetch a design board structure + specs 1 call
download_slices (see docs) Download annotated slice assets 1 call
export_tokens (see docs) Export design tokens as JSON/CSS variables 1 call

Cost & Limits

What this costs to run

API quota
蓝湖 plan limits apply
Tokens per call
Spec JSON is mid-size
Monetary
免费 MCP; 蓝湖订阅 applies
Tip
Cache specs locally — don't refetch on every prompt

Security

Permissions, secrets, blast radius

Minimum scopes: lanhu:read
Credential storage: Lanhu token in env
Data egress: lanhuapp.com

Troubleshooting

Common errors and fixes

401 from Lanhu

Token expired or wrong project scope; regenerate in Lanhu settings

Slice download empty

设计师 hasn't marked slices — ask them to mark 切图 in the board

Alternatives

Lanhu MCP vs others

AlternativeWhen to use it insteadTradeoff
figma MCPSource is FigmaDifferent design tool
stitch-mcpSource is Google StitchDifferent design tool

More

Resources

📖 Read the official README on GitHub

🐙 Browse open issues

🔍 Browse all 400+ MCP servers and Skills