lanhu-context-mcp

Chino simplificado | English

✨ Organiza los borradores de diseño de Lanhu en un contexto que permite a la IA generar código para recrear la página.

Características

• 🎨 Soporta la salida de HTML+CSS o HTML+Tailwind, permitiendo elegir el formato más adecuado según el stack tecnológico del proyecto.

• 🖼️ Devuelve un mapeo de recursos de corte y comandos de descarga, reduciendo los pasos manuales para procesar recursos de imagen uno por uno.

• 🧱 Incluye Design Tokens y vistas previas de diseño, facilitando que los modelos posteriores realicen la implementación y la verificación visual.

• 🧭 Incluye guías de implementación orientadas a la IA, especificando prioridades, métodos de adaptación y restricciones.

• ⚙️ Soporta la configuración de salida de Tailwind, omisión de cortes, escalado de unidades e idioma de las sugerencias a través de parámetros CLI y variables de entorno.

Related MCP server: componentize

Documentación

Para la documentación completa, visite lanhu.refineup.com.

Inicio rápido

Requisitos del entorno

• Node.js ^20.19.0 || >=22.12.0

Transcodificación de borradores de diseño

• Los borradores de diseño deben tener habilitada la función de transcodificación antes de ser subidos a Lanhu.

Paso 1. Preparar las variables de entorno

Primero, cree un archivo .env.local.

Necesitará un token de inicio de sesión de Lanhu válido; puede consultar Obtener token de Lanhu.

LANHU_TOKEN=your_lanhu_token_here

Paso 2. Configurar MCP

Escriba la configuración de MCP correspondiente al cliente en el archivo correspondiente:

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"]
    }
  }
}

La configuración de MCP para Codex es especial; requiere establecer un cwd adicional y completarlo con la ruta absoluta del proyecto actual. Dado que esta ruta suele variar según el usuario, no se recomienda subir .codex/config.toml a Git; se sugiere excluirlo en Git y que cada desarrollador lo mantenga localmente.

Windows

Si el inicio falla al usar la configuración npx anterior en Windows, puede usar la siguiente sintaxis:

Codex (WSL2)

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

Codex (Nativo)

[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"]
    }
  }
}

Referencia para el fallback nativo de Codex: openai/codex#2555

Paso 3. Instalar la extensión de Google Chrome Lanhu Helper

Tras instalar Lanhu Helper, puede hacer clic derecho directamente en Lanhu para copiar el enlace de la capa seleccionada o el prompt de ejemplo.

Paso 4. Enviar el enlace de Lanhu y el prompt a la IA

请根据这个蓝湖设计稿实现
@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}

El prompt puede escribirse según sus ideas, pero la URL de Lanhu debe estar completa y ser correcta, de lo contrario no se podrá invocar la herramienta correctamente.

Ver documentación más detallada

Ecosistema

Lanhu Helper — Extensión complementaria de Chrome para Lanhu, que permite copiar enlaces de capas seleccionadas y prompts de ejemplo mediante clic derecho en Lanhu.

Licencia

MIT

Copyright (c) 2026-present, REFINIST