Vai alla guida all’uso
Web Video Presentationdi ConardLi

Web Video Presentation Skill.

Una presentazione nel browser con il ritmo di un video, un momento parlato alla volta.

  • Presentazioni
  • Movimento
  • Narrazione
Revisione della fonte · Web Video PresentationSKILL.md
Attività Presentazioni Produce • Una presentazione React 16:9 basata sui clic, divisa in capitoli • Uno script parlato, una scaletta dei capitoli e dettagli di supporto tratti dalla fonte • File audio opzionali per ogni passaggio, per una modalità di registrazione con avanzamento automatico Prima di iniziare Usa Vite, React, TypeScript e strumenti Node. L'eventuale TTS dipende dal provider scelto, dalle credenziali e dall'adattatore; la registrazione finale richiede la cattura dal browser o un software di registrazione.
Sintesi editoriale · fonte rivista 2026-10-07 · non è un esempio generato

01 Funzionalità

Web Video Presentation

Un flusso di lavoro per presentazioni a battute di narrazione, con palco fisso, primo capitolo rivisto, registri di narrazione per capitolo e registrazione opzionale assistita dall'audio.

Flusso basato sulla fonteNon è un benchmark di esecuzione

L'approccio di lavoro

Web Video Presentation trasforma il materiale fornito in una presentazione web registrabile. Il risultato è un progetto Vite, React e TypeScript su un palco 16:9 fisso, non un sito di marketing responsive né un file video consegnato automaticamente. Ogni clic fa avanzare di una battuta di narrazione e sostituisce la scena con una composizione a schermo intero mirata.

Il flusso mantiene due riferimenti di contenuto: lo script parlato determina sequenza e ritmo, mentre l'articolo originale fornisce i dettagli che arricchiscono le immagini. Il file narrations.ts di un capitolo è il riferimento per numero e testo dei passaggi e dell'audio opzionale. Il primo capitolo viene completato e rivisto prima che gli altri capitoli ampliino il linguaggio visivo. La sintesi vocale è una decisione separata, da prendere dopo che l'esperienza web è pronta.

Risultati attesi

  • Una presentazione React 16:9 basata sui clic, divisa in capitoli
  • Uno script parlato, una scaletta dei capitoli e dettagli di supporto tratti dalla fonte
  • File audio opzionali per ogni passaggio, per una modalità di registrazione con avanzamento automatico
Vedi il brief di esempio

Dal brief alla revisione

  1. 01
    Preparare script e scaletta

    Conserva l'articolo fornito, adatta uno script parlato nella lingua originale e pianifica i confini dei capitoli e i contenuti dello schermo. La scaletta definisce il ritmo delle informazioni senza prescrivere ogni animazione.

  2. 02
    Allineare il piano

    Conferma insieme script, scaletta, tema, risorse e modalità di sviluppo, così che il primo capitolo abbia un brief di contenuto e visivo definito.

  3. 03
    Rivedere un capitolo completo

    L'agente principale costruisce un primo capitolo finito, con contenuti reali e il movimento previsto, completa la revisione e le correzioni prescritte, poi si ferma per l'approvazione obbligatoria dell'utente prima di qualsiasi capitolo successivo. Usa questo campione per risolvere problemi di ritmo e incoerenze dei design token.

  4. 04
    Scegliere audio e registrazione

    Se richiesto, genera la voce dai registri di narrazione del capitolo e controlla la durata dei segmenti. Altrimenti usa l'avanzamento manuale e aggiungi la voce durante la registrazione o il montaggio.

02 Quando usarlo

Quando usarla

Usa Vite, React, TypeScript e strumenti Node. L'eventuale TTS dipende dal provider scelto, dalle credenziali e dall'adattatore; la registrazione finale richiede la cattura dal browser o un software di registrazione.

Adatta a

  • Spiegazioni tecnicheUtile quando un concetto deve rivelare una relazione alla volta, portando comunque dettagli della fonte oltre le parole pronunciate.
  • Presentazioni di prodotto registrateAdatta a tutorial e presentazioni di prodotto che verranno registrati dal browser e richiedono un controllo preciso su ciò che è visibile a ogni battuta.

