80 lines
5.0 KiB
Markdown
80 lines
5.0 KiB
Markdown
---
|
||
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.
|