Skizzenkontext MCP

Hinweis: Dieses Projekt befindet sich derzeit in der Testphase und ist möglicherweise nicht vollständig stabil.

Skizzenkontext MCP

Ein Model Context Protocol (MCP)-Server zur Integration von Sketch-Designs mit IDEs wie Cursor, Cline oder Windsurf.

Überblick

Dieses Tool ermöglicht Cursor IDE den Zugriff auf Sketch-Designdateien und deren Interpretation. Dies ermöglicht KI-gestützte Design-to-Code-Workflows. Es funktioniert folgendermaßen:

Bereitstellung eines Servers, der Sketch-Dateien (.sketch) analysiert
Implementierung des MCP-Protokolls, das Cursor oder andere IDEs für den Kontext verwenden
Ermöglicht Ihnen, bestimmte Komponenten und Ebenen aus Ihren Sketch-Dateien zu referenzieren
Bereitstellung einer UI-Schnittstelle für Sketch, die mit Cursor kommuniziert
Ermöglichung der bidirektionalen Echtzeitkommunikation zwischen Skizze und Cursor

Komponenten

Dieses Projekt besteht aus zwei Hauptkomponenten:

MCP-Server : Ein Node.js-Server, der das Model Context Protocol implementiert, um Sketch-Dateidaten an Cursor IDE bereitzustellen
Sketch-Plugin : Ein Sketch-Plugin mit UI-Schnittstelle, das über WebSockets mit dem MCP-Server kommuniziert

Verfügbare MCP-Tools

Der Server stellt Cursor die folgenden Tools zur Verfügung:

get_file : Ruft den Inhalt einer Sketch-Datei oder eines bestimmten Knotens darin ab
list_components : Listet alle Komponenten/Symbole in einer Sketch-Datei auf
get_selection : Informationen zu aktuell ausgewählten Elementen abrufen
create_rectangle : Erstellt neue Rechtecke mit angegebenen Abmessungen und Eigenschaften
create_text : Erstellen Sie neue Textelemente mit benutzerdefiniertem Inhalt und Stil

Mit diesen Tools kann Cursor:

Zugriff auf und Überprüfung von Sketch-Designdateien
Abfrage bestimmter Komponenten und Ebenen
Erstellen und ändern Sie Designelemente durch natürliche Sprachbefehle
Echtzeitsynchronisierung mit Sketch aufrechterhalten

Unterstützte Funktionen

Lokales und Cloud-Sketch-Datei-Parsing
Komponenten-/Symbolextraktion
Asset-Management und automatische Downloads
Unterstützung von Auswahllinks über das Sketch-Plugin
Echtzeit-Updates über WebSockets und SSE
Interaktive Benutzeroberfläche zum Verbinden von Skizze und Cursor
Analysieren sowohl lokaler als auch in Sketch Cloud gehosteter Dateien
Extrahieren von Dokumentstruktur- und Komponenteninformationen
Zugriff auf bestimmte Knoten nach ID
Auflisten aller Komponenten in einer Sketch-Datei
Erstellen von Rechtecken, Text und anderen Elementen über Befehle vom Cursor

Erste Schritte

Voraussetzungen

Node.js (v14 oder höher)
Sketch (v70 oder höher)
Cursor IDE, VS Code oder ähnliches
Ein Sketch-Konto (lokal) oder API-Zugriff (Sketch-Cloud-Dateien)

Installation

# Install globally
npm install -g sketch-context-mcp

# Run with a local Sketch file
sketch-context-mcp --local-file=/path/to/your/file.sketch

# Run with Sketch Cloud access
sketch-context-mcp --sketch-api-key=<your-sketch-api-key>

Oder direkt mit npx ausführen:

npx sketch-context-mcp --local-file=/path/to/your/file.sketch

Installieren des Sketch-Plugins

Laden Sie die neueste Version des Plugins von der Releases-Seite herunter
Doppelklicken Sie auf die .sketchplugin Datei, um sie in Sketch zu installieren
Das Plugin wird in Sketch unter Plugins > Sketch Context MCP verfügbar sein.

Integration mit Cursor

So verwenden Sie dies mit dem Cursor:

