Moonvy UI MCP

MCP de lectura de diseños de Moonvy (月维) orientado al desarrollo frontend. Al ingresar la URL de un proyecto o archivo de diseño, se pueden obtener la lista de páginas, dimensiones de los marcos, árbol de capas, estilos de nodos, tokens de diseño, así como recursos de exportación de imágenes, capturas y rellenos de imagen.

Este proyecto se basa en los límites de herramientas de lanhu-mcp, pero la lectura de datos está dirigida a Moonvy: extrae parámetros precisos a través del archivo de datos de diseño de Moonvy (Genome), en lugar de adivinar colores, tamaños de fuente y espaciados a partir de capturas de pantalla.

Qué puede hacer

moonvy_get_node_style y moonvy_get_ui_spec proporcionan:

• Posición absoluta, así como relativeX / relativeY relativos al nodo padre

• Distancia al borde derecho e inferior del nodo padre

• Ancho, alto, visibilidad, opacidad y estado de recorte

• Referencias de relleno de color sólido, degradado e imagen

• Fuente, tamaño de fuente, peso, altura de línea, espaciado de letras, color de texto y alineación

• Radio de esquina, trazo, sombra

• Objeto de propiedades CSS directamente consultable

Related MCP server: Figma MCP

Flujo de datos

Moonvy URL
  -> projectId / dirId / fileId
  -> POST https://global-api.moonvy.com/v2/anynode/get
  -> files.genome.url
  -> 下载并解压 Genome JSON
  -> 解析图层、样式、Token、资源
  -> MCP JSON 响应

La lista de proyectos/directorios usa POST /v2/anynode/list. Estas son interfaces no públicas que Moonvy Web usa actualmente; si Moonvy ajusta las interfaces o la estructura de Genome en el futuro, será necesario actualizar la capa de adaptación.

Instalación

Requiere Node.js 20 o superior.

cd C:\path\to\moonvy-ui-mcp
npm install
Copy-Item .env.example .env

Configurar el token de inicio de sesión de Moonvy

1. Inicia sesión en Moonvy en el navegador y abre la página de Moonvy que deseas leer.

2. Abre la consola de las herramientas de desarrollador.

3. Ejecuta:

copy(window.app?.api?.$options?.token)

4. Escribe el valor copiado en el .env de este proyecto:

MOONVY_TOKEN=你的本机令牌

El token se guarda solo en tu máquina; no lo envíes a chats, no lo subas a Git ni lo escribas en código frontend. Las respuestas del servicio ocultan automáticamente el JWT y las URLs de recursos con parámetros de consulta.

Autocomprobación

npm run check
npm test
npm start

npm start es un servicio MCP stdio; en condiciones normales no emite registros comunes y espera la conexión de un cliente MCP.

Integración con la aplicación de escritorio Codex / ChatGPT

En la configuración, selecciona Servidores MCP -> Agregar servidor, y elige el tipo STDIO:

• Comando: node

• Argumentos: C:\path\to\moonvy-ui-mcp\src\server.js

• Directorio de trabajo: C:\path\to\moonvy-ui-mcp

También puedes agregar lo siguiente a ~/.codex/config.toml o al .codex/config.toml dentro de un proyecto de confianza:

[mcp_servers.moonvy]
command = "node"
args = ["C:/path/to/moonvy-ui-mcp/src/server.js"]
cwd = "C:/path/to/moonvy-ui-mcp"
startup_timeout_sec = 20
tool_timeout_sec = 180

El servicio lee MOONVY_TOKEN del .env en el cwd por defecto. Si deseas reenviarlo desde las variables de entorno de tu máquina, también puedes agregar:

env_vars = ["MOONVY_TOKEN"]

Después de guardar, reinicia Codex/aplicación de escritorio y usa /mcp en el campo de entrada para verificar la conexión.

Integración con Cursor / Windsurf / Claude Code

Usa la configuración estándar de stdio MCP:

{
  "mcpServers": {
    "moonvy": {
      "command": "node",
      "args": ["C:/path/to/moonvy-ui-mcp/src/server.js"],
      "cwd": "C:/path/to/moonvy-ui-mcp"
    }
  }
}

Orden de uso para el enlace actual de Moonvy

Enlace actual:

https://moonvy.com/project/89f75621-a0e7-4122-b9ee-b6b703e1c826/cf67c54c-8e2b-4809-9e4d-fc6512d0e0be

Contiene projectId + dirId, apuntando a una carpeta en lugar de un archivo de diseño específico, por lo que se recomienda:

1. Llama a moonvy_list_pages para obtener la lista de archivos.

2. Selecciona la URL de diseño específica de los resultados devueltos.

3. Llama a moonvy_get_design para ver la lista de marcos.

4. Para el marco objetivo, llama a moonvy_get_ui_spec, usando primero maxDepth=4 y maxNodes=500.

5. Si necesitas ver un elemento con precisión, primero usa moonvy_list_layers para encontrar el ID del nodo y luego llama a moonvy_get_node_style.

6. Descarga iconos, imágenes de fondo o capturas de página con moonvy_download_asset al directorio de recursos del proyecto frontend real.

Ejemplo de prompt:

使用 Moonvy MCP 列出这个项目目录里的设计文件。找到“新增学生”页面后，
读取它的 UI spec，保留原始颜色、字号、间距和圆角，并把需要的切图下载到
C:/work/school-web/src/assets/moonvy。

Correspondencia con lanhu-mcp

La versión actual se centra en "diseño -> implementación frontend"; no replica el análisis de documentos de requisitos, el muro de mensajes del equipo ni las funciones de colaboración de Feishu del proyecto Lanhu.

Seguridad y limitaciones

• Usa únicamente proyectos de Moonvy a los que ya tengas permiso de acceso.

• .env ya está en .gitignore; aun así, evita enviar el token manualmente.

• moonvy_download_asset requiere un directorio de salida absoluto para evitar que los recursos se escriban en ubicaciones no especificadas.

• Si el token de Moonvy expira, debes obtenerlo nuevamente.

• Este proyecto no elude el inicio de sesión, los permisos de proyecto ni los controles de acceso del servidor de Moonvy.

• Los campos de Genome pueden no ser completamente consistentes entre diferentes versiones de herramientas de diseño; el analizador conserva campos de compatibilidad comunes, pero se recomienda realizar una validación de extremo a extremo con el diseño real de tu equipo.

Desarrollo y pruebas

Las pruebas unitarias usan un Genome sintético, no requieren credenciales de Moonvy:

npm test

Las pruebas de extremo a extremo con proyectos reales requieren un MOONVY_TOKEN válido:

1. moonvy_list_pages(文件夹 URL)
2. moonvy_get_design(设计文件 URL)
3. moonvy_get_ui_spec(设计文件 URL)
4. moonvy_get_node_style(设计文件 URL, 节点 ID)