aakashmehra/superbrag

/superbrag

URL de sitio web → vídeo promocional terminado: un vídeo corto y pulido sobre un sitio, con locución, animación sincronizada palabra a palabra y un lenguaje de diseño tomado del propio sitio. Los colores, las fuentes, las tarjetas, el fondo y el avatar provienen del sitio que se promociona. Cada imagen y afirmación proviene del sitio. Las “pantallas” son maquetas de interfaz renderizadas con Remotion, no píxeles generados por IA.

<skill-dir> = la carpeta que contiene este archivo. <ws> = la carpeta del proyecto actual del usuario. Configuración única (saltar si existen <skill-dir>/.venv y <skill-dir>/template/node_modules): necesita Node.js 22+, FFmpeg, Python 3 y espeak-ng; luego ejecuta bash <skill-dir>/scripts/setup.sh. Instala Remotion y Playwright, un entorno Python con Kokoro (voz local gratuita) y faster-whisper (sincronización de palabras), y escribe sus rutas en <skill-dir>/.env.

Invocación

/superbrag https://ejemplo.com
/superbrag https://ejemplo.com --focus "restaurantes"        # qué cliente/servicio contar
/superbrag https://ejemplo.com --voice minimax|elevenlabs|kokoro --voice-id <id>

Por defecto: la voz es Kokoro af_heart (gratuita, local). Si MINIMAX_API_KEY o ELEVENLABS_API_KEY están definidas en <skill-dir>/.env, se usa ese proveedor. La salida se guarda en <ws>/superbrag-output/<slug-del-dominio>/, con sufijo -2, -3 si la carpeta ya existe.

Paso 1: Capturar el sitio

export PATH="/opt/homebrew/bin:$PATH"   # macOS Homebrew; inofensivo en otros sitios
node <skill-dir>/scripts/capture.mjs <url> <run>

