Store Screenshots Panorama — capturas da App Store em faixa

Capturas de tela da loja — panorama

Cria conjuntos para a App Store a partir de capturas de tela brutas do aplicativo, que se leem como uma única superfície. O layout foi medido a partir de um conjunto de um grande aplicativo de marketplace; os objetos 3D e o herói vêm do conteúdo do próprio app. Os detalhes estão em references/style.md. Leia esse arquivo do início ao fim antes do primeiro conjunto: as decisões que o modelo não toma (cores, curvas, qual parte vem para frente, quais símbolos se tornam 3D, o layout do Duo) vêm de lá.

O usuário quer o resultado, não o processo. Não escreva arquivos de plano, especificação ou medição, e não pare para aprovação. Tome as decisões você mesmo, produza os conjuntos, verifique-os e entregue. Pergunte apenas quando uma entrada realmente faltar e não houver um padrão sensato — por exemplo, peça originais maiores se as capturas brutas forem mais estreitas que 1206px.

Regras principais

• A interface permanece pixel-exata. Capturas brutas e recortes delas são camadas de imagem simples. Não redesenhe, regenere com IA, traduza ou altere qualquer texto na tela. Os cards são apenas recortados do arquivo bruto com data-crop. Uma captura de tela da loja deve mostrar o aplicativo real; uma interface inventada custa confiança e a revisão da App Store.
• Cada dispositivo é mostrado com suas próprias capturas brutas. No iPhone Duo, a barra de guias e a barra de status ficam na lateral, e as visualizações divididas abrem na tela interna. Colocar uma captura de tela do iPhone em um quadro do Duo mostra o aplicativo como algo que ele não é; não faça isso. Se não houver capturas do Duo, faça os conjuntos do iPhone e informe ao usuário o que capturar para o Duo (style.md §10).
• O escurecimento é uma camada separada. A única coisa aplicada à tela é a camada .phone.dim; os pixels não mudam.
• A decoração vem do contexto. Os objetos 3D repetem o tema do aplicativo. Não pegue emblemas de campanha, fitas, linguagem de desconto ou sinais de mais e corações aleatórios de conjuntos de compras; eles fazem todo aplicativo parecer um anúncio de loja.
• Geração de IA ou 3D é apenas para objetos e o símbolo do herói, nunca com um telefone ou interface nele.
• Hardware não verificado não é desenhado. O quadro do Duo não tem câmera, dobradiça ou botões; suas posições não são verificadas.
• Nenhuma outra marca logotipos ou nomes.
• Alegações de superioridade ("o melhor", "número 1") apenas com uma fonte. Sem uma, escreva um benefício, não uma alegação.
• A barra de status permanece como está na captura de tela bruta.

Entradas e padrões

Entrada	Padrão
Capturas de tela brutas do iPhone	raw/ (1206×2622 ou maior), mostradas em ambos os temas. Ou raw-light/ e raw-dark/: o aplicativo no modo claro e no modo escuro, mesmos nomes de arquivo e tamanhos; cada tema então mostra o seu próprio (style.md §9).
Capturas de tela brutas do Duo	raw-duo-outer/ (tela externa) e raw-duo-inner/ (tela interna), mesma ordem e nomes de arquivo; por aparência raw-duo-outer-light/, raw-duo-outer-dark/ e assim por diante. Sem elas, nenhum conjunto Duo é feito.
Pasta de saída	out/
Conjuntos de dispositivos	iPhone 6,9" (1320×2868) e 6,3" (1206×2622): ambos são necessários (style.md §4). Com capturas do Duo, Duo externo (1398×2034) e interno (2007×2853).
Idioma	O idioma das capturas brutas. Os títulos são escritos por idioma; os recortes são medidos a partir das capturas desse idioma.
Tema	both: claro e escuro. Se o usuário nomear um, faça apenas esse.
Cores	Derivadas das capturas brutas (style.md §1, §9)
Mensagens e símbolos 3D	Você os deriva das capturas brutas (style.md §6, §8)

Saída: <out>/<lang>/<theme>/<device>/01.png … NN.png. O tema é light ou dark; o dispositivo é iphone-6.9, iphone-6.3, duo-outer ou duo-inner. Os arquivos HTML fonte e as pré-visualizações permanecem em <out>/.src/; não os exclua, para que o usuário possa alterar o texto e renderizar novamente. Se a pasta de saída já contiver arquivos de outro conjunto, não os toque; se algo entrar em conflito, escolha uma nova subpasta e informe.

Arquivos

