106.9K+Télécharger
Aller au guide d’utilisation
Whiteboard Animationpar iart-ai

Whiteboard Animation Skill.

Créez des explications SVG qui se dessinent avec une main au feutre suivant chaque trait.

  • Tableau blanc
  • Explication visuelle
Télécharger OpenDesignVoir le guide d'utilisation
Revue de la source · whiteboard-animationSKILL.md
Tâche Créez des explications SVG qui se dessinent avec une main au feutre suivant chaque trait. Résultats Une scène HTML autonome de dessin progressif ou une composition vidéo demandée. Avant de commencer Fournissez ordre de dessin, illustration au trait et main avec pointe identifiable. Incluez les temps de narration si le dessin suit la parole et choisissez explicitement HTML ou vidéo.
Résumé éditorial · source examinée le 2026-11-02 · ce n’est pas un exemple généré

01 Fonctionnement

Créez des explications SVG qui se dessinent avec une main au feutre suivant chaque trait

Créez des scènes de tableau blanc avec traits ordonnés, pointe de feutre calibrée, timing de narration et contrôles visuels à des instants précis.

Flux de travail fondé sur la sourcePas un benchmark d'exécution

La méthode de travail

whiteboard-animation crée l’illusion d’une main dessinant un diagramme ou une légende. Les traits SVG apparaissent dans l’ordre tandis qu’une image de main au feutre suit la pointe du dessin. Position de main et tracé révélé partagent la même progression et peuvent donc être inspectés ensemble à un instant exact.

La source distingue une courte scène navigateur d’un export vidéo narré. Une scène autonome utilise un fichier HTML et une timeline navigable ; un film complet transpose les mêmes mécanismes dans une composition pilotée par images. Ordre des traits, levers de crayon et timing de narration font partie du design.

Livrables attendus

  • Une scène HTML autonome de dessin progressif ou une composition vidéo demandée.
  • Des traits SVG ordonnés et une ressource de main au feutre calibrée.
  • Des images figées montrant la main pendant un trait et le tableau terminé.
Voir l'exemple de brief

Du brief à la revue

  1. 01
    Préparer un dessin traçable

    Convertissez l’illustration en traits ouverts dans un ordre plausible. Donnez aux régions pleines un contour à révéler avant la couleur.

  2. 02
    Relier la pointe au trait

    Mesurez le décalage de la pointe dans l’image et pilotez sa position par la même progression que le tracé. Levez la main entre chemins distincts.

  3. 03
    Séquencer et examiner

    Alignez chaque dessin sur sa narration, puis figez au milieu d’un trait. Vérifiez pointe, achèvement final, mise en page et transitions entre sections.

02 Cas d’usage

Quand l’utiliser

Fournissez ordre de dessin, illustration au trait et main avec pointe identifiable. Incluez les temps de narration si le dessin suit la parole et choisissez explicitement HTML ou vidéo.

Un bon choix

  • Un diagramme doit se déployer avec l’explicationLe dessin séquentiel concentre l’attention sur la relation actuelle plutôt que sur tout le tableau.
  • L’écriture manuelle fait partie de l’effetLa source couvre tracés de caractères et révélations suivant l’ordre de lecture.

Limites à vérifier

  • Un dessin rempli n’est pas automatiquement traçableUne forme composée pleine doit être préparée avant une apparition crédible en un trait.
  • L’export narré ajoute une chaîne de productionL’exemple web en un fichier ne produit pas seul un MP4 avec voix off.

Éléments à fournir

  • Contenu ordonnéFournissez illustrations, libellés et séquence de dessin prévue.
  • Image de mainFournissez ou approuvez une image de main au feutre dont la pointe est mesurable.
  • Narration et destinationIncluez voix off ou script minuté, dimensions et format requis.

03 Décisions importantes