Limiti da verificare

  • Non è un sito responsiveIl palco fisso si adatta all'area visibile disponibile. È una strategia da presentazione, non un layout pensato per la normale lettura su dispositivi mobili.
  • L'audio è opzionale ed esternoLa voce richiede un provider configurato o un'altra via TTS. Un progetto web completato non prova che la sintesi vocale o la registrazione video finale siano avvenute.

Cosa portare

  • Articolo o scriptFornisci contenuti di partenza o una scaletta sostanziosa. La skill non è presentata come sostituto della decisione su cosa debba dire l'intervento.
  • Tema e risorseScegli il tono visivo e individua le catture di prodotto, i diagrammi o i segnaposto approvati disponibili per i capitoli pianificati.
  • Collaborazione e audioDecidi se i capitoli successivi richiedono revisioni singole o possono essere completati insieme, e autorizza separatamente qualsiasi backend di generazione vocale.

03 Decisioni importanti

Decisioni importanti

  1. Un unico registro di narrazione

    Allineare il numero di passaggi renderizzati del capitolo con il suo array di narrazione riduce i disaccordi tra ordine sullo schermo, testo parlato e segmenti audio generati.

  2. Movimento guidato dal contenuto

    La scaletta lascia le scelte di animazione all'implementazione, dove la relazione spiegata può determinare la rivelazione, invece di assegnare effetti arbitrari troppo presto.

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.

Controlla la configurazione

Conserva l'intero pacchetto della skill del repository, inclusi scaffold, riferimenti dei capitoli, temi e script audio opzionali.

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

Usa Vite, React, TypeScript e strumenti Node. L'eventuale TTS dipende dal provider scelto, dalle credenziali e dall'adattatore; la registrazione finale richiede la cattura dal browser o un software di registrazione.

Parti da un solo risultato

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

Brief di esempio
Usa Web Video Presentation per trasformare l'articolo allegato sul rendering del browser in una spiegazione in inglese di cinque minuti. Conserva l'articolo originale, crea lo script parlato e la scaletta, e proponi un tema tecnico sobrio. Fai in modo che il primo capitolo mostri la differenza tra layout e paint invece di usare slide di solo testo. Fermati per la sua revisione prima di costruire i capitoli successivi. Non sintetizzare la voce finché non scelgo un provider audio.

Esamina il risultato

Confronta l'output effettivo con questi criteri osservabili.

  • Il numero di passaggi visibili di ogni capitolo corrisponde alle sue voci di narrazione.
  • Il primo capitolo comunica il concetto con una dimostrazione visiva, non solo con paragrafi.
  • File audio e riproduzione automatica sono indicati solo se queste fasi opzionali sono state effettivamente completate.

OpenDesign offre uno spazio di lavoro di design locale per agenti di coding. Questo elenco non significa che la skill sia inclusa nel pacchetto né che strumenti esterni, credenziali e dipendenze software siano compresi.

05 Fonte e licenza

Fonte e licenza

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

Autore della fonte
ConardLi
Licenza
MIT
Snapshot rivisto
2026-10-07 · aaf9a82f5efd
Sintesi editoriale della fonte
Un flusso di lavoro per presentazioni a battute di narrazione, con palco fisso, primo capitolo rivisto, registri di narrazione per capitolo e registrazione opzionale assistita dall'audio.

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

06 Domande prima di iniziare

Domande prima di iniziare

Il risultato è un MP4?

Il risultato principale è un progetto per il browser. Registrazione e post-produzione trasformano quell'esperienza in un video; i file vocali opzionali possono aiutare ad automatizzare la riproduzione durante la registrazione.

Posso usare il mio provider vocale?

La fonte descrive un runner indipendente dal provider, con percorsi e adattatori integrati. Resta comunque da configurare un account funzionante o uno strumento locale.

Perché conservare l'articolo dopo aver scritto lo script?

Lo script governa il ritmo parlato, ma l'articolo resta un serbatoio di esempi, numeri e dettagli che possono sostenere lo schermo senza sovraccaricare la narrazione.

OpenDesign

Fai spazio alla prossima iterazione di design.

Tieni brief, materiale 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.

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