Ativos Web, Polimento e Lançamento

O que Ativos Web, Polimento e Lançamento faz?

Uma rotina curta para o trabalho de finalização em um site que já existe. Ela abrange as etapas visuais e de envio do skill futuristic-web-design, empacotadas para que possam ser executadas sozinhas.

Se ../futuristic-web-design/ estiver ao lado deste skill, seus arquivos de referência contêm os detalhes: references/assets.md para prompts e comandos ffmpeg, references/ship.md para as verificações, o formulário, implantação, domínio e a lista de verificação de lançamento completa.

Faça apenas a parte que o usuário solicitou. Cada subtítulo abaixo é independente.

Preparar arquivos para a web

A saída de geradores e câmeras é muito pesada para enviar. Um visitante com dados móveis espera por cada byte, enquanto um laptop lendo do próprio disco esconde o problema.

Obtenha aprovação antes de instalar ferramentas como ffmpeg ou sharp. Algumas compilações de ffmpeg não têm codificador WebP; cwebp ou sharp faz o mesmo trabalho se um já estiver instalado.

Armazene arquivos com nomes descritivos em public/images/ no Next.js. Em um site HTML simples, mantenha-os em uma pasta images/ ao lado da página: na Vercel, um site sem framework serve apenas a pasta public/ quando ela existe, o que esconderia a própria página.

Arquivo	Alvo
Imagem hero	WebP, no máximo 1920px de largura, aproximadamente 300 KB
Outras imagens	WebP, no máximo cerca de 1000px de largura, aproximadamente 150 KB
Vídeo hero (hero.mp4)	H.264 MP4, no máximo 1080p, áudio removido, abaixo de 4 MB
Poster (hero-poster.webp)	O primeiro quadro do vídeo

Finalize com uma tabela de tamanhos antes e depois, para que a economia seja mostrada, não apenas afirmada.

Escrever prompts para imagens e vídeo

Estes são adequados para o Google Flow ou qualquer outro gerador. Se você puder gerar diretamente, obtenha aprovação antes de gastar créditos. Se não puder, entregue os prompts ao usuário e continue com espaços reservados claramente marcados.

• Lista de tomadas primeiro. Decida os ativos e suas proporções antes de gerar: cerca de sete para um site de página única (vídeo hero, imagem hero, três fotos de oferta, uma imagem de história, uma imagem de compartilhamento).
• O briefing de imagem, seis partes em ordem: assunto, cenário, iluminação, câmera (altura, lente, profundidade de campo), clima e paleta, formato (16:9 hero, 4:5 produto). Peça por rótulos em branco, porque geradores distorcem letras e o texto real pertence ao HTML.
• A linha de estilo. Extraia as frases de iluminação, câmera e clima-e-paleta da primeira imagem aprovada e reutilize-as palavra por palavra em todos os prompts posteriores. Isso é o que faz o conjunto parecer uma única sessão de fotos.
• Vídeo hero. Anime a imagem estática aprovada, descreva um pequeno movimento e declare que todo o resto permanece congelado com uma câmera fixa.
• Clipe de vista explodida. Imagem de abertura: o produto montado, pequeno e centralizado, com espaço vazio onde as partes irão. Imagem de fechamento: construída a partir da imagem de abertura, nunca do zero, com as partes espaçadas ao longo de um eixo reto e o mesmo ponto de vista, luz e fundo. O clipe vai da primeira imagem à segunda com uma câmera travada.

Mantenha pessoas reais e logotipos de terceiros fora dos ativos gerados e mostre produtos reais de um negócio real.

Celular, polimento e velocidade

• Verificação para celular a 390px. Texto legível, nada pressionado contra a borda, alvos de toque de cerca de 44px, sem rolagem horizontal, um menu de alternância funcional. Corrija como uma lista itemizada e role novamente. Um navegador de desktop redimensionado apenas aproxima um celular, portanto, peça uma verificação em um dispositivo real e informe se nenhuma foi feita.
• Polimento. Lacunas uniformes entre as seções, tamanhos iguais para cabeçalhos de mesmo nível, estilos de foco e hover em todos os elementos interativos, nenhuma rota de pré-visualização sobressalente.
• Velocidade. Perfil sob uma predefinição móvel e nomeie as três melhorias de maior impacto, começando pela maior. Onde uma significa descartar algo que o usuário valoriza, sinalize para a decisão dele.

Liste o que encontrar antes de alterar qualquer coisa que o usuário não pediu para ser alterada.

Chaves

• .env.local contém as chaves e está listado em .gitignore.
• O código do site usa apenas chaves públicas. Chaves secretas ou de serviço nunca chegam ao código do cliente.
• Pesquise o código e o histórico do git em busca de segredos e relate o que foi verificado.
• Um segredo que foi servido no código da página ou confirmado no git está exposto, mesmo que o repositório nunca tenha sido enviado: os visitantes podiam ler a página e o histórico viaja com cada cópia e cada envio futuro. Removê-lo do arquivo não desfaz isso. Diga ao usuário para rotacioná-lo no painel do provedor, independentemente do valor que pareça ter.

Busca e compartilhamento

• Título de no máximo 60 caracteres e descrição de no máximo 155, informando o que é vendido e onde. O nome da marca sozinho não significa nada para um estranho.
• Imagem de compartilhamento de 1200x630 em public/images/share.webp, definida como imagem Open Graph e Twitter.
• Favicon, sitemap e arquivo robots.
• Defina o domínio de produção como URL base para que a imagem de compartilhamento e o sitemap sejam resolvidos. Pergunte se for desconhecido.

Implantar

Implante apenas quando o usuário pedir.

• Conecte o repositório à Vercel. Cada envio para o branch principal então reimplanta a produção.
• Insira os valores de .env.local nas configurações do projeto do host. Um formulário que funciona localmente e quebra em produção quase sempre está faltando esses valores.
• Em uma compilação com falha, leia o log e corrija a causa raiz.
• Verifique na URL de produção a partir de um celular com dados móveis: carregue a página, envie o formulário e procure pela linha armazenada.
• Cole o link em um aplicativo de mensagens para verificar o cartão de pré-visualização.

Relate honestamente: o que foi verificado, o que não pôde ser (um celular físico, o domínio de produção) e o que resta para o usuário.