Lanhu MCP Server

Model Context Protocol (MCP)-сервер для платформы совместного дизайна Lanhu (蓝湖).

Дайте LLM-моделям и ИИ-ассистентам по программирова возможно напрямую просматривать артборды, извлекатно попиксельно точные CSS-свой ства и аерархии слоёв, а также скачиваемые экспортируемые ассеты — с нулевом расходом vision-токенов.

English • 简体中文

💡 Зачем нужен Lanhu MCP?

Когда вы реализуете UI-дизайн с помощью ИИ-агентов программирования (Claude, Cursor, Copilot, Antigravity и т.д.), передача скриншотов часто приводит к:

• Высоким затратам токенов для vision-моделей

• Непрецизион crashesному позиционированию, угаданным отступам and approximate colors

• Галлюцинированным размерам шрифтов и межстрочным интервалам

• Невозможности автоматически извлекать и скачивать SVG/изображения

Lanhu MCP Server преобразует структурированные спецификации Lanhu напрямую в типизированные деревья данных:

• ⚡ Ноль лишних vision-токенов: чистые структурированные JSON-данные вместо тяжёлых скриншотов.

• 📐 Попиксельная точность: точные границы слоёв (x, y, width, height), цвета (HEX/RGBA), типографика (fontSize, fontWeight, fontFamily, lineHeight), радиус скругления, заливки, границы и тени.

• 🎨 Умное извлечение ассетов: автоматически находит slice-ассеты, выдаёт прямые CDN-ссылки для скачивания и поддерживает конвертацию без потерь в современные форматы WebP или SVG.

• Устойчивая аутентификация: постоянное управление сессией с автоматическим headless-обновлением токена через Playwright.

Related MCP server: Lanhu MCP Server

✨ Ключевые возможности

• РазведКоманд и проектов: получайте команды, проектные файлы и легко ищите проекты по командам.

• Просмотр артбордов: получайте список артбордов (screens), превью-миниатюры и ищите экраны по имени.

• Глубокая аннотация слоёв: рекурсивно получайте полные деревья слоёв со всеми CSS/UI-свойствами.

• Пайплайн ассетов: скачивайте SVG-векторы и растровые изображения прямо в локальную папку.

• Автоматический хранитель сессии: headless-скрипт Playwright незаметно поддерживает сессию Lanhu в фоне без постоянных ручных входов.

📋 Требования

• Python: >= 3.10

• Менеджер пакетов: uv (настоятельно рекомендуется)

• MCP-клиент: Cursor, Claude Desktop, Claude Code, Antigravity, Windsurf, Cline, Codex, VS Code или любой другой совместимый с MCP инструмент.

🚀 Быстрый старт

1. Запуск через uvx (без установки)

Вы можете запустить lanhu-mcp напрямую, без клонирования репозитория:

uvx --from git+https://github.com/xinayida/lanhu-mcp.git lanhu-mcp

2. Запуск из исходников

# Clone the repository
git clone https://github.com/xinayida/lanhu-mcp.git
cd lanhu-mcp

# Sync environment and dependencies
uv sync

# Run the server (stdio mode)
uv run lanhu-mcp

🔐 Аутентификация

Lanhu MCP подключается к lanhuapp.com с помощью cookie браузерной сессии. Данные читаются из ~/.lanhu/cookie (атрибуты файла 0600).

Способ 1: Автоматический вход и обновление (рекомендуется)

Запустите включённый в комплект скрипт автоматизации Playwright:

uv run scripts/refresh_cookie.py

• Если вы уже вошли в систему: скрипт в headless-режиме проверяет сессию, обновляет токен и записывает ~/.lanhu/cookie.

• Если сессия истекла: автоматически открывается окно Chrome для разового входа (код из SMS или пароль). После успешной аутентификации скрипт сохраняет сессию и закрывает браузер.

Совет для плановых задач: используйте флаг --headless-only в cron-заданиях, чтобы периодически обновлять cookie без всплывающих окон:

uv run scripts/refresh_cookie.py --headless-only

Способ 2: Динамическая установка через инструмент чата

Вызовите MCP-инструмент напрямую в ИИ-чате:

lanhu_set_cookie(cookie="session=...; user_token=...")

Чтобы получить cookie вручную:

1. Откройте lanhuapp.com в Chrome и откройте DevTools (F12).

2. Перейдите на вкладку Network, кликните любой запрос к lanhuapp.com.

3. В разделе Request Headers скопируйте полную строку Cookie, содержащую session и user_token.

Способ 3: Переменная окружения

Создайте .env в корне проекта или передайте LANHU_COOKIE:

cp .env.example .env
# Edit .env and set LANHU_COOKIE=session=...; user_token=...

🛠️ Конфигурация MCP-клиента

Добавьте lanhu-mcp в предпочитаемый MCP-клиент:

Перейдите в Cursor Settings → MCP → Add new MCP Server:

• Name: lanhu

• Type: command

• Command:

uvx --from git+https://github.com/xinayida/lanhu-mcp.git lanhu-mcp

Или настройте через ~/.cursor/mcp.json:

{
  "mcpServers": {
    "lanhu": {
      "command": "uvx",
      "args": ["--from", "git+https://github.com/xinayida/lanhu-mcp.git", "lanhu-mcp"]
    }
  }
}

