Communitygithub.com

tin-computer/tin

Captura un producto en vivo a tamaño de teléfono y renderiza un video demo narrado en formato 9:16.

¿Qué es tin?

Este skill para asistentes de IA como Claude Code, Cursor o Codex automatiza la creación de videos demo de productos a partir de URLs reales. El agente planifica una historia corta (gancho + 5-7 pasos), escribe un guion optimizado para voz y subtítulos, captura capturas de pantalla usando tin-studio (inspecting headings and actions from the page), sintetiza desplazamientos y toques en el renderizado final, y genera locución con un proveedor de voz externo. El resultado es un video 9:16 de hasta 40 segundos, sin grabación en tiempo real, que se usa para marketing o documentación. Soporta personalización de voz, fondo y personaje SVG.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/tin-computer/tin/tree/HEAD/codex_procedures/creative.product_demo/skills/product-demo-video

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

Procedimiento de video demo de producto

Todo ocurre a través de tin-studio (ejecuta tin-studio help). Trabaja en el Directorio de trabajo de Studio proporcionado por el runtime (llámalo WORK; las ejecuciones de API usan /home/tin-work/studio, las ejecuciones históricas de OAuth usan /home/user/.tin-lite/studio); solo el MP4 terminado va al checkout del proyecto. No hay grabación de pantalla en tiempo real: se capturan fotogramas clave estabilizados y el renderizador sintetiza el desplazamiento, el toque, el zoom y el movimiento de los subtítulos, por eso el resultado es suave.

1. Planificar la historia

  1. Lee wiki/INDEX.md (## Producto, mapa de características, posicionamiento). Lee angle y notes.
  2. Ejecuta tin-studio inspect <product_url> WORK/inspect. Lee el JSON: headings con sus scrollY, actions con selectors ya preparados (prefiere los que tengan inHeader: true para navegación), text, docHeight. Abre WORK/inspect/inspect.png y WORK/inspect/inspect-full.png con tu visor de imágenes y anota qué muestra cada pantalla. Inspecciona una o dos páginas más si la historia lo necesita (documentación, precios).
  3. Decide el formato que describe script-format.md: un gancho de máximo siete palabras que nombre el dolor (angle si se proporciona), luego cinco a siete pasos. Cada paso es un momento visible con una línea de voz de máximo catorce palabras y un subtítulo de máximo cinco palabras. Marca exactamente una *palabra* por subtítulo y en el gancho. El último paso aterriza en la llamada a la acción que la página realmente ofrece (prueba, precios, instalación) con una línea [warm]. Discurso total de máximo 75 palabras.
  4. Las afirmaciones provienen del texto de la página o la memoria del proyecto; los números deben ser visibles en pantalla en el paso que los dice.
  5. Escribe cada línea como si un creador hablara al espectador: tiempo presente, segunda persona, la cosa en sí misma. Nunca narres la página ("la página muestra", "esta sección enumera", "el ejemplo del sitio"); di lo que significa para ellos ("tu agente obtiene su propio número"). Escribe cantidades y conteos como palabras, y mantén los nombres de marca dentro de una oración completa.

2. Escribir y capturar

  1. Escribe WORK/script.json en el formato de script-format.md.
  2. Ejecuta tin-studio capture WORK/script.json WORK/out. Abre cada WORK/out/frames/kNNN.png con tu visor de imágenes y verifica: la página cargó (sin blanco, sin error, sin intersticial); ningún banner de cookies o ventana emergente cubre el contenido (agrega un paso de click temprano en su botón de descartar si aparece uno, o elige una página sin él); cada desplazamiento aterriza donde el subtítulo espera; cada clic alcanzó el elemento deseado (el fotograma clave click muestra la nueva página). Un fotograma clave que está mal es una corrección del guion: mejor selector de inspect, scrollTo, un settleMs más grande, o una página diferente. Recaptura hasta que cada fotograma clave esté correcto.

3. Voz

  1. Ejecuta tin-studio voice WORK/out --voice <voice> --language "<language>". Agrega [excited] en la línea del gancho y [warm] en la última; por lo demás, oraciones simples. Cada ejecución imprime la duración del clip por paso; si un clip dura más de cinco segundos, acorta esa línea.
  2. La voz tiene un límite por ejecución (24 líneas, 3000 caracteres). Volver a ejecutar mantiene las líneas sin cambios, así que edita una línea en WORK/script.json, no es necesario recapturar, y ejecuta voice de nuevo.
  3. Una línea que el proveedor rechaza se reporta como REFUSED con el motivo y las otras líneas se conservan. Un content_policy_violation es el verificador de texto opaco del proveedor que falla: primero ejecuta voice de nuevo sin ningún --style propio (se sabe que el estilo predeterminado pasa), luego reescribe esa única línea con un lenguaje más simple y ejecuta voice de nuevo. Nunca reenvíes una línea rechazada sin cambios, y nunca inviertas más de dos reescrituras en una línea; descártala y deja que el subtítulo lleve el paso.

4. Vista previa, renderizar, verificar

  1. Personaje: cuando character está configurado, el archivo es /home/user/project/characters/<character>.svg; ejecuta tin-studio check primero. Si falta o es rechazado, renderiza sin él y dilo en el mensaje.
  2. Vista previa de tres fotogramas antes del renderizado completo (gancho, un desplazamiento intermedio, el paso final): tin-studio frame WORK/out WORK/p1.png --at 1.5 --bg <backdrop> [--character <svg>], y de nuevo aproximadamente a la mitad de la duración total y al final. Míralos: subtítulos legibles y centrados, la cara del personaje visible y sin cubrir el subtítulo, la tarjeta del teléfono mostrando la pantalla correcta, fondo sin chocar.
  3. Renderizar: tin-studio render WORK/out WORK/<slug>.mp4 --bg <backdrop> [--character <svg>]. Imprime la duración. Luego tin-studio check WORK/<slug>.mp4 debe imprimir OK y tin-studio probe debe mostrar 1080x1920 con un flujo de audio.
  4. Si dura más de 40 segundos: elimina un paso o acorta líneas, vuelve a ejecutar voice, renderiza de nuevo.

5. Entregar

Copia el MP4 verificado a la ruta de salida declarada y nada más. El mensaje final es el storyboard: gancho, luego por paso el subtítulo, la línea de voz y lo que está en pantalla; la Duración total, voz, fondo y personaje utilizados; y cualquier afirmación que hayas suavizado porque la página no la respaldaba.

Reglas

Nunca te registres, inicies sesión, llenes un formulario, ni presiones comprar, enviar, eliminar, invitar o contactar. No uses ninguna cuenta. No captures páginas detrás de un inicio de sesión. No edites el DOM de la página para simular un estado. No crees ningún archivo en el checkout del proyecto que no sea la salida declarada.

Skills relacionados