app-preview-craft — capturas de tela para lojas, cartões sociais e vídeos 3D de dispositivos
Tudo que esta skill produz é uma página (stage/stage.html) modelada por um tema e capturada pelo Chrome headless: as imagens estáticas são capturadas de tela e finalizadas pelo sharp; os vídeos são renderizados quadro a quadro e enviados para o ffmpeg. A mesma página alimenta o estúdio de pré-visualização, portanto o que o usuário vê lá é exatamente o que o CLI exporta.
0. Encontre a skill e configure-a uma vez
Os caminhos abaixo são relativos ao diretório que contém este SKILL.md. Resolva-o uma vez e prefixe os comandos com ele — $SKILL representa esse diretório em todo o documento:
SKILL=/caminho/absoluto/para/app-preview-craft # a pasta com SKILL.md, scripts/, stage/
# não tem certeza de onde foi instalado? (pastas de skills, depois o cache de plugins do Claude Code)
find ./.claude/skills ./.agents/skills ./.goose/skills ~/.claude/skills ~/.agents/skills \
~/.gemini/skills ~/.config/goose/skills ~/.claude/plugins \
-path '*app-preview-craft*/scripts/cli.mjs' 2>/dev/null | head -1
Depois verifique a máquina. --fix executa npm install dentro da skill quando os pacotes estão faltando:
node "$SKILL/scripts/doctor.mjs" --fix
O doutor deve terminar com Ready. (Pronto). A falta do ffmpeg é apenas um aviso (imagens estáticas ainda funcionam). Se ele reportar que não há WebGL, os temas 3D não podem ser renderizados — informe isso ao invés de silenciosamente mudar para temas planos.
As saídas vão para o diretório em que o usuário está trabalhando (o cwd do shell) a menos que ele nomeie outra pasta com --out. Nunca escreva renderizações dentro de $SKILL. O estado temporário fica em $TMPDIR/app-preview-craft/ e é removido após cada execução.
1. Fluxo de trabalho
-
Escolha a categoria (o primeiro argumento do CLI) a partir do que o usuário pediu:
Categoria Produz Tamanho padrão app-storeUm conjunto: uma captura de tela por slide, por tamanho, mais overview.pngiphone-6.91320×2868social-cardUm cartão (ou --allslides) para og/X/LinkedIn/Instagram/storyog1200×630screen-videoAnimação 2D apenas das telas; aceita gravações de tela reel1080×1920device-videoVídeo de vitrine 3D com three.js reel1080×1920device-mockupImagem estática 3D de herói, opcionalmente transparente mockup-landscape2400×1600 -
Reúna o conteúdo. Capturas de tela (PNG/JPG/WebP) e/ou gravações (MP4/MOV/WebM) do projeto do usuário, uma por slide, em ordem. Escreva o texto você mesmo, a menos que o usuário o tenha fornecido (veja §4). Sem telas, o aplicativo de amostra incluído "Tempo" é usado — bom para mostrar temas, nunca para um entregável.
-
Escolha um tema. Um tema que o usuário nomeie vence. Para conjuntos da App Store, corresponda a categoria do aplicativo na loja com a tabela na §3 e diga qual tema você escolheu e por quê. Quando o usuário estiver indeciso, mostre as opções primeiro:
node "$SKILL/scripts/cli.mjs" gallery app-store # → ./gallery-app-store.pngLeia a folha de volta (para que ela seja renderizada para o usuário) e deixe-o escolher. O estúdio (§8) é a melhor resposta quando ele quiser navegar e ajustar visualmente.
-
Renderize.
node "$SKILL/scripts/cli.mjs" app-store shots/01.png shots/02.png shots/03.png \ --theme ledger \ --title "Cada euro, *contabilizado*" --title "Orçamentos que *se adaptam*" --title "Privacidade *por design*" \ --subtitle "Benefício em uma linha…" --subtitle "…" --subtitle "…" \ --size iphone-6.9,ipad-13 --set palette.accent=auto -
Inspecione antes de relatar. Leia
overview.png(conjuntos), a imagem estática, ou extraia quadros de um vídeo (--frames 1,4,mid,endrenderiza quadros PNG em vez de um vídeo — barato para verificar a animação). Procure por manchetes cortadas, texto sobre o dispositivo, dispositivo cobrindo decorações, telas vazias. Corrija com--set/substituições por slide e re-renderize. -
Relate os caminhos de saída, o tema e o tamanho, e — sempre que um dispositivo 3D aparecer — que
CREDITS.txtfoi escrito e que o crédito CC-BY deve acompanhar as imagens (§7).
2. Tamanhos
node "$SKILL/scripts/cli.mjs" list sizes --category app-store imprime a tabela. Qualquer LxA também funciona. Vários de uma vez: --size iphone-6.9,iphone-6.5,ipad-13.
- App Store Connect requer o conjunto de 6,9" (
iphone-6.9) para aplicativos iPhone eipad-13para aplicativos iPad; outros tamanhos são opcionais. A saída PNG é achatada (a Apple rejeita alfa). - Tamanhos de tablet trocam automaticamente o telefone por uma moldura de tablet plana, a menos que o tema seja sem moldura. Forneça capturas de tela do iPad para esses slides quando o aplicativo as tiver.
- Vídeos de pré-visualização do aplicativo:
--size app-preview(886×1920) ouapp-preview-ipad, 15–30 s, 30 fps. Uma faixa AAC estéreo silenciosa é adicionada automaticamente (o Connect espera áudio). - Google Play:
play-phone,play-tableteplay-feature(1024×500, cartão social).
3. Temas
list themes --category <c> imprime estes com seus layouts. Cada categoria tem ≥ 5.
app-store — cada um modelado a partir de uma categoria popular de aplicativo
| Tema | Categoria do aplicativo | Inspirado por | Aparência |
|---|---|---|---|
stride | Saúde e Bem-Estar | Strava, Nike Run Club | laranja vibrante, pills condensadas em caixa alta, listras de velocidade, telefone angulado |
ledger | Finanças | Revolut, Monzo, Robinhood | mesh meia-noite, palavras com gradiente menta→ciano, orbes cromados |
serene | Saúde e Mindfulness | Calm, Headspace | aurora pastel, serifa itálica como acento, tela sem moldura sobre uma bolha suave |
canvas | Produtividade | Notion, Things, Linear | papel quente, grade de caderno, serifa grande, telefone de tinta plana |
sizzle | Comida e Bebida | DoorDash, Uber Eats, Deliveroo | amarelo ensolarado, bolinhas, destaques de marcador vermelho, telefone inclinado |
wander | Viagem | Airbnb, Hopper, Booking | gradiente crepuscular com um sol retrô que percorre todo o conjunto (panorama) |
mixtape | Música e Áudio | Spotify, Apple Music | sua tela desfocada como um fundo brilhante, palavra gigante em contorno |
arcade | Jogos | Apple Arcade, arte de lançamento de jogos para celular | grade synthwave, bordas neon, brinquedos 3D brilhantes |
snapshot | Foto e Social | Instagram, BeReal, VSCO | três fotos sem moldura dispostas como impressões, mesh de filme quente |
pulse | Dados de saúde e Wearables | Oura, WHOOP, Apple Health | preto clínico, brilho carmesim, manchete abaixo de um Pro Max frontal |
Os temas emprestam um clima, nunca uma marca: nenhum logotipo, nome ou arte desses aplicativos aparece.
social-card
launch (aurora + telefone inclinado), spotlight (feixe + piso espelhado), pastel-fan (três telas em leque), bento (grade de recortes de tela), neon-grid (synthwave), editorial (papel, serifa, tela duotônica), duo (MacBook + telefone — passe uma tela desktop para o laptop).
screen-video (2D)
carousel, stack (cartões voam), scroll (capturas longas rolam dentro do telefone), zoom-tour (Ken Burns em tela cheia para o focus de cada slide), wall (parede inclinada de telas), store-preview (estilo de prévia da App Store — use --size app-preview), grid-reveal.
device-video (3D)
turntable, orbit (câmera em arco), float (repetível), rise (câmera se aproxima), flip (revelação de trás → frente), trio (três modelos se abrem), desk (tampa do MacBook abre, telefone desliza ao lado; ambos sobre scene.floor), spotlight (360° em um espelho), synthwave, keyframes (seu próprio dispositivo e câmera se movem, a partir de motion.keys — veja §5).
device-mockup (imagens estáticas 3D)
studio, noir, pedestal, levitate, lineup (todos os modelos de telefone), flatlay, desk-duo. Adicione --transparent para um PNG recortado.
4. Texto
- Manchete por slide: ≤ 6 palavras, um benefício, não uma característica. Envolva 1–2 palavras em
*asteriscos*para destacá-las no estilo do tema;" | "força uma quebra de linha. - Subtítulo: uma frase curta. Kicker (opcional): uma palavra de rótulo acima.
- Os dois primeiros slides carregam a proposta — a maioria dos compradores nunca rola além.
- Nunca invente avaliações, contagens de downloads, prêmios ou citações da imprensa. Decorações como
ratingelaurelssão para números reais que o usuário fornece; pergunte quando não tiver certeza. - Não nomeie concorrentes nem use marcas registradas da Apple/Google no texto além do que as diretrizes da loja permitem.
5. Configurando qualquer coisa
Ordem de resolução, a última vence:
base embutido → padrões de layout → tema (e sua cadeia extends) → arquivo de tema personalizado → configuração do projeto themeOverrides → atalhos do CLI → --set → theme por slide.
- Atalhos:
--layout --device --finish --pose --font --body-font --bg --bg2 --bg3 --ink --sub --accent --accent2 --background --pattern --background-image --clean-status-bar --no-decor --duration --fps --speed --intro --outro. --set caminho=valoralcança qualquer chave de tema (repetível).list optionsimprime os caminhos documentados com tipos e intervalos. Os valores são coagidos; JSON funciona para listas/objetos:--set device.pose=5,-15,4 --set 'decor=[{"kind":"sparkles","count":8}]'.device.poseéx,y,zgraus. Os temas permanecem dentro de aproximadamente ±20° de guinada e ±6° de rolagem para que a tela ainda seja legível no tamanho de miniatura da loja; poses mais íngremes funcionam, mas custam legibilidade.- As cores aceitam
auto= a cor mais vívida na primeira captura de tela:--accent auto. --device iphone-17-pro | iphone-17-pro-max | iphone-12-pro | galaxy-s21-ultra | macbook-pro-16 | flat[:phone|phone-android|tablet|browser] | frameless | none, ou o id do modelo do próprio usuário (§7).- Os layouts são intercambiáveis dentro de um tipo (
list layouts): imagens estáticas —hero-top,hero-bottom,tilt,duo,fan,split,big-type,callout,bento,laptop-phone,showcase,pedestal,lineup,flatlay; vídeos —carousel,stack,scroll,zoom-tour,wall,phone-swap,grid-reveal,turntable,orbit,float,rise,flip,trio,desk,spotlight,keyframes. - Seu próprio movimento: o layout
keyframesmove um dispositivo 3D e a câmera através demotion.keys, uma lista de{ "at": 0..1, "x", "y", "size", "pose": [rx, ry, rz], "cam": { "yaw", "pitch", "dist" }, "ease" }.até uma fração do vídeo inteiro; um valor que uma chave omite mantém o da chave anterior; a primeira chave começa a partir da pose do próprio tema. Eases:linear inOutCubic inOutSine outCubic outQuart outBack inOutQuart outExpo.--theme keyframes --set 'motion.keys=[{"at":0,"y":1.4,"pose":[0,70,0]},{"at":0.3,"y":0.62,"pose":[4,-20,3],"ease":"outQuart"},{"at":1,"pose":[0,15,0],"cam":{"dist":0.9}}]'. Nenhuma biblioteca de animação está envolvida: cada quadro é uma função pura do seu tempo, que é o que permite que os quadros sejam renderizados fora de ordem. Verifique um movimento com--frames 0,2,mid,end.
Temas personalizados são arquivos JSON (ou .mjs) com qualquer subconjunto de chaves de tema mais extends:
{ "extends": "app-store/ledger", "name": "Acme", "palette": { "accent": "#ff5a1f" },
"type": { "display": "bricolage", "weight": 800 }, "device": { "finish": "#1c1f24" } }
Passe --theme caminho/para/acme.json, ou coloque-o em ./.app-preview-craft/themes/ (ou ~/.app-preview-craft/themes/) e use --theme acme. list themes mostra os personalizados.
Configuração do projeto. node "$SKILL/scripts/cli.mjs" init app-store escreve app-preview-craft.json; depois disso node "$SKILL/scripts/cli.mjs" (sem argumentos) o renderiza, e as flags ainda o sobrescrevem. $SKILL/examples/app-preview-craft.json é um exemplo completo e funcional: texto por slide, decorações e substituições de tema, um arquivo de tema personalizado, uma tela e uma lista jobs que renderiza um conjunto da App Store, um cartão social, um mockup e um vídeo em um único comando. Caminhos em uma configuração são resolvidos relativamente ao arquivo de configuração.
Chaves por slide: screen, desktop (tela do laptop), title, subtitle, kicker, theme (substituições apenas para aquele slide), decor (substitui a decoração do tema para aquele slide), focus: [x, y, zoom] (alvo do zoom-tour), hold (segundos em um vídeo), trim: [inicio, fim] e at (qual segundo de uma gravação uma imagem estática usa), bigWord (layout big-type).
Itens de decoração são {kind, x, y, scale, rotate, style, layer, delay, …} com x/y como frações da página e style como um de glass | solid | light | dark | outline:
| kind | chaves extras |
|---|---|
badge | text, icon (star bolt heart check sparkle trophy leaf lock music pin flame bell chart shield globe play) |
rating | score, label, starColor |
laurels | top, text, bottom |
chips | items[], icons[], width, lead |
notification | app, title, body, time, icon (caminho da imagem) ou glyph, width |
stat | label, value, trend, trendColor |
callout | rect: [x, y, w, h] da captura de tela a ampliar, w, border, radius |
arrow | w, h, text (nota manuscrita), flip, stroke |
logo | name, src (caminho do ícone do aplicativo) |
store-badge | top, text, ou src para a arte oficial do selo |
sparkles confetti | count, colors[], area: [x0, y0, x1, y1], seed |
blob | size, color, opacity (fica atrás do dispositivo) |
orbs rings shapes | Primitivas 3D: count, shapes[], finish (glossy chrome matte glass iridescent), area, items[] |
credit | text (padrão é a linha de crédito do modelo) |
6. Telas e tratamentos
- sharp prepara cada captura de tela antes do Chrome iniciar:
screen.cleanStatusBar(redesenha uma barra de status iOS 9:41 / bateria cheia — apenas capturas em formato de telefone),tint+tintAmount,duotone: "#escuro,#claro",saturate,brightness,sharpen, e um fundo pré-desfocado para fundosblur-shot. - Em modelos iPhone, a Ilha Dinâmica é desenhada como uma pílula preta unificada sobre os recortes de pílula e câmera do modelo, correspondendo ao que o iOS mostra. Forneça capturas de tela com a área da ilha limpa (qualquer captura normal do iOS é);
cleanStatusBarmantém a hora e os ícones em ambos os lados. - Uma captura mais alta que a tela rola em vídeos (tema
scroll) e mostra seu topo em imagens estáticas (screen.fit=top). - As gravações são divididas em quadros pelo ffmpeg na taxa de quadros de saída; em vídeos, o slide de cada gravação dura tanto quanto o clipe (substitua com
hold, corte comtrim). Imagens estáticas usam um quadro (at, padrão: o meio). - Telas de laptop colocam em letterbox uma captura de telefone sobre uma cópia desfocada, a menos que o slide tenha uma tela
desktop.desktoptambém aceita uma gravação. No layoutdeske nos temas de dispositivo-video que o herdam, o laptop e o telefone compartilham o tempo.
7. Modelos 3D
Inclusos (.glb na pasta models/ de $SKILL): iphone-17-pro, iphone-17-pro-max, iphone-12-pro, galaxy-s21-ultra, macbook-pro-16. Suas texturas de tela são neutras — a captura do usuário as substitui durante a renderização.
Seu próprio modelo: qualquer arquivo .glb rotulado com o nó DEVICE (que o three.js pode seguir) e os nós-filho SCREEN (opcional: SCREEN2 para segunda tela, SCREEN3, SCREEN4 — uma matriz de telas). model.offset: [x, y, z, rx, ry, rz, ss] ajusta o alinhamento. Passe-o com --device caminho/para/seu/modelo.glb ou por device.model na configuração. Nós-filho são opcionais; sem SCREEN, a tela é uma textura plana no mesmo lugar.
Crédito: o CLI escreve CREDITS.txt na pasta de saída toda vez que um modelo 3D (incluídos ou seus) aparece em uma renderização. Os modelos incluídos usam uma licença Creative Commons BY (CC-BY 4.0) sem custos, com a condição de que esta linha de crédito acompanhe a imagem sempre que os modelos forem redistribuídos ou exibidos:
Modelo de dispositivo 3D de app-preview-craft (CC-BY 4.0)
Seu(s) próprio(s) modelo(s) têm sua própria licença — diga ao usuário para verificar e fornecer a atribuição correta. O CREDITS.txt incluirá sua linha credit da chave model se a licença a exigir.
8. Estúdio (a prévia é o editor)
node "$SKILL/scripts/cli.mjs" studio shots/
Isso abre uma página que se parece com a prévia de um conjunto da App Store, mas clicar em qualquer coisa a edita: tema, dispositivo, layout, pose, paleta, fonte, texto, decorações — o URL mantém o estado, então copie-o para compartilhar uma sessão ou executive studio --no-open (apenas gera o URL e o imprime). O estúdio renderiza em tempo real. Quando o usuário gostar do resultado, clique no botão de exportação (uma nuvem de download) em qualquer prévia para baixar aquele slide como PNG, ou clique em "Exportar conjunto" para renderizar todos os slides via CLI. Use --screen pasta/ para que as capturas de tela carreguem do disco (arrastar e soltar também funciona no navegador).
9. Dicas e avisos
- Imagens estáticas são capturadas com resolução de 2×. Vídeos são renderizados em 1×. Ajuste
--scalepara obter maior resolução ou trocar velocidade por qualidade. - Um tema 3D que não renderiza pelo WebGL degrada silenciosamente para o layout flat do mesmo tema, se existir. O CLI informa, a menos que
--quiet. - As saídas da App Store devem ser PNG achatado (sem canal alfa). O sharp o achata. Imagens de mockup com
--transparentproduzem PNG com alfa. --frames Nextrai até N quadros igualmente espaçados de uma animação (ou vídeo) como PNG. O caminho do quadro contém o número do quadro (por exemplo,frame-0042.png).- Para verificar a legibilidade, reduza o zoom no arquivo de saída para o tamanho da loja — o Chrome do CLI já o renderizou em 2×; o que parece bom em 100% no monitor pode ficar apertado em 50%.
- Variáveis de ambiente:
APP_PREVIEW_CRAFT_THEMES(caminho para uma pasta adicional de temas personalizados),APP_PREVIEW_CRAFT_CACHE(substitui o cache padrão em$TMPDIR/app-preview-craft),APP_PREVIEW_CRAFT_NO_COLOR,APP_PREVIEW_CRAFT_DEV(mapas de origem e recarregamento a quente).
10. Exemplo de sessão do início ao fim
# 1. Encontre e instale
SKILL=$(find ~/.claude/skills -path '*app-preview-craft*/scripts/cli.mjs' 2>/dev/null | head -1 | xargs dirname | xargs dirname)
node "$SKILL/scripts/doctor.mjs" --fix
# 2. Reúna o conteúdo
ls -1 shots/ # 01.png 02.png 03.png 04.png
# 3. Navegue pelos temas da App Store
node "$SKILL/scripts/cli.mjs" gallery app-store --out preview.png
# (mostra a galeria para o usuário)
# 4. Renderize o conjunto
node "$SKILL/scripts/cli.mjs" app-store shots/*.png \
--theme ledger \
--title "Gaste com *sabedoria*" --title "Economias *inteligentes*" --title "Metas *alcançáveis*" --title "Juntos *crescemos*" \
--subtitle "Acompanhe cada centavo em tempo real" --subtitle "Veja seu dinheiro render mais" --subtitle "Defina metas e receba alertas" --subtitle "Convide sua família para economizar" \
--size iphone-6.9,ipad-13 --set palette.accent=auto
# 5. Inspecione
ls -la *.png # overview.png, slide-1.png, ...
# 6. Crie também um cartão social e um vídeo
node "$SKILL/scripts/cli.mjs" social-card shots/01.png --theme launch --size og
node "$SKILL/scripts/cli.mjs" device-video shots/*.png --theme turntable --size reel --duration 10
11. Licença
O código e a documentação são distribuídos sob a licença MIT. Modelos de dispositivos 3D incluídos são CC-BY 4.0 (veja §7). O CLI grava CREDITS.txt nos diretórios de saída quando modelos 3D são usados.