Skip to main content
Glama
refinist

lanhu-context-mcp

by refinist

lanhu-context-mcp

简体中文 | English

npm downloads/month Unit Test codecov

✨ Преобразует макеты Lanhu в контекст, позволяющий ИИ генерировать код для восстановления страниц.

Функции

  • 🎨 Поддержка вывода HTML+CSS или HTML+Tailwind, возможность выбора наиболее подходящего формата в зависимости от технологического стека проекта

  • 🖼️ Возврат сопоставления ресурсов изображений и команд для скачивания, что сокращает количество ручных действий по обработке ресурсов

  • 🧱 Дополнение Design Tokens и превью дизайна для облегчения реализации и визуальной проверки последующими моделями

  • 🧭 Включение руководств по реализации для ИИ с указанием приоритетов, способов адаптации и ограничений

  • ⚙️ Поддержка настройки вывода Tailwind, пропуска изображений, масштабирования единиц измерения и языка подсказок через параметры CLI и переменные окружения

Related MCP server: lanhu-mcp-server

Документация

Полную документацию можно найти на сайте lanhu.refineup.com.

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

Системные требования

  • Node.js ^20.19.0 || >=22.12.0

Преобразование макетов

  • Для макетов необходимо сначала включить функцию транскодирования, а затем загрузить их в Lanhu

Шаг 1. Подготовка переменных окружения

Сначала создайте файл .env.local.

Вам понадобится действующий токен для входа в Lanhu, см. Получение токена Lanhu.

LANHU_TOKEN=your_lanhu_token_here

Шаг 2. Настройка MCP

Добавьте конфигурацию MCP для соответствующего клиента в нужный файл:

Codex (.codex/config.toml)

[mcp_servers.lanhu-context-mcp]
cwd = "/absolute/path/to/current-project"
command = "npx"
args = ["-y", "lanhu-context-mcp"]

Claude Code (.mcp.json) / Cursor (.cursor/mcp.json)

{
  "mcpServers": {
    "lanhu-context-mcp": {
      "command": "npx",
      "args": ["-y", "lanhu-context-mcp"]
    }
  }
}

Конфигурация MCP для Codex является специфической: необходимо дополнительно задать cwd и указать в нем абсолютный путь к текущему проекту. Поскольку этот путь обычно индивидуален, не рекомендуется добавлять .codex/config.toml в Git; лучше добавить его в исключения Git и поддерживать локально каждым разработчиком.

Windows

Если запуск с использованием конфигурации npx выше в Windows завершается ошибкой, можно использовать следующий вариант:

Codex (WSL2)

[mcp_servers.lanhu-context-mcp]
cwd = "/absolute/path/to/current-project"
command = "npx"
args = ["-y", "lanhu-context-mcp"]

Codex (Native)

[mcp_servers.lanhu-context-mcp]
cwd = "C:\\absolute\\path\\to\\current-project"
command = "C:\\Program Files\\nodejs\\npx.cmd"
args = ["-y", "lanhu-context-mcp"]

[mcp_servers.lanhu-context-mcp.env]
APPDATA = "C:\\Users\\{your-name}\\AppData\\Roaming"
LOCALAPPDATA = "C:\\Users\\{your-name}\\AppData\\Local"
USERPROFILE = "C:\\Users\\{your-name}"
HOME = "C:\\Users\\{your-name}"
SYSTEMROOT = "C:\\Windows"
COMSPEC = "C:\\Windows\\System32\\cmd.exe"

Claude Code (.mcp.json) / Cursor (.cursor/mcp.json)

{
  "mcpServers": {
    "lanhu-context-mcp": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "lanhu-context-mcp"]
    }
  }
}

Справочная информация по нативному fallback для Codex: openai/codex#2555

Шаг 3. Установка расширения Lanhu Helper для Google Chrome

После установки Lanhu Helper вы можете копировать ссылки на выбранные слои или примеры подсказок прямо из Lanhu через контекстное меню.

Шаг 4. Отправка ссылки Lanhu и подсказки ИИ

请根据这个蓝湖设计稿实现
@https://lanhuapp.com/web/#/item/project/detailDetach?tid={tid}&pid={pid}&project_id={project_id}&image_id={image_id}
https://lanhuapp.com/web/#/item/project/detailDetach?tid={tid}&pid={pid}&project_id={project_id}&image_id={image_id}

Подсказки можно писать в свободной форме, но URL-адрес Lanhu должен быть полным и корректным, иначе вызов инструмента не сработает.

Посмотреть подробную документацию

Экосистема

Lanhu Helper — сопутствующее расширение для браузера Chrome, позволяющее копировать ссылки на слои и примеры подсказок из Lanhu через контекстное меню

Лицензия

MIT

Copyright (c) 2026-present, REFINIST

Related MCP Connectors

Related MCP Servers

  • A
    license
    A
    quality
    A
    maintenance
    Enables AI to directly read and analyze Lanhu design drafts and requirement documents to generate HTML, CSS, and structural analyses. It allows users to extract design slices and process prototype pages directly within AI clients.
    3
    134 npm
    131
    MIT
  • A
    license
    A
    quality
    B
    maintenance
    Enables AI coding tools to read Lanhu design data and automate Design to Code, including project browsing, layer tree extraction, DDS semantic components, and code generation.
    14
    33 npm
    3
    MIT
  • A
    license
    B
    quality
    B
    maintenance
    Fetches Lanhu UI design specs and assets with minimal tokens, enabling coding agents to implement high-fidelity UI by providing precise coordinates, styles, and downloaded resources.
    2
    2
    MIT
  • A
    license
    A
    quality
    C
    maintenance
    Provides AI coding agents with structured access to Lanhu design data, enabling direct inspection of artboards, extraction of pixel-perfect layer styles and CSS attributes, and downloading of design assets without vision token overhead.
    9
    MIT