Sketch MCP zu Design

Erstelle oder verfeinere ein Sketch-Design, um einer Referenz zu entsprechen. Diese Fertigkeit ist für Design-in-Sketch-Arbeiten; der umgekehrte Workflow ist sketch-design-to-code.

Fidelity zuerst

Das Ziel ist die visuelle Übereinstimmung mit der Referenz – nicht eine plausible Seite mit ähnlichen Abschnitten. "Ähnlich" ist nicht fertig. Höre nicht auf, wenn Inhalt existiert; höre auf, wenn der Side-by-Side-Screenshot-Vergleich die Abschlusskriterien in references/validation.md erfüllt.

Erforderliche Sketch-Anleitungen

get_guide mit topic: "mcp" – immer; MCP-Voraussetzungen, run_code-Regeln, Fehlerbehandlung und visuelle Verifikation.
get_guide mit topic: "use" – Sketch-Bearbeitung, Stapel, Symbole, Stile, Overrides, Assets und Prototyping.
get_guide mit topic: "layout" – vor dem Erstellen oder Umstrukturieren von Rahmen, Gruppen, Stapeln, Seitenplatzierung, Größenanpassung, Pins oder Containertypen.

Rufe bei Bedarf Unterthemen der Anleitungen ab: troubleshooting, layout, styling, symbols, assets und prototyping.

Voraussetzungen

Sketch läuft mit aktiviertem MCP (Einstellungen → Allgemein → KI-Tools erlauben, mit offenen Dokumenten zu interagieren).
Ein Zieldokument ist geöffnet, oder der Benutzer erwartet, dass du ein neues Dokument erstellst/verwendest.
Eine Referenz ist als URL, Screenshot oder Quellcode verfügbar.
Der Umfang ist klar genug, um zu handeln: ganze Seite vs. einzelner Rahmen, Zielbreite, Dunkel-/Hellmodus und Zielseite/-rahmen, wenn das Dokument mehrere Kandidaten hat.

Wenn MCP nicht verfügbar ist, stoppe und rufe get_guide mit topic: "troubleshooting" auf. Rate kein Layout aus dem Gedächtnis, solange MCP nicht erreichbar ist.

Schritte

Befolge diese Schritte in der Reihenfolge. Der Hauptablauf sollte für normale Arbeiten ausreichen; lade eine Referenzdatei nur, wenn der Schritt mehr Details oder Beispiele benötigt.

Schritt 1 — Kontext und Referenz bestätigen

Rufe die erforderlichen Anleitungen ab.
Ermittle das Zieldokument mit get_document_info.
Klassifiziere den Referenztyp:

URL – sammle Seitentitel, Viewport-Breite, DOM-Struktur, Quell-HTML, verknüpftes oder gebündeltes JavaScript/CSS, wenn verfügbar, berechnete Farben/Schriftarten, Text und Asset-URLs.
Screenshot – sammle Abmessungen, Regionen, Textinhalt, Ausrichtung und Schlüsselfarben.
Code – sammle Design-Tokens, Schriftstapel, Abstandsskala, Komponentennamen, Inline-SVGs und Asset-Importe.

Extrahiere ein Fidelity-Spezifikationsdokument und erstelle einen Referenz-Anker-Screenshot in der Zielbreite vor jeglichen Layout-Mutationen. Die Spezifikation muss Regionen (von oben nach unten), wörtlichen Text, Farben, Typografie, Layoutbreiten und Asset-Quellen enthalten – siehe references/reference-extraction.md.

Für referenzspezifische Extraktion lies references/reference-extraction.md. Für Vergleichs- und Abschlusskriterien lies references/validation.md vor Schritt 5.

Schritt 2 — Wiederverwendbaren Sketch-Inhalt entdecken

Prüfe, bevor du mutierst. Beginne mit schreibgeschützten MCP-Tools:

Rufe get_document_info für Seiten, Rahmen der obersten Ebene/Graphics, Layer-Anzahl und vorhandene Layout-Kandidaten auf.
Rufe get_layer_tree_summary für Kandidatenrahmen oder relevante Seiten auf – für Hierarchie, IDs, Namen, Abmessungen, Textausschnitte, Symbol-Override-Anzahl und Stapel-Hinweise.
Rufe get_design_assets und get_libraries für wiederverwendbare Symbole/Komponenten und Bibliotheks-Assets auf.
Verwende gezieltes run_code nur, wenn Zusammenfassungen die benötigten Details nicht preisgeben.

Bevorzuge die Bearbeitung eines vorhandenen Rahmens nur, wenn du sicher bist, dass er dem angeforderten Design entspricht. Erstelle andernfalls einen neuen Rahmen.

