106.9K+Descargar
Ir a la guía de uso
Whiteboard Animationpor iart-ai

Whiteboard Animation Skill.

Crea explicaciones SVG de dibujo progresivo con una mano que sostiene un rotulador y sigue cada trazo.

  • Pizarra
  • Explicación visual
Descargar OpenDesignVer la guía de uso
Revisión de la fuente · whiteboard-animationSKILL.md
Tarea Crea explicaciones SVG de dibujo progresivo con una mano que sostiene un rotulador y sigue cada trazo. Resultados Una escena HTML de dibujo progresivo o composición de vídeo solicitada. Antes de empezar Aporta orden, dibujos lineales y mano con punta identificable. Incluye tiempos de voz si debe seguirla y elige explícitamente HTML o vídeo.
Resumen editorial · fuente revisada el 2026-11-02 · no es un ejemplo generado

01 Qué hace

Crea explicaciones SVG de dibujo progresivo con una mano que sostiene un rotulador y sigue cada trazo.

Crea pizarras con trazos ordenados, punta calibrada, tiempos de narración y comprobaciones visuales en instantes exactos.

Flujo de trabajo basado en la fuenteNo es un benchmark de ejecución

El enfoque de trabajo

whiteboard-animation crea la ilusión de una mano dibujando un diagrama o texto. Los trazos SVG aparecen en orden mientras una imagen de mano con rotulador sigue la punta. Posición y trazo comparten progreso, por lo que pueden inspeccionarse juntos en un instante exacto.

La fuente distingue una escena breve de navegador de exportar vídeo narrado. La escena autónoma usa un HTML y una línea de tiempo navegable; un vídeo completo lleva los mecanismos a una composición por fotogramas. Orden, levantamientos del rotulador y tiempos de voz forman parte del diseño.

Entregables esperados

  • Una escena HTML de dibujo progresivo o composición de vídeo solicitada.
  • Trazos SVG ordenados y recurso de mano calibrado.
  • Fotogramas congelados mostrando la mano durante un trazo y la pizarra terminada.
Ver el brief de ejemplo

Del brief a la revisión

  1. 01
    Preparar dibujo trazable

    Convierte la ilustración en trazos abiertos con orden plausible. Da a regiones rellenas un contorno que aparezca antes del color.

  2. 02
    Vincular punta y trazo

    Mide el desplazamiento de la punta en la imagen y mueve la mano con el mismo progreso del trazo. Levántala entre rutas separadas.

  3. 03
    Secuenciar e inspeccionar

    Alinea dibujos con narración y congela a mitad de un trazo. Comprueba alineación, finalización, disposición y transiciones entre secciones.

02 Cuándo usarlo

Cuándo usarlo

Aporta orden, dibujos lineales y mano con punta identificable. Incluye tiempos de voz si debe seguirla y elige explícitamente HTML o vídeo.

Buen encaje

  • El diagrama debe revelarse al explicarloEl dibujo secuencial centra la atención en la relación actual sin mostrar todo de golpe.
  • La escritura manual es parte del efectoLa fuente cubre trazados de caracteres y revelados en orden de lectura.

Límites que conviene comprobar

  • El arte relleno no se dibuja automáticamenteUna forma compuesta sólida necesita preparación para un revelado creíble de un trazo.
  • Exportar narrado añade una cadenaEl ejemplo web de un archivo no produce por sí solo MP4 con voz.

Aporta estos datos

  • Contenido ordenadoAporta ilustraciones, etiquetas y secuencia de dibujo.
  • Recurso de manoProporciona una imagen de una mano con rotulador o aprueba una cuya punta pueda medirse.
  • Narración y destinoIncluye voz o guion temporizado, dimensiones y formato.

03 Decisiones importantes

Decisiones importantes

  1. Punta convincente

    El progreso compartido evita que la mano se adelante a la línea.

  2. Orden intencionado

    Levantar el rotulador y secuenciar elementos hace físicamente legible la acción.

  3. Intermedios inspeccionables

    Un fotograma intermedio revela defectos invisibles a velocidad normal.

04 Ejemplo de brief

Prueba con un encargo concreto

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

Revisa la fuente y la configuración

Aporta ilustraciones, etiquetas y secuencia de dibujo.

Archivo fuente original
https://github.com/iart-ai/explainer-video-skills/blob/3e2d411b725d9a72939cf8e5eb81579e751373e7/skills/whiteboard-animation/SKILL.md

La referencia siguiente abre las instrucciones originales. Revisa la configuración del repositorio antes de utilizarlas; no es un comando de instalación.

Empieza con un solo entregable

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

Brief de ejemplo
Usa whiteboard-animation para explicar un registro de tres pasos desde mis dibujos y narración. Revela un paso por vez en el orden hablado con la misma mano. Prepara trazados abiertos y calibra la punta para seguir el borde de avance. Oculta rellenos hasta completar contornos y levanta la mano entre dibujos. Entrega HTML autónomo con navegación temporal exacta y una pizarra completa para movimiento reducido. Inspecciona inicio, mitad de un trazo de cada paso y pizarra final antes de proponer exportación narrada.

Inspecciona el resultado

Comprueba el resultado real con estos criterios observables.

  • Congela a mitad de trazo y verifica punta sobre el extremo dibujado.
  • Comprueba levantamientos, orden y relleno tras contorno.
  • Verifica que los trazos finales estén completos y que la pizarra estática para movimiento reducido sea legible.

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

Descargar OpenDesignLeer la guía de inicio rápido

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
iart-ai
Repositorio
iart-ai/explainer-video-skills
Archivo del skill
SKILL.md
Licencia
MIT
Versión revisada
2026-11-02 · 3e2d411b725d
Resumen editorial de la fuente
Crea explicaciones SVG de dibujo progresivo con una mano que sostiene un rotulador y sigue cada trazo.

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

06 Preguntas antes de empezar

Preguntas antes de empezar

¿Puedo animar directamente SVG relleno?

La fuente exige trazos dibujables o contornos preparados. Una silueta rellena sola no aporta el recorrido del rotulador.

¿Cómo se mantiene alineada la mano?

El mecanismo muestrea la ruta al progreso de stroke-dashoffset y resta el desplazamiento medido de la punta de la posición de la mano.

¿Incluye narración?

Puede planificar el dibujo según la voz. Un vídeo con narración integrada requiere el flujo por fotogramas, no solo HTML.

OpenDesign

Mantén juntos tu encargo y tu trabajo de diseño.

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

Descargar OpenDesignExplorar skills de diseño
Archivo fuente original
https://github.com/iart-ai/explainer-video-skills/blob/3e2d411b725d9a72939cf8e5eb81579e751373e7/skills/whiteboard-animation/SKILL.md