/ Directorio / Playground / Lanhu MCP
● Comunidad dsphper 🔑 Requiere tu clave

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 qué usarlo

Características clave

Demo en vivo

Cómo se ve en la práctica

listo

Instalar

Elige tu 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}"
      }
    }
  }
}

Abre Claude Desktop → Settings → Developer → Edit Config. Reinicia después de guardar.

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

Cursor usa el mismo esquema mcpServers que Claude Desktop. La configuración del proyecto prevalece sobre la global.

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

Haz clic en el icono MCP Servers de la barra lateral de Cline y luego en "Edit Configuration".

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

Mismo formato que Claude Desktop. Reinicia Windsurf para aplicar.

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

Continue usa un array de objetos de servidor en lugar de un mapa.

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

Añádelo a context_servers. Zed recarga en caliente al guardar.

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

Un solo comando. Verifica con claude mcp list. Quita con claude mcp remove.

Casos de uso

Usos del mundo real: Lanhu MCP

Generate a React component from a 蓝湖 board

👤 Developers ⏱ ~15 min intermediate

Cuándo usarlo: 设计师 just shipped a board; you want the component scaffolded with correct tokens.

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

Combinaciones

Combínalo con otros MCPs para multiplicar por 10

lanhu-mcp + filesystem

Save downloaded slices into your project tree

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

Herramientas

Lo que expone este MCP

HerramientaEntradasCuándo llamarCoste
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

Coste y límites

Lo que cuesta ejecutarlo

Cuota de API
蓝湖 plan limits apply
Tokens por llamada
Spec JSON is mid-size
Monetario
免费 MCP; 蓝湖订阅 applies
Consejo
Cache specs locally — don't refetch on every prompt

Seguridad

Permisos, secretos, alcance

Ámbitos mínimos: lanhu:read
Almacenamiento de credenciales: Lanhu token in env
Salida de datos: lanhuapp.com

Resolución de problemas

Errores comunes y soluciones

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 otros

AlternativaCuándo usarlaContrapartida
figma MCPSource is FigmaDifferent design tool
stitch-mcpSource is Google StitchDifferent design tool

Más

Recursos

📖 Lee el README oficial en GitHub

🐙 Ver issues abiertas

🔍 Ver todos los 400+ servidores MCP y Skills