Schritt 3 — Struktur vor Pixeln planen

Definiere den Layer-Plan, bevor du zeichnest:

Regionen der obersten Ebene und ihre Reihenfolge.
Eltern/Kind-Beziehungen und Geschwistergruppen.
Regionenbreiten, Inhaltsmaximalbreiten und randlose vs. Spaltenabschnitte.
Fixierte/angeheftete Bereiche vs. scrollbare Inhalte.
Symbol-Kandidaten, Stapel-Kandidaten, Asset-Kandidaten und wiederverwendbare Stapelmuster.

Verwende keine Standard-Seitenvorlage. Stimme mit der Informationsarchitektur der Referenz überein.

Für jede strukturierte Region entscheide vor dem Zeichnen über das Sketch-Stapelmodell: Richtung, Abstand, Padding, Ausrichtung, Größenanpassung, Umbruch und beabsichtigte visuelle Reihenfolge. Verwende Stapel für Zeilen, Spalten, Navigationsleisten, Symbolleisten, Karten, Listen, Formulare, Schaltflächengruppen und wiederholte Inhalte, es sei denn, es gibt einen spezifischen Grund, dass die Region formlos sein muss. Verwende manuelle Koordinaten für die Platzierung auf Seitenebene, fixiertes Chrome, Overlays, Masken oder echte formlose Grafiken.

Schritt 4 — Tokens und Basisrahmen festlegen

Erstelle oder stimme Dokument-Swatches/geteilte Stile für Hintergrund, Rahmen, Text, Marke, gedämpften Text und wichtige Oberflächen ab. Setze den Seiten-/Rahmenhintergrund absichtlich und entferne versehentliche Füllungen aus strukturellen Gruppen. Für Symboldetails rufe get_guide mit topic: "symbols" auf.

Verwende Werte aus der Referenz: berechnetes CSS, aus Screenshots entnommene Farben oder Code-Tokens. Für Styling-Details rufe get_guide mit topic: "styling" auf.

Schritt 5 — Layout inkrementell aufbauen

Wende kleine, reversible run_code-Bearbeitungen an. Ein Skript sollte eine kleine Aktion ausführen.

Baue niemals eine ganze Seite, eine Region der obersten Ebene oder ein mehrteiliges Layout in einem Skript. Kombiniere nicht Sondierung, Erstellung, Styling und Neuordnung im selben Durchlauf. Halte Skripte flach: Bootstrapping, Ziel per ID finden, eine Mutation durchführen, JSON protokollieren. Vermeide tiefe Hilfsfunktionen, verschachtelte IIFEs und lange Kontrollflussbäume.

Baue von außen nach innen:

Seitenrahmen und Hintergrund.
Container der Regionen der obersten Ebene aus dem Layer-Plan.
Stapel-Einstellungen für jede Region, bevor detaillierte Kind-Elemente hinzugefügt werden.
Text, Formen und Symbolinstanzen innerhalb jeder Region in kleinen Geschwister-Batches.
Fixierte/angeheftete Regionen, nachdem die übergeordnete Struktur korrekt ist.

Baue eine Region der obersten Ebene nach der anderen. Nach jedem Inhalts-Batch einer Region:

get_screenshot des Rahmens in der Referenzankerbreite.
Vergleiche diese Region mit dem Referenzanker – liste Abweichungen unter Verwendung der Taxonomie in references/validation.md auf.
Behebe größere Abweichungen, bevor du mit der nächsten Region beginnst.

Nach strukturellen Änderungen frage erneut mit get_layer_tree_summary ab oder erstelle einen Screenshot des Rahmens. Für sichere Neuordnungs-/Neuzuordnungsmuster lies references/editing-patterns.md.

Schritt 6 — Symbole, Assets und Overrides

Verwende vorhandene Dokument-/Bibliothekssymbole, bevor du wiederholte einmalige Layergruppen zeichnest. Wiederholte UI sollte normalerweise zu einem Symbol-Master mit Instanzen und Overrides werden.

Bevor du detaillierte Formen zeichnest, klassifiziere jedes Nicht-Text-Visual. Exportiere/importiere Fotos, Screenshots, Illustrationen, komplexe SVGs, Produktbilder, Markenlogos, detaillierte Symbole, Verläufe und Rauschen als SVG/PNG/Bild-Assets. Erstelle in Sketch nur einfache UI-Primitive, einfache editierbare Vektoren, Trennlinien, Pillen und grundlegende Formen neu.

