Thumbnails de portfólio com as telas reais do projeto.
A skill abre o site, captura desktop e celular e monta as telas em molduras limpas, sobre um fundo que conversa com a paleta dele. Nada é gerado por IA: a arte mostra exatamente o que foi entregue.
npx skills add c0le0ni/skills --skill coleoni-thumb
Um link entra. Quatro artes saem.
O script captura uma vez e recompõe quantas variações você quiser. Trocar o fundo ou o layout leva segundos.
$ /coleoni-thumb https://skills.coleoni.com capturing https://skills.coleoni.com … palette: background rgb(10, 10, 10) · text rgb(245, 245, 245) · accent rgb(245, 245, 245) sections (desktop): [0] section y=64 h=1893 [1] section y=1957 h=977 [2] section y=2934 h=1216 [3] section y=4150 h=1117 … ok docs/portfolio/coleoni-skills-split-auto.jpg (+ @2x) ok docs/portfolio/coleoni-skills-devices-dark.jpg (+ @2x) ok docs/portfolio/coleoni-skills-wall-mesh.jpg (+ @2x) ok docs/portfolio/coleoni-skills-phones-brand.jpg (+ @2x) 4 image(s) in docs/portfolio
-
01
Captura
Abre o site no Chrome ou no Edge que você já tem. Guarda a primeira tela, cada seção da página e três telas do celular, em 2×.
-
02
Paleta
Lê o fundo, o texto e a cor de destaque do site. É dali que saem os fundos das artes.
-
03
Composição
Monta as telas em molduras de navegador e celular, no layout, no fundo e no tamanho que você pediu.
-
04
Conferência
O agente abre cada arte antes de entregar. Banner de cookie, chat flutuante ou seção em branco voltam pra captura.
Seis jeitos de mostrar o mesmo site.
Telas em pé ou quadradas, como o feed de 1080×1350, ganham um arranjo vertical automático.
O fundo sai da paleta do site.
Mesma captura, sete fundos. Escolha um e veja a arte mudar.
Do Behance ao feed.
Cada arte sai em 1× e em 2×, no tamanho que você pedir. Os mais comuns:
Um comando, em qualquer agente.
O instalador aberto de skills da Vercel baixa a skill do GitHub e pergunta em quais agentes colocar: Claude Code, Codex, Cursor, Gemini CLI e outros. Na primeira vez, o agente instala o playwright-core dentro da pasta da skill. O navegador é o que você já tem.
npx skills add c0le0ni/skills --skill coleoni-thumb
/coleoni-thumb https://seusite.com.br
-g-a claude-code-a codexnpx skills add c0le0ni/skillsPeça do seu jeito.
O comando aceita o pedido em português. O agente traduz em opções e roda o script.
O conjunto padrão: split, devices, wall e phones.
/coleoni-thumb https://seusite.com.br
Formato de feed, com celulares no fundo da marca.
/coleoni-thumb https://seusite.com.br phones e devices no fundo da marca, 1080x1350
Direto no terminal, escondendo o banner de cookies.
node scripts/thumb.mjs https://seusite.com.br --set split:auto,wall:mesh --hide ".cookie-banner"
Tudo que o script aceita.
Pelo agente você não precisa decorar nada. Direto no terminal, é esta a lista.
| Opção | Para quê |
|---|---|
--set split:auto,phones:#1f2a24 | Pares exatos de layout e fundo |
--layouts a,b --bg x,y | Todos os layouts com todos os fundos |
--frame plain|browser | Moldura das telas de desktop |
--size 1536x1024 | Tamanho em 1×. O 2× sai junto |
--out docs/portfolio | Pasta de saída |
--name meu-projeto | Prefixo dos arquivos. Padrão: o título do site |
--label site.com.br | Texto da barra do navegador |
--column 1,2,5,9 | Seções da página longa, da parede e do tilt |
--phone-at 0,0.3,0.62 | Trechos da página nos três celulares |
--hide ".cookie,#chat" | Esconde elementos nas capturas |
--force-visible | Mostra elementos de animação de entrada que ficaram transparentes |
--motion | Captura sem movimento reduzido |
--wait 800 | Espera extra antes de capturar, em ms |
--desktop 1440x900 --mobile 390x844 | Viewports da captura |
--reuse | Reaproveita as capturas e só recompõe |
A próxima capa sai do próprio site.
npx skills add c0le0ni/skills --skill coleoni-thumb