Film de lanzamiento estilo Apple, construido en código
Cada píxel del Mac se dibuja en código: la barra de menú, el notch, los widgets y los fondos de pantalla. Un archivo HTML con window.seek(seconds), exportado a MP4.
Antes de empezar: lee brand.md y MOTION.md si existen. Si no, ejecuta brand-intake primero, o pide códigos hex, una fuente y un archivo de logotipo. Nunca llames a un resultado "on-brand" sin ellos.
Se combina con un skill gratuito (no mío) que convierte las guías de diseño de Apple en reglas que Claude sigue. Instálalo una vez:
npx skills add emilkowalski/skills --skill apple-design
Paso 1: Pide cinco cosas, luego espera
- El nombre del producto y su eslogan, palabra por palabra.
- La lista de hechos. Cada característica, número y requisito que el film pueda mostrar. Nada más aparece en pantalla.
- Las escenas. De 6 a 8, cada una: una característica más un pie corto. Ejemplo: "Tu voz vive aquí."
- Una referencia (opcional): un film de lanzamiento real de Mac o fotogramas del mismo, en una carpeta llamada
ref. Solo define el aspecto visual. - Tamaño y duración. Por defecto 1920 x 1080, 30 fps, aproximadamente 2.5 segundos por escena.
Paso 2: Construye el brief (pégalo en Claude Code)
Usa el skill apple-design. [Si ref/ existe: Iguala el ASPECTO visual de la referencia en ref/. Lee cada fotograma primero. No copies sus palabras ni el nombre de su producto.]
Es un film de lanzamiento para [PRODUCTO]: el notch negro del MacBook en la parte superior central se expande en widgets estilo Apple, escena por escena. Cada escena tiene su propio fondo de pantalla de degradado de color a pantalla completa y un pie centrado debajo del notch, con la última o las dos últimas palabras teñidas en un tono más claro del color del fondo. Se abre con el notch expandido y la palabra "hello" escrita a mano en una línea de script blanca, como la pantalla de saludo del Mac.
Usa solo estos hechos, y no añadas otros:
[LISTA DE HECHOS]
Escenas, aproximadamente 2.5 segundos cada una:
[1. Notch expandido sobre negro, "hello" escrito a mano.]
[2..n. Color del fondo, en qué se abre el notch, el pie.]
[Última. Negro: el notch se cierra a su forma de reposo. Pie: PRODUCTO y su eslogan.]
Tamaño [ANCHO] x [ALTO], 30 fps. El fotograma es una pantalla de Mac: una barra de menú delgada de macOS en la parte superior con el notch en el medio. Fuentes del sistema (-apple-system, Helvetica Neue como alternativa).
Constrúyelo como un único archivo HTML autocontenido con window.seek(seconds) que dibuje cualquier fotograma exacto. Captura un fotograma de cada escena [y compáralo lado a lado con el fotograma de referencia correspondiente]. Corrige lo que difiera y verifica el movimiento según el skill apple-design.
Lo que aprendí por las malas
- Nombra el notch con palabras. Ante el mismo brief, un modelo dibujó un portátil entero. "El notch en la parte superior central de la pantalla" es el ancla.
- Resortes, no interpolaciones. El notch se ve bien cuando el ancho y la altura se mueven con resortes en sus propias curvas: apertura suave y cierre sin sobrepaso.
- Trabaja el movimiento desde el inicio del film. Si el notch se reabre antes de haber terminado de cerrarse, continúa desde donde está. Una interpolación por escena salta.
- Compara contra la referencia, escena por escena. Los fotogramas lado a lado detectaron un "hello" descentrado y demasiado grande, una barra de progreso gruesa que debería ser muescas finas, y un mensaje metido en la barra de menú.
- Mantén la barra de menú corta. Un menú completo de palabras se corta por la mitad con widgets anchos. Cinco elementos son suficientes.
- Los widgets no añaden afirmaciones. El texto de marcador de posición son líneas grises. Cualquier palabra de interfaz que no esté en la lista de hechos (etiquetas de botones, una hora de reloj) se devuelve para aprobación.
Paso 3: Verifica y exporta
¿Un extraño creería que es un Mac real durante el primer segundo? ¿Cada palabra en pantalla proviene de la lista de hechos? Añade una configuración de movimiento reducido que sustituya los resortes por fundidos rápidos.
Exporta con HyperFrames (gratuito, código abierto): npx skills add heygen-com/hyperframes, luego npx hyperframes render. Para un corte vertical, entrega el MP4 a reel-export.