Für Symbole/Logos/Bilder lege zuerst das Layout mit einfachen Platzhaltern fest und importiere/weise dann echte Bild-Assets zu, sobald Geometrie und Stapelreihenfolge stabil sind. Bevorzuge Symbol-Image-Overrides auf dedizierten Layern für wiederholte Assets.

Für Symbol-Override-Muster lies references/symbols.md. Für Import/Export-Details rufe get_guide mit topic: "assets" auf.

Schritt 7 — Nur gezielte Korrekturen

Wenn der Benutzer ein Problem meldet oder der Screenshot-Vergleich eine Abweichung zeigt:

Prüfe den aktuellen Layer mit get_layer_tree_summary oder einer gezielten Sonde, bevor du mutierst.
Ändere nur die gemeldete Eigenschaft: ein Rahmenwert, Textstil, Farbe, Layer-Reihenfolge, Stapeleigenschaft oder Override.
Erstelle erneut einen Screenshot und bestätige, dass die Anzahl der Kind-Elemente unverändert ist, es sei denn, das Löschen war beabsichtigt.

Wenn das Layout zerbricht oder Layer verloren gehen, sage dies sofort und fordere den Benutzer auf, Rückgängig/Widerrufen zu machen, bevor du fortfährst.

Schritt 8 — Abschließende Validierung und Übergabe

Behaupte nicht "fertig", bis die Abschlusskriterien erfüllt sind – siehe references/validation.md → Abschlusskriterien.

Erstelle einen get_screenshot des gesamten Rahmens in der Referenzankerbreite.
Führe das Regions-Gate für jeden Bereich in der Fidelity-Spezifikation gegen den Referenzanker-Screenshot durch.
Wenn noch größere Abweichungen vorhanden sind, kehre zu Schritt 7 zurück und iteriere. Gib keine Layouts als "fast richtig" weiter.
Fasse verwendete Symbole, erstellte Tokens/Stile, Ziel-Arbeitsflächen-/Rahmenname und -ID, überprüfte Regionen und verbleibende kleinere Abweichungen zusammen.
Führe zoomToFitCanvas erst aus, wenn die Aufgabe abgeschlossen ist.

Regeln

Richtungsspezifische Regeln für Sketch → Design. Generische MCP/Skript-Regeln stammen aus get_guide mit topic: "mcp" und Sketch-Inhaltsregeln aus get_guide mit topic: "use".

Flicken, nicht neu aufbauen. Wenn Inhalt existiert, korrigiere Rahmen, Stile, Overrides oder Reihenfolge, anstatt größere Regionen zu löschen und neu zu erstellen.
Zähle die Anzahl der Kind-Elemente vor und nach Neuordnung, Neuzuordnung, Hinzufügen oder Entfernen.
Weise niemals parent.layers = [...] zu; verwende layer.index für die Neuordnung und child.parent = newParent für die Neuzuordnung.
Stimme die Regionenstruktur mit der Referenz ab; derselbe visuelle Inhalt sollte dieselbe Eltern/Geschwister-Beziehung haben, es sei denn, es gibt einen bewussten Grund, abzuweichen.
Screenshot nach jedem sinnvollen Batch und verwende die Screenshot-Abweichungen, um die nächste Bearbeitung auszuwählen.
Strukturierte Layouts verwenden standardmäßig Stapel. Wenn Geschwister im Flex, Raster, Liste, Formular, Navigation oder Karteninhalt der Referenz verhalten, erstelle oder erhalte einen Sketch-Stapel, anstatt jedes Kind von Hand zu positionieren.
Assets sind Assets. Zeichne keine komplexen Grafiken, Fotos, Screenshots oder Markenlogos als niedrig aufgelöste Vektornäherungen nach; exportiere/importiere oder weise Bild/SVG-Assets zu.
Nicht raten. Erfinde kein Layout, keinen Text, keine Farben, Abstände oder Assets aus dem Gedächtnis oder generischen UI-Mustern. Extrahiere aus der Referenz; wenn ein Wert fehlt, rufe erneut ab oder frage den Benutzer.
Referenzanker immer. Vergleiche die Sketch-Ausgabe mit dem aufgenommenen Referenz-Screenshot – nicht mit deiner Erinnerung an die Seite.
Abschluss-Gate. Höre nicht auf, weil Abschnitte existieren oder die Seite "ähnlich aussieht". Höre auf, wenn die Abschlusskriterien in references/validation.md erfüllt sind.

Fallstricke

