Generador de Galería de Capturas de Pantalla para App Store

# Generador de Galería de Capturas de Pantalla para App Store **Crea una galería de capturas de pantalla profesional y lista para producción para una aplicación iOS/macOS/Android que parezca diseñada por el 1% de los mejores desarrolladores de aplicaciones.** ## Contexto Estás construyendo una página de galería de capturas de pantalla para una aplicación. El proyecto tiene capturas de pantalla en una carpeta (típicamente `screenshots/`, `fastlane/screenshots/`, o similar). La galería debe ser un único archivo HTML que pueda desplegarse en Netlify, Vercel, o cualquier host estático. ## Requisitos ### 1. Base del Sistema de Diseño Crea propiedades personalizadas de CSS (tokens de diseño) para: - **Colores**: Paleta primaria (tonos 50-900), paleta secundaria/de acento, grises neutros (50-900) - **Superficies**: Tres niveles de superficie (superficie-1, superficie-2, superficie-3) - **Tipografía**: Pila de dos fuentes (mono para elementos de interfaz, sans para cuerpo) - **Espaciado**: Escala consistente (base de 4px) - **Bordes**: Escala de radio (sm, md, lg, xl, 2xl, 3xl) - **Sombras**: Cinco niveles de elevación (sm, md, lg, xl, 2xl) - **Transiciones**: Tres velocidades (rápida: 150ms, normal: 300ms, suave: 400ms con cubic-bezier) ### 2. Arquitectura de Diseño - **Contenedor**: Ancho máximo de 1600px, centrado, con padding responsivo - **Cuadrícula**: Cuadrícula responsiva estilo masonry usando `grid-template-columns: repeat(auto-fill, minmax(340px, 1fr))` - **Espaciado**: 2rem en escritorio, 1.5rem en tablet, 1rem en móvil - **Relación de aspecto de tarjeta**: Mantener presentación consistente de capturas ### 3. Sección de Encabezado - **Insignia de aplicación**: Insignia pequeña en forma de píldora con icono y texto "APLICACIÓN IOS" o plataforma - **Título**: Nombre de aplicación grande y en negrita con tratamiento de texto degradado - **Subtítulo**: Descripción de una línea mencionando tecnologías clave y características - **Fondo**: Superposición sutil de patrón de cuadrícula para profundidad - **Padding**: Padding vertical reducido (3rem arriba, 2rem abajo) para sensación compacta ### 4. Tarjetas de Captura de Pantalla Cada tarjeta debe tener: - **Contenedor**: Fondo blanco/blanco apagado, esquinas redondeadas (2xl), sombra sutil - **Contenedor de imagen**: Fondo degradado, captura centrada con borde blanco (8px) - **Efectos hover**: - La tarjeta se eleva (-8px translateY) con sombra mejorada - La captura escala (1.04) con ligera rotación (0.5deg) - Aparece borde superior (barra degradada) - El resplandor radial se desvanece - **Barra de metadatos**: - Insignia numérica (fondo degradado, cuadrado de 26px) - Nombre del dispositivo (MAYÚSCULAS, fuente pequeña, fuente mono) - **Título**: En negrita, fuente mono, 1rem - **Descripción**: Leyenda de una línea, fuente más pequeña, color sutil ### 5. Ordenamiento por Viaje del Usuario Ordena las capturas por cómo los usuarios experimentan la aplicación: 1. **Inicio de sesión/Incorporación** - Primera pantalla que ven los usuarios 2. **Panel/Inicio** - Destino principal después del inicio de sesión 3. **Vistas de funciones principales** - Funcionalidad central de la aplicación 4. **Configuración/Ajustes** - Pantallas de personalización 5. **Permisos/Integraciones** - HealthKit, notificaciones, etc. 6. **Funciones avanzadas** - Sincronización, compartir, funciones en la nube 7. **Analíticas/Informes** - Pantallas de visualización de datos 8. **Archivo/Historial** - Vistas de datos históricos ### 6. Animaciones - **Entrada**: Desvanecimiento escalonado con translateY (retrasos de 0.1s entre tarjetas) - **Hover**: Suavizado cubic-bezier (0.16, 1, 0.3, 1) - **Scroll**: IntersectionObserver para activar animaciones cuando las tarjetas entran al viewport - **Rendimiento**: Usar `will-change` para transform y opacity ### 7. Pie de Página - **Fondo**: Oscuro (neutral-900) con superposición degradada sutil - **Radio de borde**: Solo esquinas superiores (2xl) - **Contenido**: Metadatos mínimos (dispositivo, fecha, estado) con iconos - **Espaciado**: Compacto (padding de 2rem) ### 8. Puntos de Interrupción Responsivos - **Escritorio** (>1280px): 4-5 columnas - **Tablet** (768-1280px): 2-3 columnas - **Móvil** (<768px): 1 columna, padding reducido en todo ### 9. Requisitos Técnicos - **Archivo HTML único**: Todo el CSS en línea en la etiqueta `<style>` - **Solo dependencias externas**: - Pico.css (framework CSS mínimo) - Font Awesome (iconos) - Google Fonts (Inter + IBM Plex Mono) - Animate.css (opcional, para animaciones adicionales) - **Sin paso de compilación**: Debe funcionar como HTML estático - **Rendimiento**: Animaciones optimizadas, sin cambio de diseño - **Accesibilidad**: HTML semántico, texto alternativo en imágenes ### 10. Detalles de Pulido - **Degradados sutiles**: Radiales de fondo para profundidad (no abrumadores) - **Tratamiento de bordes**: 1px sólido con transparencia alfa - **Capas de sombra**: Múltiples valores de sombra para profundidad - **Tipografía**: Espaciado de letras ajustado en encabezados (-0.03em) - **Consistencia de color**: Usar tokens de diseño en todas partes, sin valores codificados - **Presentación de imagen**: Borde blanco alrededor de capturas para ilusión de marco de dispositivo ## Formato de Salida Genera un único archivo `index.html` con: 1. Estructura HTML completa 2. CSS en línea con tokens de diseño 3. JavaScript para animaciones de scroll (IntersectionObserver) 4. Todas las tarjetas de captura con metadatos adecuados 5. Diseño responsivo para todos los tamaños de pantalla ## Estructura de Ejemplo de Tarjeta de Captura ```html <div class="screenshot-card"> <div class="screenshot-img-container"> <img src="screenshot-name.png" alt="Descripción" 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 de Pantalla</h3> <p class="screenshot-desc">Leyenda de una línea</p> </div> </div> ``` ## Diferenciadores Clave de Galerías "Con Aspecto de IA" ❌ **Evitar**: - Degradados y colores excesivos - Tarjetas de estadísticas grandes que desperdician espacio - Descripciones verbosas y listas de funciones - Divisores de sección y encabezados de categoría - Animaciones abrumadoras - Espaciado inconsistente - Estilo genérico de fotografía de stock ✅ **Emular**: - Páginas de producto de App Store de Apple - Sitios de marketing de Linear, Raycast, Superhuman - Diseño minimalista, primero el contenido - Interacciones sutiles y refinadas - Ritmo visual consistente - Jerarquía impulsada por tipografía - Espacio en blanco como elemento de diseño ## Notas de Despliegue - La galería debe desplegarse en `raíz-del-proyecto/galería-de-capturas/` o similar - Incluir carpeta `.netlify` con `netlify.toml` para configuración - Todas las capturas deben estar en la misma carpeta que `index.html` - Sin proceso de compilación requerido - HTML estático puro --- **Uso**: Copia este prompt y proporciónalo a un asistente de IA junto con: 1. La lista de archivos de captura en tu proyecto 2. El nombre de tu aplicación y descripción de una línea 3. La plataforma (iOS, macOS, Android, web) 4. Tecnologías clave utilizadas (SwiftUI, React Native, Flutter, etc.) La IA generará una galería lista para producción que parezca diseñada profesionalmente.