ameviadodo/montageos

Aplica uma identidade visual ao MontageOS Studio (interface web) e aos vídeos — extrai cores, tipografias, raios, ambiente a partir de capturas de tela, um vídeo ou um link do YouTube (ex. a interface « EditingOS » mostrada em um vídeo), então gera o tema `ui/themes/<nome>.json` e alinha os estilos de vídeo (legendas, acentos). Use para « pegar a identidade de… », « colocar a interface nas cores de… », « mesmo visual da interface do vídeo ».

O que é montageos?

Este skill permite que o MontageOS, ao receber capturas de tela, um vídeo ou um link do YouTube, extraia automaticamente a paleta de cores, tipografia, raios e layout de uma interface de referência e aplique essa identidade visual ao MontageOS Studio e aos vídeos gerados. Ele gera um arquivo de tema JSON em `ui/themes/<nome>.json`, que define cores (fundo, superfícies, texto, acentos), fontes (display e corpo), raios de cantos e notas de layout. Além disso, o skill alinha os estilos de vídeo, como destaque de legendas e acentos de movimento, para manter uma identidade coesa entre a interface e o conteúdo audiovisual. Suporta os estilos de referência mais comuns, como o tema padrão 'nocturne', e respeita a regra de não copiar logos ou marcas de terceiros. O processo envolve extração (com instruções de linha de comando), refinamento manual (usando Read para ajustar o JSON) e ativação via seletor no Studio ou configuração em `ui/settings.json`.

Funciona com~Claude Code~Codex CLI~Cursor

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

Documentação

Identidade Visual

1. Extrair

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

→ ui/themes/editingos.json (paleta dominante, papéis de cores sugeridos) + capturas em ui/themes/editingos/. Para um vídeo do YouTube, o momento em que a interface aparece é importante: se o usuário fornecer um horário, recorte primeiro: ffmpeg -ss 03:12 -t 20 -i video.mp4 trecho.mp4.

2. Refinar (você, observando as capturas com Read)

Em ui/themes/<nome>.json:

colors : bg (fundo), surface/surface2 (painéis), text, muted, accent (botões, seleção), accent2 (estados secundários). Contraste texto/fundo ≥ 4,5:1.
fonts.display / fonts.body : fonte mais próxima (instale a OFL em assets/fonts/ se necessário; o Studio usa fontes do sistema/instaladas).
radius (cantos em px), layout_notes : disposição observada (barra lateral, timeline, cartões de formatos, painel de inspeção…). Se a disposição diferir fortemente de ui/index.html, adapte o layout (grid CSS no cabeçalho do arquivo) mantendo todas as funções e chamadas /api/*.

3. Ativar

Seletor « Identidade Visual » no canto superior direito do Studio, ou ui/settings.json → {"theme": "editingos"}. Alinhe também os vídeos: transfira accent para styles/*.json (subtitles.highlight, motion.accent) se o usuário quiser uma identidade comum.

Identidade padrão : `nocturne`

Extraída quadro a quadro do vídeo de referência do usuário: azul noturno #070A12, painéis #0E1320, amarelo de destaque #FFD935 (navegação em bolinhas, botões primários), verde #4ADE80 (pronto para revisão), vermelho #FF5A6E (obsoleto); títulos de página Instrument Serif itálico, corpo Montserrat, rótulos e números Space Mono em maiúsculas espaçadas. O estilo de vídeo styles/nocturne.json é a sua variação (legendas e cartões amarelos).

Regra

Inspiramos-nos em uma identidade visual (cores, tipografia, ergonomia); não copiamos logotipo nem nome de marca de terceiros na interface.