O que thumbnail faz?

Transforme um site, um projeto web local ou um único artigo em uma miniatura finalizada e de alta resolução que parece pertencer àquele site. A imagem é composta em HTML/CSS a partir do material do próprio site e renderizada em PNG e WebP sem perdas.

Princípios

Inspirada pelo site. Cada miniatura é uma nova composição construída a partir dos elementos característicos do site: seu visual herói, componentes, imagens, motivos, tipografia e cores. Uma captura de tela em um quadro de dispositivo é apenas uma das nove composições e nunca é o padrão.
Apenas material real. Use o logotipo, imagens, texto, números, cores e fontes reais do site. Nunca invente funcionalidades, preços, estatísticas ou alegações.
Um entregável por execução. Execute totalmente de forma automática. A única pergunta que esta skill pode fazer é a pergunta de idioma em Entradas → Idioma.

Comunicação

Trabalhe em silêncio. Não narre etapas, descobertas, raciocínio de design, novas tentativas ou correções. A análise permanece nas chamadas de ferramenta e em brief.md. Mantenha as descrições das chamadas de ferramenta curtas e neutras.
Fale apenas quando necessário: a pergunta de idioma, um problema bloqueador sobre o qual o usuário deve agir (o site está inacessível, o projeto não pode ser executado) e a entrega final.
Idioma da sessão. Escreva todas as mensagens voltadas ao usuário (perguntas, opções, erros, a resposta final) no idioma em que o usuário está escrevendo, independentemente do idioma da miniatura.
Resposta final. Mostre a imagem, então forneça os caminhos do PNG e WebP e duas a quatro linhas curtas: composição, formato, frase, categoria e de onde vieram o logotipo, as cores e a fonte. Termine com uma linha oferecendo edições e uma linha sugerindo um outro formato (veja references/formats.md). Sem recapitulação do processo.

Configuração

Os caminhos são relativos ao diretório desta skill (a pasta que contém este arquivo). Defina SKILL_DIR como essa pasta e S=$SKILL_DIR/scripts.

Script	Propósito
`inspect.mjs <url	arquivo>`
`extract.mjs <url	arquivo> --out `
`extract.mjs <url	arquivo> --out --selector "" --name [--transparent]`
`screenshot.mjs <url	arquivo> --out <arquivo.png> [--width --height --scale --wait]`
`render.mjs <arquivo.html> [--out <arquivo.png>]`	Renderize uma composição em 2x para PNG e WebP sem perdas. Lê o tamanho da tela da página e relata fontes carregadas, fontes com falha, imagens quebradas e texto transbordando.
`history.mjs` / `history.mjs add <site> "<composição>"`	Mostre ou registre composições usadas recentemente.

Os scripts não têm dependências npm. Se nenhum navegador for encontrado, defina CHROME_PATH. No macOS, head pode ser substituído por uma ferramenta Perl; leia arquivos com cat, sed -n ou python3.

Entradas

Resolva estas quatro entradas antes de projetar.

Alvo

Modo URL: a solicitação contém uma URL ou domínio. Pasta de saída: ./thumbnail-<domínio>/ no diretório de trabalho atual. Trate quaisquer outras palavras na solicitação como notas, por exemplo, um idioma, um formato, uma composição ou um desejo de estilo.
Modo projeto: sem URL. O alvo é o projeto atual. Pasta de saída: ./thumbnail/ na raiz do projeto.

Mantenha cada arquivo para a execução dentro da pasta de saída.

Tipo de página (modo URL)

Execute inspect.mjs primeiro e leia page.type:

site: a miniatura é sobre o site inteiro.
article: a URL é um único artigo, postagem de blog, guia ou item de notícias. A miniatura é sobre o tópico do artigo, estilizada com a identidade do site. Use a pasta de saída ./thumbnail-<domínio>-<slug>/, onde o slug é o último segmento do caminho, encurtado para aproximadamente 40 caracteres.

