/ Diretório / Playground / Lanhu MCP
● Comunidade dsphper 🔑 Requer sua chave

Lanhu MCP

por 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.

Por que usar

Principais recursos

Demo ao vivo

Como fica na prática

pronto

Instalar

Escolha seu cliente

~/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}"
      }
    }
  }
}

Abra Claude Desktop → Settings → Developer → Edit Config. Reinicie após salvar.

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

Cursor usa o mesmo esquema mcpServers que o Claude Desktop. Config de projeto vence a global.

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

Clique no ícone MCP Servers na barra lateral do Cline, depois "Edit Configuration".

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

Mesmo formato do Claude Desktop. Reinicie o Windsurf para aplicar.

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

O Continue usa um array de objetos de servidor em vez de um map.

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

Adicione em context_servers. Zed recarrega automaticamente ao salvar.

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

Uma linha só. Verifique com claude mcp list. Remova com claude mcp remove.

Casos de uso

Usos do mundo real: Lanhu MCP

Generate a React component from a 蓝湖 board

👤 Developers ⏱ ~15 min intermediate

Quando usar: 设计师 just shipped a board; you want the component scaffolded with correct tokens.

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

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

Combinações

Combine com outros MCPs para 10× de alavancagem

lanhu-mcp + filesystem

Save downloaded slices into your project tree

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

Ferramentas

O que este MCP expõe

FerramentaEntradasQuando chamarCusto
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

Custo e limites

O que custa rodar

Cota de API
蓝湖 plan limits apply
Tokens por chamada
Spec JSON is mid-size
Monetário
免费 MCP; 蓝湖订阅 applies
Dica
Cache specs locally — don't refetch on every prompt

Segurança

Permissões, segredos, alcance

Escopos mínimos: lanhu:read
Armazenamento de credenciais: Lanhu token in env
Saída de dados: lanhuapp.com

Solução de problemas

Erros comuns e correções

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

Alternativas

Lanhu MCP vs. outros

AlternativaQuando usarTroca
figma MCPSource is FigmaDifferent design tool
stitch-mcpSource is Google StitchDifferent design tool

Mais

Recursos

📖 Leia o README oficial no GitHub

🐙 Ver issues abertas

🔍 Ver todos os 400+ servidores MCP e Skills