mcp-sketch

English | 中文

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

SKILL

• Es wird empfohlen, den sketch-html skill herunterzuladen und eine eigene Version anzupassen, um die von Sketch-Meaxure exportierten Zip-Dateien zu analysieren.

• Alternativ kann das skills-Tool zum Herunterladen verwendet werden.

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

Related MCP server: codesign-mcp

Hinweis

• Um die KI nicht zu verwirren, filtert dieses Tool einige bedeutungslose Ebenen heraus; es kann jedoch nicht ausgeschlossen werden, dass dabei auch einige relevante Ebenen entfernt werden.

• Es wird empfohlen, sich mit dem UI-Designer abzustimmen. Komplexe Effekte sollten nach Möglichkeit als Bild exportiert werden; einfache Effekte sollten mit einem Radius (radius) zur Hervorhebung versehen werden, selbst wenn dieser nur 1 beträgt.

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 die Analyse spezifischer rechteckiger Bereiche

  • Ausgabe der Designstruktur als JSON und Vorschaubild für die KI-Referenz

• Bereitstellung als MCP-Dienst und CLI-Tool

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. die obere 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: Definiert den zu analysierenden rechteckigen Bereich. Die Filterregel besagt, dass Elemente analysiert werden, sobald sich ihr x,y,x+width,y+height innerhalb des Rechtecks befindet.

Rückgabeergebnisse

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

• artboard

  • Daten der Zeichenfläche, einschließlich Ebenen, Stilen, Bildern usw.

• 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 das Vorschaubild, führt keine automatische Verarbeitung der sketch-Assets durch.

Speicherort der Ausgabedateien

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

• Der analysierte Designinhalt wird 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.

Empfehlungen zur Verwendung

• Verwenden Sie Modelle, die multimodale Eingaben unterstützen, um das Vorschaubild zu lesen und die Designstruktur zu korrigieren.

• Die an die KI übermittelte 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 übermittelt).

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

Anleitung