Les décisions importantes

  1. Pointe convaincante

    La progression partagée empêche la main de devancer la ligne visible.

  2. Ordre de traits utile

    Les levers et éléments séquentiels rendent l’action physiquement compréhensible.

  3. États intermédiaires inspectables

    Une image au milieu d’un trait révèle des défauts invisibles à vitesse normale.

04 Exemple de brief

Essayez un brief ciblé

L'exemple de brief ci-dessous n'a pas été testé. Vérifiez la configuration du skill avant de l'utiliser.

Examinez la source et la configuration

Fournissez illustrations, libellés et séquence de dessin prévue.

Fichier source amont
https://github.com/iart-ai/explainer-video-skills/blob/3e2d411b725d9a72939cf8e5eb81579e751373e7/skills/whiteboard-animation/SKILL.md

Le lien ci-dessous ouvre les instructions d’origine. Vérifiez la configuration du dépôt avant utilisation ; ce n’est pas une commande d’installation.

Commencez par un livrable

Adaptez le périmètre, les sources et les contraintes de ce brief avant d’exécuter le skill.

Exemple de brief
Utilise whiteboard-animation pour expliquer une inscription en trois étapes à partir de mes dessins au trait et de la narration. Révèle une étape à la fois dans l’ordre parlé, avec la même main. Prépare des tracés ouverts et calibre la pointe pour qu’elle reste à l’extrémité du trait en cours. Garde les remplissages cachés jusqu’à la fin des contours et lève la main entre dessins. Livre un aperçu HTML autonome avec navigation temporelle précise et un tableau achevé pour le mode de réduction des animations. Inspecte le début, un moment au milieu d’un trait pour chaque étape et le tableau final avant de proposer un export vidéo narré.

Examinez le résultat

Comparez le résultat réel à ces critères observables.

  • Figez au milieu d’un trait et vérifiez la pointe sur l’extrémité dessinée.
  • Vérifiez levers, ordre des tracés et remplissage après contour.
  • Vérifiez que les derniers traits sont complets et que le tableau statique du mode de réduction des animations reste lisible.

OpenDesign fournit un espace de travail de design local pour les agents de code. Cette fiche ne signifie pas que le skill est fourni avec ses outils externes, ses identifiants et ses dépendances logicielles.

Télécharger OpenDesignLire le guide de démarrage rapide

05 Source et licence

Source et licence

Cette page décrit la révision source figée liée ci-dessous. Le comportement et les exigences en amont peuvent changer.

Propriétaire de la source
iart-ai
Dépôt
iart-ai/explainer-video-skills
Fichier du skill
SKILL.md
Licence
MIT
Version examinée
2026-11-02 · 3e2d411b725d
Résumé éditorial de la source
Créez des explications SVG qui se dessinent avec une main au feutre suivant chaque trait.

Résumé original de OpenDesign, fondé sur la source liée. Les étoiles du dépôt sont un indicateur de popularité daté, pas une mesure d'utilisation du skill ni une note de qualité.

06 Questions avant de commencer

Questions avant de commencer

Puis-je animer directement un SVG rempli ?

La source exige des traits traçables ou contours préparés. Une silhouette pleine ne fournit pas à elle seule le chemin du feutre.

Comment la main reste-t-elle alignée ?

Le mécanisme échantillonne le chemin à la progression de stroke-dashoffset et soustrait le décalage mesuré de la pointe à la position de la main.

Inclut-il une narration ?

Il peut planifier le dessin sur une narration. Une vidéo avec narration intégrée exige la voie vidéo pilotée par images, pas seulement l’aperçu HTML.

OpenDesign

Gardez votre brief et votre travail de design au même endroit.

Gardez votre brief, vos sources et votre travail de design ensemble dans un espace de travail local. Vérifiez la configuration propre au skill avant de l'ajouter à votre flux de travail.

Télécharger OpenDesignParcourir les skills de design
Fichier source amont
https://github.com/iart-ai/explainer-video-skills/blob/3e2d411b725d9a72939cf8e5eb81579e751373e7/skills/whiteboard-animation/SKILL.md