Crea video di prodotto con l'AI che fermano lo scroll
Nove film reali, i primi frame che sono cambiati e un workflow pratico per trasformare l'aggiornamento di un prodotto in un video social, con Claude Code, HyperFrames e prompt riutilizzabili.
Casi di studio
Video di lancio di OpenDesign Motion
Prompt di ricreazione (il prompt è in inglese)
A 37s 16:9 launch film, "Introducing OpenDesign Motion" — the open-source alternative to Claude Motion. Playful, premium, minimal text, cut to an upbeat 115 BPM funk track.
Open on a living oil-painting sky where a prompt types itself in the OpenDesign composer; on send, the letters fly into a 3D title. On the drop, the Claude logo appears and "The open-source alternative" slams in above it. Pull back into a tilting wall of motion films and dive into three of them. Beat break: "Not just Opus 5.5." Then "Any model. Any agent." with logos flicking on the beat. In the real OpenDesign workspace, one click on the model pill spins a floating reel of models while the preview swaps films. The preview morphs into the OpenDesign logo, becomes a 3D die rolling one case per face (each arrow styled like its film), and lands on the classic mark — arrow spins on the final hit, "OpenDesign Motion", open-design.ai.Versione verticale
Video promozionale di Motion Week
Prompt di ricreazione (il prompt è in inglese)
A 40s 16:9 main-tweet film for "OpenDesign Motion Week" (Oct 20–27): DeepSeek V4.1 Flash runs at DeepSeek's official off-peak price all day for a week. Key line: "Opus 5.5-level motion. DeepSeek off-peak price." Glitch-hop track, dense playful motion, soft-shadow real-UI cards, Albert Sans with green italic accents. Never hard-shadow sticker style.
A price chart peaks under a DeepSeek ticker card; the OpenDesign arrow cursor grabs the peak and drags it down into a valley. A 3D "50% / Off-peak price" flips to "100% / Full model" with the chip "Official DeepSeek API · not quantized". A split-flap board flips "OCT 20 – 27" to "$60 / WEEK" as the official GO plan logo draws on; tiles compare ×0.5 vs ×0.25. Quick reset beat: the arrow turns once, the 5-hour and 7-day bars refill, "For every subscriber." Giant knockout letters "MOTION" act as windows into motion films; dive in for a beat-cut montage. Then the real flow: OpenDesign composer, Motion design chip, prompt, frames assemble, film plays → an X compose window, post, likes. Four reward objects, one per 1.5 beats: membership (GO/PLUS/PRO/MAX logos), creator verification, early beta access, usage reset card. A pill "Tag @OpenDesignHQ for a chance to win" rides over a tilted wall of posts for ~4s; the posts tile into a mosaic OpenDesign mark and the cursor arcs home into the arrow slot on the final hit.Video di chiarimento sui prezzi
Prompt di ricreazione (il prompt è in inglese)
A 45s 16:9 comedic clarifier for OpenDesign Motion Week, with a cute original mascot and a sweet voiceover. Bouncy cute track (~150 BPM). Frame 0 is a full cover card, no entrance: OpenDesign logo, "// quick clarification · Motion Week, Oct 20 – 27", headline "DeepSeek off-peak week, explained." and chips "$60 a week? / Every plan 2× / Off-peak 24/7 / Full model".
Mascot: an original cute girl drawn in halftone — round face, big glossy eyes with two highlights, twin tails with curled ends, blue bows, pink heart-shaped sunglasses, an OpenDesign-logo pin. She is smug: "Think $60 is less than $120?" Record scratch: "Think again." A blue wipe: "It's $60 per week." Cards: usual week $30 vs this week $60, 2× stamp. "You read half. It's double." Then every plan doubles for this model (Go $30→$60, Plus $40→$80, Pro $90→$180, Max $150→$300 per week; resets every 7 days), so this month is "$150+, not $120". A 24-hour dial: off-peak price 24/7. "The full model." Official DeepSeek API, not quantized. A dotted globe with pins: "We serve users worldwide. In some regions, check your network and IP." "Questions? Find us on Discord." End card: "double. all week." Keep it generous and upbeat; never show the offer ending.Video di configurazione con un clic
Prompt di ricreazione (il prompt è in inglese)
A 47s 16:9 promo for OpenDesign's One-click agent setup. Happy cartoon track (~95 BPM), playful and eye-catching rather than faithful to the website's design spec. Frame 0: "OpenDesign API into [agent] in one click." with chips for Claude Code, Codex, Grok Build, OpenCode, OpenClaw, Hermes Agent; on each beat the agent name and a full-screen brand-colour flood swap.
Then the green one-click button is clicked on every beat and turns into something new each time: a toggle, a key in a lock, a slot machine of agents, an orbit of models, a crumpled .env file, a plug meeting a socket, confetti. The OpenDesign logo appears, the camera dives into its arrow, and the arrow grows eyes and becomes the guide. It walks through the real pages: OpenDesign app Upgrade → pricing (Go) → checkout ($8 first month) → console → API Keys → "One-click agent setup" → install CC Switch (free, open source) → pick Claude Code + model (default deepseek-v4.1-flash) → "Import into CC Switch" → confirm → a new key "Claude Code · Mac" turns Active. "Your original config is kept. Switch back anytime." Close with "One click. Any agent. Any model." and the path open-design.ai → API Keys → One-click setup; the guide flies back into the logo ring on the final hit.Video tutorial sulle API
Prompt di ricreazione (il prompt è in inglese)
A 67s 16:9 tutorial: "Use the OpenDesign API in your agent." Playful funk track, no voiceover, English on-screen text. Frame 0 states the topic with agent chips (Claude Code, Codex, Hermes, OpenCode, + more).
Hero character: the arrow from the OpenDesign logo, acting as the cursor. Opening: on each beat the screen floods with a different agent's brand colour while API keys rain into a messy pile, then implode into "One key." Show a wall of supported model logos (official icons from open-design.ai/pricing, never redrawn), then the agents they plug into. Then 3 clear steps in recreated product UI: 1) subscribe to Go monthly ($8 first month, then $10), 2) open the console → API Keys → Create API key, 3) paste the base URL and key into your agent (Chat Completions / Responses: https://amr-link.open-design.ai/v1; Anthropic Messages for Claude Code: https://amr-link.open-design.ai). Mention DeepSeek V4.1 Flash auto-upgraded to 1017 and the 5-hour / 7-day usage reset. Tease One-click setup (coming soon): "3 steps → 1 click", "Click once. Every agent ready." Mask all keys and emails (sk-amr-••••, [email protected]).Video sugli aggiornamenti
Prompt di ricreazione (il prompt è in inglese)
A 22s 16:9 promo whose only goal is to get people to open open-design.ai/updates. Playful and bouncy, built in Three.js. Lime (#87EA5C) and ink, two-tone 3D type (ink faces, lime sides) shot at eye level so it reads on a phone.
A gummy, jelly-like 3D "39" (releases since Apr 28) drops in and hops with squash-and-stretch, then flips to "67" (updates). Real update cards swirl around it; four milestone cards fly at the camera: Plugin Everything, Team workspace, Arena, Motion. The cards fall and a 3D "Can't keep up?" lands. A thick 3D screen shows the real Updates page; the cursor taps RSS. The URL "open-design.ai/updates" drops in letter by letter, and an extruded OpenDesign logo lands on the final hit. No video clips, no stat slides.Video di esempi di design
Prompt di ricreazione (il prompt è in inglese)
A 34s 16:9 promo for the OpenDesign Showcase (open-design.ai/showcase), a growing library of AI design examples, each with the full prompt that made it. Modern Apple-ad electronic track; smooth, continuous camera (no shaking or beat punches); one main message per screen, held long enough to read.
Frame 0 already carries the headline over a live, moving case (the Harbor Skirmish FPS island): "98+ AI design examples. Every prompt included." The camera glides back into a tilted 3D wall of real cases playing as footage, not screenshots. A giant word "Motion" appears with each letter windowing a different motion film; dive into the "o" for four beat cuts. Then a case goes full-bleed and its prompt card slides up, the prompt types out, a cursor clicks "Copy prompt". Same prompt, different models: side-by-side outputs with white monochrome model logos on a 3D arc. Never imply a fixed size — say "and counting", "latest models". End on the OpenDesign logo and the URL.Video sull'utilizzo
Prompt di ricreazione (il prompt è in inglese)
A 19s 16:9 quote-tweet video for OpenDesign's new Usage page. Same visual language and music grid as the Motion Week film. Opens on "How much have you used?"
Path in recreated product UI: Console → choose workspace → Usage (right under API Keys). A table of calls shows time, member, model, input/output/cache tokens and credits; filters by member, model and time range. Hover the ⓘ next to credits to open the breakdown: DeepSeek V4.1 Flash multiplier ×0.5 → ×0.25 during Motion Week. Click the underlined rules link: a browser bar types open-design.ai/model-credits and the page "Design Plan credit multipliers" slides in. End: "Stay on top of your usage. Track every call. Plan every credit." + OpenDesign logo.Parti dal post, non dall'animazione
Prima di aprire una timeline, scrivi una frase per ciascuna di queste domande:
- Dove apparirà? Un annuncio principale, un post di follow-up, un tutorial o un chiarimento?
- Cosa deve capire chi guarda? Scegli un'unica affermazione che il film possa dimostrare.
- Cosa deve succedere dopo? Visitare una pagina, provare una funzione, salvare i passaggi, rispondere o creare un progetto?
Per un lancio principale, mostra presto il risultato più forte del prodotto e rendi il film comprensibile da solo. Per un follow-up, isola un solo aspetto. Per un chiarimento, rendi esplicito il dato corretto prima che la battuta o l'abbellimento visivo prendano il sopravvento.
Il tuo primo deliverable: un breve brief con pubblico, posizionamento, un messaggio, un'azione e la fonte di ogni affermazione sul prodotto. Se due messaggi sono in competizione, dividili in due film.
Passaggio 1: crea un brief verificabile
Configura prima Claude Code. La guida rapida di HyperFrames documenta attualmente questa installazione del plugin:
claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframesIn Claude Code, richiama /hyperframes:hyperframes in una cartella di progetto dedicata. Chiedigli di creare una breve composizione di prova, di mostrarne l'anteprima e di esportare un MP4 prima di iniziare il film della campagna. Segui le istruzioni di render del plugin installato, così che i comandi corrispondano alla tua versione.
Crea un file BRIEF.md nel progetto video. Includi l'URL attuale del prodotto, la formulazione approvata, le unità esatte per i numeri e la data in cui li hai verificati. Un prezzo senza il periodo di fatturazione non è un dato completo. Il numero di elementi di una libreria preso da una registrazione precedente non è il numero attuale.
Raccogli il logo ufficiale, la grafica del brand, screenshot o registrazioni dello schermo, esempi originali ed eventuali film di riferimento che hai il permesso di studiare. Tieni il materiale sorgente separato dagli export, così potrai sostituire uno screenshot senza perdere un montaggio approvato in precedenza.
Usa Claude Code per pianificare e implementare il progetto, HyperFrames per il render dell'animazione basata su HTML, e GSAP o Three.js quando l'idea visiva li richiede. Usa FFmpeg per il montaggio audio e Kokoro TTS per la voce fuori campo. Non servono tutti gli strumenti per ogni film: un annuncio basato sulla tipografia può richiedere solo una composizione bidimensionale.
Apri il prodotto reale prima di pianificarne la dimostrazione. Controlla le etichette di navigazione, l'ordine dei pulsanti e il risultato. Usa un account demo e sostituisci chiavi, indirizzi e nomi di workspace reali prima di registrare.
Passaggio 2: scegli una direzione prima del render
Chiedi due o tre direzioni concrete: il frame di apertura, un elemento visivo ricorrente, la sequenza delle inquadrature e il finale. Ogni direzione deve spiegare come comunica lo stesso brief.
Evita di scegliere tra aggettivi vaghi come «premium» e «giocoso». Scegli tra idee visibili: una freccia che tira giù un prezzo, un cursore che compone un flusso di configurazione, o un numero elastico che rivela un muro di aggiornamenti.
Quando la direzione è incerta, chiedi alcuni style frame. Devono contenere parole e asset reali, in particolare il titolo più lungo e l'inquadratura di interfaccia più affollata. Approva composizione e messaggio prima di impegnarti in un render completo.
Il film sugli aggiornamenti è un utile controesempio. Le sue iterazioni sono passate da un contatore di versioni a una timeline, a un flipbook, a un trattamento pittorico e infine a numeri 3D elastici. Ripetere il render non poteva sostituire un accordo sulla direzione.
Passaggio 3: scegli la musica e pianifica i beat
Ascolta tu stesso i brani candidati. Chiedi all'agente link di anteprima, dettagli sulla licenza e una descrizione di intro, crescendo e drop. Non scegliere basandoti solo su una classifica di popolarità o sul nome di un file.
Abbina la struttura del brano alla storia: affermazione iniziale, dimostrazione, payoff e schermata finale. Taglia sui confini musicali e preserva la frase. Quando una buona scena ha bisogno di più tempo, rivedi il montaggio musicale invece di eliminare la scena solo per rientrare in una durata arbitraria.
Se il film ha una voce narrante, stabilisci i tempi del parlato prima di rifinire l'animazione. Rendi il messaggio comprensibile senza audio, poi usa il suono per aggiungere energia e chiarire le azioni.
Controlla la licenza per l'uso commerciale previsto. La registrazione in Content ID e il permesso di usare un brano sono due questioni distinte: l'assenza di segnalazioni automatiche non è una prova di licenza. Conserva licenza e fonte insieme al progetto.
Passaggio 4: dai un compito al primo frame
Metti in pausa il video al tempo zero. Chi non ha mai visto il post riesce a capire di cosa parla il video? Un frame quasi vuoto che diventa chiaro un secondo dopo può non superare questo test.
Inserisci nella composizione un titolo breve e leggibile. Porta in scena il prodotto o il problema. Usa il primo movimento per far avanzare quel messaggio, invece di far aspettare chi guarda che arrivi il titolo.
Chiarimento: un numero è diventato una spiegazione
Percorso guidato delle API: un'apertura vuota è diventata una promessa
Configurazione con un clic: la domanda è diventata la risposta
Controlla questi frame alle dimensioni di un telefono. Se il titolo richiede lo zoom, riduci le decorazioni concorrenti o ricomponi l'inquadratura. Non affidarti al post di accompagnamento per spiegare un'immagine illeggibile.
Passaggio 5: anima una storia, non un mazzo di carte
Scegli un elemento ricorrente che colleghi le scene: un cursore, una freccia, un personaggio o un oggetto. Dagli un motivo per muoversi. Una freccia può tirare un prezzo; un cursore può guidare una configurazione; un contatore può rivelare una raccolta in crescita.
Usa l'interfaccia reale del prodotto quando un passaggio dipende da un controllo effettivo. Un'interfaccia fittizia decorativa può sembrare più pulita ma insegnare l'azione sbagliata. Lascia che i caratteri grandi portino la frase chiave e che la dimostrazione porti il dettaglio.
Per la tipografia tridimensionale, controlla il contrasto tra la faccia e i lati di ogni lettera. Mantieni l'angolo di lettura abbastanza semplice da rendere il numero subito riconoscibile. Rimuovi etichette minuscole e linee HUD decorative quando competono con il messaggio.
Nel motion renderizzato, ogni frame deve essere riproducibile a partire dal suo timestamp. Evita logiche di animazione che dipendono dall'esecuzione del frame precedente: un render segmentato o parallelo può valutare i frame fuori sequenza. Prova alcuni timestamp non consecutivi prima di perdere tempo in un export completo.
Passaggio 6: rivedi l'export completo
Gli style frame dimostrano la composizione; solo l'export dimostra ritmo, transizioni, audio e finale. Guarda ogni render di revisione completo una volta con l'audio e una volta senza. Poi esamina i momenti che non hanno funzionato.
Dai da tre a sei note specifiche per ogni giro. Per ciascuna, indica l'intervallo di tempo o la scena, descrivi il problema visibile e indica il risultato voluto. Indica anche cosa deve restare invariato. «Il primo titolo funziona; tienilo. Tra 8 e 11 secondi le card diventano troppo piccole da leggere sul mio telefono» è una nota su cui si può agire.
Quando la tua reazione è solo «piatto» o «brutto», chiedi una diagnosi prima di un'altra riscrittura completa. Il problema è il ritmo, il contrasto, la tipografia, il movimento di camera o troppi elementi non correlati? Scegli la modifica più piccola che risolve il problema reale.
Concludi il feedback chiedendo all'agente di controllare in autonomia i problemi correlati. Non sostituisce la tua revisione: evita che l'implementazione si fermi all'elenco letterale dei commenti.
Passaggio 7: ricontrolla i fatti ed esporta
Usa il brief approvato più recente come checklist. Verifica prezzi e unità, nomi supportati, conteggi, loghi, URL ed eventuali date dell'offerta rispetto alle fonti. Se il lancio sta ancora cambiando, trattieni l'export finché i fatti non sono stabili.
Ispeziona gli screenshot alla ricerca di chiavi, email, nomi di workspace e dettagli degli account. Usa valori demo palesemente finti, non credenziali plausibili. Verifica che esempi, personaggi, musica e asset vocali possano essere usati nella pubblicazione prevista.
Guarda il file esportato dall'inizio alla fine. Conferma che l'audio sia presente dove previsto, che il testo resista alla compressione, che il finale resti sullo schermo abbastanza a lungo e che l'ultimo frame non sia vuoto per errore. Conserva il progetto modificabile, il brief, gli asset con licenza e l'export approvato.
Passaggio 8: ricomponi, pubblica e impara
Crea l'altro rapporto d'aspetto dopo l'approvazione del montaggio principale. Riposiziona il testo, ridimensiona il protagonista e scegli quali inquadrature dell'interfaccia devono restare dentro una card intatta. Ritagliare il file orizzontale non sostituisce il controllo di ogni inquadratura.
Scrivi il post attorno allo stesso unico messaggio. Mantieni coerente l'azione richiesta tra il post e la schermata finale. Se usi un link tracciato, testa la destinazione e registra la denominazione della campagna prima di pubblicare.
Dopo la pubblicazione, cerca le domande e i fraintendimenti ricorrenti: possono diventare il prossimo breve film. Confronta i risultati all'interno di una finestra di report coerente e distingui copertura, coinvolgimento, visite e azioni nel prodotto.
Prompt riutilizzabili
Sostituisci le parentesi prima di usare questi template.
Brief iniziale
Voglio promuovere [funzionalità, pagina o campagna]: [URL].
Pubblico: [a chi deve interessare].
Collocazione: [annuncio principale / follow-up / tutorial / chiarimento].
Un solo messaggio: [l'unica cosa che gli spettatori devono capire].
Prossima azione: [visitare / provare / salvare / rispondere / creare].
Formato principale: 16:9. Pianifica in seguito una versione 9:16 composta separatamente.
Fatti e fonti:
[Documentazione attuale del prodotto, brief approvato, pagina dei prezzi e data di verifica.]
Scrivi in BRIEF.md le affermazioni verificate con le relative unità di misura. Segnala tutto ciò che è incerto.
Materiali:
- Logo ufficiale: [percorso]
- Grafiche del brand e video di esempio originali: [percorsi]
- Accesso al prodotto demo o registrazioni dello schermo anonimizzate: [dettagli]
Implementazione: Claude Code + HyperFrames; usa GSAP o Three.js quando l'idea lo richiede.
Usa passaggi reali del prodotto. Non esporre credenziali né dati personali degli account.
Studia i riferimenti per composizione e motion; non riutilizzare filmati di terze parti senza autorizzazione.
Il primo fotogramma deve spiegare di cosa si tratta. Mantieni leggibile su telefono il testo essenziale.
Mostra il valore del prodotto attraverso il motion e la dimostrazione. Evita piccole etichette decorative.
Per la musica, fornisci link di anteprima e informazioni sulla licenza, così che io possa verificarli e scegliere.
Non renderizzare ancora il video completo. Proponi 2–3 concept concreti con fotogramma di apertura,
protagonista visivo, sequenza delle inquadrature, direzione sonora e finale.Rivedi un'iterazione
Mantieni queste parti approvate: [scene, tempi, tipografia o musica].
1. A [timestamp / scena], vedo [problema specifico].
Lo spettatore dovrebbe invece capire o percepire [risultato desiderato].
2. A [timestamp / scena], cambia [elemento specifico] perché [motivo].
3. A [timestamp / scena], verifica [leggibilità / ritmo / audio / accuratezza del prodotto].
Spiega la causa prima di procedere a un ampio ridisegno. Controlla se le scene adiacenti presentano lo stesso problema.
Conserva il brief approvato e le parti non correlate. Renderizza un nuovo MP4 completo.
Guarda l'esportazione e segnala eventuali problemi rimasti prima di consegnarla.Controllo finale dell'export
Controlla l'MP4 finale esportato, non solo la composizione sorgente.
- Al tempo zero, uno spettatore nuovo riesce a identificare l'argomento a dimensione telefono?
- Il messaggio unico è chiaro senza audio?
- I passaggi dell'interfaccia, i numeri, le unità, i loghi e gli URL sono stati verificati rispetto a BRIEF.md?
- I dettagli privati degli account sono stati rimossi?
- Le autorizzazioni per musica, esempi, personaggi e voce sono documentate?
- Ogni transizione viene renderizzata correttamente in timestamp non consecutivi?
- Hai guardato l'intera esportazione con l'audio e controllato la schermata finale?
- La versione verticale è stata ricomposta e guardata separatamente?
Elenca i controlli effettivamente eseguiti, i problemi irrisolti e l'esportazione esatta esaminata.
Non segnare come superati i controlli non eseguiti.Domande frequenti
Mi serve After Effects per questo workflow?
Il workflow mostrato usa Claude Code e il rendering basato su HTML con HyperFrames. Non richiede After Effects. Devi comunque dirigere la storia, controllare gli asset e rivedere animazione e audio esportati.
Devo iniziare con un render completo o con gli style frame?
Inizia con gli style frame quando la direzione visiva è incerta. Una volta concordato il concept, rivedi gli export completi per valutare tempi e audio. Nessuno dei due tipi di revisione sostituisce l'altro.
Quanto deve durare un video di prodotto?
Abbastanza da trasmettere il suo unico messaggio senza riempitivi. Gli esempi di origine vanno da brevi follow-up a un percorso di configurazione più lungo. Scegli la durata in base al compito e verifica che ogni scena contribuisca.
Posso usare lo stesso montaggio in verticale?
Riutilizza la storia e gli asset, ma controlla la composizione inquadratura per inquadratura. Le dimostrazioni di interfaccia spesso richiedono una card intatta o una nuova disposizione per restare leggibili in 9:16.
Il tuo primo progetto
Scegli una funzione reale e un'azione che vuoi far compiere a chi guarda. Scrivi il brief, scegli un frame di apertura, approva una direzione visiva e realizza un film orizzontale completo. Rivedilo su un telefono prima di passare ad altri formati o a post di follow-up.
