Skill: corporate-design

Das visuelle Corporate Design von Miragon als Skill. Sie sorgt dafür, dass alles Sichtbare stimmt: exakte Farben, richtiges Logo, passende Schrift und Formate.

Plugin	miragon-brand
Aufruf	/miragon-brand:corporate-design
Quelle	plugins/miragon-brand/skills/corporate-design

Was die Skill macht

Sie gibt Claude das visuelle Regelwerk an die Hand:

• Exakte Farbwerte (HEX, RGB, Pantone) und ihre Rollen: Blau führt, Grün ist Akzent. Dazu die Statusfarben für Zustände in Diagrammen und Grafiken.
• Dark Mode auf Webseiten: Token-CSS, Seitenrollen für weiße und graue Sektionen, Umschalter im Header, Bilder und Fremd-Widgets im Dunkeln (siehe Dark Mode).
• Logo-Regeln: Varianten, welche wann, Schutzraum, Don'ts.
• Icons: welche Zeichenart wohin gehört (Komet, Modeler-Icons, Lucide).
• Typografie: Geist für Überschriften, Fließtext und Code.
• Grafischer Stil und Bildwelt inklusive BPMN als Teil der Marke.
• Social-Media-Formate für LinkedIn in Pixeln.
• Kontrast-Hinweise, damit nichts unleserlich wird (kein hellgrüner Text auf Weiß).

Wann sie triggert

Automatisch, sobald du etwas Sichtbares für Miragon gestaltest, baust oder prüfst: Logo-Einsatz, Farbwahl, Grafiken, Diagramme, Präsentationen, Social-Posts, Banner, Webseiten, UI-Komponenten, Dark Mode oder eine CD-Konformitätsprüfung. Stichworte wie „gestalte", „Layout", „Farbe", „Logo", „Post", „Slide" oder „ist das CD-konform?" lösen sie aus.

So nutzt du sie

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

# Skill gezielt aufrufen
/miragon-brand:corporate-design

Aufbau

corporate-design/
├── SKILL.md                 # handlungsorientierte Kurzfassung + Checkliste
└── assets/
    ├── design-manual.md     # ausführliche Quelle der Wahrheit
    ├── tokens.json          # exakte Werte (Farben, Rollen, Type-Scale, Spacing, Formate)
    ├── contrast.json        # berechnete WCAG-Kontraste je Farbpaar, hell und dunkel
    ├── cd-tokens.generated.css  # Token-CSS mit Rollen hell und dunkel, für Webseiten
    ├── logo/                # die offiziellen Logo-Vektoren
    └── fonts/               # Bezug und Einbindung von Geist

Die design-manual.md ist aus dem Miragon CD Manual 2022 extrahiert und die ausführliche Grundlage. Neben der Anleitung liegen die echten Assets dabei: So setzt Claude das offizielle Logo und die exakten Token-Werte direkt ein, statt sie nachzubauen. Webseiten kopieren cd-tokens.generated.css unverändert, sie ist dieselbe Datei wie in modeler-tool-design. Die gebündelten Dateien werden aus brand/tokens.json und docs/public/logo/ synchronisiert (npm run assets:sync).

Verwandt

• brand-tone: das sprachliche Gegenstück. corporate-design sieht aus, brand-tone klingt.
• icon-design: Modeler-Icons einbauen und entwerfen, fehlende Funktionsicons im Lucide-Stil ergänzen.
• Corporate Design: das vollständige Regelwerk als Doku.