O que asset-size-matrix faz?
Um mestre, cada slot, nada importante cortado, e um recibo para cada arquivo.
O que esta skill faz
Um lançamento raramente precisa de uma imagem. Precisa de uma prévia de link, uma miniatura de vídeo, um post quadrado, um post retrato, uma capa 3:4, um story vertical, um banner de perfil, um ícone de aplicativo, uma prévia de repositório, talvez um vídeo vertical. Cada um tem seu próprio tamanho em pixels, suas próprias regras de arquivo e sua própria sobreposição de interface: a coluna de "curtir" à direita de um feed vertical, o selo de duração no canto da miniatura, o avatar sobre o banner, a máscara arredondada do ícone.
As pessoas geralmente lidam com isso arrastando uma caixa de corte uma dúzia de vezes. Os resultados são familiares: um título cortado ao meio na versão 9:16, um logotipo escondido sob o avatar, texto que era legível no mestre 4K e tem três pixels de altura no feed, uma miniatura rejeitada por ter 2,3 MB, um curta que toca 8 dB mais baixo que tudo ao redor.
Esta skill transforma o trabalho em uma tabela. Cada destino se torna um cartão de slot com números e uma data. O mestre é marcado uma vez: quais caixas devem sobreviver. Um pequeno planejador calcula, para cada slot, o corte mais amplo que mantém essas caixas dentro da área segura do slot, e diz claramente quando nenhum corte funciona. Então, cada arquivo exportado é verificado em relação ao seu cartão.
O problema que resolve
- Os cortes são decididos visualmente, um de cada vez, então são inconsistentes e ninguém pode dizer por que um determinado corte foi escolhido.
- As áreas seguras são esquecidas até o post ir ao ar e a chamada para ação ficar sob um botão.
- "Apenas corte" é aplicado a slots onde o corte não funciona (um layout largo comprimido em 9:16), então o resultado é cortado ou reduzido a ponto de ficar ilegível.
- O tamanho do texto é julgado no mestre, não no tamanho em que o slot é realmente exibido.
- As regras de arquivo (formato, peso, codec, taxa de quadros, loudness) são descobertas por erros de upload.
- Os números das plataformas são copiados de posts antigos de blog, sem data e sem fonte.
Quando usar
Use quando:
- um design deve ser entregue em vários tamanhos ou para várias plataformas;
- alguém pede um "kit de lançamento", "pacote social", "todos os tamanhos", "conjunto de banners";
- uma capa ou miniatura continua sendo cortada ou ficando desfocada após o upload;
- um vídeo curto também deve existir como versões vertical, quadrada e larga;
- você está prestes a exportar um lote e quer provar que cada arquivo atende à sua especificação.
Não use para criar o design do zero (faça o mestre primeiro), para editar conteúdo de vídeo (cortes, legendas, cor) ou para publicar. Ele pode dizer que um slot precisa de um novo layout; o novo layout é uma tarefa de design.
O que você precisa
- O mestre: idealmente a fonte editável (Figma/PSD/HTML/SVG/arquivo de projeto) mais uma exportação plana no maior tamanho disponível. Apenas pixels são suficientes para slots de corte.
- A lista de destinos, ou o objetivo ("lançando no X, Instagram e nosso blog").
- Para slots de vídeo: o arquivo de vídeo, e
ffmpeg/ffprobeinstalados se quiser verificações automáticas. - Python 3.8+ para o script auxiliar
scripts/matrix.py(apenas biblioteca padrão).
Passo a passo
1. Avalie o mestre
Registre em master.json (veja examples/master.json):
- largura e altura em pixels, e se é imagem estática ou vídeo;
- se existe uma fonte editável (isso determina o custo de um REFLOW);
- a maior versão disponível. Nunca planeje a partir de uma cópia reduzida que alguém colou no chat.
Se o mestre for menor que o maior slot, avise agora; isso aparecerá como UPSCALE mais tarde.
2. Escreva a lista de slots, com datas
Crie slots.json (comece de examples/slots.json). Um cartão por slot:
| campo | significado |
|---|---|
id | radical do nome do arquivo exportado, ex. video-thumb -> video-thumb.jpg |
w, h | tamanho entregue em pixels; exact: false significa "pelo menos isso, mesma proporção" |
safe | margens superior, direita, inferior, esquerda em pixels do slot que a interface da plataforma cobre |
drop | caixas nomeadas que não devem aparecer neste slot (ex. título em um ícone) |
fit | wide (padrão, mantenha o máximo de contexto possível) ou tight (preencha a área segura) |
display_w | quão largo o slot é realmente mostrado, em px CSS, ex. uma miniatura em uma grade |
min_text_px | menor altura de capital que ainda é legível em display_w |
formats, max_kb | tipos de arquivo permitidos e limite de peso |
| campos de vídeo | video_codec, audio_codec, pix_fmt, faixa de fps, min_s/max_s, sample_rate, lufs (+lufs_tol), true_peak_max |
source | de onde vieram os números |
Regras para a lista:
- Coloque
as_of(data de hoje) no topo. Tamanhos e sobreposições mudam; um cartão sem data é um boato. - Verifique cada cartão na página de ajuda atual da plataforma ou modelo para download.
Se não puder verificar um número, mantenha-o, mas escreva
"source": "unverified"e avise na entrega. - Pergunte sobre slots apenas quando o destino não estiver claro. Uma pergunta agrupada é melhor que cinco: "Farei cartão de link, miniatura, quadrado, story 9:16 e banner. Adiciono ou removo algum?"
3. Marque o mestre
Ainda em master.json, liste as caixas como [x, y, w, h] em pixels do mestre:
keep: o que deve estar visível em cada slot que não o descarta (produto, rosto, arte principal);text: cada bloco de texto com seucap_px(altura de uma letra maiúscula no mestre);logo: a marca;focus: um ponto para centralizar quando nada está marcado.
Obtenha as caixas medindo na ferramenta de design, lendo os limites da camada no arquivo fonte, ou abrindo a imagem e estimando cuidadosamente. Adicione alguns por cento a cada caixa; uma caixa que abrace um rosto cortará o queixo na prática.
4. Planeje cada slot
python3 scripts/matrix.py plan --master master.json --slots slots.json
Para cada slot você obtém um veredito:
- CROP: um corte + redimensionamento mantém tudo o que é necessário dentro da área segura. A linha inclui
o retângulo de corte e um filtro
ffmpegpronto (crop=w:h:x:y,scale=W:H). - UPSCALE: um corte funciona, mas amplia o mestre. A linha informa qual tamanho de mestre é necessário. Peça uma exportação maior ou um logotipo vetorial em vez de enviar uma imagem borrada.
- REFLOW: nenhum corte funciona, ou o texto ficaria ilegível no tamanho de exibição. Se a linha
incluir
art_only, a arte ainda corta bem e apenas o texto/logotipo listado precisa ser reajustado para esta forma. Caso contrário, a própria composição precisa mudar.
Mostre a tabela ao usuário antes de exportar qualquer coisa. É o momento mais barato para mudar de ideia.
5. Resolva cada REFLOW
Escolha a correção mais leve que funciona, nesta ordem:
- Reajuste o tipo: corte a arte com o retângulo
art_only, então coloque o título e o logotipo novamente dentro da área segura do slot, em um tamanho que passemin_text_px. - Reorganize: layouts largos (texto à esquerda, arte à direita) se tornam layouts altos (arte em cima, texto abaixo), a partir da fonte editável, mantendo as mesmas fontes, cores e proporções de espaçamento.
- Estenda a tela: alargue o fundo no arquivo fonte (ou com uma cor sólida da marca) para que a arte caiba na área segura, em vez de encolher a arte.
- Encurte para slots pequenos: ícones e avatares carregam apenas a marca; uma capa 3:4 em uma grade de duas colunas pode precisar de um título mais curto. Nunca reescreva o texto você mesmo; proponha a linha mais curta e deixe o proprietário aprová-la.
Execute plan novamente após cada mudança até que cada slot seja CROP ou uma exceção deliberada e explicada.
6. Exporte
- Slots apenas de corte: aplique o filtro planejado, para imagens estáticas ou vídeo:
ffmpeg -i master.png -vf "crop=...,scale=..." link-card.png. - Slots REFLOW: exporte da fonte editável no tamanho exato do slot.
- Nomeie cada arquivo
<slot id>.<ext>em uma pasta, para que o verificador possa encontrá-lo. - Imagens estáticas: sRGB, sem transparência onde a plataforma a achata em uma cor desconhecida,
qualidade reduzida passo a passo apenas até atingir
max_kb. - Vídeo: largura e altura pares,
yuv420p, a taxa de quadros da fonte, a menos que o cartão diga o contrário, loudness normalizado para o alvo do cartão. Para um limite de tamanho, calcule a taxa de bits:python3 scripts/matrix.py budget --seconds 58 --max-mb 50. - Mais receitas em
references/export-recipes.md.
7. Verifique cada arquivo
python3 scripts/matrix.py check --slots slots.json --dir out/ --loudness
Cada slot retorna PASS, FAIL, CHECK (algo não pôde ser medido) ou MISSING. Corrija falhas mecânicas livremente (tamanho errado, formato, peso, formato de pixel, taxa de amostragem). Falhas que mudam o conteúdo (duração mais curta, corte mais apertado, áudio mais alto que levanta ruído de fundo) precisam da escolha do proprietário: declare a opção e seu custo.
8. Veja, no tamanho real
O verificador não enxerga. Monte uma folha de contato que mostra cada slot em seu display_w, com
a área segura delineada, e abra-a:
python3 scripts/matrix.py sheet --slots slots.json --dir out/ # escreve out/contact-sheet.html
Procure por: texto cruzando a linha segura, rostos cortados nas juntas (queixo, topo da cabeça, mãos), o logotipo em um fundo carregado, dois slots que parecem marcas diferentes.
9. Entregue
Entregue a pasta mais um pequeno manifesto:
Kit: Lançamento Tidepool, slots as_of 2026-10-24 (2 cartões não verificados: note-cover, article-cover)
link-card.png 1200x630 184 KB PASS crop
video-thumb.jpg 1280x720 402 KB PASS reflow: título reajustado com 96 px de altura de capital
story-vertical.png 1080x1920 1.1 MB PASS reflow: reorganizado, tela estendida
app-icon.png 1024x1024 61 KB PASS do logotipo vetorial (raster estava 1,6x muito pequeno)
vertical-video.mp4 1080x1920 21 MB PASS -14.2 LUFS, -1.3 dBTP, 30 fps, 41.0 s
Veja: contact-sheet.html (todos os slots no tamanho de exibição)
Exemplos
"Faça este banner de lançamento funcionar em todos os lugares."
Mestre 4000x2250, título à esquerda, mock-up de telefone à direita. Planejamento: cartão de link e prévia de repositório CROP;
miniatura REFLOW (título com apenas 13,5 px de altura no tamanho da grade, precisa de 14); quadrado, retrato e 3:4
REFLOW com um corte art_only (reajuste do título sob o telefone); 9:16 REFLOW sem art-only
(o mock-up é muito largo para a coluna segura, então estenda a tela e reorganize); ícone de aplicativo
UPSCALE (use o logotipo vetorial). Veja examples/plan.output.md.
"O YouTube continua rejeitando minha miniatura." Um slot. A verificação mostra 2.4 MB contra um limite de 2 MB e 1280x721. Reexporte em 1280x720, qualidade JPEG reduzida de 95 para 88: 1.3 MB, PASS.
"Mesmo curta para Reels, Shorts e um corte largo do YouTube."
Três slots de vídeo. Slots verticais CROP do mestre 16:9 apenas porque o palestrante está
centralizado; o corte largo é o mestre. A verificação encontra áudio 44,1 kHz (WARN) e -21,9 LUFS
(FAIL contra -14); normalize, reexporte, reverifique. Veja examples/check.output.txt.
Dicas
- Marque o mestre uma vez e mantenha
master.jsoncom o arquivo de design; a próxima campanha o reutiliza. - Quando duas plataformas compartilham uma forma, ainda assim dê a elas cartões separados se suas sobreposições diferirem.
- Prefira uma caixa segura conservadora para vídeo vertical se uma exportação precisar servir vários feeds.
- Um corte que passa nos números mas corta uma articulação de uma pessoa ainda falha; confie na etapa visual.
fit: tighté para marcas e ícones; todo o resto deve manter contexto (wide).- Mantenha números não verificados visíveis no manifesto em vez de confiar neles silenciosamente.
- Verifique novamente após cada reexportação, não apenas o arquivo que você alterou: ferramentas em lote sobrescrevem arquivos vizinhos.