mcp-sketch

Englisch | Chinesisch

Ein lokales Tool, das sowohl als MCP-Dienst als auch als CLI verfügbar ist, um Sketch-Meaxure-exportierte HTML-Zip-Archive zu parsen und Designstrukturinformationen zu extrahieren.

Funktionen

• Parsen von Sketch-exportierten HTML-Zip-Archiven und Extrahieren der Designstruktur

  • Unterstützung für Filterung nach Seite (page) und Zeichenfläche (artboard)

  • Unterstützung für das Parsen spezifischer rechteckiger Bereiche

  • Ausgabe der Designstruktur als JSON und Vorschaubilder für KI-Referenzzwecke

• Bereitstellung als MCP-Dienst und CLI

Verwendung

Methode 1: Direkte Verwendung über CLI

Verwendung in Kombination mit npx:

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

Befehlsoptionen

CLI-Beispiel

Wenn Parameter Leerzeichen enthalten, müssen sie in Anführungszeichen gesetzt werden

# 分析 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]"

Methode 2: MCP-Dienst

Die Umgebungsvariable MCP_MODE=1 muss gesetzt sein, um den MCP-Dienst zu aktivieren. Konfigurieren Sie ihn als lokalen MCP-Server, damit KI-Tools direkt darauf zugreifen können.

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

MCP-Parameter

Verwenden Sie das Tool sketch_html_analyze, um das aus Sketch exportierte HTML-Zip-Archiv zu analysieren:

MCP-Aufrufbeispiele

• Analyse der ersten Zeichenfläche auf der ersten Seite des Sketch HTML-Zip-Archivs:

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

• Analyse der ersten Zeichenfläche einer bestimmten Seite:

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

• Analyse einer bestimmten Zeichenfläche auf einer bestimmten Seite:

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

• Analyse eines bestimmten Bereichs einer bestimmten Zeichenfläche auf einer bestimmten Seite, z. B. Parsen der oberen Navigationsleiste der Benutzerverwaltungs-Zeichenfläche:

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

Parameterpriorität

• page: page_id > page_name > erste Seite

• artboard: artboard_id > artboard_name > erste Zeichenfläche

• rect: Spezifiziert den zu parsenden rechteckigen Bereich. Die Filterregel besagt, dass Elemente geparst werden, sobald ihre x,y,x+width,y+height innerhalb des Rechtecks liegen.

Rückgabeergebnisse

Das Tool gibt Text zurück: {artboard: {Analyseergebnis}, previewPath: "Pfad zum Vorschaubild"}

• artboard

  • Zeichenflächendaten, einschließlich Ebenen, Stilen, Bildern und anderen Informationen

• previewPath

  • Verwendet sharp als optionalDependencies für die Bildverarbeitung

  • Falls die Installation fehlschlägt (Extremfall, da sharp von libvips abhängt), wird das ursprüngliche vollständige Zeichenflächenbild zurückgegeben.

  • Bei erfolgreicher Installation wird die Größe angepasst, der rect-Bereich (falls angegeben) zugeschnitten und als webp komprimiert zurückgegeben.

  • Verarbeitet nur Vorschaubilder, keine sketch-Assets.

Speicherort der Ausgabedateien

• Die geparsten Assets werden standardmäßig im Verzeichnis src/assets/sketch/ gespeichert (kann über assets_path angepasst werden).

• Die geparsten Designinhalte werden standardmäßig in einer lokalen JSON-Datei gespeichert (zur manuellen Überprüfung). Der Ordner befindet sich standardmäßig auf derselben Ebene wie das Zip-Archiv und trägt denselben Namen.

Nutzungsempfehlungen

• Verwenden Sie Modelle, die Multimodalität unterstützen, um die Designstruktur anhand der Vorschaubilder zu korrigieren.

• Die an die KI übergebene Datenmenge sollte 50KB nicht überschreiten, um die Genauigkeit der KI-Analyse zu erhöhen (die lokal gespeicherte JSON-Datei ist formatiert, an die KI wird ein kompaktes Format übergeben).

• Es wird empfohlen, den rect-Parameter zu verwenden, um spezifische Bereiche innerhalb einer Zeichenfläche zu analysieren, um eine modulare Entwicklung zu fördern und die Granularität zu erhöhen.

SKILL

Sie können die begleitende sketch-html-Fähigkeit verwenden, um von Sketch Meaxure exportierte Zip-Dateien zu analysieren.