Design Video Render

design-video-render — Claude Design → MP4

Les "vidéos" produites par Claude Design sont des animations HTML/React, pas des fichiers vidéo. Ce skill les rend hors-ligne et les encode en MP4 déterministe (frame-accurate), sans la barre de lecture ni le letterboxing.

Quand utiliser ce skill

Déclencher quand l'utilisateur demande de :

• Transformer un export Claude Design en vrai .mp4
• "Monter la vidéo", "rendre la promo en MP4", "exporter la vidéo Claude Design"
• Filmer un dossier d'export contenant un Promo.jsx (carré) ou un promo.html modulaire (vertical)

Vue d'ensemble du pipeline

1. build.js — patche la source React et génère un render.html autonome qui :
   • tag le canevas de capture avec data-capture-canvas (on screenshote exactement cet élément, taille pixel exacte) ;
   • expose window.__seek(t) (un React.useEffect injecté dans le Stage) pour piloter l'animation image par image.
2. render.js — Puppeteer/Chromium charge render.html, attend window.__seek + les polices (document.fonts.ready), puis pour chaque frame appelle __seek(t), attend 2× requestAnimationFrame, et screenshote [data-capture-canvas]. 30 fps. Sort des PNG dans _render/frames/.
3. encode.js — ffmpeg-static assemble les PNG : -c:v libx264 -pix_fmt yuv420p -crf 18 -movflags +faststart.

Procédure

1. Repérer le dossier d'export Claude Design (racine contenant le _ds/<id>/styles.css et la source du composant).
2. Copier le dossier scripts/ de ce skill dans la racine de l'export, en le renommant _render/.
3. Régler le bloc CONFIG de chaque script selon l'export (voir ci-dessous).
4. Installer et lancer, depuis la racine de l'export :

   cd _render && npm install
   cd .. && node _render/build.js && node _render/render.js && node _render/encode.js
   

   node_modules peut être supprimé par le ménage de Downloads → réinstaller (npm i). Chromium reste en cache ~/.cache/puppeteer, donc la réinstallation est rapide.

Deux formats d'export rencontrés (toujours vérifier lequel)

Nouveau (à plat, carré — juin 2026+) — c'est ce que les scripts gèrent par défaut

• Loader *.dc.html (système <x-dc> / <x-import> via support.js), mais le composant Promo.jsx est AUTONOME (moteur + scènes, expose window.VideoRoot).
• Format 1080×1080. DUR / width / height définis dans Promo.jsx. Icônes/SVG inline → ni animations.jsx ni support.js nécessaires.
• CONFIG : build.js → SOURCE='Promo.jsx', ROOT_GLOBAL='VideoRoot' ; render.js → W=1080,H=1080, TOTAL = la valeur DUR.

Ancien (modulaire, vertical)

• Dossier video/ avec promo.html modulaire + jsx séparés (icons.js, animations.jsx, promo-parts.jsx, promo-scenes.jsx). Format 1080×1920. TOTAL dans promo.html.
• L'ordre des <script type="text/babel"> casse hors-ligne (window.HEC undefined) → précompiler chaque .jsx avec @babel/standalone, chaque fichier dans sa propre IIFE (sinon collision const Stage), puis assembler en un seul render.html à scripts ordonnés. Le composant Seeker (qui expose __seek) est déjà présent dans cet export.
• CONFIG : render.js → W=1080,H=1920, TOTAL = la valeur dans promo.html. build.js doit être adapté à l'assemblage multi-fichiers (cette variante n'est pas couverte telle quelle par le build.js par défaut).

Pièges connus

• Ne pas utiliser le *(vertical).html autonome : ses polices/assets pointent vers des IDs opaques résolus uniquement par claude.ai → ne rend pas hors claude.ai. Toujours partir de la source modulaire / du Promo.jsx.
• Viewport = format + 120 px (la barre de lecture fait 44 px) pour forcer scale = 1 du Stage et un rendu 1:1.
• Capturer l'élément [data-capture-canvas], pas la page entière.
• Règle de marque Hectelion : pas d'em-dash. Le texte source de la promo peut contenir un em-dash ("Europe de l'Ouest — une expertise…") → le corriger dans la source avant le rebuild si la règle s'applique.

Référence

Voir README.md pour les commandes npm. Scripts : scripts/build.js, scripts/render.js, scripts/encode.js.