/ Annuaire / Playground / Lanhu MCP
● Communauté dsphper 🔑 Nécessite votre clé

Lanhu MCP

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

Pourquoi l'utiliser

Fonctionnalités clés

Démo en direct

Aperçu en pratique

prêt

Installer

Choisissez votre 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}"
      }
    }
  }
}

Ouvrez Claude Desktop → Settings → Developer → Edit Config. Redémarrez après avoir enregistré.

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

Cursor utilise le même schéma mcpServers que Claude Desktop. La config projet l'emporte sur la globale.

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

Cliquez sur l'icône MCP Servers dans la barre latérale Cline, puis "Edit Configuration".

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

Même format que Claude Desktop. Redémarrez Windsurf pour appliquer.

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

Continue utilise un tableau d'objets serveur plutôt qu'une map.

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

Ajoutez dans context_servers. Zed recharge à chaud à la sauvegarde.

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

Une seule ligne. Vérifiez avec claude mcp list. Supprimez avec claude mcp remove.

Cas d'usage

Usages concrets : Lanhu MCP

Generate a React component from a 蓝湖 board

👤 Developers ⏱ ~15 min intermediate

Quand l'utiliser : 设计师 just shipped a board; you want the component scaffolded with correct tokens.

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

Résultat : Component matches the spec without you eyeballing pixel values.

Combinaisons

Associez-le à d'autres MCPs pour un effet X10

lanhu-mcp + filesystem

Save downloaded slices into your project tree

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

Outils

Ce que ce MCP expose

OutilEntréesQuand appelerCoût
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

Coût et limites

Coût d'exécution

Quota d'API
蓝湖 plan limits apply
Tokens par appel
Spec JSON is mid-size
Monétaire
免费 MCP; 蓝湖订阅 applies
Astuce
Cache specs locally — don't refetch on every prompt

Sécurité

Permissions, secrets, portée

Portées minimales : lanhu:read
Stockage des identifiants : Lanhu token in env
Sortie de données : lanhuapp.com

Dépannage

Erreurs courantes et correctifs

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 autres

AlternativeQuand l'utiliserCompromis
figma MCPSource is FigmaDifferent design tool
stitch-mcpSource is Google StitchDifferent design tool

Plus

Ressources

📖 Lire le README officiel sur GitHub

🐙 Voir les issues ouvertes

🔍 Parcourir les 400+ serveurs MCP et Skills