CommunityImagemgithub.com

Clean Thumbnail: thumbnails editoriais do YouTube, imagens reais

Cria thumbnails do YouTube sóbrias, no estilo de veículos editoriais, a partir de frames, fotos e recortes reais em vez de texto brilhante, setas e cara de IA. Transforma o título em texto curto na tipografia da própria marca, renderiza um par A/B de até 4K mais cópias de 2 MB para celular, adiciona versões Facebook 4:5 e Reels/Shorts 9:16 e confere contraste, o canto do selo de duração e as zonas seguras.

O que é Clean Thumbnail: thumbnails editoriais do YouTube, imagens reais?

Passo 3 da receita Do podcast ao vídeo do YouTube (a thumbnail que ganha o clique), de RZ-Logic/clean-thumbnail-skill (código MIT, 16 fontes SIL OFL incluídas, imagens de demonstração e prévias de celular no repo). A única regra: imagens reais carregam o clima e o texto fica discreto, sem contornos, brilhos, setas, adesivos, véus de cor ou cenas geradas por modelo. Cada imagem tem um de quatro papéis: fundo (um frame, foto ou arte principal), 2–3 painéis rotulados para comparações e antes/depois, um sujeito recortado (você ou um produto) com cor ajustada e posicionado longe do texto com o fundo suavizado atrás, ou um inserto exibido dentro de um monitor ou celular. Primeiro decide se é thumbnail ou post: a thumbnail recebe poucas palavras escolhidas por regras tipográficas porque o título carrega a mensagem; o post (--mode post) mantém a mensagem inteira como título, corpo e detalhes. Um renderizador Python local (numpy e Pillow, rembg opcional) gera um par A/B de até 3840×2160 e cópias de celular com menos de 2 MB, com variantes 4:5 de feed e 9:16 para Reels, Shorts e Stories, e confere contraste, selo de duração, zona segura do Reels e tamanhos de feed. Mesmo comando, mesma tipografia em qualquer sistema.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/RZ-Logic/clean-thumbnail-skill/tree/HEAD/skill/clean-thumbnail

Installed? Explore more Imagem skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

Limpar miniatura

A única regra

Imagens reais carregam o clima; o texto fica discreto. Cada miniatura é uma pequena pilha de imagens reais em papéis fixos, mais duas peças de texto. Sem contornos, brilhos, setas, adesivos, lavagens de cor ou cenas geradas por um modelo de imagem.

Papéis das imagens

Decida o papel de cada imagem a partir do que o usuário diz e mostra. Existem apenas quatro:

PapelFlagUso
Fundoa captura (posicional)Quase tudo: um quadro, foto ou arte-chave
Painéis--panel A --panel B (2-3), --panel-label cadaComparações: versões, configurações, antes/depois
Sujeito--subject cutout.png (repetível)Uma pessoa, personagem ou produto na frente do fundo
Inserção--inset img --inset-box x0,y0,x1,y1Uma imagem mostrada dentro do fundo: um jogo em um monitor, um clipe em um telefone

Os painéis substituem o fundo; sujeito e inserção ficam sobre um. Os sujeitos vão para o lado oposto ao texto e são combinados com a foto atrás deles (matiz de cor, tom, nitidez, granulação), e o fundo é suavizado atrás deles (--push, padrão 0,5). Arquivos de sujeito precisam de fundo transparente; se não tiverem, o script usa rembg quando instalado, senão pede um recorte. A caixa de inserção é em frações da imagem de fundo: olhe para o fundo e estime onde está a tela ou o quadro.

Miniatura ou post?

Decida isso primeiro; muda o que acontece com as palavras do usuário.

  • Miniatura: a imagem fica ao lado de um título de vídeo (um vídeo do YouTube, uma capa de Reel ou Short). O título carrega a mensagem, então a imagem recebe poucas palavras, escolhidas com as regras de texto.
  • Post: a imagem é a mensagem: um post no Facebook ou Instagram, um anúncio, um evento, uma oferta, um post de contratação, um promo. Renderize com --mode post e mantenha as palavras do usuário: a mensagem principal como --title, o restante como --body, quando, onde, preço e como agir como --details (regras de texto: Posts). Corrija apenas ortografia e maiúsculas. Nunca corte a mensagem ou mova para a legenda do post, a menos que o usuário peça; se o script disser que o texto não será legível no tamanho do feed, mostre ao usuário o corte que você faria e aguarde um sim. Os posts geralmente ficam melhores com --backdrop solid quando a foto é ocupada ou a mensagem é longa; as miniaturas geralmente mantêm o padrão fade.
  • Em dúvida? Pergunte uma vez: "Isso é uma miniatura de vídeo ou uma imagem de post?"

