app-preview-craft — capturas de pantalla para tiendas, tarjetas sociales y videos 3D de dispositivos
Todo lo que esta habilidad crea es una página (stage/stage.html) presentada por un tema y capturada por
Headless Chrome: las imágenes fijas se capturan y finalizan con sharp, los videos se renderizan cuadro por
cuadro y se canalizan a ffmpeg. La misma página alimenta el estudio de vista previa, por lo que lo que el usuario ve
ahí es exactamente lo que exporta la CLI.
0. Encuentra la habilidad, configúrala una vez
Las rutas a continuación son relativas al directorio que contiene este SKILL.md. Resuélvelo una vez y
antepón los comandos con él — $SKILL significa ese directorio en todo el documento:
SKILL=/ruta/absoluta/hacia/app-preview-craft # la carpeta con SKILL.md, scripts/, stage/
# ¿no estás seguro de dónde se instaló? (carpetas de habilidades, luego el caché del plugin de Claude Code)
find ./.claude/skills ./.agents/skills ./.goose/skills ~/.claude/skills ~/.agents/skills \
~/.gemini/skills ~/.config/goose/skills ~/.claude/plugins \
-path '*app-preview-craft*/scripts/cli.mjs' 2>/dev/null | head -1
Luego verifica la máquina. --fix ejecuta npm install dentro de la habilidad cuando faltan paquetes:
node "$SKILL/scripts/doctor.mjs" --fix
El doctor debe terminar con Ready. La falta de ffmpeg es solo una advertencia (las imágenes fijas aún funcionan). Si
informa que no hay WebGL, los temas 3D no se pueden renderizar — dilo en lugar de cambiar silenciosamente a temas
planos.
Las salidas van al directorio en el que el usuario está trabajando (el cwd del shell) a menos que nombren
otra carpeta con --out. Nunca escribas renderizados dentro de $SKILL. El estado temporal reside en
$TMPDIR/app-preview-craft/ y se elimina después de cada ejecución.
1. Flujo de trabajo
-
Elige la categoría (el primer argumento de la CLI) de lo que el usuario pidió:
Categoría Crea Tamaño predeterminado app-storeUn conjunto: una captura por diapositiva, por tamaño, más overview.pngiphone-6.91320×2868social-cardUna tarjeta (o --alldiapositivas) para og/X/LinkedIn/Instagram/historiaog1200×630screen-videoMovimiento 2D a partir de solo las pantallas; acepta grabaciones de pantalla reel1080×1920device-videoVideo de exhibición de dispositivo three.js reel1080×1920device-mockupImagen fija 3D principal, opcionalmente transparente mockup-landscape2400×1600 -
Reúne el contenido. Capturas de pantalla (PNG/JPG/WebP) y/o grabaciones (MP4/MOV/WebM) del proyecto del usuario, una por diapositiva, en orden. Redacta el texto tú mismo a menos que el usuario lo haya proporcionado (ver §4). Sin pantallas, se usa la aplicación de muestra incluida "Tempo" — está bien para mostrar temas, nunca para un entregable.
-
Elige un tema. Un tema que el usuario nombre gana. Para conjuntos de App Store, empareja la categoría de la tienda de la aplicación con la tabla en §3 y di qué tema elegiste y por qué. Cuando el usuario esté indeciso, muéstrale las opciones primero:
node "$SKILL/scripts/cli.mjs" gallery app-store # → ./gallery-app-store.pngLee la hoja de nuevo (para que se renderice para el usuario) y déjalo elegir. El estudio (§8) es la mejor respuesta cuando quieran navegar y ajustar visualmente.
-
Renderiza.
node "$SKILL/scripts/cli.mjs" app-store shots/01.png shots/02.png shots/03.png \ --theme ledger \ --title "Cada euro, *contabilizado*" --title "Presupuestos que se *adaptan*" --title "Privado *por diseño*" \ --subtitle "Beneficio en una línea…" --subtitle "…" --subtitle "…" \ --size iphone-6.9,ipad-13 --set palette.accent=auto -
Inspecciona antes de informar. Lee
overview.png(conjuntos), la imagen fija, o extrae cuadros de un video (--frames 1,4,mid,endrenderiza cuadros PNG en lugar de un video — económico para verificar el movimiento). Busca titulares recortados, texto sobre el dispositivo, un dispositivo cubriendo decoración, pantallas vacías. Corrige con anulaciones--set/por diapositiva y vuelve a renderizar. -
Informa las rutas de salida, el tema y el tamaño, y — siempre que aparezca un dispositivo 3D — que se escribió
CREDITS.txty que el crédito CC-BY debe viajar con las imágenes (§7).
2. Tamaños
node "$SKILL/scripts/cli.mjs" list sizes --category app-store imprime la tabla. Cualquier WxH
también funciona. Varios a la vez: --size iphone-6.9,iphone-6.5,ipad-13.
- App Store Connect requiere el conjunto de 6.9" (
iphone-6.9) para aplicaciones iPhone yipad-13para aplicaciones iPad; otros tamaños son opcionales. La salida PNG se aplana (Apple rechaza alfa). - Los tamaños de tableta intercambian automáticamente el teléfono por un marco de tableta plano a menos que el tema sea sin marco. Proporciona capturas de pantalla de iPad para esas diapositivas cuando la aplicación las tenga.
- Videos de vista previa de la aplicación:
--size app-preview(886×1920) oapp-preview-ipad, 15–30 s, 30 fps. Se agrega automáticamente una pista AAC estéreo silenciosa (Connect espera audio). - Google Play:
play-phone,play-tabletyplay-feature(1024×500, tarjeta social).
3. Temas
list themes --category <c> imprime estos con sus diseños. Cada categoría tiene ≥ 5.
app-store — cada uno modelado según una categoría de aplicación popular
| Tema | Categoría de aplicación | Inspirado en | Apariencia |
|---|---|---|---|
stride | Salud y Fitness | Strava, Nike Run Club | naranja intenso, píldoras condensadas en mayúsculas, rayas de velocidad, teléfono inclinado |
ledger | Finanzas | Revolut, Monzo, Robinhood | malla de medianoche, palabras degradadas de menta a cian, orbes cromados |
serene | Salud y Mindfulness | Calm, Headspace | aurora pastel, acentos cursiva serif, pantalla sin marco sobre una mancha suave |
canvas | Productividad | Notion, Things, Linear | papel cálido, cuadrícula de cuaderno, serif grande, teléfono de tinta plana |
sizzle | Comida y Bebida | DoorDash, Uber Eats, Deliveroo | amarillo soleado, lunares, marcadores rojos, teléfono inclinado |
wander | Viajes | Airbnb, Hopper, Booking | degradado al atardecer con un sol retro que recorre todo el conjunto (panorámica) |
mixtape | Música y Audio | Spotify, Apple Music | tu pantalla borrosa como fondo brillante, palabra enorme delineada |
arcade | Juegos | Apple Arcade, arte de lanzamiento de juegos móviles | cuadrícula synthwave, bordes neón, juguetes 3D brillantes |
snapshot | Foto y Social | Instagram, BeReal, VSCO | tres tomas sin marco abanicadas como impresiones, malla de película cálida |
pulse | Datos de salud y Wearables | Oura, WHOOP, Apple Health | negro clínico, resplandor carmesí, titular debajo de un Pro Max frontal |
Los temas toman prestado un estado de ánimo, nunca una marca: no aparecen logotipos, nombres ni obras de arte de esas aplicaciones.
social-card
launch (aurora + teléfono inclinado), spotlight (haz + suelo espejo), pastel-fan (tres
pantallas abanicadas), bento (cuadrícula de recortes de pantalla), neon-grid (synthwave), editorial (papel,
serif, pantalla duotono), duo (MacBook + teléfono — pasa una pantalla de desktop para el portátil).
screen-video (2D)
carousel, stack (las tarjetas se deslizan), scroll (las capturas largas se desplazan dentro del teléfono),
zoom-tour (Ken Burns a pantalla completa hacia el focus de cada diapositiva), wall (pared inclinada de pantallas),
store-preview (estilo de vista previa de App Store — usa --size app-preview), grid-reveal.
device-video (3D)
turntable, orbit (la cámara se arquea), float (repetible), rise (la cámara se acerca), flip
(revelación de atrás → adelante), trio (tres modelos se despliegan), desk (la tapa del MacBook se abre, el teléfono se desliza
a su lado; ambos se apoyan en scene.floor), spotlight (360° sobre un espejo), synthwave,
keyframes (tu propio dispositivo y cámara se mueven, desde motion.keys — ver §5).
device-mockup (imágenes fijas 3D)
studio, noir, pedestal, levitate, lineup (cada modelo de teléfono), flatlay,
desk-duo. Agrega --transparent para un PNG recortado.
4. Texto
- Titular por diapositiva: ≤ 6 palabras, un beneficio no una característica. Envuelve 1–2 palabras en
*asteriscos*para resaltarlas en el estilo del tema;" | "fuerza un salto de línea. - Subtítulo: una oración corta. Kicker (opcional): una etiqueta de una palabra arriba.
- Las primeras dos diapositivas llevan el mensaje principal — la mayoría de los compradores nunca se desplazan más allá.
- Nunca inventes calificaciones, conteos de descargas, premios o citas de prensa. La decoración como
ratingylaurelses para figuras reales que el usuario te da; pregunta si no estás seguro. - No nombres competidores ni uses marcas comerciales de Apple/Google en el texto más allá de lo que permiten las pautas de la tienda.
5. Configurando cualquier cosa
Orden de resolución, el último gana:
base incorporada → valores predeterminados del diseño → tema (y su cadena extends) → archivo de tema personalizado →
configuración del proyecto themeOverrides → accesos directos de CLI → --set → theme por diapositiva.
- Accesos directos:
--layout --device --finish --pose --font --body-font --bg --bg2 --bg3 --ink --sub --accent --accent2 --background --pattern --background-image --clean-status-bar --no-decor --duration --fps --speed --intro --outro. --set path=valuealcanza cualquier clave del tema (repetible).list optionsimprime las rutas documentadas con tipos y rangos. Los valores se convierten; JSON funciona para listas/objetos:--set device.pose=5,-15,4 --set 'decor=[{"kind":"sparkles","count":8}]'.device.poseesx,y,zgrados. Los temas se mantienen dentro de aproximadamente ±20° de guiñada y ±6° de balanceo para que la pantalla aún se lea en el tamaño de miniatura de la tienda; las poses más pronunciadas funcionan pero restan legibilidad.- Los colores aceptan
auto= el color más vibrante en la primera captura de pantalla:--accent auto. --device iphone-17-pro | iphone-17-pro-max | iphone-12-pro | galaxy-s21-ultra | macbook-pro-16 | flat[:phone|phone-android|tablet|browser] | frameless | none, o el id del modelo propio del usuario (§7).- Los diseños son intercambiables dentro de un tipo (
list layouts): imágenes fijas —hero-top,hero-bottom,tilt,duo,fan,split,big-type,callout,bento,laptop-phone,showcase,pedestal,lineup,flatlay; videos —carousel,stack,scroll,zoom-tour,wall,phone-swap,grid-reveal,turntable,orbit,float,rise,flip,trio,desk,spotlight,keyframes. - Tu propio movimiento: el diseño
keyframesmueve un dispositivo 3D y la cámara a través demotion.keys, una lista de{ "at": 0..1, "x", "y", "size", "pose": [rx, ry, rz], "cam": { "yaw", "pitch", "dist" }, "ease" }.ates una fracción del video completo; un valor que una clave omite se mantiene desde la clave anterior; la primera clave comienza desde la pose del propio tema. Eases:linear inOutCubic inOutSine outCubic outQuart outBack inOutQuart outExpo.--theme keyframes --set 'motion.keys=[{"at":0,"y":1.4,"pose":[0,70,0]},{"at":0.3,"y":0.62,"pose":[4,-20,3],"ease":"outQuart"},{"at":1,"pose":[0,15,0],"cam":{"dist":0.9}}]'. No hay ninguna biblioteca de animación involucrada: cada cuadro es una función pura de su tiempo, que es lo que permite que los cuadros se rendericen fuera de orden. Verifica un movimiento con--frames 0,2,mid,end.
Temas personalizados son archivos JSON (o .mjs) con cualquier subconjunto de claves de tema más extends:
{ "extends": "app-store/ledger", "name": "Acme", "palette": { "accent": "#ff5a1f" },
"type": { "display": "bricolage", "weight": 800 }, "device": { "finish": "#1c1f24" } }
Pasa --theme ruta/hacia/acme.json, o colócalo en ./.app-preview-craft/themes/ (o
~/.app-preview-craft/themes/) y usa --theme acme. list themes muestra los personalizados.
Configuración del proyecto. node "$SKILL/scripts/cli.mjs" init app-store escribe app-preview-craft.json;
después node "$SKILL/scripts/cli.mjs" (sin argumentos) lo renderiza, y las banderas aún lo
anulan. $SKILL/examples/app-preview-craft.json es un ejemplo completo y funcional: texto por diapositiva,
decoración y anulaciones de tema, un archivo de tema personalizado, una pantalla de escritorio y una lista jobs
que renderiza un conjunto de App Store, una tarjeta social, un mockup y un video en un solo comando. Las rutas en una
configuración se resuelven relativas al archivo de configuración.
Claves por diapositiva: screen, desktop (pantalla de portátil), title, subtitle, kicker,
theme (anulaciones solo para esa diapositiva), decor (reemplaza la decoración del tema para esa diapositiva),
focus: [x, y, zoom] (destino de zoom-tour), hold (segundos en un video), trim: [start, end]
y at (qué segundo de una grabación usa una imagen fija), bigWord (diseño big-type).
Elementos de decoración son {kind, x, y, scale, rotate, style, layer, delay, …} con x/y como
fracciones de página y style uno de glass | solid | light | dark | outline:
| tipo | claves adicionales |
|---|---|
badge | text, icon (estrella rayo corazón marca chispa trofeo hoja candado música alfiler llama campana escudo globo reproducir) |
rating | score, label, starColor |
laurels | top, text, bottom |
chips | items[], icons[], width, lead |
notification | app, title, body, time, icon (ruta de imagen) o glyph, width |
stat | label, value, trend, trendColor |
callout | rect: [x, y, w, h] de la captura de pantalla para ampliar, w, border, radius |
arrow | w, h, text (nota escrita a mano), flip, stroke |
logo | name, src (ruta del icono de la aplicación) |
store-badge | top, text, o src para la obra de arte oficial de la insignia |
sparkles confetti | count, colors[], area: [x0, y0, x1, y1], seed |
blob | size, color, opacity (se sitúa detrás del dispositivo) |
orbs rings shapes | Primitivas 3D: count, shapes[], finish (brillante cromado mate vidrio iridiscente), area, items[] |
credit | text (por defecto es la línea de crédito del modelo) |
6. Pantallas y tratamientos
- sharp prepara cada captura de pantalla antes de que Chrome comience:
screen.cleanStatusBar(redibuja una barra de estado de iOS 9:41 / batería completa — solo capturas con forma de teléfono),tint+tintAmount,duotone: "#oscuro,#claro",saturate,brightness,sharpen, y un fondo pre-difuminado para fondosblur-shot. - En los modelos iPhone, la Dynamic Island se dibuja como una píldora negra fusionada sobre los recortes de píldora y cámara del
modelo, coincidiendo con lo que muestra iOS. Proporciona capturas de pantalla con el área de la isla
clara (cualquier captura normal de iOS lo es);
cleanStatusBarmantiene la hora y los iconos a cada lado. - Una captura más alta que la pantalla se desplaza en los videos (tema
scroll) y muestra su parte superior en imágenes fijas (screen.fit=top). - Las grabaciones se dividen en cuadros por ffmpeg a la velocidad de fotogramas de salida; en los videos, cada
diapositiva de la grabación dura tanto como el clip (anula con
hold, corta contrim). Las imágenes fijas usan un cuadro (at, por defecto: el medio). - Las pantallas de portátil colocan en letterbox una captura de teléfono sobre una copia borrosa a menos que la diapositiva tenga una
pantalla
desktop.desktoptambién acepta una grabación. En el video dedesk, el teléfono se desliza junto al MacBook mientras la pantalla del teléfono se transfiere a la del portátil. - Pantallas de escritorio: para dispositivos de escritorio (
macbook-pro-16,flat-browser), pasa una captura de pantalla separada con el argumento--desktoppor diapositiva. La captura de teléfono se mostrará dentro del dispositivo móvil si está presente, o se omitirá.
7. Modelos 3D propios
Coloca archivos .glb o .gltf (con sus texturas) en ./.app-preview-craft/models/ o
~/.app-preview-craft/models/. Luego usa --device my-phone (el nombre del archivo sin la extensión).
Cada modelo debe:
- Tener un nodo raíz llamado
deviceque contenga toda la geometría. - Tener un nodo
screen(un plano hijo) cuya orientación y posición definan dónde se proyecta la captura de pantalla. La habilidad ajusta la relación de aspecto de la superficie para que coincida con la captura. - Tener un nodo
cameraopcional (la cámara de la escena); si falta, se usa una cámara interna.
Créditos. Todos los modelos incluidos requieren atribución (CC-BY 4.0). La habilidad escribe un archivo
CREDITS.txt en la carpeta de salida con las líneas de crédito exactas. Debes:
- Conservar
CREDITS.txtcon las imágenes. - Incluir la línea de crédito en cualquier página web o publicación social (por ejemplo, "Modelo 3D por [Author] (CC-BY)" en la descripción, en los metadatos alt/texto de la imagen).
Agrega "© Apple" cuando uses los modelos de iPhone de referencia, y "© Samsung" para los de Galaxy. Cuando el usuario suba su propio modelo, escribe una línea de crédito personalizada.
8. Estudio de vista previa
node "$SKILL/scripts/cli.mjs" studio app-store shots/01.png shots/02.png inicia un servidor HTTP local y abre
el estudio en el navegador. Muestra la misma página que la CLI renderizará, pero con controles visuales
para:
- Navegar por las diapositivas
- Cambiar el tema (con vista previa en vivo)
- Ajustar la configuración del diseño (pose del dispositivo, colores, tamaño)
- Cambiar el texto (titular, subtítulo, kicker) por diapositiva
- Agregar/eliminar diapositivas
- Exportar una o todas las diapositivas como imágenes fijas
- Ver las dimensiones de salida exactas
studio respeta cualquier --theme, --set y --device pasado en la línea de comandos como valores iniciales.
El estudio no puede renderizar videos ni conjuntos completos de varios tamaños; usa la CLI para eso.
9. Ejemplos
Conjunto básico de App Store:
node "$SKILL/scripts/cli.mjs" app-store captura1.png captura2.png captura3.png \
--theme ledger --size iphone-6.9
Conjunto de App Store con texto y acento automático:
node "$SKILL/scripts/cli.mjs" app-store captura1.png captura2.png \
--title "Gasta *menos*" --title "Ahorra *más*" \
--subtitle "El rastreador de presupuesto inteligente" --subtitle "Metas que se cumplen" \
--size iphone-6.9,ipad-13 --set palette.accent=auto
Video de dispositivo 3D con movimiento personalizado:
node "$SKILL/scripts/cli.mjs" device-video captura1.png \
--theme keyframes \
--set 'motion.keys=[{"at":0,"pose":[0,0,0]},{"at":0.5,"pose":[0,90,0],"ease":"outQuart"},{"at":1,"pose":[0,0,0],"ease":"inOutCubic"}]' \
--duration 5 --fps 60 --out mi-video.mp4
Tarjeta social con tema personalizado:
node "$SKILL/scripts/cli.mjs" social-card captura1.png \
--theme mi-tema.json --size og
Renderizar desde un archivo de configuración:
node "$SKILL/scripts/cli.mjs" init app-store # crea app-preview-craft.json
# edita app-preview-craft.json con tu contenido y ajustes
node "$SKILL/scripts/cli.mjs" # renderiza desde la configuración
10. Solución de problemas
| Problema | Causa probable | Solución |
|---|---|---|
| Doctor informa "No WebGL" | Falta libgl o controladores de GPU | apt install libgl1-mesa-glx o equivalente; en macOS debería funcionar de fábrica |
| Las imágenes fijas se ven borrosas | Las capturas de pantalla son de baja resolución | Usa capturas nativas del dispositivo (no vistas previas del simulador) |
| El video tarda demasiado | Muchos cuadros; baja velocidad de fotogramas o resolución | Reduce --fps a 24 o acorta --duration; usa --size más pequeño para pruebas |
| El texto se sale de la pantalla | Titular demasiado largo (>6 palabras) | Acorta el titular o usa `" |
| El dispositivo cubre el texto | La pose del dispositivo está mal | Ajusta device.pose con --set o cambia el diseño |
| Los modelos 3D no se cargan | Ruta del modelo incorrecta o archivo dañado | Verifica que el .glb esté en ~/.app-preview-craft/models/ y que tenga los nodos requeridos |
CREDITS.txt no se genera | Modelo no encontrado o error de licencia | Verifica el modelo en $SKILL/models/ o la ubicación del usuario; reporta el error |
11. Referencia de la CLI
node "$SKILL/scripts/cli.mjs" <comando> [opciones]
Comandos:
| Comando | Descripción |
|---|---|
app-store | Renderiza un conjunto de capturas de pantalla para App Store |
social-card | Renderiza una tarjeta social/de Open Graph |
screen-video | Renderiza un video 2D a partir de capturas de pantalla/grabaciones |
device-video | Renderiza un video 3D de exhibición de dispositivo |
device-mockup | Renderiza una imagen fija 3D de mockup de dispositivo |
gallery <categoría> | Renderiza una hoja de galería de todos los temas en una categoría |
list <tipo> | Lista temas, tamaños, diseños u opciones. Tipos: themes, sizes, layouts, options |
init <categoría> | Escribe un archivo de configuración app-preview-craft.json en el directorio actual |
studio <categoría> | Inicia el estudio de vista previa en el navegador |
Opciones principales:
| Opción | Descripción |
|---|---|
--theme <nombre/ruta> | Tema a usar (nombre o ruta de archivo) |
--size <nombre> | Tamaño de salida (nombre o WxH) |
--device <id> | Modelo de dispositivo a usar |
--title <texto> | Titular por diapositiva (repetible) |
--subtitle <texto> | Subtítulo por diapositiva (repetible) |
--kicker <texto> | Kicker por diapositiva (repetible) |
--set <ruta=valor> | Establece cualquier clave de configuración (repetible) |
--out <ruta> | Directorio/archivo de salida (por defecto: cwd) |
--frames <lista> | Renderiza cuadros PNG en lugar de video (p.ej., 1,4,mid,end) |
--duration <segundos> | Duración del video en segundos |
--fps <número> | Velocidad de fotogramas del video |
--transparent | Salida PNG con fondo transparente (solo mockup) |
--clean-status-bar | Limpia la barra de estado de iOS en las capturas de pantalla |
--no-decor | Omite toda la decoración del tema |
--help | Muestra la ayuda completa de la CLI |
Para obtener una lista completa de opciones y su documentación, ejecuta:
node "$SKILL/scripts/cli.mjs" --help
12. Licencia y atribuciones
La habilidad en sí tiene licencia MIT. Los modelos 3D incluidos ($SKILL/models/) tienen licencia
Creative Commons Attribution 4.0 International (CC-BY 4.0). Los autores se listan en
$SKILL/models/CREDITS.md. Todos los usuarios deben:
- Conservar el archivo
CREDITS.txtgenerado con cada salida. - Incluir el crédito textual (por ejemplo, "Modelo 3D por [Autor]") en cualquier uso público de las imágenes o videos renderizados.
- Agregar "© Apple" o "© Samsung" cuando corresponda para los modelos de referencia.
Las marcas comerciales y nombres de aplicaciones mencionados en los temas son propiedad de sus respectivos dueños y se utilizan únicamente con fines de descripción estilística. La habilidad no incluye ni reproduce ninguna marca comercial.
app-preview-craft — crea activos de marketing de nivel de tienda de aplicaciones desde tu línea de comandos.