Web Video Presentationpor ConardLi

Web Video Presentation Skill.

Una presentación en el navegador con el ritmo de un vídeo, un momento hablado a la vez.

Presentaciones
Movimiento
Narración

Revisión de la fuente · Web Video PresentationSKILL.md

Tarea Presentaciones Produce • Una presentación React de 16:9 controlada por clics y dividida en capítulos • Un guion hablado, un esquema de capítulos y detalles de apoyo extraídos de la fuente • Archivos de audio opcionales para cada paso, para un modo de grabación con avance automático Antes de empezar Usa Vite, React, TypeScript y herramientas de Node. La síntesis de voz opcional depende del proveedor elegido, las credenciales y el adaptador; la grabación final requiere captura del navegador o software de grabación.

Resumen editorial · fuente revisada 2026-10-07 · no es un ejemplo generado

01 Qué hace

Web Video Presentation

Un flujo de trabajo de presentación por momentos de narración, con un escenario fijo, un primer capítulo revisado, registros de narración por capítulo y grabación opcional asistida por audio.

Flujo de trabajo basado en la fuenteNo es una prueba de rendimiento de ejecución

El enfoque de trabajo

Web Video Presentation transforma el material proporcionado en una presentación web grabable. El artefacto es un proyecto con Vite, React y TypeScript sobre un escenario 16:9 fijo, no un sitio de marketing adaptable ni un archivo de vídeo entregado automáticamente. Cada clic avanza un momento de la narración y reemplaza la escena por una composición a pantalla completa y centrada.

El flujo mantiene dos referencias de contenido: el guion hablado determina la secuencia y el ritmo, mientras que el artículo original aporta detalles que enriquecen las imágenes. El archivo narrations.ts de un capítulo es la referencia del número y el texto de los pasos y del audio opcional. El primer capítulo se completa y se revisa antes de que los demás capítulos amplíen el lenguaje visual. La síntesis de voz es una decisión aparte, posterior a que la experiencia web esté lista.

Entregables previstos

Una presentación React de 16:9 controlada por clics y dividida en capítulos
Un guion hablado, un esquema de capítulos y detalles de apoyo extraídos de la fuente
Archivos de audio opcionales para cada paso, para un modo de grabación con avance automático

Ver el brief de ejemplo

Del brief a la revisión

01
Preparar el guion y el esquema
Conserva el artículo proporcionado, adapta un guion hablado en su idioma original y planifica los límites de los capítulos y el contenido de cada pantalla. El esquema marca el ritmo de la información sin prescribir cada animación.
02
Alinear el plan
Confirma juntos el guion, el esquema, el tema, los recursos y el modo de desarrollo para que el primer capítulo tenga un brief de contenido y de imagen definido.
03
Revisar un capítulo completo
El agente principal construye un primer capítulo terminado, con contenido real y el movimiento previsto, completa la revisión y las correcciones prescritas, y se detiene para la aceptación obligatoria del usuario antes de cualquier capítulo posterior. Usa esta muestra para resolver incoherencias de ritmo y de tokens de diseño.
04
Elegir audio y grabación
Si se solicita, genera la voz a partir de los registros de narración del capítulo e inspecciona la duración de los segmentos. Si no, usa el avance manual y añade la locución durante la grabación o la edición.

02 Cuándo usarlo

Cuándo usarla

Usa Vite, React, TypeScript y herramientas de Node. La síntesis de voz opcional depende del proveedor elegido, las credenciales y el adaptador; la grabación final requiere captura del navegador o software de grabación.

Encaja bien

Explicaciones técnicasÚtil cuando un concepto debe revelar una relación cada vez y, al mismo tiempo, llevar detalles de la fuente que van más allá de lo que se dice en voz alta.
Charlas de producto grabadasEncaja con tutoriales y presentaciones de producto que se grabarán desde el navegador y necesitan un control preciso de lo que se ve en cada momento.

Límites que conviene comprobar

No es un sitio web adaptableEl escenario fijo se escala al área visible disponible. Es una estrategia de presentación, no un diseño pensado para la lectura habitual en móvil.
El audio es opcional y externoLa voz requiere un proveedor configurado u otra vía de TTS. Un proyecto web terminado no demuestra que se haya sintetizado la voz ni grabado el vídeo final.

Aporta estos elementos