Добавьте в claude_desktop_config.json (macOS: ~/Library/Application Support/Claude/claude_desktop_config.json):

{
  "mcpServers": {
    "lanhu": {
      "command": "uvx",
      "args": ["--from", "git+https://github.com/xinayida/lanhu-mcp.git", "lanhu-mcp"]
    }
  }
}

Используйте с помощью Claude Code CLI:

claude mcp add lanhu uvx --from git+https://github.com/xinayida/lanhu-mcp.git lanhu-mcp

Добавьте в конфигурацию Antigravity или settings.json:

{
  "mcpServers": {
    "lanhu": {
      "command": "uvx",
      "args": ["--from", "git+https://github.com/xinayida/lanhu-mcp.git", "lanhu-mcp"]
    }
  }
}

Добавьте в ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "lanhu": {
      "command": "uvx",
      "args": ["--from", "git+https://github.com/xinayida/lanhu-mcp.git", "lanhu-mcp"]
    }
  }
}

Добавьте в ваш cline_mcp_settings.json:

{
  "mcpServers": {
    "lanhu": {
      "command": "uvx",
      "args": ["--from", "git+https://github.com/xinayida/lanhu-mcp.git", "lanhu-mcp"],
      "disabled": false,
      "autoApprove": []
    }
  }
}

Добавьте с использованием Codex CLI:

codex mcp add lanhu uvx "--from" "git+https://github.com/xinayida/lanhu-mcp.git" "lanhu-mcp"

или отредактируйте ~/.codex/config.toml:

[mcp_servers.lanhu]
command = "uvx"
args = ["--from", "git+https://github.com/xinayida/lanhu-mcp.git", "lanhu-mcp"]

Добавьте через MCP-расширение VS Codeы или в настройках:

{
  "mcpServers": {
    "lanhu": {
      "command": "uvx",
      "args": ["--from", "git+https://github.com/xinayida/lanhu-mcp.git", "lanhu-mcp"]
    }
  }
}

≤ливаемM Tools»Каталог

🧭 Типичный сценарий ИИ-программирования

Попросите ИИ-агента реализовать ваш интерфейс по дизайну Lanhu:

User: "Please implement the checkout screen from our Lanhu project and download necessary icons."

Андент выполнит следующее автономною цепочку:

graph LR
    A[1. lanhu_get_teams] --> B[2. lanhu_get_projects]
    B --> C[3. lanhu_get_screens]
    C --> D[4. lanhu_get_annotations]
    D --> E[5. Generate Code CSS/HTML/React/Flutter]
    D --> F[6. lanhu_download_asset]

Пример вызова инструмента

# 1. Fetch team list
teams = lanhu_get_teams()
team_id = teams[0]["id"]

# 2. Get project list
projects = lanhu_get_projects(team_id=team_id)
project_id = projects[0]["id"]

# 3. Get artboards list
screens = lanhu_get_screens(project_id=project_id, team_id=team_id)
image_id = screens[0]["id"]

# 4. Extract full annotations
annotations = lanhu_get_annotations(
    project_id=project_id,
    image_id=image_id,
    team_id=team_id
)

# 5. Download icons/slices
assets = lanhu_get_assets(project_id=project_id, image_id=image_id, team_id=team_id)
lanhu_download_asset(
    asset_id=assets[0]["id"],
    asset_name=assets[0]["name"],
    download_url=assets[0]["download_url"],
    format="webp" # or "svg"
)

📦 Структура данных аннотаций

Вызов lanhu_get_annotations возвращает структурированный JSON:

{
  "id": "651234567890abcdef",
  "name": "Checkout Page",
  "width": 375.0,
  "height": 812.0,
  "thumbnail_url": "https://...",
  "layers": [
    {
      "id": "layer_01",
      "name": "Submit Button",
      "type": "rect",
      "bounds": { "x": 16.0, "y": 740.0, "width": 343.0, "height": 48.0 },
      "border_radius": 8.0,
      "opacity": 1.0,
      "visible": true,
      "fills": [
        { "type": "color", "color": "#0066FF", "opacity": 1.0 }
      ],
      "shadows": [
        { "x": 0.0, "y": 4.0, "blur": 12.0, "spread": 0.0, "color": "#0066FF33" }
      ],
      "children": [
        {
          "id": "layer_02",
          "name": "Button Label",
          "type": "text",
          "text": "Confirm & Pay",
          "bounds": { "x": 140.0, "y": 754.0, "width": 95.0, "height": 20.0 },
          "font": {
            "size": 16.0,
            "weight": "600",
            "family": "PingFang SC",
            "line_height": 20.0,
            "letter_spacing": 0.0,
            "color": "#FFFFFF",
            "text_align": "center"
          }
        }
      ]
    }
  ],
  "assets": [
    {
      "id": "asset_01:svg",
      "name": "icon_cart",
      "format": "svg",
      "download_url": "https://..."
    }
  ]
}

⚙️ Переменные окружения

⚠️Отказ от ответственности

Этот проект — независимый инструмент с открытым исходным кодом, созданный в образовательных, тестовых и исследовательских целях продуктивности ИИ. Он взаимодействует с Lanhu через реверс-инженерные веб-интерфейсы. Пожалуйста, соблюдайте Условия использования Lanhu при работе с этим инструментом. Авторы не несут ответственности за неправомерное использование.

📄 Лицензия

Проект распространяется по лицензии MIT.