---
name: figcraft-mcp
description: 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. Getestet mit Version 0.7.0.

## 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 arbeitet ohne Fenster (headless). Lesen darf er im Lese- und Schreib-Ordner, schreiben nur im Schreib-Ordner. Die erlaubten Ordner stehen in den Server-Anweisungen beim Start.

## 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 {ids: [rahmen], format: "pdf", path}` für Doku/Kunde, `format: "png", scale: 2` für Präsentationen, `svg` für Web.

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