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:

1. Bereitstellung eines Servers, der Sketch-Dateien (.sketch) analysiert

2. Implementierung des MCP-Protokolls, das Cursor oder andere IDEs für den Kontext verwenden

3. Ermöglicht Ihnen, bestimmte Komponenten und Ebenen aus Ihren Sketch-Dateien zu referenzieren

4. Bereitstellung einer UI-Schnittstelle für Sketch, die mit Cursor kommuniziert

5. Ermöglichung der bidirektionalen Echtzeitkommunikation zwischen Skizze und Cursor

Komponenten

Dieses Projekt besteht aus zwei Hauptkomponenten:

1. MCP-Server : Ein Node.js-Server, der das Model Context Protocol implementiert, um Sketch-Dateidaten an Cursor IDE bereitzustellen

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

Oder direkt mit npx ausführen:

Installieren des Sketch-Plugins

1. Laden Sie die neueste Version des Plugins von der Releases-Seite herunter

2. Doppelklicken Sie auf die .sketchplugin Datei, um sie in Sketch zu installieren

3. Das Plugin wird in Sketch unter Plugins > Sketch Context MCP verfügbar sein.

Integration mit Cursor

So verwenden Sie dies mit dem Cursor:

1. Starten Sie den MCP-Server mit Ihrer Sketch-Datei:

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

2. Ö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“

3. 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“

4. 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:

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:

Oder fügen Sie es als Befehlszeilenargument ein:

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:

1. Geben Sie die Portnummer ein (Standard ist 3333)

2. Klicken Sie auf „Verbinden“, um eine WebSocket-Verbindung herzustellen

3. Sobald die Verbindung hergestellt ist, wird eine Bestätigungsnachricht mit der Kanal-ID angezeigt

4. 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:

1. Wählen Sie eine oder mehrere Ebenen in Ihrem Sketch-Dokument aus

2. Die ausgewählten Ebenen werden in der Liste angezeigt

3. Klicken Sie auf „Auswahl-IDs kopieren“, um die Layer-IDs in die Zwischenablage zu kopieren

4. 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:

1. Elemente in Sketch auswählen

2. Kopieren Sie ihre IDs mit dem Sketch Context MCP-Plugin

3. 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:

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 .