Starten Sie den MCP-Server mit Ihrer Sketch-Datei:
sketch-context-mcp --local-file=/path/to/your/file.sketch
Öffnen Sie in Sketch das Plugin:
- Gehen Sie zu Plugins > Sketch Context MCP > Open MCP Interface
- Geben Sie den Server-Port ein (Standard: 3333)
- Klicken Sie auf „Verbinden“
Stellen Sie in Cursor eine Verbindung zum MCP-Server her:
- Gehen Sie zu Einstellungen > Funktionen > Kontext
- Fügen Sie einen neuen MCP-Server mit der URL hinzu: http://localhost:3333/sse
- Klicken Sie auf „Verbinden“
Im Cursor-Composer können Sie jetzt:
- Komponenten nach ID referenzieren: „Zeige mir die Komponente mit der ID 12345“
- Alle Komponenten auflisten: „Alle Komponenten im Design auflisten“
- Details zu bestimmten Elementen erhalten: „Beschreiben Sie die Schaltfläche in der Kopfzeile“
- Neue Elemente erstellen: „Erstelle ein Rechteck mit Breite 200 und Höhe 100“

Abrufen eines Sketch-API-Schlüssels

Der Sketch-API-Schlüssel ist ein OAuth-Zugriffstoken, der für den Zugriff auf in der Sketch Cloud gehostete Dateien erforderlich ist. Befolgen Sie diese Schritte, um den Token zu erhalten und zu verwenden:

Schritt 1: Authentifizieren Sie sich mit Sketch Cloud

Verwenden Sie Ihre Sketch Cloud-Anmeldeinformationen (E-Mail und Passwort), um ein Zugriffstoken zu generieren, indem Sie eine POST-Anfrage an den Authentifizierungsendpunkt senden:

curl -X "POST" "https://auth.sketch.cloud/oauth/token" \
  -H 'Content-Type: application/json' \
  -d '{
    "email": "YOUR_EMAIL",
    "password": "YOUR_PASSWORD",
    "grant_type": "password"
  }'

Ersetzen Sie YOUR_EMAIL und YOUR_PASSWORD durch die Anmeldeinformationen Ihres Sketch Cloud-Kontos.

Schritt 2: Zugriffstoken

Die Antwort enthält ein access_token . Dieses Token dient als API-Schlüssel für den Zugriff auf in Sketch Cloud gehostete Dateien.

Schritt 3: Verwenden des Tokens

Aus Sicherheitsgründen wird empfohlen, das Token als Umgebungsvariable zu übergeben:

export SKETCH_API_KEY=<your-access-token>

Oder fügen Sie es als Befehlszeilenargument ein:

sketch-context-mcp --sketch-api-key=<your-access-token>

Schritt 4: Aktualisieren des Tokens

Wenn Ihr Token abläuft, verwenden Sie das in der ersten Antwort bereitgestellte refresh_token , um ein neues Zugriffstoken zu erhalten.

Bewährte Sicherheitspraktiken

Um sicherzustellen, dass Ihr API-Schlüssel sicher ist, befolgen Sie diese Richtlinien:

Schlüssel nicht fest codieren : Programmieren Sie niemals einen API-Schlüssel fest in die Anwendung oder den Quellcode. Verwenden Sie stattdessen Umgebungsvariablen oder Tools zur Geheimnisverwaltung.
Verwenden Sie .env-Dateien für die lokale Entwicklung : Speichern Sie Ihren API-Schlüssel in einer .env Datei und laden Sie ihn mit einer Bibliothek wie dotenv :
SKETCH_API_KEY=<your-access-token>
Stellen Sie sicher, dass die .env Datei zu .gitignore hinzugefügt wird, um eine versehentliche Offenlegung zu vermeiden.
Wechseln Sie die Token regelmäßig aus : Wenn Ihr Token durchsickert oder kompromittiert wird, widerrufen Sie es und generieren Sie sofort ein neues.
Überwachen und Prüfen : Verwenden Sie Tools, um Ihr Repository nach offengelegten Anmeldeinformationen zu durchsuchen (z. B. die geheime Scanfunktion von GitHub).
Verwenden Sie kurzlebige Token : Verwenden Sie nach Möglichkeit kurzlebige Token und aktualisieren Sie sie nach Bedarf, um die Auswirkungen eines durchgesickerten Tokens zu minimieren.

So funktioniert es in Sketch-Context-MCP

