Claude Design + Hyperframes: Video Editing op Basis van Prompts
Het was 23:14 uur op een vrijdagavond toen ik eindelijk toegaf wat ik al twee weken voor me uitschoof.
Ik zat aan mijn derde beker cold brew, mijn derde render van dezelfde 90-seconden explainervideo, en mijn derde poging om een tekstcallout precies op het woord “automatisering” te laten landen, in plaats van 0,4 seconden erna. De audiotrack was een opname van mijzelf terwijl ik door een klantendashboard liep. De visuals moesten bestaan uit strakke on-screen tekst, een paar grafieken en een lower third in onze merkkleuren. Gewoon standaardwerk.
Wat ik op de harde manier ontdekte, is dat promptgestuurd videobewerken — waar iedereen sindsdien onafgebroken over post sinds HeyGen Hyperframes uitbracht op 17 april en Anthropic stilletjes video-expo’s toevoegde aan Claude Design in diezelfde week — een heel specifiek faalpatroon kent. De AI luistert niet naar de audio. Kan ook niet. Hij heeft geen idee wanneer je het woord “automatisering” uitspreekt. Hij weet alleen wat jij hem vertelt.
Dat is het eerste wat niemand uitlegt in de launchvideo’s. En het is uiteindelijk het punt dat bepaalde of deze workflow me daadwerkelijk tijd bespaarde, of gewoon het zoveelste slimme speeltje werd dat ik na een week voor gezien hield.
Dit artikel is het eerlijke verhaal van wat er in die twee weken gebeurde. Ik heb dezelfde 90-seconden video opgebouwd in beide tools — eerst in Claude Design, daarna in Hyperframes via Claude Code — en ik neem je stap voor stap mee: wat elke tool daadwerkelijk doet, waar elk stuk misgaat, en het specifieke iteratiepatroon waarmee ik nu promptgestuurde motion graphics kan afronden in minder dan 30 minuten per video.
Als je deze productlanceringen hebt gevolgd en je afvraagt of je eindelijk kunt stoppen met vechten tegen Premiere of After Effects: dat kan zeker. Maar niet om de redenen die de demo’s laten zien. Ik laat je zien waar de échte waarde zit.
De Twee Tools, Hetzelfde Probleem
Voordat ik aan de tests begin, moeten we eerst goed scherp krijgen wat deze twee tools precies zijn. Veel van de verwarring die ik online zie, komt doordat mensen ze met elkaar verwarren — ze behandelen ze alsof het concurrenten zijn, terwijl ze juist verschillende taken uitvoeren binnen dezelfde bredere pipeline.
Claude Design is een webwerkruimte op claude.ai/design, draaiend op Opus 4.7, die je gebruikt via de browser. Ik schreef een volledige analyse over wat het is en waarom het bestaat in mijn Claude Design review, maar de korte samenvatting is: het is het visuele platform van Anthropic voor het bouwen van ontwerpen, slides, prototypes, one-pagers en — via de vernieuwde exportpipeline — nu ook geanimeerde scènes die je kunt afleveren als een HTML-bundel of als video via schermopname.
Hyperframes is een open-source renderframework van HeyGen, uitgebracht op 17 april 2026 onder Apache 2.0. Je installeert het in Claude Code met npx skills add heygen-com/hyperframes, waarna je agent drie slash-commando’s krijgt: /hyperframes voor het maken van composities, /hyperframes-cli voor command-line-operaties, en /gsap voor hulp bij animaties. Scènes schrijf je in gewone HTML, CSS en JavaScript. De renderpipeline verandert elk frame in een echt beeld en plakt ze vervolgens aan elkaar tot een MP4-, MOV- of WebM-bestand. Het draait lokaal. Geen cloud. Geen API-sleutel.
Beide tools lopen tegen exact dezelfde muur aan zodra je ze wilt inzetten in een echte edit-workflow: geen van beide interpreteert audio. Ze horen je voice-over niet. Ze weten niet wanneer de woorden vallen in de tijd. Ze weten alleen wat je ze voert via tekst.
Daarom is het transcript het allerbelangrijkste bestand in deze hele workflow — belangrijker dan de prompt, belangrijker dan je design system, belangrijker dan het model waarmee je draait. Ik heb de eerste drie dagen van mijn test hier geen aandacht aan besteed, en dat waren drie verloren dagen.
Laat me uitleggen wat ik daarmee bedoel.
Het transcript is het script
Hier is het mentale model dat deze hele workflow voor mij heeft ontsloten. Stop met denken aan het transcript als “de ondertitels.” Zie het als de tijdlijn. Het is hetgeen dat de AI raadpleegt om te weten waar je woorden zich bevinden. Zonder tijdstempels op woordniveau is elke on-screen animatie die je vraagt een schot in het duister.
Ik genereer transcripts met Whisper — net als in mijn Claude Code pipeline voor video editing. Het exacte uitvoerformaat is van belang. Je wilt geen eenvoudig tekstbestand. Je wilt een JSON-bestand dat er zo uitziet, met tijdstempels bij individuele woorden:
{
"words": [
{ "text": "I", "start": 0.00, "end": 0.12 },
{ "text": "automated", "start": 0.14, "end": 0.78 },
{ "text": "this", "start": 0.80, "end": 0.96 },
{ "text": "entire", "start": 1.00, "end": 1.42 },
{ "text": "workflow", "start": 1.46, "end": 2.08 }
],
"segments": [
{ "start": 0.0, "end": 4.2, "text": "I automated this entire workflow..." }
]
}
Met een bestand als dit kun je prompts schrijven die daadwerkelijk logisch zijn voor de AI. In plaats van “animeer het woord automation op het juiste moment,” kun je aangeven: “lees transcript.json en fade een highlight box in over het woord automated met de start- en end-velden.” Die instructie is te berekenen. Het model kan die opdracht deterministisch uitvoeren. Het landt elke keer precies op het juiste frame.
Wat het transcript je daarnaast laat doen — en hier komt het echte voordeel om de hoek kijken — is patroonherkenning over je eigen spraak. Wil je elke keer dat je een getal noemt een grafiek tonen? Scan het transcript op numerieke strings. Wil je elke keer dat een merknaam voorkomt die highlighten? Scan op die string. Wil je je eigen stopwoorden een andere kleur geven dan je accentwoorden? Definieer die regel één keer en pas hem toe op alle toekomstige video’s.
Op dag vier van het testen besefte ik dat het transcript geen input was voor de video. Het was dé bron van waarheid voor de video. Vanaf het moment dat ik die mentale switch maakte, gingen beide tools zich gedragen zoals in de launch-demo’s werd beloofd.
Nu laat ik zien wat elk van beide met exact hetzelfde 90-seconde bronmateriaal deed.
Test 1: Claude Design Bouwde Mijn Explainer in Zevenendertig Minuten
De bron voor deze test was een explainer video voor een klantproject rond een Ramlit dashboard. 90 seconden voice-over. Ik liep drie schermen door, vertelde wat elk scherm doet, met drie cijfers die ik expliciet benoemd wilde hebben en een afsluitende CTA-kaart.
Ik begon bij Claude Design omdat de instapdrempel vrijwel nihil is. Browser openen. Op het palet-icoon klikken. Een prompt plakken. Dat is de complete onboarding.
Mijn eerste prompt was expres lang. Ik had geleerd uit eerdere brand-extractiewerkzaamheden dat Claude Design beloond wordt door context. Dit was ongeveer wat ik schreef:
"Ik heb een 90-seconden explainer video voor een projectmanagement dashboard. Bijgevoegd het transcript in JSON-formaat met word-level timestamps en de dashboard screenshots. Bouw drie geanimeerde scènes die passen bij mijn mejba.me merk (donker marineblauwe achtergrond, paars-tot-cyaan kleurverloop accent, Inter typografie). Scène 1 start op het dashboard-overzichtsscherm bij 0-18 seconden. Scène 2 highlight het analytics-paneel bij 18-52 seconden. Scène 3 is een afsluitende CTA bij 52-90 seconden. Voor elk getal dat ik noem in het transcript, animeren graag een pilvormige stat card gecentreerd over het relevante schermgebied en gesynchroniseerd met de start- en eindtijd uit de JSON. Exporteer als HTML-bundel."
Wat ik na ongeveer achttien minuten terugkreeg was echt indrukwekkend. Drie uitgewerkte scènes. Mijn merk-kleuren correct toegepast. Geanimeerde stat-pills bovenop mijn screenshots. Een gegenereerde SVG-intro-titel die eruitzag alsof een junior designer op z’n best aan de slag was geweest.
Maar er zat drift in. De animaties triggerden op sectiegrenzen, niet op woordgrenzen. Toen ik zei "we cut editing time by forty percent", verscheen de veertig-procent pill ergens tussen "editing" en "time" — zo’n 0,6 seconden te vroeg. Over drie scènes waren vier van de vijf stat-callouts meer dan een halve seconde mis. Twee klopten totaal niet qua timing.
Ik vroeg Claude Design waarom. Het antwoord was precies wat ik al vermoedde: de tool las mijn scenegrenzen uit de prompt, maar parseerde de woord-timestamps in het transcriptbestand niet. Het sprong naar het dichtstbijzijnde segment. Synchronisatie op segmentniveau is prima voor visuele sfeerwisselingen. Maar niet voor een stat-callout die exact bij een specifiek woord moet opduiken.
Dat is de structurele limiet van Claude Design voor video. Het is briljant in compositie, lay-out, merkconsistentie, en het bouwen van scènes die eruitzien alsof er een designer aan gewerkt heeft. Het is echter niet gebouwd als een frame-nauwkeurige animatie-engine. Dit zie je ook weer terug bij het exporteren — je krijgt een HTML-bundel, maar om hier een echte MP4 van te maken moet je óf de preview schermopnemen, of de bundel aan Claude Code geven en renderen via een tweede tool. Wat ik vervolgens ook gedaan heb.
Hier wil ik echt benoemen waar Claude Design in video bijzonder goed in is, want ik wil het niet tekortdoen. Het is de snelste manier die ik ken om de statische elementen van een video te genereren: introkaarten, outtrokaarten, lower-thirds, callout-templates, stat-pill designs, thumbnail-varianten. Je steekt vijftien minuten in Claude Design, haalt vijf gepolijste grafische templates in je Hyperframes project, en je hebt het slechtste deel van videoproductie — de look ontwerpen — compleet overgeslagen. De AI is een betere junior designer dan de meeste juniors waarmee ik heb gewerkt, vooral omdat het je echte codebase uitleest voor brand-tokens in plaats van ze te raden.
Wat het niet is: de hele pipeline. Het is de helft ervan.
Test 2: Hyperframes rendeerde dezelfde video in drie iteraties
Voor de Hyperframes-test opende ik Claude Code in een nieuwe terminal, klone een nieuwe projectmap en voerde de installatie uit:
npx skills add heygen-com/hyperframes
De skill registreerde /hyperframes, /hyperframes-cli en /gsap als slash-commando’s binnen mijn Claude Code-sessie. Ik plaatste hetzelfde voice-over MP3-bestand in een assets/-map, dezelfde woord-niveau transcript.json, en dezelfde drie dashboard-screenshots. Daarna typte ik:
"/hyperframes build a 90-second composition. Read transcript.json for word-level timestamps. For each numeric value spoken in the audio, render a pill-shaped stat card centered over the corresponding screen image using the exact start and end timestamps from the JSON. Use GSAP for the animations. My brand colors are #0F172A background, gradient accent from #8B5CF6 to #3B82F6 to #06B6D4, Inter typography. Output a single scene composition in HTML with GSAP timelines."
Het eerste resultaat kwam binnen ongeveer negen minuten. Claude Code schreef een enkel compositiebestand, zette de GSAP-tijdlijnen op, koppelde de animaties aan de woord-timestamps uit het transcript en renderde een preview in de browser. Ik keek het afspelen. Elke stat-pill landde precies op het juiste woord. Elk woord. Niet “ongeveer”, niet “binnen één frame” — gewoon exact op het frame.
De reden dat het werkte, is mechanisch, niet magisch. Hyperframes-composities zijn gewoon HTML. GSAP-tijdlijnen accepteren een delay en een duration in seconden. Wanneer Claude Code een transcriptregel leest zoals { "text": "veertig", "start": 34.21, "end": 34.68 } en vervolgens schrijft gsap.to(statPill, { opacity: 1, delay: 34.21, duration: 0.47 }), is er geen ruimte voor interpretatie. De tool doet exact wat ik gevraagd heb, met precies de timestamps die ik heb opgegeven. Claude Design deed een gokje. Hyperframes voerde exact uit.
De eerste versie was natuurlijk niet perfect. De stat-pills animeerden in met een bounce die niet passend voelde voor een serieuze dashboard-video. Het merk van mijn klant is kalm en precies. Ik gaf Claude Code feedback met tijdcodes:
"Op 34,21 seconden bouncet de 40%-pill in. Vervang de elastic easing door
power2.out. Zelfde wijziging voor de pills op 48,9 en 71,4 seconden. Ook: op 12,5 seconden is de intro-titel nog aan het uitfaden als de eerste screenshot verschijnt — vertraag de screenshot-ingang met 0,3 seconden."
Elf minuten later had ik iteratie twee. De easing was strak. De overgang van titel naar beeld verliep soepel. Maar de outro-CTA aan het slot van de video had nog een subtitel die ongeveer een seconde overlapt met de knop. Nog één feedback op tijdcode, nog één render, en iteratie drie werd de definitieve versie. Totale tijd van een lege map tot gerenderde MP4: ongeveer vierendertig minuten, waarvan misschien negen minuten ‘handen op het toetsenbord’. De rest was wachttijd op renders.
Dezezelfde video maakte ik een maand eerder in Premiere. Ik was er 2 uur en 40 minuten mee bezig, inclusief her-edits. Dit was geen klein verschil. Dit voelde als een fundamenteel andere werkwijze.
Wat De AI Niet Kan
Als je de laatste twee secties hebt gelezen en dacht "dit klinkt verdacht goed," dan let je goed op. Hier zijn de faalmodi waar ik in twee weken tegenaan ben gelopen, gerangschikt op frequentie.
Ruwe audioreiniging blijft mensenwerk. De hele prompt-gedreven pipeline gaat ervan uit dat je voice-over al schoon is. Geen um-tjes. Geen lange stiltes. Geen rare ademhalingen. Als je ruwe opname rommelig is, plakken de tools zonder problemen motion graphics bovenop slechte audio. Gebruik een Whisper-transcriptie, doe een snelle ronde in Descript om stopwoordjes te verwijderen, en exporteer de audio opnieuw voordat je überhaupt naar een transcriptie kijkt. Dat deel aan de voorkant heb ik behandeld in de video-editing workflow post.
Voorvertoningsstoringen in beide tools. De in-browser preview van Claude Design haperde op mijn MacBook Pro M2 ongeveer elke vijftiende frame. De preview van Hyperframes was beter, maar raakte alsnog soms de synchronisatie kwijt tussen audio en de GSAP-tijdlijn tijdens het scrubbben. De uiteindelijke gerenderde output was altijd correct. De preview-bug is echt, en hij verleidt je tot het oplossen van problemen die er niet zijn. Als er iets niet klopt in de preview, render dan eerst een testclip van 10 seconden voordat je prompts gaat herschrijven.
Tokenverbruik is echt. Een volledige compositie van 90 seconden met getimede animaties, iteratieve feedback en drie gerenderde previews kostte me zo’n 340.000 tokens Opus 4.7-gebruik in Claude Code, van begin tot eind. Dat is niet niks. Voor een Pro-abonnee die één video per week maakt, is het prima te doen. Voor iemand die een videofabriek van tien video’s per week runt, moet je overstappen op Sonnet voor de iteratielussen en Opus reserveren voor de initiële opzet. Meestal maak ik de eerste versie met Opus, schakel ik over naar Sonnet voor de feedbackrondes, en ga ik alleen terug naar Opus als er een structurele herbouw nodig is.
Complexe 3D-effecten hebben mensen nodig. Hyperframes ondersteunt Three.js, en ja, Claude Code schrijft moeiteloos een Three.js-scène. Maar de output voor echt 3D-werk — reactieve audio-visualisaties, driedimensionale reveals, cameraposities in 3D-ruimte — vereist een engineer die Three.js kent om het te debuggen. De AI schrijft het geraamte. Een mens moet vaak de fysica en timing fixen. Dit is niet per se kritiek. Hier stopt de tool met vervangen, en begint hij expertise te versterken.
Geen van beide tools monteert ruwe beelden. Het is het vermelden waard, omdat een klant mij dit vorige week vroeg. Je kunt geen 40 minuten ruwe opnames in Claude Design of Hyperframes gooien en er direct een gemonteerde video uitkrijgen. Deze tools bouwen de motion graphics-laag die bovenop een reeds gemonteerde video ligt. Het knippen gebeurt nog steeds in Descript, Premiere, of via een Whisper-gestuurde automatiseringspipeline. Wat veranderd is, is de stap na het knippen — waar je vroeger drie uur in After Effects spendeerde.
Het patroon dat nu al mijn video's oplevert
Na twee weken heb ik een specifieke workflow ontwikkeld die ik voor elke explainer-achtige video gebruik die ik maak. Het kost ongeveer dertig minuten aan hands-on tijd voor een video van negentig seconden, en het ziet er zo uit.
Stap 1: Maak eerst het audio schoon. Neem op, transcribeer met Whisper, schoonmaken in Descript, en exporteer opnieuw naar een MP3. Sla deze stap niet over. Een slechte opname betekent een slechte video, hoe goed de animatielaag ook is.
Stap 2: Genereer het transcript op woordniveau als JSON. Met Whisper's --output_format json vlag krijg je precies wat je nodig hebt. Bewaar het bestand in de root van je project. Noem het transcript.json. Elke volgende prompt is afhankelijk van het bestaan van dit bestand op die plek.
Stap 3: Maak statische assets in Claude Design. Introkaarten, outrokaarten, stat pill templates, lower-third ontwerpen. Gooi ze in de assets/ map van je project als SVG's of HTML-snippets. Dit doe je in één Claude Design-sessie van ongeveer vijftien minuten. Dit is waar Claude Design echt uitblinkt.
Stap 4: Zet de compositie op in Hyperframes via Claude Code. Schrijf de eerste prompt met het complete scèneplan, het transcript als referentie, de brand tokens en de asset-paden. Laat Opus 4.7 de eerste versie opbouwen. Reken op ongeveer tien tot vijftien minuten per render.
Stap 5: Itereer met feedback op basis van timestamps. Bekijk de preview. Als er iets fout zit, beschrijf het dan in het formaat: "op 34,2 seconden, [ding] doet [verkeerd ding], verander naar [juiste ding]." Zet Claude Code op Sonnet voor deze iteratierondes om tokens te besparen. Ik heb zelden meer dan drie iteraties nodig.
Stap 6: Render de definitieve MP4 lokaal. npx hyperframes render --format mp4 --output final.mp4. Duurt ongeveer twee tot vier minuten voor negentig seconden aan content op mijn M2. Controleer de audio-sync, controleer alle timestamps, en lever op.
Dat is het. Twee tools, één transcript, een vaste volgorde.
Als ik het nog verder zou moeten samenvatten: gebruik Claude Design voor statische graphics, gebruik Hyperframes via Claude Code voor de samengestelde animatie, en — altijd — baseer de timing op een transcript op woordniveau in JSON-formaat. Alles daarbuiten is pure workflow-vulling.
Wat Dit Betekent Als Je Je Brood Verdient Met Videobewerking
Ik wil afsluiten met een gedachte voor iedereen die dit leest en momenteel zijn brood verdient met videobewerking, want ik krijg berichten van freelance editors die het eerlijke antwoord op deze vraag willen: ben ik over zes maanden mijn baan kwijt?
Nee. Absoluut niet. Maar het werk verandert van vorm, en die verandering doet ertoe.
De mechanische onderdelen van editing — tekst positioneren, beweging keyframen, merkconsistentie over honderd scènes waarborgen, lower-thirds genereren voor een serie, CTA-cards renderen volgens specificatie — dat alles is nu te comprimeren tot minutenwerk. Een AI-agent met Hyperframes doet dat sneller dan jij, goedkoper dan jouw tarief, met minder fouten.
Wat níét te comprimeren is, en wat volgens mij de komende anderhalf jaar ook niet te comprimeren zal zijn, is precies waar je beste klanten jou daadwerkelijk voor betalen: smaak. De keuze welk drie seconden-moment in een opname van twaalf minuten de kern van het verhaal draagt. Het instinct dat je zegt dat een stilte een halve tel langer moet duren. Het gevoel wanneer een statistiekenkaart het verhaal versterkt en wanneer zo’n kaart juist afleidt van de gezichtsuitdrukking die impactvol dreigde te worden.
Voor die beslissingen word je ingehuurd als editor. De tools die ik deze maand heb getest, nemen die beslissingen niet. Ze voeren díe keuzes uit die jij al hebt gemaakt, en dan op een snelheid die acht weken geleden gewoon onmogelijk was.
De editors die de komende jaren floreren, zijn degenen die zichzelf niet langer zien als mensen die alleen clips verschuiven op een tijdlijn, maar als regisseurs die een AI-animatieteam aansturen. Het werk wordt strategischer, minder mechanisch. En als je het slim speelt, gaat je uurtarief omhoog, niet omlaag.
Veelgestelde Vragen
Wat is het verschil tussen Claude Design en Hyperframes?
Claude Design is een webgebaseerde visuele werkruimte op claude.ai/design, bedoeld voor het bouwen van lay-outs, slides en statische graphics met merkconsistentie. Hyperframes is een open-source HTML-naar-MP4 renderframework van HeyGen dat werkt via Claude Code voor het samenstellen en daadwerkelijk renderen van video. Gebruik Claude Design voor statische assets; gebruik Hyperframes voor de geanimeerde, op tijdcodes gesynchroniseerde video-output.
Kan Claude Design of Hyperframes mijn audiobestand lezen?
Nee. Geen van beide tools interpreteert audio native. Beide vereisen een vooraf gegenereerd transcript met woordniveau-timestamps—meestal geproduceerd met Whisper—om on-screen animaties te synchroniseren met gesproken content. Het transcript is de tijdlijn. Zonder transcript is timing een gok.
Hoe installeer ik Hyperframes met Claude Code?
Voer npx skills add heygen-com/hyperframes uit binnen een Claude Code-sessie. De skill registreert drie slash-commando’s: /hyperframes voor het schrijven van composities, /hyperframes-cli voor commandoregelbewerkingen, en /gsap voor hulp bij animatie. Volledige installatie in minder dan een minuut op de meeste machines.
Hoe lang duurt het werkelijk om een prompt-gedreven video te produceren?
Voor een explainer van 90 seconden met motion graphics kost mijn huidige workflow ongeveer dertig minuten aan hands-on tijd: ongeveer vijftien minuten in Claude Design voor de statische assets, vijftien minuten in Claude Code plus Hyperframes voor de compositie en twee à drie iteraties. Ter vergelijking: meer dan twee uur in een traditionele editor zoals Premiere.
Voor welk type video’s is deze workflow minder geschikt?
Ruwe-beeldenbewerking (uren interviewmateriaal terugbrengen naar highlights), alles wat genuanceerde 3D-fysica vereist zonder een menselijke Three.js-ontwikkelaar, en video’s waarbij de motion graphics-laag emotionele lading draagt die afhankelijk is van menselijke intuïtie over timing. De tools versterken redactioneel inzicht; ze vervangen het niet.
Laten We Samenwerken
Wil je AI-systemen bouwen, workflows automatiseren of je tech-infrastructuur opschalen? Ik help je graag verder.
- Fiverr (maatwerk & integraties): fiverr.com/s/EgxYmWD
- Portfolio: mejba.me
- Ramlit Limited (enterprise-oplossingen): ramlit.com
- ColorPark (design & branding): colorpark.io
- xCyberSecurity (beveiligingsdiensten): xcybersecurity.io
