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.

Funcionalidades

• Analiza archivos zip HTML exportados desde Sketch y extrae la estructura del diseño

  • Soporta filtrado por página (page) y mesa de trabajo (artboard)

  • Soporta el análisis de áreas rectangulares específicas

  • Genera un JSON con la estructura del diseño y una imagen de vista previa para referencia de la IA

• Ofrece dos modos de uso: servicio MCP y CLI

Modo de uso

Opción 1: Uso directo mediante CLI

Utilizar junto 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]"

Opción 2: Servicio MCP

Es obligatorio configurar 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 en una página específica, por ejemplo, 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 los valores x,y,x+width,y+height del elemento están dentro del rectángulo, se analizará.

Resultados devueltos

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

• artboard

  • Datos de la mesa de trabajo, incluyendo capas, estilos, imágenes y otra información

• 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.

  • Solo procesa la vista previa, no gestiona los recursos (assets) de sketch.

Ubicación de los archivos de salida

• Los recursos (assets) 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 para poder leer la vista previa y corregir la estructura del diseño

• El volumen de datos analizados para la IA no debe superar 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.

SKILL

Puede utilizar la habilidad complementaria sketch-html para analizar archivos zip exportados por sketch meaxure