ameviadodo/montageos

Aplica una identidad visual a MonteurOS Studio (la interfaz web) y a los videos: extrae colores, tipografías, radios y ambiente desde capturas de pantalla, un video o un enlace de YouTube (por ejemplo, la interfaz «EditingOS» mostrada en un video), luego genera el tema `ui/themes/<nombre>.json` y alinea los estilos de video (subtítulos, acentos). Úsalo para «toma la identidad visual de…», «pon la interfaz con los colores de…», «el mismo aspecto que la interfaz del video».

¿Qué es montageos?

Esta habilidad permite aplicar de manera automática una identidad visual (gráfica) a la interfaz web de MonteurOS Studio y a los videos generados. Extrae colores dominantes, familias tipográficas, radios de esquinas y el ambiente general a partir de capturas de pantalla, un archivo de video o un enlace de YouTube (por ejemplo, cuando se muestra la interfaz «EditingOS» en un video). Luego genera el tema en `ui/themes/<nombre>.json` y sincroniza los estilos de video (subtítulos, acentos) para lograr una identidad coherente tanto en la interfaz como en el contenido audiovisual. Es especialmente útil para frases como «toma la identidad visual de…» o «mismo aspecto que la interfaz del video». Soporta plataformas como Claude Code, Cursor y Codex a través de herramientas de línea de comandos (`bin/monteur charte`) y requiere `ffmpeg` para extraer fragmentos de video según un horario. Una vez creado el tema, se activa desde el selector «Charte» en la interfaz o editando `ui/settings.json`. La identidad predeterminada es «nocturne», basada en el video de referencia del usuario: azul nocturno (`#070A12`), paneles (`#0E1320`), acento amarillo (`#FFD935`), verde (`#4ADE80`) y rojo (`#FF5A6E`), con tipografías específicas para títulos (`Instrument Serif italic`), cuerpo (`Montserrat`) y etiquetas (`Space Mono`). La regla principal es inspirarse en una identidad visual (colores, tipografía, ergonomía) sin copiar logotipos ni nombres de marca de terceros en la interfaz.

Compatible con~Claude Code~Codex CLI~Cursor

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

Documentación

Identidad visual

1. Extraer

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

→ ui/themes/editingos.json (paleta dominante, roles de colores propuestos) + capturas en ui/themes/editingos/. Para un video de YouTube, el momento en que aparece la interfaz importa: si el usuario da un horario, extrae primero: ffmpeg -ss 03:12 -t 20 -i video.mp4 extracto.mp4.

2. Refinar (tú, observando las capturas con Read)

En ui/themes/<nombre>.json:

colors : bg (fondo), surface/surface2 (paneles), text, muted, accent (botones, selección), accent2 (estados secundarios). Contraste texto/fondo ≥ 4,5:1.
fonts.display / fonts.body : la fuente más cercana (instala la OFL en assets/fonts/ si es necesario; Studio usa las fuentes del sistema/instaladas).
radius (esquinas en px), layout_notes : disposición observada (barra lateral, línea de tiempo, tarjetas de formatos, panel de inspección…). Si la disposición difiere mucho de ui/index.html, adapta el diseño (grid CSS al inicio del archivo) conservando todas las funciones y las llamadas /api/*.

3. Activar

Selector «Charte» en la parte superior derecha de Studio, o ui/settings.json → {"theme": "editingos"}. Alinea también los videos: traslada accent a styles/*.json (subtitles.highlight, motion.accent) si el usuario quiere una identidad común.

Identidad por defecto: `nocturne`

Extraída fotograma a fotograma del video de referencia del usuario: azul noche #070A12, paneles #0E1320, acento amarillo #FFD935 (navegación en viñetas, botones primarios), verde #4ADE80 (listo para reproducir), rojo #FF5A6E (obsoleto); títulos de página Instrument Serif italic, cuerpo Montserrat, etiquetas y números Space Mono en mayúsculas espaciadas. El estilo de video styles/nocturne.json es su variante (subtítulos y tarjetas amarillas).

Regla

Se toma inspiración de una identidad visual (colores, tipografía, ergonomía); no se copian logotipos ni nombres de marca de terceros en la interfaz.