• references/style.md: funções de cor, fundo, título, dispositivos, técnicas de destaque, objetos 3D do contexto, herói, tom do texto, tema escuro, iPhone Duo.
• assets/panorama.html: o modelo. Molduras de dispositivo (iPhone, Duo externo, Duo interno), título, recortes (card pop-out, destaque, moldura, chip), escurecimento, objetos 3D fofinhos (.obj: crescente, estrela, brilho, bolha, play, nota, coração, orbe, ou seu próprio caminho), o objeto herói e pastas brutas por tema (RAW) estão prontos; as medidas do layout são fixas. Copie-o e edite apenas a paleta, as formas de fundo, as imagens e RAW.
• scripts/render.mjs: divide o panorama em PNGs. node <skill>/scripts/render.mjs <panorama.html> --out <dir> --theme light|dark --device iphone|duo-outer|duo-inner [--size WxH] [--preview <png>] [--only 2,5] [--no-slices]. O tamanho padrão de cada dispositivo é um aceito pelo App Store Connect; para o iPhone, o padrão é 6,9", passe --size 1206x2622 para 6,3". O campo warnings de sua saída JSON lista problemas de tamanho, proporção e alfa, erros de página, e avisos de contraste e recorte (WARN:).
• scripts/grid.mjs: desenha uma grade de pixels rotulada e caixas de teste sobre uma captura de tela bruta, para medir recortes. node <skill>/scripts/grid.mjs raw/02.png --out <png> [--box x,y,w,h]. Um recorte adivinhado visualmente se desvia quando é dimensionado, portanto meça cada recorte na grade.

Requer Node 18+ e Chrome (ou Chromium, Edge, Brave); defina CHROME_PATH se não for encontrado. A fonte dos títulos é SF Pro Display no macOS e Inter (Google Fonts) em outros lugares.

Fluxo de trabalho

1. Inspecione as capturas de tela brutas. Verifique o tamanho em pixels de cada arquivo, para que serve cada tela e o texto nela. Anote o assunto e os símbolos do aplicativo: ícone, ícones de guias, ilustrações nas telas. Os objetos 3D e o símbolo do herói são escolhidos a partir deles. Escolha o destaque (A): a cor dos botões, a guia selecionada ou o logotipo. Derive a paleta de A conforme style.md §1. Para amostrar cores, use magick <png> -format "%[hex:p{x,y}]" info: ou a imagem da grade. Verifique se as pastas Duo existem e têm os tamanhos corretos (style.md §10). Verifique quais pastas brutas existem e escolha a pasta de cada tema (style.md §9). Com pastas clara e escura, verifique se elas contêm os mesmos nomes de arquivo nos mesmos tamanhos de pixel e mostram o mesmo estado (conteúdo, posição de rolagem, horário).
2. Planeje o conjunto em sua cabeça; não o escreva. Ordem: o herói, depois as telas em ordem de valor. Para cada imagem, decida: o título, a cor da zona do título (A ou o segundo fundo, em grupos de 2–3), a principal técnica de destaque e a parte a ser recortada. Qualquer parte que prove o ponto da tela é o destaque principal. Em seguida, espalhe os objetos 3D sobre as emendas. Os conjuntos Duo contam a mesma história: mesma ordem, títulos, paleta e símbolos.
3. Meça os recortes. Execute grid.mjs para cada parte, observe a imagem, tente a caixa com --box e observe novamente. A caixa deve envolver o elemento com um pouco de ar, não cortar texto e não incluir interface vizinha. Meça também o raio do canto do card (data-r). Meça os recortes do Duo separadamente, a partir de seus próprios arquivos brutos. Meça nas capturas de tela claras. Com uma pasta escura, tente as mesmas caixas nas escuras também (grid.mjs raw-dark/02.png --box …): os recortes são compartilhados, portanto devem envolver o mesmo elemento em ambos.
4. Construa o panorama do iPhone. Copie assets/panorama.html para <out>/.src/panorama.html: - Altere a paleta em :root. - Defina RAW no script: { light: 'raw-light', dark: 'raw-dark' } com duas pastas, { light: 'raw', dark: 'raw' } com uma. Escreva cada caminho com a pasta clara; a renderização escura a troca. - Escreva uma <section class="shot"> para cada imagem. Dê data-raw para os recortes; os caminhos são relativos à pasta .src onde o HTML está (../../raw/… quando a saída for out/, ../../../raw/… para out/x/). Os valores de recorte e cor no modelo são apenas exemplos; meça todos para este aplicativo. - Desenhe as formas de fundo em svg.bg, em coordenadas do panorama: decida primeiro a sequência de cores das zonas de título, depois roteie as formas para combiná-la. - Coloque os objetos 3D nas emendas como filhos diretos de .pano. Coloque o objeto herói na primeira seção. - Exclua as seções e objetos de exemplo.
5. Construa os panoramas do Duo (se houver capturas do Duo). Copie o panorama do iPhone para .src/panorama-duo-outer.html e .src/panorama-duo-inner.html e adapte-os conforme style.md §10: os mesmos títulos, paleta e símbolos; novos recortes; cards, objetos e formas de fundo dispostos novamente para a altura de design; RAW definido para as pastas Duo (por exemplo, { light: 'raw-duo-outer-light', dark: 'raw-duo-outer-dark' }).
6. Renderize. Uma execução por tema e dispositivo (para escuro, --theme dark e dark): R=<skill>/scripts/render.mjs; S=<out>/.src; O=<out>/<lang>/light node $R $S/panorama.html --theme light --device iphone --out $O/iphone-6.9 --preview $S/preview-light.png node $R $S/panorama.html --theme light --device iphone --out $O/iphone-6.3 --size 1206x2622 node $R $S/panorama-duo-outer.html --theme light --device duo-outer --out $O/duo-outer --preview $S/preview-light-duo-outer.png node $R $S/panorama-duo-inner.html --theme light --device duo-inner --out $O/duo-inner --preview $S/preview-light-duo-inner.png Corrija todos os avisos; para um aviso de contraste, ajuste a paleta. Cada imagem é sua própria execução do Chrome (~10 s). Enquanto corrige, renderize apenas as imagens alteradas com --only 2,5, ou apenas a pré-visualização com --no-slices --preview …; renderize tudo do zero antes da entrega.
7. Observe e corrija. Observe primeiro as pré-visualizações, depois cada imagem, e percorra a lista de verificação. Corrija e renderize novamente. Não entregue uma imagem que você não tenha observado: um recorte deslocado, uma curva atrás de um título ou um objeto cobrindo um card só aparece na imagem. O conjunto de 6,3" é o conjunto de 6,9" reduzido; observar um é suficiente, mas verifique a contagem de arquivos e o tamanho de ambos.
8. Entregue. Dê brevemente as pastas, os conjuntos de dispositivos, o número de imagens, o título de cada imagem e qual pasta bruta cada tema usou. Se uma captura de tela escura mostrou um estado diferente, nomeie as telas para recapturar. Se nenhum conjunto Duo foi feito, diga por que e o que precisa ser capturado. Mencione que alterar o texto requer apenas editar o HTML em .src/ e executar os comandos da etapa 6.