A detecção usa og:type, JSON-LD (Artigo, BlogPosting, NotíciaArtigo…), uma data de publicação, um elemento <article>, caminhos de URL no estilo de blog e comprimento do texto. As notas do usuário substituem isso: "sobre o site" significa site, e "sobre o artigo" ou "sobre o tópico" significa artigo, em qualquer idioma.

Idioma

Determine o idioma do conteúdo a partir de lang e dir, cabeçalhos e texto da interface. No modo projeto, verifique também <html lang> e pastas de localização como locales/<código> ou messages/<código>.json.

Se as notas do usuário nomearem um idioma, use-o.
Se o site tiver um único idioma, use-o. Árabe, Persa, Urdu e Hebraico são escritos da direita para a esquerda.
Se o site suportar totalmente dois ou mais idiomas, pergunte ao usuário qual usar. Use a ferramenta de perguntas do agente, se houver; caso contrário, pergunte no chat e aguarde. Recomende a localidade padrão do site.
Se o idioma não estiver claro, use Árabe.

A frase, a categoria e qualquer texto extra são escritos no idioma escolhido.

Formato

Padrão: uma miniatura de portfólio, 1080 × 720, para um site; Open Graph, 1200 × 630, para um artigo.
Sob solicitação: se o usuário nomear uma plataforma, posicionamento, proporção ou tamanho exato, resolva com $SKILL_DIR/references/formats.md. Esse arquivo também fornece o nome do arquivo de saída, as zonas seguras para formatos verticais e orientação de layout.
Cada formato é renderizado em 2x e exportado como PNG e WebP sem perdas.

Fluxo de Trabalho

Trabalhe em poucas rodadas. Cada rodada relê toda a conversa, então o número de rodadas impulsiona o custo muito mais do que qualquer arquivo individual. Agrupe comandos independentes em uma única chamada de shell, leia arquivos independentes em paralelo na mesma rodada e nunca releia um arquivo ou imagem que você já viu.

1. Torne o alvo acessível

Modo URL: use a URL.
Projeto estático (um index.html e nenhuma etapa de build): use o caminho do arquivo. Se os assets usarem caminhos absolutos da raiz, sirva a pasta em segundo plano (por exemplo python3 -m http.server 4173) e use http://localhost:4173.
Projeto com framework (um package.json com dev, start ou preview): instale as dependências se node_modules estiver faltando, usando o gerenciador de pacotes que corresponda ao lockfile. Inicie o servidor de desenvolvimento em segundo plano, leia sua porta da saída e aguarde até que curl -s -o /dev/null -w "%{http_code}" <url> responda. Pare o servidor assim que a extração for concluída.
Não pode executar: use uma URL implantada de package.json (homepage) ou do README. Se não houver nenhuma, construa a partir dos assets do próprio projeto (imagens, componentes, estilos) e informe o usuário.

2. Inspecione, extraia e verifique o histórico (um comando)

Execute todos os três em uma única chamada de shell:

mkdir -p <out> && node $S/inspect.mjs <url> > <out>/inspect.json && node $S/extract.mjs <url> --out <out>/extract && node $S/history.mjs

Se inspect.json mostrar que a página é um artigo, renomeie a pasta para ./thumbnail-<domínio>-<slug>/ na sua próxima chamada de shell.

3. Entenda o conteúdo e estude a identidade (uma rodada)

Na mesma rodada, leia os campos-chave de inspect.json (imprima-os com um script curto em vez do arquivo inteiro) e visualize extract/overview.png. A visão geral é uma folha de contato de cada captura (herói, seções, elementos, imagens), cada uma legendada com seu nome de arquivo.

Conteúdo

Site: o que é, para quem é, o que oferece e o que o faz parecer ele mesmo? Use inspect.json, extract.json e, no modo projeto, o README, package.json, componentes de landing page e herói, arquivos de localização, meta tags, manifest e estilos.
Artigo: sobre o que é o artigo e o que o leitor obterá dele? Use page.article (título, descrição, seção, tags, autor, data, tempo de leitura, subtítulos, imagem de capa, imagens no artigo, blocos de código) e o texto do artigo.
Se o texto da página for escasso (uma página renderizada pelo cliente ou um paywall), busque-o de outra forma, por exemplo com uma ferramenta de busca web ou curl.

