106.9K+Scarica
Vai alla guida all’uso
Whiteboard Animationdi iart-ai

Whiteboard Animation Skill.

Crea spiegazioni SVG a disegno progressivo con una mano che impugna un pennarello e segue ogni tratto.

  • Lavagna
  • Spiegazione visiva
Scarica OpenDesignVedi la guida all'uso
Esame della fonte · whiteboard-animationSKILL.md
Attività Crea spiegazioni SVG a disegno progressivo con una mano che impugna un pennarello e segue ogni tratto. Risultati Una scena HTML autonoma o composizione video richiesta. Prima di iniziare Fornisci ordine, disegni lineari e mano con punta identificabile. Includi tempi della voce se il disegno deve seguirla e scegli esplicitamente HTML o video.
Sintesi editoriale · fonte esaminata il 2026-11-02 · non è un esempio generato

01 Funzionalità

Crea spiegazioni SVG a disegno progressivo con una mano che impugna un pennarello e segue ogni tratto.

Crea lavagne con tratti ordinati, punta calibrata, tempi della narrazione e controlli visivi a istanti esatti.

Flusso di lavoro basato sulla fonteNon è un benchmark di esecuzione

L'approccio di lavoro

whiteboard-animation crea l’illusione di una mano che disegna diagrammi o testi. I tratti SVG compaiono in ordine mentre un’immagine di mano con pennarello segue la punta. Posizione e tracciato condividono il progresso e sono ispezionabili insieme a un istante esatto.

La fonte distingue una breve scena browser da un export narrato. La scena autonoma usa un HTML e una timeline navigabile; un filmato completo trasferisce gli stessi meccanismi in una composizione per fotogrammi. Ordine dei tratti, sollevamenti della penna e tempi della voce fanno parte del design.

Risultati attesi

  • Una scena HTML autonoma o composizione video richiesta.
  • Tratti SVG ordinati e risorsa della mano calibrata.
  • Fotogrammi fermi della mano durante un tratto e della lavagna finita.
Vedi il brief di esempio

Dal brief alla revisione

  1. 01
    Preparare grafica disegnabile

    Converti l’illustrazione in tratti aperti con ordine plausibile. Dai alle aree piene un contorno da rivelare prima del colore.

  2. 02
    Collegare punta e tratto

    Misura lo scostamento della punta nell’immagine e guida la posizione con lo stesso progresso del tracciato. Solleva la mano tra percorsi separati.

  3. 03
    Sequenziare ed esaminare

    Allinea disegni e narrazione, poi ferma a metà tratto. Controlla punta, completamento, layout e transizioni tra sezioni.

02 Quando usarlo

Quando usarla

Fornisci ordine, disegni lineari e mano con punta identificabile. Includi tempi della voce se il disegno deve seguirla e scegli esplicitamente HTML o video.

Adatta a

  • Il diagramma deve svilupparsi con la spiegazioneIl disegno sequenziale focalizza la relazione attuale invece di mostrare tutta la lavagna.
  • La scrittura manuale fa parte dell’effettoLa fonte copre tracciati dei glifi e comparse nell’ordine di lettura.

Limiti da verificare

  • Grafica piena non automaticamente disegnabileUna forma composta piena richiede preparazione per una comparsa credibile con un tratto.
  • L’export narrato aggiunge una pipelineL’esempio web in un file non produce da solo MP4 con voce.

Cosa portare

  • Contenuti ordinatiFornisci illustrazioni, etichette e sequenza di disegno.
  • Risorsa della manoFornisci un’immagine di una mano con pennarello o approvane una con la punta misurabile.
  • Narrazione e destinazioneIncludi voce o copione temporizzato, dimensioni e formato.

03 Decisioni importanti

Le decisioni importanti

  1. Punta convincente

    Il progresso condiviso impedisce alla mano di precedere la linea visibile.

  2. Ordine intenzionale

    Sollevamenti ed elementi sequenziali rendono l’azione fisicamente leggibile.

  3. Intermedi ispezionabili

    Un fermo immagine a metà tratto rivela difetti invisibili a velocità normale.

04 Esempio di brief

Prova un brief mirato

Il brief di esempio qui sotto non è stato testato. Controlla la configurazione della skill prima di usarlo.

Esamina la fonte e la configurazione

Fornisci illustrazioni, etichette e sequenza di disegno.

File sorgente originale
https://github.com/iart-ai/explainer-video-skills/blob/3e2d411b725d9a72939cf8e5eb81579e751373e7/skills/whiteboard-animation/SKILL.md

Il riferimento seguente apre le istruzioni originali. Verifica la configurazione del repository prima di usarle: non è un comando di installazione.

Inizia con un solo risultato

Adatta ambito, materiale di partenza e vincoli di questo brief prima di eseguire la skill.

Brief di esempio
Usa whiteboard-animation per spiegare una registrazione in tre passi dai disegni e dalla narrazione forniti. Rivela un passo alla volta nell’ordine parlato con la stessa mano. Prepara tracciati aperti e calibra la punta sul bordo di avanzamento. Nascondi riempimenti fino alla fine dei contorni e solleva la mano tra disegni. Consegna HTML autonomo con navigazione temporale esatta e lavagna completa per movimento ridotto. Esamina inizio, metà di un tratto per ogni passo e lavagna finale prima di proporre un export narrato.

Esamina il risultato

Confronta l'output effettivo con questi criteri osservabili.

  • Ferma a metà tratto e verifica la punta sull’estremità disegnata.
  • Controlla sollevamenti, ordine e riempimento dopo contorno.
  • Verifica che i tratti finali siano completi e che la lavagna statica per il movimento ridotto sia leggibile.

OpenDesign offre uno spazio di lavoro di design locale per agenti di programmazione. Questa scheda non significa che la skill sia inclusa nel pacchetto né che i suoi strumenti esterni, le credenziali e le dipendenze software siano compresi.

Scarica OpenDesignLeggi la guida rapida

05 Fonte e licenza

Fonte e licenza

Questa pagina descrive la revisione della fonte fissata e collegata qui sotto. Comportamento e requisiti upstream possono cambiare.

Proprietario della fonte
iart-ai
Repository
iart-ai/explainer-video-skills
File della skill
SKILL.md
Licenza
MIT
Snapshot esaminato
2026-11-02 · 3e2d411b725d
Sintesi editoriale della fonte
Crea spiegazioni SVG a disegno progressivo con una mano che impugna un pennarello e segue ogni tratto.

Sintesi originale di OpenDesign, basata sulla fonte collegata. Le stelle del repository sono un indicatore di popolarità datato, non l'uso della skill né un punteggio di qualità.

06 Domande prima di iniziare

Domande prima di iniziare

Posso animare direttamente SVG pieno?

La fonte richiede tratti disegnabili o contorni preparati. Una silhouette piena non fornisce da sola il percorso del pennarello.

Come resta allineata la mano?

Il meccanismo campiona il percorso allo stesso progresso di stroke-dashoffset e sottrae lo scostamento misurato della punta dalla posizione della mano.

Include narrazione?

Può pianificare il disegno sulla voce. Un video con narrazione incorporata richiede il percorso per fotogrammi, non solo HTML.

OpenDesign

Tieni insieme il brief e il lavoro di design.

Tieni brief, materiali di partenza e lavoro di design insieme in uno spazio di lavoro locale. Controlla la configurazione della skill prima di aggiungerla al tuo flusso di lavoro.

Scarica OpenDesignSfoglia le skill di design
File sorgente originale
https://github.com/iart-ai/explainer-video-skills/blob/3e2d411b725d9a72939cf8e5eb81579e751373e7/skills/whiteboard-animation/SKILL.md