ameviadodo/montageos

Wendet eine Designsprache auf MonteurOS Studio (die Weboberfläche) und auf Videos an – extrahiert Farben, Schriftarten, Radien und Stimmungen aus Screenshots, einem Video oder einem YouTube-Link (z. B. die in einem Video gezeigte „EditingOS“-Oberfläche), generiert dann das Theme `ui/themes/<name>.json` und gleicht die Videostile (Untertitel, Akzente) an. Verwende für „Übernimm die Designsprache von …“, „Setze die Oberfläche auf die Farben von …“ oder „Selbes Aussehen wie die Oberfläche im Video“.

Was ist montageos?

Dieser Skill ermöglicht es, die visuelle Identität (Farben, Typografie, Radien, Layout) aus Screenshots, Videos oder YouTube-Links zu extrahieren und automatisch ein benutzerdefiniertes Theme für MonteurOS Studio (eine Web-UI) sowie dazugehörige Videostile zu generieren. Er unterstützt Plattformen wie Claude Code oder Cursor und hilft Entwicklern, die Designsprache einer Referenz schnell in die eigene Anwendung zu übertragen. Der Workflow umfasst: 1) Extrahieren der dominanten Palette und visuellen Merkmale mit einem CLI-Befehl (`bin/monteur charte`), 2) manuelles Verfeinern der Farben, Schriftarten und des Layouts in der generierten JSON-Datei (`ui/themes/<name>.json`), wobei Kontrastverhältnisse eingehalten werden, 3) Aktivieren des Themes über einen UI-Selektor oder `ui/settings.json`. Der Skill geht über reine Farbpaletten hinaus: Er erkennt Layout-Strukturen wie Seitenleisten, Timeline, Kartenformate und schlägt passende CSS-Grid-Anpassungen vor. Standardmäßig ist das Theme „nocturne“ vorkonfiguriert (dunkelblau, gelbe Akzente, grün/rot für Status, mit Schriftkombinationen aus Instrument Serif, Montserrat und Space Mono). Die eingebaute Regel stellt sicher, dass keine Markenlogos oder -namen kopiert werden – nur die Designsprache wird übernommen.

Funktioniert mit~Claude Code~Codex CLI~Cursor

npx skills add https://github.com/ameviadodo/montageos/tree/HEAD/skills/monteur-charte

Dokumentation

Designsprache (Charte graphique)

1. Extrahieren

bin/monteur charte capture1.png capture2.png [video.mp4] ["https://youtube.com/watch?v=…"] --name editingos

→ ui/themes/editingos.json (dominante Palette, vorgeschlagene Farbrollen) + Aufnahmen in ui/themes/editingos/. Bei einem YouTube-Video zählt der Moment, in dem die Oberfläche erscheint: Falls der Benutzer einen Zeitstempel angibt, schneide zuerst mit: ffmpeg -ss 03:12 -t 20 -i video.mp4 extrakt.mp4.

2. Verfeinern (von dir, während du die Aufnahmen mit Read betrachtest)

In ui/themes/<name>.json:

colors: bg (Hintergrund), surface/surface2 (Paneele), text, muted, accent (Schaltflächen, Auswahl), accent2 (sekundäre Zustände). Kontrast Text/Hintergrund ≥ 4,5:1.
fonts.display / fonts.body: die ähnlichste Schriftart (installiere die OFL in assets/fonts/, falls nötig; das Studio verwendet System-/installierte Schriften).
radius (Ecken in px), layout_notes: beobachtetes Layout (Seitenleiste, Timeline, Formatkarten, Inspektionspanel …). Weicht das Layout stark von ui/index.html ab, passe das Layout an (CSS-Grid am Dateianfang), wobei alle Funktionen und /api/*-Aufrufe erhalten bleiben.

3. Aktivieren

Selektor „Designsprache“ oben rechts im Studio, oder ui/settings.json → {"theme": "editingos"}. Gleiche auch die Videos ab: Übernimm accent in styles/*.json (subtitles.highlight, motion.accent), falls der Benutzer eine einheitliche Identität wünscht.

Standard-Designsprache: `nocturne`

Frame für Frame aus dem Referenzvideo des Benutzers extrahiert: Nachtblau #070A12, Paneele #0E1320, gelber Akzent #FFD935 (Punktnavigation, primäre Schaltflächen), Grün #4ADE80 (bereit zum Abspielen), Rot #FF5A6E (abgelaufen); Seitentitel Instrument Serif kursiv, Fließtext Montserrat, Etiketten und Zahlen Space Mono in Großbuchstaben mit Abstand. Der Videostil styles/nocturne.json ist die Ableitung (Untertitel und Karten in Gelb).

Regel

Man lasse sich von einer Designsprache inspirieren (Farben, Typografie, Ergonomie); man kopiert weder Logo noch Markennamen Dritter in die Oberfläche.