claude-skills/skills/figcraft-mcp/SKILL.md

name, description

name	description
figcraft-mcp	Bedienoberflächen und Screens über den FigCraft-MCP-Server entwerfen, bearbeiten, ansehen und als PNG, PDF, SVG oder .fig exportieren (Figma-Klon, frühe Alpha). Verwenden, wenn FigCraft-Werkzeuge verbunden sind oder der Nutzer FigCraft nennt; typisch für HMI-Masken von Maschinensteuerungen, App-/Web-Entwürfe, Klick-Prototypen und Komponenten.

Oberflächen mit FigCraft (MCP)

FigCraft ist ein Open-Source-Designwerkzeug (Rust), das Figma-Parität anstrebt. Es ist noch eine frühe Alpha. CLI 0.11.2. Die Export-Falle (ohne ids) ist am 0.7.0 bestätigt und an 0.11.2 nicht erneut durchgespielt.

Voraussetzung

Die Werkzeuge create_node, set_properties, batch, screenshot, export … müssen verbunden sein. Ihr Präfix hängt vom Client und vom Namen der Erweiterung bzw. des Servers ab (z. B. mcp__…__FigCraft_for_Claude__create_node). Sind sie zurückgestellt, nach dem Werkzeugnamen ohne Präfix suchen und alle benötigten auf einmal laden. Fehlen sie, dem Nutzer sagen, dass der Server nicht verbunden ist (Einrichtung siehe README).

Der Server mit Lese- und Schreib-Ordner arbeitet ohne Fenster. mcp --attach PORT hängt an einer laufenden App (figcraft --control PORT) und lehnt die Ordner-Flags ab. Lesen darf er im Lese- und Schreib-Ordner, schreiben nur im Schreib-Ordner.

Werkzeuge

Tool	Zweck
create_node	Ebene anlegen: frame, rectangle, ellipse, polygon, star, line, arrow, text, vector, section, component
set_properties	Eigenschaften setzen (ids, props)
batch	mehrere Befehle als ein Undo-Schritt; {"$step": n} verweist auf die id aus Schritt n
inspect_document / get_node	Ebenenbaum als JSON
screenshot	Seite oder Ebenen als PNG ansehen
export	png, jpg, svg, webp, pdf, fig
open_file / save_file	.figcraft, .fig (best effort), .svg, Bilder
list_commands / run_command	alle Menübefehle
undo / redo, select	Verlauf, Auswahl

Arbeitsweise

1. Befehle nie raten: list_commands {filter: "…"} (z. B. component, instance, align, prototype).
2. Ganze Screens in einem batch aufbauen: Rahmen → Bereiche → Texte, Verweise per {"$step": n}.
3. Auto-Layout statt Koordinaten: Rahmen mit layout: "vertical"|"horizontal", gap, padding, mainAlign/crossAlign. Kinder darin bekommen kein x/y.
4. Ansehen: nach jedem größeren Schritt screenshot {maxSize: 1024}.
5. Speichern als .figcraft unter neuem Namen im Schreib-Ordner, exportieren für die Weitergabe.

Fallen (im Test bestätigt)

• export ohne ids exportiert die Auswahl, also meist die zuletzt angelegte Ebene: Es kam ein PNG mit nur einer Textzeile heraus. Immer ids: [<id des Hauptrahmens>] angeben. Die id steht in inspect_document unter pages[0].children.
• run_command erwartet {command, params}, nicht {id, …} (anders als bei PdfCraft). Ebenso batch {commands: [{command, params}]}.
• x/y sind relativ zum Elternrahmen, y zeigt nach unten, Einheit px.
• save_file ohne path überschreibt die geöffnete Datei. Für Varianten immer einen neuen path angeben.
• Schriftschnitt: fontStyle: "Bold" funktioniert. Gibt es den Schnitt nicht, nimmt FigCraft den nächstliegenden und meldet das in warnings.
• Transparenter Rahmen: fill: "#00000000".
• .fig-Import/-Export ist „best effort“: Figma öffnet nicht jede Datei. Für die Weitergabe PNG/PDF/SVG bevorzugen.

Rezepte

1. HMI-Maske (z. B. 1024×600 für ein 7"-Panel):

   1. Rahmen in Panelgröße mit dunklem Hintergrund anlegen.
   2. Kopfleiste mit Anlagenname und Uhrzeit.
   3. Statuskarte (vertikales Auto-Layout, Messwerte mit Einheit).
   4. Tastenzeile (horizontales Auto-Layout; Start grün, Stop rot, Quittieren gelb, mindestens 80 px hoch für Handschuhe).
   5. Meldungsliste (Zeit, Code, Text; Warnung gelb, Info grau).

   Farben nach der gängigen Bedeutung: Rot für Halt/Störung, Gelb für Warnung, Grün für Betrieb.

2. Komponenten: Taste fertig gestalten → run_command {command: "component.create", params: {ids: [id]}} → Kopien über instance.create {component, x, y, parent}.

3. Weitergabe: export bzw. file.export mit ids des Hauptrahmens. PDF-Druck (CLI und file.export, 0.11.2): bleed ("3mm", "0.125in", "9pt" oder Punkt), cropMarks, bleedMarks, cmyk. format: "png", scale: 2 für Präsentationen, svg für Web. Die CLI hat zusätzlich convert <in> <out> und plugin publish.

Abschlussprüfung

• screenshot der ganzen Seite angesehen: Texte lesbar, nichts abgeschnitten, Abstände einheitlich.
• Export-Datei geprüft (Größe plausibel, bei PNG kurz ansehen).
• .figcraft gespeichert, Pfad dem Nutzer genannt.

Datenschutz

Ampel:

• 🟢 Allgemeine und technische Inhalte ohne Kundenbezug.
• 🟡 Projekt- und Geschäftsinfos: nur nach Abwägung oder anonymisiert.
• 🔴 Personenbezogene Daten und NDA-Inhalte gehören nicht in die Cloud-KI.

In Entwürfen Beispieldaten statt echter Kundennamen und Anlagennummern verwenden. Kundenlogos nur einsetzen, wenn der Nutzer sie liefert.

Grenzen

• Frühe Alpha: Für die echte Steuerung (TIA Portal/WinCC usw.) ist der Entwurf nur eine Vorlage, keine importierbare Maske.
• Zusammenarbeit (Multiplayer) und Prototyp-Funktionen sind Vorschau; im headless Server nicht nutzen.