Identidade: da visão geral (mais a imagem de capa para um artigo), observe:

Clima e estilo: fotográfico, 3D, ilustração plana, luxuoso, lúdico, técnico, editorial, minimalista…
Elementos característicos: as duas a quatro coisas pelas quais as pessoas reconhecem o site, por exemplo uma imagem ou objeto herói, um cartão ou bloco de produto distinto, um motivo, uma amostra de código, um conjunto de ícones, um gradiente, um tratamento tipográfico.
Tokens: cores, fundo da página, cores dos botões, raios, sombras, gradientes, estilo de título e estilo de emblema ou botão.

4. Escolha a composição

Se o usuário solicitar explicitamente uma composição, use-a. Isso se aplica quando o usuário nomeia uma (por exemplo "Colagem de Componentes") ou descreve claramente sua ideia, em qualquer idioma (por exemplo "uma colagem dos cartões do site" ou "uma grade de seus recursos"). Use essa composição mesmo se tiver sido usada recentemente e pule a verificação de histórico. As outras notas dele ainda se aplicam.

Caso contrário, escolha você mesmo:

Use o histórico impresso na etapa 2.
Leia $SKILL_DIR/references/compositions.md e escolha a composição que melhor expressa os elementos característicos deste site.
Evite as composições usadas nas últimas duas execuções, a menos que nada mais se encaixe.
Escreva <out>/brief.md. Mantenha-o curto: palavras-chave de identidade, elementos característicos e os arquivos que você usará, a composição escolhida e o porquê, e um esboço de layout de uma linha.

5. Abra os assets escolhidos em tamanho real (uma rodada)

A visão geral é para escolher, não para detalhes. Depois de saber quais dois a quatro assets o design usará (e o logotipo), abra-os em resolução total, todos em paralelo em uma rodada, para verificar texto pequeno, motivos finos e nitidez antes de projetar. Se uma parte que você precisa não foi detectada, capture-a com extract.mjs --selector na mesma rodada.

6. Escreva o conteúdo

Frase

Site: o que o site oferece e por que isso é importante. Use 5–10 palavras para Árabe e 6–12 palavras para Inglês ou outros idiomas. Escreva um texto de marketing natural sem ponto final e não repita o nome do site.
Artigo: a ideia central do artigo, seja seu título ajustado para caber ou um resumo fiel de uma linha. Use 5–12 palavras para Árabe e 6–14 para outros idiomas. Não adicione nada que não esteja no artigo.
Ela deve caber em três linhas. Você pode destacar uma a três palavras-chave usando a cor de destaque ou o tratamento de título do site.

Categoria

Duas ou três palavras no idioma da miniatura.
Site: o tipo de produto, por exemplo Loja Online, Plataforma de E-learning, Site Empresarial, Painel SaaS, Plataforma de Reservas ou Portfólio.
Artigo: a seção ou assunto do artigo, por exemplo Guia, Estudo de Caso, Tutorial ou o próprio tópico.

Extras do artigo (opcional)

Autor, data e tempo de leitura, definidos pequenos. Use apenas valores reais da página.

Logotipo