Fluxo de trabalho

  1. Obtenha as imagens. O melhor fundo é uma captura bruta: modo foto, HUD desligado, 1440p ou 4K, sujeito de um lado com espaço para texto do outro. Arte oficial de press kit funciona; a arte-chave geralmente tem o sujeito no meio, o que --subject-box e --crop tratam (passo 5). Fan art precisa de permissão e crédito do artista; diga isso se uma imagem parecer fan art. Não gere ou repinte cenas com um modelo de imagem.

  2. Escreva o texto com references/type-rules.md. Miniatura: o texto grande é o que torna este vídeo diferente, o rótulo é contexto. Sem kicker, a menos que seja necessário. Mostre ao usuário o texto e o que você removeu do título. Post: organize a mensagem do usuário em título, corpo e detalhes sem descartar palavras, e mostre como você a dividiu.

  3. Escolha a aparência do título com references/fonts.md, nesta ordem: o logotipo oficial se o usuário tiver um (--logo, press kits e sites oficiais publicam); caso contrário, a fonte incluída mais próxima da tipografia do jogo, filme ou marca (--title-font cinzel, veja --list-fonts); se nada incluído servir, não force: use o title_font salvo do canal, senão o padrão serif ou sans, e diga que nada correspondeu. A caixa de rótulo sempre mantém a fonte do canal. Informe ao usuário qual aparência você usou e por que, e que uma fonte correspondida é próxima em espírito, não a tipografia real. Combine o peso e o espaçamento do logotipo, bem como sua forma: um logotipo fino e amplamente espaçado recebe um peso leve e tracking amplo (--title-font outfit@Light --title-tracking 0.12 para Death Stranding), não o padrão negrito do catálogo. Divida palavras longas em duas linhas (DAWN\nWALKER) quando a fonte for larga; o script avisa quando o texto sai pequeno. Cor: branco por padrão. Quando a imagem tem uma cor forte única (um pôr do sol, neon, um eclipse, uma cor de equipe), use --title-color auto: o script pega essa cor da imagem e a clareia o suficiente para ser legível no lado escuro (permanece branco se a imagem não tiver cor vívida). Ou dê uma cor de marca (--title-color "#f2b84b"). Colora o texto grande ou a caixa de rótulo (--accent), nunca ambos em cores diferentes; o script avisa se você fizer isso. Salve uma cor de canal como title_color ou accent em clean-thumbnail.json.

  4. Verifique as configurações e formatos do canal. Se clean-thumbnail.json estiver na pasta de trabalho, o script o carrega (estilo, fontes, cores, lead, tamanho, proporção e assim por diante; flags o substituem).

    • Formatos, perguntado uma vez. Se não houver aspect salvo e a solicitação não nomear uma plataforma, pergunte uma vez para quais plataformas o usuário posta: YouTube (16:9), feed do Facebook ou Instagram (4:5), Reels, Shorts ou Stories (9:16). Salve a resposta como "aspect" em clean-thumbnail.json (crie-o a partir de references/channel.example.json se estiver faltando, por exemplo, "aspect": "16:9,4:5"), diga onde o salvou e não pergunte novamente.
    • Depois disso, use os formatos salvos sem perguntar. Se uma solicitação nomear uma plataforma ("para Reels", "um do Facebook também"), passe --aspect apenas para essa solicitação; altere o valor salvo somente quando o usuário disser ("de agora em diante", "sempre").
    • Após o usuário aprovar uma primeira miniatura, ofereça-se para salvar suas outras escolhas (estilo, fontes, title_color ou accent) da mesma forma. Salve uma cor apenas quando o usuário a quiser em todos os vídeos; auto é decidido por imagem, então deixe-o não salvo, a menos que ele peça.
  5. Renderize com scripts/thumb.py na pasta desta habilidade (use seu caminho completo):

    python <skill-dir>/scripts/thumb.py CAPTURE --title "SIMON" --label "No hit · Parry only" -o out/simon
    

    Com o padrão --lead ab, isso escreve duas variantes, _A (título grande) e _B (rótulo grande), cada uma como um mestre .jpg no maior tamanho padrão que as imagens suportam sem upscaling (até 3840x2160, para upload em desktop), um _phone.jpg em 1280x720 abaixo de 2 MB (para upload em telefone) e um _preview.png (tamanhos de feed com o selo de duração, notificação de 88 px, teste de squint).

    Formatos: --aspect 16:9 (padrão, YouTube), 4:5 (feed do Facebook e Instagram, 1080x1350), 9:16 (Reels, Shorts, Stories, 1080x1920), uma lista separada por vírgulas ou all. Formatos verticais cortam para a parte mais movimentada da imagem (o sujeito), a menos que --focus seja fornecido, e colocam o texto em uma faixa abaixo da imagem, acima dela quando há um sujeito, ou na costura entre painéis empilhados. Em 9:16, o texto permanece dentro da zona segura do Reels/Shorts (limpo dos 14% superiores, 35% inferiores e 15% direitos). Cada arquivo vertical recebe uma cópia _1080.jpg quando o mestre é maior, e uma prévia em um cartão de feed do Facebook ou sob uma sobreposição de Reels com o corte da grade de perfil. Use o mesmo texto para cada formato.

    Marque o sujeito. Quando a captura mostra uma pessoa, personagem ou produto, olhe para ela e passe --subject-box x0,y0,x1,y1 ao redor do rosto (ou do nome ou rótulo do produto), em frações da imagem conforme fornecida, da mesma forma que você estima --inset-box. Moldura o rosto das sobrancelhas ao queixo, não o cabelo e não o corpo inteiro: texto cruzando um torso é aceitável, texto ou sombra em um rosto não. O script então coloca o texto 16:9 no lado que mantém a caixa limpa, centraliza os cortes 4:5 e 9:16 nela, move a faixa de texto 9:16 para o topo quando isso sombreia menos o rosto e avisa quando a caixa ainda acaba sob texto ou sombra ou fora do quadro. Cada variante imprime uma linha subject box: (no quadro, visível, sob sombra, sob texto). Não com --panel ou --subject (um recorte tem sua própria verificação de sobreposição).

    Uma imagem diferente para 4:5 e 9:16 geralmente é melhor. O texto 9:16 fica no meio do quadro (zona segura do Reels), então precisa de um quadro com o rosto do sujeito no terço superior e algo calmo abaixo dele. Com um rosto centralizado, --subject-box move a faixa para o topo quando isso a limpa e avisa quando não pode; sem uma caixa, a faixa fica no fundo e o sombreia. Quando a captura ampla não servir, peça (ou escolha das capturas do usuário) uma que sirva e renderize-a em uma segunda execução com --aspect 4:5,9:16 (o mesmo -o é aceitável: os arquivos verticais recebem sufixos _4x5 e _9x16, então os arquivos 16:9 permanecem). O corte vertical centraliza em --subject-box; sem ele, segue a parte mais movimentada do quadro, que às vezes é paisagem: então passe uma caixa ou --focus.

    Sujeito no meio? Em uma miniatura 16:9, o texto e sua sombra então caem sobre o sujeito, independentemente do lado que tomam, e --focus não pode ajudar (ele apenas move o corte 16:9 em capturas mais largas que 16:9). Com --subject-box, o aviso imprime um corte que o limpa, por exemplo, try --crop 0.11,0,0.96,1 --text-side right: execute novamente com ele e mantenha o mesmo --subject-box (ambos tomam frações da imagem conforme fornecida, então a caixa não precisa de recálculo). Manualmente: mantenha uma parte mais estreita da imagem com --crop x0,y0,x1,y1 (frações da imagem conforme fornecida): cerca de 75-80% da largura, com o sujeito em direção ao lado oposto ao texto. Mais estreito que 16:9, a arte se move para o lado distante e desbota no lado escuro. O corte se aplica a todos os formatos; as barras ainda são cortadas. Um corte também pode manter um segundo elemento à vista que a caixa não conhece (a demo do criador mantém a câmera do telefone visível dessa forma).

    Outras flags: --backdrop fade|solid (o que fica atrás do texto: fade escurece a foto em uma sombra, solid mantém a foto limpa e coloca o texto em um painel --bg sólido), --style serif|sans (aparência padrão do título), --kicker TEXT / --subtitle TEXT (linhas pequenas acima ou abaixo do texto grande; veja as regras de texto), --feather 0..1 (comprimento do fade da arte estreita ou cortada; encurte-o quando o fade atingir um rosto), --shade 0..1 e --bg #hex (escuridão e cor do lado do texto), --subject-box x0,y0,x1,y1, --band auto|top|bottom (faixa de texto em 4:5 e 9:16), --text-side left|right, --focus 0..1 (posição do corte em capturas amplas), --logo logo.png --logo-white (logotipo como título), --title-font NAME|FILE / --label-font, --list-fonts, --system-fonts (faces instaladas em vez dos padrões incluídos; a aparência então varia por máquina), --title-tracking 0..0.5 (espaçamento entre letras do texto grande em em), --title-color white|auto|#hex (texto grande) / --accent white|auto|#hex (caixa de rótulo), --size 720p|1080p|1440p|4k, --feed DIR (coloque ambas as variantes entre outras miniaturas). Cada variante imprime title type: ... e colors: ..., para que você possa informar ao usuário o que foi usado.

  6. Verifique antes de devolver:

    • Leia cada linha warning: e corrija a causa (mude de lado, mova o corte ou a caixa de inserção, encurte o texto, use um recorte maior, recapture). Nunca devolva uma miniatura com um aviso aberto sem dizer isso.
    • Abra cada prévia: o texto grande deve ser legível a 168 px. Se não for, encurte-o.
    • No bloco de squint, o texto grande e o sujeito devem ser as duas coisas que sobrevivem. Se uma mancha brilhante superar ambos, mude o corte, o lado ou a imagem. Um logotipo fino ou detalhado geralmente desbota aqui enquanto o texto grande se mantém; diga isso, pois é para isso que a variante B serve.
    • Leia a linha subject box: de cada variante. Se a caixa estiver sombreada ou sob texto em 16:9, execute novamente com o --crop que o aviso sugere (passo 5) em vez de encolher o texto. Em 9:16, o texto deve permanecer dentro da zona segura do Reels, então o script só pode mover a faixa para o topo ou fundo (ele faz isso sozinho, e o aviso nomeia --band quando a outra faixa limpa o rosto): se o rosto ainda estiver sombreado, verifique se a caixa vai das sobrancelhas ao queixo, encurte o texto ou use outro quadro para os formatos verticais (passo 5), e informe ao usuário se o rosto 9:16 permanecer sombreado.
    • Sem uma caixa (sem pessoa ou produto), verifique nas prévias 4:5 e 9:16 se o corte manteve o que importa; se enquadrou paisagem, passe --focus.
    • Com cor auto, verifique a linha colors: e a prévia: a cor deve ser aquela pela qual a imagem é conhecida. Se pegou uma cor lateral (um sinal vermelho em uma cena azul), forneça o código hex da cor correta ou volte ao branco.
    • Com um sujeito, verifique se ele parece fotografado com o fundo: sem halo, sem cor ou nitidez incompatíveis. O script imprime o que combinou.
    • Se o usuário tiver capturas de tela das principais miniaturas atuais sobre o tópico, passe-as com --feed DIR e olhe para _feed.png: as suas devem se destacar.
  7. Devolva. Uma miniatura: ambas as variantes (cópia mestre e telefone), as prévias, o texto usado e a aparência e cores do título (das linhas title type: e colors:). O par é para o Teste e Comparação do YouTube, que aceita até três miniaturas por vídeo e escolhe o vencedor com base na participação do tempo de exibição, não na taxa de cliques; miniaturas claramente diferentes terminam mais rápido. Deixe o teste escolher, não você, e não prometa uma terceira variante. Um post: a imagem, sua prévia e o texto exatamente como colocado, com os tamanhos da linha post text:; é uma imagem, não um par A/B.

Especificações fixas

Mestre até 3840x2160 (o YouTube aceita até 50 MB do desktop); cópia para telefone 1280x720 abaixo de 2 MB. Mestre 4:5 até 2160x2700 com uma cópia 1080x1350; 9:16 até 2160x3840 com uma cópia 1080x1920. O texto fica fora do canto inferior direito, onde o selo de duração fica (dimensionado para o selo a 168 px), dentro da zona segura do Reels/Shorts em 9:16 e i

…

[truncado para tradução]

Habilidades Relacionadas