mcp-sketch

Inglés | Chino

Herramienta local que ofrece servicios MCP y CLI para analizar archivos zip HTML exportados desde Sketch-Meaxure y extraer información de la estructura del diseño.

SKILL

• Se recomienda descargar el skill sketch-html y personalizar su propia versión para analizar archivos zip exportados desde Sketch-Meaxure.

• También se puede descargar utilizando la herramienta skills.

npx skills@latest add YamadaAoi/mcp-sketch -s sketch-html

Related MCP server: codesign-mcp

Declaración

• Para no confundir a la IA, esta herramienta filtra algunas capas sin sentido, pero no se excluye la posibilidad de que se filtren algunas capas válidas.

• Se recomienda comunicarse con el diseñador UI; para efectos complejos, intente realizar cortes (slices); para efectos simples, establezca un radio (radius) para enfatizar, aunque sea 1.

Funcionalidades

• Analizar archivos zip HTML exportados desde Sketch y extraer la estructura del diseño.

  • Soporte para filtrar por página y mesa de trabajo (artboard).

  • Soporte para analizar áreas rectangulares específicas.

  • Salida de la estructura del diseño en JSON e imágenes de vista previa para referencia de la IA.

• Proporciona dos formas de uso: servicio MCP y CLI.

Modo de uso

Método 1: Uso directo mediante CLI

Utilizar en combinación con npx:

npx -y mcp-sketch analyze -p /path/to/export.zip

Opciones de comando

Ejemplo de CLI

Si los parámetros contienen espacios, deben encerrarse entre comillas

# 分析 zip 中第一个页面第一个画板
npx -y mcp-sketch analyze -p "/path/to/export .zip"

# 分析指定页面
npx -y mcp-sketch analyze -p /path/to/export.zip --pn 首页

# 分析指定页面指定画板
npx -y mcp-sketch analyze -p /path/to/export.zip --pn 首页 --an 用户管理

# 分析指定区域
npx -y mcp-sketch analyze -p /path/to/export.zip --pn 首页 --an 用户管理 -r "[0,0,1920,64]"

Método 2: Servicio MCP

Es obligatorio establecer la variable de entorno MCP_MODE=1 para habilitar el servicio MCP, configurado como un servicio MCP local para que las herramientas de IA puedan invocarlo directamente.

• opencode:

{
  "mcp": {
    "mcp-sketch": {
      "type": "local",
      "command": ["npx", "-y", "mcp-sketch"],
      "enabled": true,
      "environment": {
        "MCP_MODE": "1",
        "LOG_LEVEL": "debug"
      }
    }
  }
}

• Trae:

{
  "mcpServers": {
    "mcp-sketch": {
      "command": "npx",
      "args": ["-y", "mcp-sketch"],
      "env": {
        "MCP_MODE": "1"
      }
    }
  }
}

Parámetros MCP

Utilice la herramienta sketch_html_analyze para analizar el archivo zip HTML exportado desde Sketch:

Ejemplo de invocación MCP

• Analizar la primera mesa de trabajo de la primera página del archivo zip HTML de Sketch:

sketch_html_analyze({ file_path: "/path/to/export.zip" })

• Analizar la primera mesa de trabajo de una página específica:

sketch_html_analyze({ file_path: "/path/to/export.zip", page_name: "首页" })

• Analizar una mesa de trabajo específica de una página específica:

sketch_html_analyze({ file_path: "/path/to/export.zip", page_name: "首页", artboard_name: "用户管理" })

• Analizar un área específica de una mesa de trabajo específica en una página específica, por ejemplo, analizar la barra de navegación superior de la mesa de trabajo de gestión de usuarios:

sketch_html_analyze({ file_path: "/path/to/export.zip", page_name: "首页", artboard_name: "用户管理", rect: [0, 0, 1920, 64] })

Prioridad de parámetros

• page: page_id > page_name > primera página

• artboard: artboard_id > artboard_name > primera mesa de trabajo

• rect: Especifica el área rectangular de análisis; la regla de filtrado es que si las coordenadas x,y,x+width,y+height del elemento están dentro del rectángulo, será analizado.

Resultados devueltos

La herramienta devolverá texto: {artboard: {resultado del análisis}, previewPath: "ruta de la vista previa"}

• artboard

  • Datos de la mesa de trabajo, incluyendo capas, estilos, imágenes, etc.

• previewPath

  • Utiliza sharp como optionalDependencies para el procesamiento de imágenes.

  • Si la instalación falla (caso extremo, ya que sharp depende de libvips), se devolverá la imagen original completa de la mesa de trabajo.

  • Si la instalación es exitosa, se ajustará el tamaño, se recortará el área rect (si se especifica) y se comprimirá en formato webp para su devolución.

  • Solo procesa la vista previa, no reemplaza el procesamiento de cortes de sketch.

Ubicación de los archivos de salida

• Los cortes analizados se guardan por defecto en el directorio src/assets/sketch/ (se puede personalizar mediante assets_path).

• El contenido del diseño analizado se guarda por defecto en un archivo JSON local (para revisión humana), la carpeta de almacenamiento tiene el mismo nombre y nivel que el archivo zip.

Sugerencias de uso

• Utilice modelos que soporten multimodalidad, capaces de leer la vista previa para corregir la estructura del diseño.

• El volumen de datos analizados para la IA no debe exceder los 50KB para mejorar la precisión del análisis de la IA (el archivo JSON almacenado localmente está formateado, el que se pasa a la IA es un formato compacto).

• Se recomienda utilizar el parámetro rect para analizar áreas específicas dentro de la mesa de trabajo, permitiendo un desarrollo modular y mejorando la granularidad.

Guía