Sempre use o logotipo real e visualize-o antes de usá-lo.
- Projeto: procure em public/, static/, assets/, src/assets/ e app/ por logo*.{svg,png,webp}, icon*.svg, favicon.svg, apple-touch-icon.png e icon-512*.png, além de ícones de manifesto e componentes de logotipo inline.
- URL: use inspect.json: logoSvgs (SVG inline), logoBackgrounds (logotipos desenhados como fundos CSS, geralmente um SVG pronto), logoImgs e icons. Prefira um logotipo vetorial ou transparente; recorte-o de extract/elements/*-header.png apenas como último recurso, porque um recorte carrega o fundo da página. Salve os arquivos na pasta de saída.
SVGs inline que usam currentColor ou variáveis CSS precisam de cores de preenchimento reais. Não coloque uma caixa ou fundo atrás do logotipo, a menos que seja necessário para contraste: logotipos claros em áreas escuras, logotipos escuros em áreas claras.
Para um artigo, o logotipo é uma pequena assinatura, não o herói.
Se nenhum logotipo existir, use um ícone do Lucide que expresse a ideia (https://cdn.jsdelivr.net/npm/[email protected]/icons/<nome>.svg), estilizado nas cores da marca. Nunca desenhe um logotipo falso.

7. Fonte

Fontes: extract/fonts.css (as regras @font-face do próprio site, com os arquivos de fonte baixados) e extract.json (fonts.google). No modo projeto, verifique também next/font, regras @font-face, importações do Google Fonts, a configuração fontFamily do Tailwind e arquivos de fonte em public/fonts.
Carregue-a: adicione o <link> logo após o link do Noto Sans na tela, então defina --font: "<Fonte do Site>", "Noto Sans Arabic", "Noto Sans", sans-serif.
Verifique a cobertura: a fonte deve cobrir o alfabeto da miniatura. Uma fonte apenas latina não pode renderizar texto em árabe, então recorra ao Noto Sans Arabic. Se uma fonte de exibição tiver apenas um peso, use esse peso; nunca falsifique negrito.
Fallback: se a fonte estiver faltando na lista de fonts que render.mjs relata, ou aparecer em failedFonts, use Noto Sans Arabic ou Noto Sans.

8. Construa e renderize

Copie $SKILL_DIR/assets/canvas.html para <out>/<nome>.html. O nome é thumbnail para o formato padrão e thumbnail-<predefinição> para outros formatos.
Defina o tamanho da tela com --w e --h na primeira regra :root (o padrão é 1080px × 720px). Disponha o design para essa forma e, para formatos verticais, mantenha o texto dentro da zona segura.
Projete em HTML e CSS simples; SVG inline é bem-vindo.
- Substitua as variáveis de design e a regra de fundo .canvas no final do bloco <style>, depois adicione suas próprias regras após elas.
- Coloque a marcação dentro de <div class="canvas"> e deixe o <script> de fechamento inalterado.
- Referencie assets com caminhos relativos, como extract/images/…, extract/elements/… e logo.png.
Marque o texto para o renderizador:
- data-fit="3" na frase a encolhe até caber em três linhas. data-min define o menor tamanho; ele nunca fica abaixo do mínimo legível do formato.
- data-text="<nome>" em elementos de texto permite que o renderizador reporte transbordamento.
- data-decor em texto que não deve ser lido (um logotipo definido em tipo, uma palavra de fundo enorme que é puramente decorativa…).
Renderize: node $S/render.mjs <out>/<nome>.html --out <out>/<nome>.png.
Verifique a saída. Se render.mjs relatar fontes com falha, imagens quebradas, texto transbordando ou fontes não carregadas, corrija e renderize novamente. Execute node $S/render.mjs novamente sem --out para ler os logs de saída ou verifique novamente as imagens.
Repita as etapas 8.3–8.6 até que o renderizador não relate problemas.

Referências

`references/formats.md`

Mapeia nomes de plataformas familiares (Instagram, TikTok, Snapchat, YouTube Shorts, stories, LinkedIn, X/Twitter, Facebook, Open Graph, portfólio) e descrições (quadrado, retrato, paisagem, banner, tamanho personalizado) para resoluções exatas, nomes de arquivos, zonas seguras e orientação de layout. Inclui uma tabela de resumo rápida e um gráfico de zonas seguras.

`references/compositions.md`

Nove composições de layout numeradas com instruções de marcação HTML. Cada uma é adequada para diferentes tipos de identidade de site. Texto explicativo curto para cada uma.

aeentech/thumbnail

O que é thumbnail?

Perguntar na sua IA favorita

Documentação