Esto escribe <run>/site.json (título, metadatos, encabezados, CTAs, texto completo, fuentes, enlaces de Google Fonts, colores, variables CSS y la lista de imágenes con texto alternativo y contexto circundante) y <run>/public/site/* (todas las imágenes más screenshot-hero.png y screenshot-full.png).

Luego mira las imágenes (Léelas). Los detalles impresos dentro de las capturas de pantalla (valoraciones, ubicaciones, tiempos de entrega) son una de las mejores pruebas, así que léelos, no solo el HTML. Si la página de inicio carece de foto de persona o capturas de pantalla del producto, captura una o dos páginas enlazadas (acerca de, proyectos) en la misma ejecución.

Puerta: puedes nombrar la persona o negocio, dónde están, los 2–4 servicios, la mejor prueba (valoración, cliente, cifras), la oferta o garantía, el texto del CTA, la URL y qué imagen es la foto de la persona, el avatar o logotipo, la captura de pantalla del producto y la imagen de prueba.

Paso 2: Escribir la historia (<run>/story.json)

Elige un tipo de cliente y un escenario concreto. Una historia clara supera a tres medias historias, así que deja fuera los demás servicios. Elige el servicio con las imágenes y pruebas más sólidas, a menos que --focus indique lo contrario. Luego completa la fórmula de 9 ritmos. Una frase hablada corta por ritmo, aproximadamente 75–85 palabras en total, que da unos 30 s.

#	tipo	trabajo	Línea de ejemplo (posflexgrowth.com)
1	search	Gancho: el cliente buscando ahora mismo	"Tu próximo paciente está buscando ahora mismo."
2	results	Problema: eres invisible (oscuro)	"Pero otra clínica aparece primero."
3	cost (enter: slide)	Coste del problema (recibo oscuro, barra se encoge)	"Y cada llamada perdida va a quien responde primero."
4	meet	La persona o marca: foto + avatar, nombre, cargo, lugar, eslogan	"Conoce a Sajal Kumar, fundador de PosFlex en Nueva Zelanda."
5	browser	Muestra el producto real (captura del sitio) con un panel que hace el trabajo	"Cada llamada perdida recibe un mensaje de texto y se agenda. Ninguna se pierde."
6	answer (enter: blur)	Prueba: aparece #1 + una respuesta de IA lo recomienda	"Entre los tres primeros en Google Maps, y mencionado cuando la gente pregunta a la IA."
7	quote	La oferta o garantía en papel, sellada y firmada	"Y nuestra promesa de riesgo cero, por escrito, con un objetivo de 12 semanas."
8	payoff	Eslogan + palabra destacada; la búsqueda inicial se convierte en el resultado	"Tres trabajos: ser encontrado, ser recomendado, ser agendado."
9	end	Nombre + botón CTA pulsado + URL	"Obtén tu plan de crecimiento gratuito de PosFlex Growth."

Reglas:

• El texto proviene del sitio. Reutiliza sus propias frases (metadescripción, líneas de servicio, cómo funciona, FAQ). Inventa solo los detalles del escenario que lo hagan concreto: la consulta de búsqueda, platos y precios, una hora de reserva. Mantén los detalles inventados plausibles para el lugar: moneda local, nombres locales.
• Repite la consulta. La misma consulta de búsqueda aparece en los ritmos 1, 2, 6 y 8. La historia se retroalimenta, y eso es lo que la hace parecer diseñada.
• Di las palabras clave. Las revelaciones se activan cuando se dice su palabra, así que place, la primera palabra de name/role/tagline, cada entrada de chips, highlight.cue, price y highlight (desenlace) deben aparecer en el say de esa escena.
• El lenguaje de diseño proviene del sitio. Nunca reutilices la apariencia de otra marca: cada vídeo debe parecerse al sitio que se introdujo. Lee site.json → design (color de página, radio de tarjeta, borde y sombra, botones, fuente h1, tamaño, peso y tracking, color de énfasis del titular, marcadores) y lee las capturas de pantalla public/site/section-*.png, luego establece:
  • primary = el color principal de la marca (botones y enlaces); ink = el color del texto del sitio; paper = design.pageBackground; dark = el tono más oscuro del sitio (su tinta o fondo de modo oscuro) para las escenas del problema.
  • highlight = un pastel que el sitio usa realmente (un color de marcador o una variable CSS como --bg: #DFFAAA); accent = un segundo color de marca usado para píldoras y números.
  • style: radius = el radio de tarjeta más común en px; border = el color del borde de la tarjeta (omitir si las tarjetas no tienen borde); shadow = flat (ninguna), soft (sombra tenue teñida) o lifted (profunda); tracking = espaciado entre letras de h1 ÷ tamaño de fuente (ej. -1.2px/60px = -0.02); headWeight = peso de h1; emphasis = design.headlineEmphasisColors[0].
  • Fuentes: head = fuente h1, ui = fuente del cuerpo, script = la fuente manuscrita del sitio, o Caveat. Todas deben ser de Google Fonts.
  • Si el sitio escribe titulares en dos tonos ("Llena tu calendario"), marca las mismas palabras con *asteriscos* en title, headline y name (ej. "PosFlex*.*" para un punto del logotipo). Se renderizan en el color de énfasis.
• background: light (el color de página del sitio, plano) para sitios claros, que cubre la mayoría. sky (nubes de dibujos animados a la deriva sobre un color de marca plano) solo si el sitio tiene un motivo de cielo o nubes. soft (color de marca plano con texto blanco) para marcas atrevidas y saturadas. Sin degradados en ninguna parte: solo colores planos.
• Avatar: build.py usa automáticamente el icono táctil de Apple del sitio para la insignia de Conoce y la tarjeta final cuando se captura uno. Solo establece avatar tú mismo cuando el sitio no tenga ninguno, o cuando esa escena trate sobre otra persona (ej. un estudio de caso que termina en el creador): entonces añade "keepAvatar": true.
• Foto: para meet, usa una persona real: el fundador o propietario, de la página acerca de o equipo si la página de inicio no tiene ninguna (captura esa página en una carpeta temporal y copia la imagen). Recorta cualquier nombre o pie de foto impreso en la imagen (ffmpeg -vf crop=...).
• ¿No es una persona? En meet, usa el logotipo o la fachada como photo y la mascota o logotipo como avatar, con kicker: "Conoce" y el nombre de la marca.
• Adaptación a otros negocios: un sitio de oficios podría ser search "fontanero de emergencia cerca de mí" → results competidores/anuncios → cost "llamadas perdidas esta semana" → browser formulario de presupuesto + clic para llamar → answer → quote "precio fijo" → payoff "Trabajo asignado". SaaS: la búsqueda se convierte en el trabajo a realizar, el coste son horas perdidas, y el navegador muestra la app.
• Pronunciación: comprueba los nombres de marca y persona. Prueba una línea de TTS por ortografía candidata, transcribe cada una con $WHISPER_PYTHON, y conserva la ortografía que devuelve el nombre real. Para PosFlex, "Pos Flex" se escuchó como "Poe's Flex", y "Poss Flex" se escuchó como "POSFLEX". Pon el ganador en voice.pronounce, ej. {"PosFlex": "Poss Flex"}. El texto en pantalla se mantiene correcto.

Esquema: copia <skill-dir>/examples/posflexgrowth.story.json (un sitio claro con tokens de style completos) o snapshare.story.json (una app, temática cielo, con escenas de teléfono) y cambia los valores. Estas propiedades existen por tipo de escena (todas opcionales a menos que se marquen como *):

• search: query*, title, suggestions[]
• results: query*, results[{title, sub}], title, pill
• cost: title*, label, items[{name, price}], totalLabel, total*, keep*, cut*, cutCue (la palabra que inicia la contracción de la barra, por defecto "comisión")
• meet: photo*, avatar, kicker, name*, role, place, tagline
• browser: screenshot*, tab, panel{title*, items[{name, price}], chips[], extra{image, title, sub}, highlight{label, value, cue}, button}
• answer: query*, result{image*, rank, name*, meta, rating, ratingLabel}, below, aiLabel, answer, source{icon, label}
• quote: title*, forLabel, checks[], priceLabel, price, stamp, signature, signNote, signCue (por defecto "escribiendo")
• payoff: headline*, highlight, query*, toast{title*, sub, meta}*
• end: name*, button*, avatar, url
• phone (apps y productos móviles): phone* (un PNG de teléfono con marco y fondo transparente, ej. de las capturas de pantalla del sitio o App Store), title*, kicker, big (una estadística grande como "*0*"), points[] (chips que aparecen cuando se dice su primera palabra), icon (icono de la app), side (left | right), bg (brand | paper | dark). Para un anuncio de app, reemplaza los ritmos 4–6 con 3–5 escenas de teléfono, una función cada una. Ver examples/snapshare.story.json.

Cada escena también puede tomar say, enter (cut | slide | blur, por defecto cut) y hold (segundos extra). Las rutas de imagen son relativas a <run>/public (site/...).

Puerta: story.json tiene 9 ritmos en este orden. Cada palabra clave aparece en su say. Todo el texto se remonta a site.json o las imágenes, aparte de los detalles del escenario.

Paso 3: Construir voz + línea de tiempo

python3 <skill-dir>/scripts/build.py <run>

Esto ejecuta TTS para cada línea (almacenada en caché por texto), recorta el silencio, coloca cada línea 0.18 s después del corte de su escena, obtiene las sincronizaciones de palabras con faster-whisper y escribe <run>/props.json y <run>/public/voice.wav. Imprime la línea de tiempo, que debe totalizar 28–34 s. Si es larga, acorta las líneas; no aceleres la voz. Vuelve a ejecutarlo después de cualquier edición de la historia; las ediciones solo visuales no vuelven a llamar a TTS.

Paso 4: Previsualizar, luego renderizar

bash <skill-dir>/scripts/render.sh <run> stills "40,120,200,300,450,560,680,780,880"   # elige fotogramas dentro de cada escena de la salida de build
bash <skill-dir>/scripts/render.sh <run>                                                # renderizado completo, unos 30 s

Lee stills/sheet.jpg antes del renderizado completo. Comprueba que el texto no se desborde de las tarjetas, que los nombres largos quepan (acorta el texto en lugar de reducir las fuentes), que las imágenes muestren el sujeto correcto y que los colores sean legibles sobre el fondo. Después del renderizado completo, lee qa-sheet.jpg (un fotograma por segundo).

Puerta: <run>/superbrag.mp4 existe a aproximadamente -14 LUFS (impreso). La hoja de QA muestra los 9 ritmos sin nada recortado.

Paso 5: Entregar

Informa al usuario de la ruta a superbrag.mp4, su duración, qué historia de cliente elegiste y por qué, y qué detalles se inventaron (la consulta, los precios). Ofrece un cambio de voz (MiniMax o ElevenLabs) si la lectura de Kokoro suena plana. Línea de crédito para publicar: "Música: Sascha Ende, ende.app (CC BY 4.0)".

Notas

• Remotion es gratuito para particulares y empresas de hasta 3 personas; las empresas más grandes necesitan una licencia (remotion.dev/license).
• Para cambiar el aspecto de todos los vídeos, edita template/src/scenes.tsx (diseños) y template/src/ui.tsx (movimiento, fondo, fuentes). Previsualiza con cd template && npx remotion studio src/index.ts --props=<run>/props.json --public-dir=<run>/public.
• Solo apaisado 1920x1080 por ahora. El vertical necesita sus propios diseños en scenes.tsx.