/ Каталог / Песочница / Lanhu MCP
● Сообщество dsphper 🔑 Нужен свой ключ

Lanhu MCP

автор 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.

Зачем использовать

Ключевые функции

Живое демо

Как выглядит на практике

готово

Установка

Выберите клиент

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

Откройте Claude Desktop → Settings → Developer → Edit Config. Перезапустите после сохранения.

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

Cursor использует ту же схему mcpServers, что и Claude Desktop. Конфиг проекта приоритетнее глобального.

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

Щёлкните значок MCP Servers на боковой панели Cline, затем "Edit Configuration".

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

Тот же формат, что и Claude Desktop. Перезапустите Windsurf для применения.

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

Continue использует массив объектов серверов, а не map.

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

Добавьте в context_servers. Zed перезагружается автоматически.

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

Однострочная команда. Проверить: claude mcp list. Удалить: claude mcp remove.

Сценарии использования

Реальные сценарии: Lanhu MCP

Generate a React component from a 蓝湖 board

👤 Developers ⏱ ~15 min intermediate

Когда использовать: 设计师 just shipped a board; you want the component scaffolded with correct tokens.

Поток
  1. Fetch board
    lanhu_get_board with board URL.✓ Скопировано
    → Spec returned
  2. Download slices
    lanhu_download_slices into /assets.✓ Скопировано
    → Images saved
  3. Generate
    Author component using spec tokens.✓ Скопировано
    → Component ready

Итог: Component matches the spec without you eyeballing pixel values.

Комбинации

Сочетайте с другими MCP — эффект x10

lanhu-mcp + filesystem

Save downloaded slices into your project tree

Combine lanhu-mcp with filesystem: Save downloaded slices into your project tree✓ Скопировано

Инструменты

Что предоставляет этот MCP

ИнструментВходные данныеКогда вызыватьСтоимость
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

Стоимость и лимиты

Во что обходится

Квота API
蓝湖 plan limits apply
Токенов на вызов
Spec JSON is mid-size
Деньги
免费 MCP; 蓝湖订阅 applies
Совет
Cache specs locally — don't refetch on every prompt

Безопасность

Права, секреты, радиус поражения

Минимальные скоупы: lanhu:read
Хранение учётных данных: Lanhu token in env
Исходящий трафик: lanhuapp.com

Устранение неполадок

Частые ошибки и исправления

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

Альтернативы

Lanhu MCP в сравнении

АльтернативаКогда использоватьКомпромисс
figma MCPSource is FigmaDifferent design tool
stitch-mcpSource is Google StitchDifferent design tool

Ещё

Ресурсы

📖 Читать официальный README на GitHub

🐙 Открытые задачи

🔍 Все 400+ MCP-серверов и Skills