Experto en Medios Promocionales para Aplicaciones (Edición 2026)
English
Orquestación e Integración
ai-media-generation-expert: Genera imágenes por IA (Flux 1.1 Pro), video B-roll (Sora, Runway Gen-3) y locuciones sintéticas (ElevenLabs v3).svg-animation-motion-expert: Animaciones SVG de alto rendimiento, transiciones Framer Motion y tipografía cinética.file-upload-media-expert: Distribución de activos en CDN, compresión de imágenes con pérdida/sin pérdida (Sharp) y transcodificación de video.seo: Metadatos dinámicos Open Graph (og:image), Twitter Card y vistas previas para rastreadores sociales.ui-ux-pro-max: Tokens de diseño, jerarquías tipográficas y estilo de diseño para tarjetas promocionales.visual-ui-auditor: Auditoría visual multimodal de capturas de pantalla de marketing, contraste y marcos de dispositivo.anti-slop: Gráficos de marketing anti-basura, eliminando maquetas genéricas de stock y artefactos falsos de UI.senior-frontend/tailwind-expert: Marcos de dispositivo CSS de alta fidelidad, composición en canvas y diseño responsivo.zero-to-prod-orchestrator: Coordina la Fase 5 (activos visuales y branding de UI) y la Fase 8 (lanzamiento, despliegue, entrega de activos de marketing).- Sinergia entre dominios e integración de enjambres de subagentes:
mobile-expo-expert,design-system-architect
Descripción
Guía de ingeniería de nivel profesional para la creación de material promocional de aplicaciones de alta conversión, abarcando gráficos estáticos visuales (capturas de pantalla para App Store, tarjetas para redes sociales, banners OG dinámicos) y medios dinámicos en movimiento (avances de video programáticos con Remotion, tutoriales cinéticos de aplicaciones y demos de lanzamiento narrados por IA).
Condiciones de Activación
- Generar capturas de pantalla promocionales para Apple App Store y Google Play Store con maquetas de dispositivos.
- Crear gráficos de lanzamiento para Product Hunt, banners de Twitter/X, presentaciones de LinkedIn y anuncios de carrusel para Instagram/TikTok.
- Implementar la generación dinámica de imágenes de tarjetas sociales Open Graph (OG) mediante Satori /
@vercel/og. - Crear videos promocionales de aplicaciones, avances o videos de demostración del producto de forma programática con Remotion (video basado en React).
- Guionizar y sintetizar storyboards de avances de aplicaciones de 30 segundos de alta conversión con locuciones de IA.
- Automatizar canales de captura de capturas de pantalla de múltiples resoluciones mediante automatización de navegador sin cabeza (Playwright/Puppeteer).
Arquitectura Central y Pilares de Producción de Medios
┌──────────────────────────────────────────────┐
│ MOTOR DE MEDIOS PROMOCIONALES │
└──────────────────────┬───────────────────────┘
│
┌────────────────────────────┴───────────────────────────┐
▼ ▼
IMÁGENES ESTÁTICAS Y GRÁFICOS CREACIÓN DE VIDEO Y MOVIMIENTO
├── Capturas de App Store y Google Play ├── Videos Programáticos con Remotion (React)
├── Tarjetas Sociales (X, LinkedIn, Product Hunt) ├── Fórmula de Avance de 30s de Alta Conversión
├── Banners OpenGraph Dinámicos (@vercel/og) ├── Tipografía Cinética y Estelas de Cursor
└── Maquetas de Dispositivo CSS/SVG Puras (iPhone/Pixel) └── Locución de IA y Sincronización de B-Roll
1. Matriz de Capturas de Pantalla para App Store y Google Play
A. Estándar de Resolución y Especificación (2026)
| Plataforma Objetivo | Tamaño de Pantalla | Resolución Nativa | Relación de Aspecto | Requisitos de Formato |
|---|---|---|---|---|
| Apple iOS (iPhone 16 Pro Max) | 6.9" Super Retina | 1320 × 2868 px | 19.5:9 | PNG 24 bits, RGB, sin alfa, máx. 10MB |
| Apple iOS (iPhone 16 / 15 Pro) | 6.7" Super Retina | 1290 × 2796 px | 19.5:9 | PNG 24 bits, RGB, sin alfa, máx. 10MB |
| Apple iPadOS (iPad Pro 13") | 13.0" Liquid Retina | 2064 × 2752 px | 4:3 | PNG 24 bits, RGB, sin alfa |
| Google Play Teléfono | Insignia Estándar | 1080 × 2400 px (o 1080 × 1920) | 20:9 / 16:9 | PNG/JPEG, mínimo 1080px en el lado más corto |
| Google Play Gráfico Destacado | Banner Héroe | 1024 × 500 px | ~2:1 | PNG/JPEG 24 bits, sin alfa, máx. 1MB |
| App Store Video Promocional | Video de Vista Previa | 1080 × 1920 px (Vertical) / 1920 × 1080 | 9:16 / 16:9 | MP4/ProRes, máx. 30s, sin superposiciones falsas de SO |
B. Fórmula de Composición de Captura de Alta Conversión
Cada captura de pantalla en la secuencia debe seguir una jerarquía visual de 4 partes:
- Titular (Beneficio Impactante): Máximo 4-6 palabras. Enfócate en la transformación, no en la característica técnica (ej., "Automatiza Facturas en 3 Segundos" vs "Formulario de Generación de Facturas").
- Subtitular (Anclaje Contextual): 1 oración corta que aclare el flujo de trabajo.
- UI Flotante / Maqueta Enmarcada: Maqueta de dispositivo de alto contraste y píxel perfecto, inclinada 5°-12° o frontal, centrada en el 65% inferior del marco.
- Lienzo Ambiental / Degradado: Fondo degradado OKLCH sutil que coincida con el tema de la marca, con resplandores radiales suaves.
2. Especificaciones de Gráficos de Lanzamiento Social
- Kit de Lanzamiento de Product Hunt:
- Imágenes de Galería:
1270 × 760 px(relación 5:3). Muestra las 3 funciones principales con tipografía nítida y pantallas de UI reales. - Avance de Galería Animado: GIF o MP4 de
240 × 240 px(menos de 3MB) para la miniatura de la tarjeta del producto.
- Imágenes de Galería:
- Tarjetas de Twitter / X:
- Tarjeta promocional en el feed:
1200 × 675 px(16:9) o1200 × 630 px(1.91:1). - Banner de Perfil:
1500 × 500 px(relación 3:1).
- Tarjeta promocional en el feed:
- Publicaciones de Instagram y TikTok:
- Diapositivas de Carrusel en el Feed:
1080 × 1350 px(relación vertical 4:5). - Historia y Avance Vertical:
1080 × 1920 px(relación 9:16).
- Diapositivas de Carrusel en el Feed:
3. Generador de Imágenes Open Graph (OG) Dinámicas
La generación dinámica de OG asegura que cada enlace compartido en Twitter/X, Discord, Slack y WhatsApp renderice una tarjeta personalizada de alta resolución.
// app/api/og/route.tsx (Next.js 15 + @vercel/og / Satori)
import { ImageResponse } from 'next/og';
import { NextRequest } from 'next/server';
export const runtime = 'edge';
export async function GET(req: NextRequest) {
const { searchParams } = new URL(req.url);
const title = searchParams.get('title') || 'Next-Gen AI Workspace';
const subtitle = searchParams.get('subtitle') || 'Built with VibesPlug Swarm Architecture';
const tag = searchParams.get('tag') || 'v3.0 Production Ready';
return new ImageResponse(
(
<div
style={{
height: '100%',
width: '100%',
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
justifyContent: 'space-between',
padding: '64px',
backgroundColor: '#090a0f',
backgroundImage: 'radial-gradient(circle at 80% 20%, rgba(99, 102, 241, 0.25) 0%, transparent 60%), radial-gradient(circle at 20% 80%, rgba(236, 72, 153, 0.2) 0%, transparent 60%)',
fontFamily: 'Inter, sans-serif',
color: '#ffffff',
}}
>
{/* Insignias Superiores */}
<div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
<div
style={{
padding: '6px 16px',
borderRadius: '9999px',
backgroundColor: 'rgba(255, 255, 255, 0.1)',
border: '1px solid rgba(255, 255, 255, 0.2)',
fontSize: '20px',
fontWeight: 600,
color: '#818cf8',
}}
>
{tag}
</div>
</div>
{/* Título y Subtítulo Principal */}
<div style={{ display: 'flex', flexDirection: 'column', gap: '16px', maxWidth: '850px' }}>
<h1
style={{
fontSize: '60px',
fontWeight: 800,
lineHeight: 1.1,
letterSpacing: '-0.02em',
background: 'linear-gradient(135deg, #ffffff 40%, #94a3b8 100%)',
backgroundClip: 'text',
color: 'transparent',
margin: 0,
}}
>
{title}
</h1>
<p
style={{
fontSize: '26px',
color: '#94a3b8',
lineHeight: 1.4,
margin: 0,
}}
>
{subtitle}
</p>
</div>
{/* Marca del Pie de Página */}
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
width: '100%',
borderTop: '1px solid rgba(255, 255, 255, 0.1)',
paddingTop: '24px',
}}
>
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
<div
style={{
width: '32px',
height: '32px',
borderRadius: '8px',
background: 'linear-gradient(135deg, #6366f1, #a855f7)',
}}
/>
<span style={{ fontSize: '22px', fontWeight: 700 }}>MyApp.io</span>
</div>
<span style={{ fontSize: '18px', color: '#64748b' }}>Try free today • No credit card</span>
</div>
</div>
),
{
width: 1200,
height: 630,
}
);
}
4. Creación de Video Programática con Remotion (React)
Remotion permite a los desarrolladores renderizar videos promocionales en MP4 completamente desde el código, habilitando componentes de UI animados, tipografía cinética, física de resorte y rotaciones de dispositivo.
// src/remotion/AppPromoComposition.tsx
import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig } from 'remotion';
import React from 'react';
export function AppPromoComposition({
headline,
subheadline,
screenshotUrl
}: {
headline: string;
subheadline: string;
screenshotUrl: string;
}) {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
// Animación de entrada con resorte para la maqueta del dispositivo
const deviceEntrance = spring({
frame,
fps,
config: { damping: 14, stiffness: 90 },
});
const translateY = interpolate(deviceEntrance, [0, 1], [400, 0]);
const scale = interpolate(deviceEntrance, [0, 1], [0.85, 1]);
// Efecto de flotación continua después de la entrada
const hoverY = Math.sin(frame / 20) * 12;
// Animación de revelación de texto
const textOpacity = interpolate(frame, [0, 20], [0, 1], { extrapolateRight: 'clamp' });
const textTranslateY = interpolate(frame, [0, 20], [30, 0], { extrapolateRight: 'clamp' });
return (
<AbsoluteFill
style={{
backgroundColor: '#0a0d14',
backgroundImage: 'radial-gradient(ellipse at 50% 10%, rgba(99, 102, 241, 0.35) 0%, transparent 70%)',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
fontFamily: 'Inter, sans-serif',
overflow: 'hidden',
padding: '60px',
}}
>
{/* Titular Cinético */}
<div
style={{
opacity: textOpacity,
transform: `translateY(${textTranslateY}px)`,
textAlign: 'center',
marginBottom: '40px',
zIndex: 10,
}}
>
<h1
style={{
fontSize: '56px',
fontWeight: 800,
color: '#ffffff',
margin: '0 0 16px 0',
letterSpacing: '-0.02em',
}}
>
{headline}
</h1>
<p style={{ fontSize: '26px', color: '#94a3b8', margin: 0 }}>
{subheadline}
</p>
</div>
{/* Contenedor de Dispositivo Flotante */}
<div
style={{
transform: `translateY(${translateY + hoverY}px) scale(${scale})`,
width: '720px',
height: '1100px',
borderRadius: '48px',
padding: '16px',
backgroundColor: '#1f2937',
boxShadow: '0 30px 80px rgba(0, 0, 0, 0.7), 0 0 40px rgba(99, 102, 241, 0.25)',
border: '4px solid #374151',
overflow: 'hidden',
display: 'flex',
flexDirection: 'column',
}}
>
{/* Muesca / Isla Dinámica */}
<div style={{ display: 'flex', justifyContent: 'center', marginBottom: '8px' }}>
<div style={{ width: '120px', height: '24px', backgroundColor: '#000', borderRadius: '12px' }} />
</div>
{/* Contenido de la Pantalla */}
<img
src={screenshotUrl}
alt="Pantalla de la Aplicación"
style={{
width: '100%',
height: '100%',
objectFit: 'cover',
borderRadius: '32px',
}}
/>
</div>
</AbsoluteFill>
);
};
Comando de Renderizado CLI de Remotion
# Renderizar avance promocional vertical 9:16 (Reels / TikTok / Shorts)
npx remotion render src/remotion/index.ts AppPromoTeaser out/promo-teaser.mp4 --props='{"headline":"Ship Apps in Minutes","subheadline":"Autonomous Swarm Intelligence","screenshotUrl":"/assets/screen.png"}'
5. La Fórmula del Video Avance de 30 Segundos de Alta Conversión
| Marca de Tiempo | Fase | Señal Visual | Guía de Audio / Narración |
|---|---|---|---|
| 00:00 - 00:04 | El Gancho | Zoom rápido al problema (ej., hojas de cálculo manuales desordenadas o compilaciones fallidas). Insignias de advertencia rojas/ámbar. | "¿Todavía pierdes horas implementando lanzamientos manualmente?" (Locución enérgica y contundente). |
| 00:04 - 00:12 | La Revelación | Transición fluida de inclinación 3D del dispositivo. Aparece el panel de la aplicación con acentos interactivos brillantes. | "Conoce [Nombre de la App] — tu motor autónomo de cero a producción." |
| 00:12 - 00:20 | Superpoderes Clave | 3 cortes rápidos que muestran las funciones principales: 1. Configuración con un clic; 2. Analíticas en vivo; 3. Sincronización instantánea. | "Un clic transforma tu flujo de trabajo, sincroniza datos en tiempo real y elimina el error humano." |
| 00:20 - 00:26 | Prueba Social | Insignias de 5 estrellas, insignias de G2/Product Hunt, píldoras de avatar de testimonios flotantes. | "Confiado por más de 10,000 desarrolladores en todo el mundo." |
| 00:26 - 00:30 | Llamada a la Acción | Gran botón CTA brillante, insignias de App Store y Google Play, URL prominente. | "Descárgalo ahora en la App Store o visita myapp.io para empezar gratis hoy." |
6. Captura Automatizada de Capturas de Pantalla Multidispositivo
…
[truncado para traducción]