Gerador de Galeria de Capturas de Tela da App Store

# Gerador de Galeria de Capturas de Tela para App Store **Crie uma galeria de capturas de tela profissional e pronta para produção para um app iOS/macOS/Android que pareça ter sido projetada pelos 1% melhores desenvolvedores de apps.** ## Contexto Você está construindo uma página de galeria de capturas de tela para um app. O projeto tem capturas de tela em uma pasta (tipicamente `screenshots/`, `fastlane/screenshots/`, ou similar). A galeria deve ser um único arquivo HTML que possa ser implantado no Netlify, Vercel, ou qualquer host estático. ## Requisitos ### 1. Fundação do Sistema de Design Crie propriedades customizadas CSS (design tokens) para: - **Cores**: Paleta primária (tons 50-900), paleta secundária/destaque, cinzas neutros (50-900) - **Superfícies**: Três níveis de superfície (surface-1, surface-2, surface-3) - **Tipografia**: Stack de duas fontes (mono para elementos de UI, sans para corpo) - **Espaçamento**: Escala consistente (base 4px) - **Bordas**: Escala de raio (sm, md, lg, xl, 2xl, 3xl) - **Sombras**: Cinco níveis de elevação (sm, md, lg, xl, 2xl) - **Transições**: Três velocidades (rápida: 150ms, normal: 300ms, suave: 400ms com cubic-bezier) ### 2. Arquitetura de Layout - **Container**: Largura máxima de 1600px, centralizado, com padding responsivo - **Grid**: Grid responsivo estilo masonry usando `grid-template-columns: repeat(auto-fill, minmax(340px, 1fr))` - **Gap**: 2rem no desktop, 1.5rem no tablet, 1rem no mobile - **Proporção do card**: Manter apresentação consistente das capturas de tela ### 3. Seção de Cabeçalho - **Badge do app**: Badge pequeno em formato de pílula com ícone e texto "APLICAÇÃO IOS" ou texto da plataforma - **Título**: Nome do app grande e em negrito com tratamento de texto em gradiente - **Subtítulo**: Descrição de uma linha mencionando tecnologias-chave e recursos - **Fundo**: Overlay sutil de padrão de grade para profundidade - **Padding**: Padding vertical reduzido (3rem no topo, 2rem embaixo) para sensação compacta ### 4. Cards de Captura de Tela Cada card deve ter: - **Container**: Fundo branco/branco-off-white, cantos arredondados (2xl), sombra sutil - **Container de imagem**: Fundo em gradiente, captura de tela centralizada com borda branca (8px) - **Efeitos de hover**: - Card eleva (-8px translateY) com sombra aprimorada - Captura de tela escala (1.04) com leve rotação (0.5deg) - Borda superior aparece (barra em gradiente) - Overlay de brilho radial aparece gradualmente - **Barra de metadados**: - Badge de número (fundo em gradiente, quadrado de 26px) - Nome do dispositivo (MAIÚSCULO, fonte pequena, fonte mono) - **Título**: Em negrito, fonte mono, 1rem - **Descrição**: Legenda de uma linha, fonte menor, cor sutil ### 5. Ordenação pela Jornada do Usuário Ordene as capturas de tela pela forma como os usuários experimentam o app: 1. **Login/Onboarding** - Primeira tela que os usuários veem 2. **Dashboard/Início** - Principal destino após o login 3. **Visualizações de recursos primários** - Funcionalidade central do app 4. **Configurações/Ajustes** - Telas de personalização 5. **Permissões/Integrações** - HealthKit, notificações, etc. 6. **Recursos avançados** - Sincronização, compartilhamento, recursos em nuvem 7. **Análises/Relatórios** - Telas de visualização de dados 8. **Arquivo/Histórico** - Visualizações de dados históricos ### 6. Animações - **Entrada**: Fade-in escalonado com translateY (atrasos de 0.1s entre cards) - **Hover**: Easing suave cubic-bezier (0.16, 1, 0.3, 1) - **Scroll**: IntersectionObserver para acionar animações quando os cards entram no viewport - **Performance**: Usar `will-change` para transform e opacity ### 7. Rodapé - **Fundo**: Escuro (neutral-900) com overlay de gradiente sutil - **Raio de borda**: Apenas cantos superiores (2xl) - **Conteúdo**: Metadados mínimos (dispositivo, data, status) com ícones - **Espaçamento**: Compacto (padding de 2rem) ### 8. Breakpoints Responsivos - **Desktop** (>1280px): 4-5 colunas - **Tablet** (768-1280px): 2-3 colunas - **Mobile** (<768px): 1 coluna, padding reduzido em todo o layout ### 9. Requisitos Técnicos - **Arquivo HTML único**: Todo o CSS inline na tag `<style>` - **Dependências externas apenas**: - Pico.css (framework CSS mínimo) - Font Awesome (ícones) - Google Fonts (Inter + IBM Plex Mono) - Animate.css (opcional, para animações adicionais) - **Sem etapa de build**: Deve funcionar como HTML estático - **Performance**: Animações otimizadas, sem mudança de layout - **Acessibilidade**: HTML semântico, texto alternativo nas imagens ### 10. Detalhes de Acabamento - **Gradientes sutis**: Radiais de fundo para profundidade (não avassaladores) - **Tratamento de borda**: 1px sólido com transparência alfa - **Camadas de sombra**: Múltiplos valores de sombra para profundidade - **Tipografia**: Letter-spacing apertado em títulos (-0.03em) - **Consistência de cores**: Usar design tokens em todo lugar, sem valores codificados - **Apresentação de imagem**: Borda branca ao redor das capturas de tela para ilusão de moldura de dispositivo ## Formato de Saída Gere um único arquivo `index.html` com: 1. Estrutura HTML completa 2. CSS inline com design tokens 3. JavaScript para animações de scroll (IntersectionObserver) 4. Todos os cards de captura de tela com metadados adequados 5. Design responsivo para todos os tamanhos de tela ## Estrutura de Exemplo de Card de Captura de Tela ```html <div class="screenshot-card"> <div class="screenshot-img-container"> <img src="screenshot-name.png" alt="Descrição" class="screenshot-img"> </div> <div class="screenshot-info"> <div class="screenshot-meta"> <div class="screenshot-number">1</div> <div class="screenshot-device">iPhone 17 Pro Max</div> </div> <h3 class="screenshot-title">Título da Tela</h3> <p class="screenshot-desc">Legenda de uma linha</p> </div> </div> ``` ## Principais Diferenciadores de Galerias "Com Aparência de IA" ❌ **Evitar**: - Gradientes e cores excessivos - Cards de estatísticas grandes que desperdiçam espaço - Descrições verbosas e listas de recursos - Divisores de seção e cabeçalhos de categoria - Animações avassaladoras - Espaçamento inconsistente - Estilo genérico de fotografia de stock ✅ **Imitar**: - Páginas de produto da Apple App Store - Sites de marketing da Linear, Raycast, Superhuman - Design minimalista, focado em conteúdo - Interações sutis e refinadas - Ritmo visual consistente - Hierarquia orientada por tipografia - Espaço em branco como elemento de design ## Notas de Implantação - A galeria deve ser implantada em `project-root/screenshots-gallery/` ou similar - Incluir pasta `.netlify` com `netlify.toml` para configuração - Todas as capturas de tela devem estar na mesma pasta que `index.html` - Nenhum processo de build necessário - HTML estático puro --- **Uso**: Copie este prompt e forneça-o a um assistente de IA junto com: 1. A lista de arquivos de captura de tela no seu projeto 2. O nome do seu app e descrição de uma linha 3. A plataforma (iOS, macOS, Android, web) 4. Tecnologias-chave usadas (SwiftUI, React Native, Flutter, etc.) A IA gerará uma galeria pronta para produção que parece ter sido projetada profissionalmente.