Se um conjunto de referência for fornecido

Se o usuário fornecer as capturas de tela da loja de outro aplicativo como referência, substitua os valores de layout em style.md por medições desse conjunto: - Observe as imagens uma por uma, depois lado a lado, e meça-as em resolução total: fundo e continuidade, título, dispositivo, técnicas de destaque, decoração, imagens especiais, ritmo e tom. - Não adicione nada que a referência não tenha. - Se a proporção da referência diferir da da saída, transporte as medições relativas à largura. Prenda elementos no topo ao topo e elementos cortados na parte inferior à parte inferior. - Tire apenas estilo e layout da referência. Nunca copie seu logotipo, nome da marca, mascote, fotos ou texto. Traduza sua decoração para o contexto do próprio aplicativo também. - Também não escreva arquivos para as medições.

Lista de verificação

• warnings está vazio para cada tema e dispositivo? Cada arquivo tem o tamanho correto, sem canal alfa? Cada conjunto de dispositivo tem o mesmo número de imagens? - Nas pré-visualizações, as formas de fundo e os objetos de emenda continuam por toda emenda? - Há uma curva na zona do título (y 0–650)? As cores do título combinam com seu fundo e mudam em grupos de 2–3? - O título tem o mesmo tamanho em todas as imagens? Algum título que não seja do herói ultrapassa 2 linhas? - O dispositivo está no mesmo lugar em todas as imagens? Alguma parte importante da interface está sob os cantos arredondados ou a Dynamic Island? - Cada recorte mostra exatamente o que deveria? Algum texto cortado, ou fragmentos de interface vizinha em suas bordas? O card está nítido? - A borda de um card pop-out corta uma linha de texto na tela escurecida abaixo pela metade? O texto aparece através das lacunas de uma grade de cards? - Se o objeto herói se espalha para a imagem 2, ele toca um card ou texto lá? Os cards do herói se escondem atrás da borda, ou parecem estar se dissolvendo? - Os objetos 3D vêm do tema do aplicativo? Eles cobrem o título, um card ou texto importante da interface? No máximo 2 objetos por imagem? - O símbolo é reconhecível no herói? Os cards ficam dentro dele ou na frente dele? - O tema escuro é escuro dominante (nenhuma grande área plana de A; A apenas em títulos, objetos e molduras)? A borda do dispositivo, os cards e os objetos se destacam do fundo? O layout é o mesmo em ambos os temas? - Com capturas de tela em modo escuro: o conjunto escuro mostra a interface escura no dispositivo e em todos os recortes, e o conjunto claro mostra a interface clara? Cada recorte compartilhado mostra o mesmo elemento em ambos? - Nos conjuntos Duo, cada tela vem de uma captura de tela bruta do Duo? Os cards, objetos e formas de fundo cabem na tela curta do Duo; a parte inferior do dispositivo ou de algum card está cortada? A guia lateral e a barra de status sobrevivem corretamente aos recortes? - Os caracteres específicos do idioma estão corretos (por exemplo, İ, ı, ş, ğ do turco)? (<html lang> deve corresponder ao idioma.)