Artículo o guionProporciona contenido de origen o un esquema con sustancia. La skill no se presenta como un sustituto de decidir qué debe decir la charla.
Tema y recursosElige el ambiente visual e identifica las capturas de producto, los diagramas o los marcadores aprobados disponibles para los capítulos planificados.
Colaboración y audioDecide si los capítulos posteriores necesitan revisiones individuales o pueden completarse juntos, y autoriza por separado cualquier backend de generación de voz.

03 Decisiones importantes

Decisiones importantes

Un único registro de narración
Alinear el número de pasos renderizados de un capítulo con su array de narración reduce las discrepancias entre el orden en pantalla, el texto hablado y los segmentos de audio generados.
Movimiento guiado por el contenido
El esquema deja las decisiones de animación a la implementación, donde la relación que se explica puede determinar la revelación, en lugar de asignar efectos arbitrarios demasiado pronto.

04 Ejemplo de brief

Prueba un brief concreto

El brief de ejemplo siguiente no se ha probado. Revisa la configuración de la skill antes de usarlo.

Revisa la configuración

Conserva el paquete completo de la skill del repositorio, incluidos su estructura base, las referencias de capítulos, los temas y los scripts de audio opcionales.

Archivo de la fuente original

https://github.com/ConardLi/garden-skills/blob/aaf9a82f5efd73e87cc0998edc398e75bfc35901/skills/web-video-presentation/SKILL.md

Empieza con un solo entregable

Adapta el alcance, el material de origen y las restricciones de este brief antes de ejecutar la skill.

Brief de ejemplo

Usa Web Video Presentation para convertir el artículo adjunto sobre el renderizado en el navegador en una explicación en inglés de cinco minutos. Conserva el artículo original, crea el guion hablado y el esquema, y propón un tema técnico sobrio. Haz que el primer capítulo demuestre la diferencia entre layout y paint en lugar de usar diapositivas solo de texto. Detente para su revisión antes de construir los capítulos posteriores. No sintetices voz hasta que yo elija un proveedor de audio.

Inspecciona el resultado

Comprueba el resultado real con estos criterios observables.

El número de pasos visibles de cada capítulo coincide con sus entradas de narración.
El primer capítulo comunica su concepto con una demostración visual, no solo con párrafos.
Los archivos de audio y la reproducción automática solo se indican cuando esas fases opcionales se completaron realmente.

OpenDesign ofrece un espacio de trabajo de diseño local para agentes de programación. Este listado no significa que la skill esté incluida ni que se incluyan sus herramientas externas, credenciales y dependencias de software.

Descargar OpenDesign Leer la guía rápida

05 Fuente y licencia

Fuente y licencia

Esta página describe la revisión fijada de la fuente enlazada abajo. El comportamiento y los requisitos originales pueden cambiar.

Propietario de la fuente: ConardLi
Repositorio: ConardLi/garden-skills
Archivo de la skill: skills/web-video-presentation/SKILL.md
Licencia: MIT
Versión revisada: 2026-10-07 · aaf9a82f5efd

Resumen editorial de la fuente

Un flujo de trabajo de presentación por momentos de narración, con un escenario fijo, un primer capítulo revisado, registros de narración por capítulo y grabación opcional asistida por audio.

Resumen original de OpenDesign, basado en la fuente enlazada. Las estrellas del repositorio son una señal de popularidad con fecha, no el uso de la skill ni una puntuación de calidad.

06 Preguntas antes de empezar

Preguntas antes de empezar

¿El resultado es un MP4?

El resultado principal es un proyecto de navegador. La grabación y la posproducción convierten esa experiencia en un vídeo; los archivos de voz opcionales pueden ayudar a automatizar la reproducción durante la grabación.

¿Puedo usar mi propio proveedor de voz?

La fuente describe un ejecutor independiente del proveedor, con rutas y adaptadores integrados. Aun así, hay que configurar una cuenta o una herramienta local que funcione.

¿Por qué conservar el artículo después de escribir el guion?

El guion controla el ritmo hablado, pero el artículo sigue siendo una reserva de ejemplos, cifras y detalles que pueden apoyar lo que se ve en pantalla sin saturar la narración.

OpenDesign

Haz sitio para la próxima iteración de diseño.

Mantén tu brief, tu material de origen y tu trabajo de diseño juntos en un espacio de trabajo local. Revisa la configuración propia de la skill antes de añadirla a tu flujo de trabajo.

Descargar OpenDesign Explorar skills de diseño