Skill: modeler-tool-design

Das verbindliche UI/UX-Design-System für Software, die Miragon selbst baut. Sie sorgt dafür, dass jede gebaute Oberfläche, von den diagram-js-Modelern bis zu jeder anderen Miragon-App, wie eine Produktfamilie aussieht und sich verhält: gleiche Farben, gleiche Schrift, gleiche Muster für Chrome, Dialoge und Feedback, in Hell und im Dark Mode. Kundenprojekte folgen der Marke des Kunden, dort gilt die Skill nicht.

Plugin	miragon-brand
Aufruf	/miragon-brand:modeler-tool-design
Quelle	plugins/miragon-brand/skills/modeler-tool-design

Was die Skill macht

Sie gibt Claude das Produkt-UI-Regelwerk an die Hand und wendet es an. Ins Ziel-Repo kommen die drei Token-Dateien (CSS, JSON und die Canvas-CSS), der Guide bleibt in der Skill.

Bereich	Regel
Farben im Code	Blau führt, Grün ist Akzent und nie Fließtext auf Weiß, nie Button-Fläche. In Komponenten nur die Rollen --cd-ui-*: Flächen, Text, Linien, Fokus und Status kommen aus ihnen und schalten mit dem Modus um. Dunkle Flächen sind Schwarz und neutrale Stufen, nie Dunkelblau. Statusfarben für Zustände (Erfolg Grün, Hinweis Blau, dazu Amber und Rot), dunkel in den hellen Werten auf neutraler Fläche.
Sprache	UI-Texte auf Deutsch, du-Ansprache, kurz und konkret.
Typografie	Geist und Geist Mono, selbst gehostet, auch für SVG-Text auf dem Canvas.
Icons	Funktionsicons aus Lucide, Outline, currentColor, Strich 2,5 im 24er-Raster (in dichten Leisten 2), der mit der Größe wächst. Ein Modeler trägt als App-Icon, Favicon und Datei-Icon sein Modeler-Icon aus dem Set, andere Miragon-Software den Komet auf Blau. Empty State und Splash zeigen immer den Komet.
Layout	Randloser Canvas mit schwebendem Chrome, keine Kopfleiste, 8-Punkt-Raster.
Komponenten	Buttons, Menüs, Dialoge, Eingaben, Toasts, Empty State.
Dark Mode	Hell und dunkel aus denselben Rollen, Opt-in über data-cd-theme. Den Modus liefert der Host: System oder Wahl in der Web-App, activeColorTheme in VS Code, die IDE in IntelliJ. Host-Farben übernimmt die Oberfläche nicht.
Canvas	Plot dunkel Schwarz, Rollen-Klassen cd-c-* statt Neuzeichnen, Fremdnotation bleibt hell. Exporte (SVG, PNG, Zwischenablage) sind immer hell und bytegleich zum hellen Modus. Domain-Farben auf die Palette gemappt.
Barrierefreiheit	Text 4,5:1, Nicht-Text 3:1, Fokus, Tastatur, prefers-reduced-motion.
Anti-Slop	Keine Template-Heros, Icon-Kachel-Raster oder Sparkles für AI (siehe Anti-Slop).

Token-Dateien: einmal vendoren, immer aktuell

Die Skill bringt drei Dateien mit, alle generiert aus brand/tokens.json. Beim Anwenden kopiert der Agent sie unverändert ins Ziel-Repo und überschreibt sie bei jeder erneuten Anwendung. So bleiben die Kopien aktuell, ohne dass jemand HEX-Werte nachzieht. Änderungen gehen upstream in brand/tokens.json.

Datei	Inhalt
cd-tokens.generated.css	feste --cd-* Tokens und die Rollen --cd-ui-* für Hell, Dunkel, System und Hochkontrast. Lädt als erstes Stylesheet
cd-tokens.generated.json	dieselben Rollen je Modus als Hex: für Token-Module, Renderer, Exporte, Drift-Tests und die Fensterfarbe des Hosts
cd-canvas.css	Rollen-Klassen für SVG-Renderer und die Abbildung auf diagram-js und bpmn-js. Lädt nach diagram-js.css und bpmn-js.css

Wann sie triggert

Bei UI-Arbeit in Miragon-Produkt-Repos: Modeler, Editor, Canvas, VS-Code-Webview, Buttons, Dialoge, Toasts, Theme, Tokens oder Dark Mode. Am verlässlichsten, wenn die CLAUDE.md des Repos auf die Skill verweist (Vorlage in der SKILL.md). Mit .miragon/brand.json im Repo prüft zusätzlich der brand-lint-Hook jede geänderte Datei.

So nutzt du sie

# Marketplace + Plugin (einmalig)
/plugin marketplace add Miragon/corporate-identity
/plugin install miragon-brand@miragon

# Skill gezielt aufrufen
/miragon-brand:modeler-tool-design

Aufbau

modeler-tool-design/
├── SKILL.md                        # Kurzfassung und Checkliste
└── assets/
    ├── modeler-design-system.md    # ausführlicher Guide
    ├── anti-slop-ui.md             # AI-Muster in Oberflächen (generiert)
    ├── cd-tokens.generated.css     # --cd-* Tokens und Rollen hell und dunkel, ins Ziel-Repo
    ├── cd-tokens.generated.json    # Rollen je Modus als Hex, ins Ziel-Repo
    └── cd-canvas.css               # Rollen-Klassen für den Canvas, ins Ziel-Repo

Verwandt

• corporate-design: das Marken-Aussehen (Logo, Farbwerte, Bildwelt) und der Dark Mode auf Webseiten.
• brand-tone: jedes Wort in der UI.
• brand-review: prüft ein fertiges UI-Stück gegen die CI.
• icon-design: baut das Modeler-Icon ein, entwirft neue Modeler-Icons und ergänzt fehlende Funktionsicons im Lucide-Stil.