lanhu-context-mcp

简体中文 | English

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

Функции

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

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

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

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

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

Related MCP server: componentize

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

Полную документацию можно найти на сайте 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