Der Sketch-API-Schlüssel wird für den Zugriff auf in Sketch Cloud gehostete Dateien benötigt. Der Server verwendet diesen Schlüssel, um Anfragen an Sketch Cloud zu authentifizieren und die erforderlichen Designdaten abzurufen. Der Schlüssel wird bei API-Anfragen sicher über den Authorization übergeben.

Konfiguration

Der Server kann entweder über Umgebungsvariablen (über .env Datei) oder über Befehlszeilenargumente konfiguriert werden. Befehlszeilenargumente haben Vorrang vor Umgebungsvariablen.

Umgebungsvariablen

SKETCH_API_KEY : Ihr Sketch-API-Zugriffstoken (erforderlich für Sketch Cloud-Dateien)
PORT : Der Port, auf dem der Server ausgeführt wird (Standard: 3333)
LOCAL_SKETCH_PATH : Pfad zur lokalen Sketch-Datei (Alternative zum Argument --local-file)
DEBUG_LEVEL : Ausführlichkeit der Protokollierung festlegen (Standard: „info“)

Befehlszeilenargumente

--version : Versionsnummer anzeigen
--sketch-api-key : Ihr Sketch-API-Zugriffstoken
--port : Der Port, auf dem der Server ausgeführt werden soll
--stdio : Führen Sie den Server im Befehlsmodus aus, statt im Standard-HTTP/SSE
--help : Hilfemenü anzeigen

Verwenden des Sketch-Plugins

Registerkarte „Verbindung“

Über die Registerkarte „Verbindung“ können Sie eine Verbindung zum Sketch Context MCP-Server herstellen:

Geben Sie die Portnummer ein (Standard ist 3333)
Klicken Sie auf „Verbinden“, um eine WebSocket-Verbindung herzustellen
Sobald die Verbindung hergestellt ist, wird eine Bestätigungsnachricht mit der Kanal-ID angezeigt
Befolgen Sie die Anweisungen zum Verbinden von Cursor mit dem Server

Registerkarte „Auswahl“

Auf der Registerkarte „Auswahl“ werden Informationen zu ausgewählten Ebenen in Ihrem Sketch-Dokument angezeigt:

Wählen Sie eine oder mehrere Ebenen in Ihrem Sketch-Dokument aus
Die ausgewählten Ebenen werden in der Liste angezeigt
Klicken Sie auf „Auswahl-IDs kopieren“, um die Layer-IDs in die Zwischenablage zu kopieren
Verwenden Sie diese IDs im Cursor, um auf bestimmte Ebenen zu verweisen

Über die Registerkarte

Die Registerkarte „Info“ bietet Informationen zum Plugin und seiner Verwendung.

Verwendung mit Cursor

Sobald sowohl Sketch als auch Cursor mit dem MCP-Server verbunden sind:

Elemente in Sketch auswählen
Kopieren Sie ihre IDs mit dem Sketch Context MCP-Plugin
Verweisen Sie im Cursor auf diese Elemente anhand ihrer IDs

Beispielbefehle im Cursor:

"Zeigen Sie mir die Details der Ebene mit der ID 12345"
„Erstelle ein blaues Rechteck mit der Breite 300 und der Höhe 200“
„Fügen Sie eine Textebene mit dem Inhalt ‚Hallo Welt‘ hinzu.“

Fehlerbehebung

Häufige Probleme

Verbindungsfehler : Stellen Sie sicher, dass Ihr Server läuft und der Port zugänglich ist
Authentifizierungsfehler : Überprüfen Sie, ob Ihr Sketch-API-Schlüssel korrekt ist
Probleme beim Datei-Parsing : Stellen Sie sicher, dass Ihre Sketch-Datei gültig und nicht beschädigt ist
WebSocket-Verbindung fehlgeschlagen : Stellen Sie sicher, dass der Port nicht durch eine Firewall blockiert ist

Protokolle

Um eine detaillierte Protokollierung zu aktivieren, legen Sie die Umgebungsvariable DEBUG fest:

DEBUG=sketch-mcp:* npx sketch-context-mcp

Beitragen

Beiträge sind willkommen! Senden Sie gerne einen Pull Request.

Lizenz

Dieses Projekt ist unter der MIT-Lizenz lizenziert – Einzelheiten finden Sie in der Datei LICENSE .

Sketch Context MCP

Integrations