Die Seite neu zu erstellen, um eine kleine Abweichung zu beheben, verschwendet eingespielte Arbeit und führt neue Fehler ein. Mache chirurgische Bearbeitungen auf Basis von Screenshot-Abweichungen.
Das direkte Platzieren von Bildern auf Symbol-Instanzen kann die Hierarchie zerstören oder in der API fehlschlagen. Platziere Bild-Layer im Master und verwende pro-Instanz-Image-Overrides.
Das Überspringen von Screenshots versteckt Layout-, Ordnungs- und Farbfehler. Screenshot jeden Batch.
Neuordnung mit parent.layers = [...] kann Kind-Elemente löschen oder Objekt-IDs duplizieren. Verwende stattdessen sichere Neuordnungsmuster.
Die Stapelreihenfolge kann invertiert erscheinen, wenn Index und Packrichtung missverstanden werden. Verwende get_guide mit topic: "layout" und überprüfe mit Screenshot.
Ganze Seiten- oder Regionsskripte sind schwer zu validieren, debuggen und von ihnen zu erholen. Teile nach Region, Stapel-Setup und kleinen Geschwister-Batches auf.
Strukturiertes Layout, das mit manuellen Rahmen aufgebaut wurde, driftet, wenn Abstand oder Reihenfolge geändert werden. Verwende Sketch-Stapel für Zeilen, Spalten, Listen, Formulare, Navs, Karten und wiederholte Regionen.
Komplexe Grafiken, die als primitive Formen nachgebaut werden, erzeugen minderwertige Näherungen. Exportiere/importiere SVG/PNG oder verwende Image-Overrides; reserviere Formen für einfache UI-Primitive.
Nur erste-Mal-Seitenscreenshots können verzögerte Bilder und scroll-ausgelöste UI-Zustände übersehen. Verwende Browser- oder Agent-Tools, scrolle zum Auslösen von Inhalten und erfasse dann den Ziel-Viewport.
Vorzeitiger Abschluss: der Agent fügt Kopfzeile/Hauptteil/Fußzeile mit generischem Styling hinzu und stoppt. Führe das Regions-Gate und die Abschlusskriterien durch; korrigiere weiter, bis große Abweichungen verschwunden sind.
Improvisierter Text und Farben: paraphrasierte Überschriften, Lorem-Ipsum-Füller oder Standard-Grau/Blau-Töne anstatt extrahierter Werte. Verwende die Fidelity-Spezifikation wörtlich; entnehme Farben erneut aus der Referenz.
Platzhalter-Permanenz: graue Kästchen als "Logos" oder "Hero-Bilder" belassen. Exportiere/importiere echte Assets vor der Übergabe, es sei denn, der Benutzer hat Platzhalter angefordert.

Fehlerbehebung

Bei Bridge/Tool-Aufruff-Fehlern, Parser-Fehlern, MCP-Verbindungsproblemen oder Screenshot-Fehlern rufe get_guide mit topic: "troubleshooting" auf, bevor du es erneut versuchst.

Bei Dokument-Operations-Fehlern:

Layout/Stapel/Ordnungs-Probleme → get_guide mit topic: "layout".
Symbol-Override-Probleme → get_guide mit topic: "symbols".
Export/Import/Bild-Probleme → get_guide mit topic: "assets".

Design-Erstellungs-Symptome

Anzahl der Kind-Elemente nach einem Skript gesunken: Fordere den Benutzer auf, Rückgängig zu machen, dann prüfe die Operation. Wiederhole keine massive Layer-Zuweisung.
get_screenshot ist leer oder falsch: Löse die Rahmen-/Layer-ID erneut auf, dann screenshot die Seite oder den übergeordneten Rahmen, falls nötig.
Symbol-Override hat keine Wirkung: Rufe get_symbol_overrides erneut ab, baue die Override-ID aus commonOverrideIDPrefix + '_' + property neu und screenshot dann.
Text überlappt in einem Zeilenstapel: Prüfe die Reihenfolge der Kind-Elemente und den Abstand; korrigiere eine Stapeleigenschaft oder einen Kind-Index nach dem anderen.

Referenzen

get_guide mit topic: "mcp" – MCP-Tools, run_code, Fehlerbehebung, visuelle Verifikation und Abschlussregeln
get_guide mit topic: "use" – Sketch-Bearbeitung, Stapel, Symbole, Stile, Overrides, Assets und Inhaltsverifikation
get_guide mit topic: "layout" – Stapel, Seitenplatzierung, Größenanpassung, Pins, Containertypen, Neuordnung/Neuzuordnung und Layout-Drift
Referenzextraktion
Sichere Bearbeitungsmuster
Symbol-Override-Muster
Validierungsschleife
Sketch JavaScript API
StackLayout
Symbol overrides (bestätige über get_symbol_overrides in MCP)

madsouris/sketch-design-from-reference

Was ist sketch-design-from-reference?

In Ihrer bevorzugten KI fragen

Dokumentation