pj1433139082-hue/video-design-skills

remotion-consult — Du besoin vidéo au système de design vidéo

Transformez « comment faire cette vidéo ? » d'une idée en un cahier des charges technique exécutable : via clarification, recherche et proposition, produisez un DESIGN.md (document de système de design vidéo, incluant le contrat tokens.ts) que remotion-build pourra utiliser directement.

Classification d'entrée (quand on parle de « faire une vidéo », déterminer d'abord le workflow, ne pas poser de questions directement)

Si l'utilisateur dit « fais une vidéo / produis un clip » sans préciser le type, posez d'abord une question pour déterminer le workflow (consult/build/video-shotcraft peuvent tous être déclenchés par « faire une vidéo », il faut orienter explicitement) :

Intention de l'utilisateur	Quel chemin suivre
Créer/modifier une vidéo (voix off, données, démo produit, animation de marque, vulgarisation, diaporama d'images)	Suivre ce workflow (consult → build) ; les animations sont choisies parmi la bibliothèque d'animations générale + les cartes de plans de shotcraft
Exiger explicitement un template video-shotcraft (Ink Press) / une création libre / une co-création	Suivre son propre workflow via le Skill video-shotcraft (choix explicite de l'utilisateur, pas de routage automatique)
A déjà un DESIGN.md / une vidéo de référence / une refonte explicite	Ce workflow, Phase 0 pré-vérification et entrée directe

Question de classification : « Avez-vous explicitement demandé un template video-shotcraft / une création libre / une co-création ? Non → allez vers consult→build, les cartes de plans de shotcraft sont empruntées comme bibliothèque d'animations (pas d'obligation de choisir une carte pour chaque phrase). »

Quand l'utiliser

• Créer ou modifier une vidéo (voix off, visualisation de données, démo produit, animation de marque).
• Définir la direction du design vidéo : format d'image, style des sous-titres, couleurs, polices, rythme, transitions, animations.
• Avoir besoin d'un « système de design vidéo », de « tokens de design vidéo » ou d'un « DESIGN.md ».
• Besoin flou („aide-moi à faire une vidéo”), nécessitant une clarification avant d'agir.

Principes fondamentaux

1. D'abord la direction, ensuite les détails : déterminer d'abord le système esthétique/rythme/sous-titres, ensuite la réalisation visuelle.
2. Pas de template : l'objectif est de produire „l'empreinte rythmique unique de cette vidéo”, pas de choisir dans une bibliothèque de templates.
3. Exécutable avant tout : le DESIGN.md doit être suffisamment spécifique pour écrire directement tokens.ts et un plan de scènes, pas rester dans le vague „un peu plus sophistiqué”.
4. Honnêteté : ne pas inventer de données/faits dans les sous-titres.

Workflow (à suivre dans l'ordre)

Phase 0 — Pré-vérification

• Vérifier si Espace de travail/Vidéo/{slug}/ contient déjà un DESIGN.md / un script de voix off / des sous-titres captions.srt ; si oui, les utiliser comme base, ne pas tout recommencer.
• Vérifier les assets de design transversaux de la marque (workflow „d'abord le web, ensuite la vidéo”) : Espace de travail/Design Tests/{Marque}/DESIGN.md (version web) ou Base de connaissances/Outils IA/Bibliothèque de systèmes de design/{Marque}-DESIGN.md → si présents, leurs couleurs/polices/émotions sont la ligne de base de l'ADN de la marque, la version vidéo hérite et évolue sans reconstruire (c'est aussi l'entrée pour la vérification de cohérence du système de design en Phase 3).
• Vérifier les contraintes de marque (README du projet, assets visuels existants, vidéo de référence).

Phase 1 — Clarification (obligatoire, ne pas sauter)

Utiliser AskUserQuestion pour clarifier d'un coup, couvrir au minimum 9 éléments (ne pas dépasser 6 questions par lot, possibilité de faire plusieurs lots). Les deux premiers éléments (source de style) sont obligatoires, ne pas les sauter (l'utilisateur peut répondre „choisis automatiquement” pour aller vite, mais il faut confirmer) :

1. Source du style (première question obligatoire) : Design libre / Choisir parmi les références de la video-real-library.md (présenter les candidats pour que l'utilisateur choisisse) / Choisir automatiquement par la référence (l'utilisateur donne un thème, la machine choisit) / L'utilisateur fournit des références (URL/capture d'écran, priorité maximale).
2. Choix des références (trois dimensions complémentaires, quand utiliser quoi) :
   • DESIGN.md de la marque (bibliothèque de systèmes de design Base de connaissances/Outils IA/Bibliothèque de systèmes de design/{Marque}-DESIGN.md ou DESIGN.md de son propre projet) → ligne de base des tokens de design (couleurs/polices/espacements), à utiliser pour la continuité/refonte de marque, ne pas reconstruire le système.
   • Page web HTML (site de référence video-real-library / real-design-library) → exemples de mise en page/visuels (disposition/hiérarchie/composition), à utiliser quand on veut une certaine structure visuelle.
   • Vidéo (source d'animations video-real-library / vidéo fournie par l'utilisateur) → animations/rythme/style des sous-titres, à utiliser quand on veut un certain langage de mouvement.
   • Complémentarité : DESIGN.md donne le système → HTML donne l'exemple → Vidéo donne l'animation, les trois se combinent en une direction complète. Les références fournies par l'utilisateur sont prioritaires. Pour les références sélectionnées, utiliser opencli (rester connecté) pour capturer les polices/couleurs/rythme réels, et les hériter fidèlement en Phase 4.
3. Quelle est la vidéo ? : description en une phrase + public cible + plateforme de diffusion (Douyin/Bilibili/académique/interne — détermine le format et la base du rythme).
4. Ancrage catégoriel : une des quatre catégories de remotion-shared/categories/ (voiceover-caption/data-viz/product-demo/brand-motion), ou personnalisée.
5. Format et durée : 9:16 portrait / 16:9 paysage / 1:1 ; durée cible ; série ou non (série → rythme réutilisable).
6. Émotion/style : professionnel sobre / données incisives / narration chaleureuse / rythme créatif / rétro… Donner 2-3 mots de direction contrastés.
7. Forme du contenu (clé pour les sous-titres) : script de voix off existant / fichiers .srt/.vtt existants / données texte+image existantes / rédaction à partir de zéro — détermine le routage de la source des sous-titres.
8. Préférences/contre-indications : éléments détestés, style des sous-titres (phrase par phrase / surbrillance mot par mot / pas de sous-titres), seuil de lisibilité.
9. Vérification de cohérence : la Phase 0 a-t-elle déjà détecté un ADN de marque (DESIGN.md/assets visuels/vidéo de référence) ? Si oui, la direction ultérieure ne doit pas s'en écarter (évolution mesurée) ; sinon, design libre.

S'il existe un video-taste-profile (Espace de travail/Vidéo/*/.taste-profile.json ou profil global), le lire d'abord. Quand la source de style = site de référence, la Phase 2 doit capturer les valeurs réelles de la référence (chrome-devtools/vision), et la Phase 4 les hériter fidèlement — ne pas abstraire la référence en mots-clés pour ensuite improviser librement.

Phase 2 — Recherche (ne faire qu'avec l'accord de l'utilisateur, peut être parallélisée)

Méthode de recherche en trois couches, par ordre de priorité croissante :

• Couche 1 : conventions du secteur : comment les vidéos similaires sont généralement faites (base de sécurité).
• Couche 2 : nouvelles tendances : en对照 remotion-shared/video-anti-slop.md, attraper 1-2 références vidéo réelles (source de remotion-shared/video-real-library.md + références fournies par l'utilisateur en priorité), extraire les points inspirants pour le style des sous-titres/transitions/rythme.
• Couche 3 : premiers principes : psychologie du spectateur, lisibilité des sous-titres, rythme piloté par le contenu — priorité absolue. En cas de conflit, documenter explicitement „pourquoi on s'écarte de la convention”.

Les „descriptions de références visuelles” dans la proposition doivent pouvoir être ancrées avec des exemples réels de la bibliothèque (ex. „un style de sous-titres avec surbrillance mot par mot similaire à xxx”), pas vagues.

Phase 3 — Proposition complète (livraison principale)

Produire selon le format references/video-proposal-format.md :

• Directions SAFE (2-3) : baselines de la catégorie, sûres.
• Directions RISK (2-3) : écarts volontaires, chacun doit expliquer „pourquoi ça vaut le coup + ce qu'on perd”.
• memorable-thing : une phrase d'ancrage — „un moment visuel/rythmique dont on veut que le spectateur se souvienne” (ex. „la transition vers le plan serré à la 3e seconde”).
• Pour chaque direction : mots-clés esthétiques, police des sous-titres, palette de couleurs, rythme de la timeline (mots/seconde, fréquence des transitions), composition, style de transition, description des références visuelles.

Auto-vérification : si deux directions ne diffèrent que par la couleur et la police, elles ne sont pas assez distinctes, recommencer.

Vérification de cohérence du système de design : si la Phase 0 a détecté un système de design de marque existant (DESIGN.md / ADN de marque, ex. site web ou vidéo déjà réalisée), les directions SAFE/RISK ne doivent pas s'écarter de l'ADN de marque établi (couleurs/polices/émotions de base) — les directions RISK ne peuvent être que des écarts mesurés dans le cadre de l'ADN existant (ex. changer la teinte d'accent, modifier la structure clair/foncé, changer la famille de polices), mais pas une refonte complète ni un saut vers un style non pertinent. La liberté totale n'est autorisée qu'en l'absence de système existant. Avant de produire le DESIGN.md, vérifier point par point que les trois éléments « couleurs/polices/émotions » sont cohérents avec la ligne de base ou en évolution raisonnable.

Phase 4 — Système de design (DESIGN.md)

Une fois la direction choisie par l'utilisateur, rédiger le DESIGN.md selon le modèle references/video-design-system-template.md, en sept sections :

1. Direction esthétique : description en un paragraphe + mots-clés + contre-indications.
2. Polices des sous-titres : trois niveaux caption/title/body + taille de police de base selon le format + mode de surbrillance (word/line/none).
3. Palette de couleurs : palette sémantique (incluant captionActive/captionInactive) + seuil de contraste minimum.
4. Rythme de la timeline : fps/format/durée totale + rythme des sous-titres + fréquence des transitions.
5. Composition de l'image : zone de sécurité + zone des sous-titres + zone des titres.
6. Transitions et animations : sélection des transitions + durée + animation d'entrée + easing.
7. Tokens de design vidéo (contrat tokens.ts, voir remotion-shared/video-tokens-spec.md) + Plan d'orchestration des animations (amélioré du plan de scènes, voir video-design-system-template.md §8) : liste des calques d'assets (bg/mid/fg, assemblables) + pour chaque phrase de sous-titres → animation d'entrée/sortie du calque + animation de police + synchronisation avec la voix off (combinaison audiovisuelle).

Et générer le contrat tokens.ts (objet constant TS, nommage sémantique) — c'est la seule interface pour remotion-build. Les animations sont sélectionnées et combinées à partir de la bibliothèque d'animations générale et inscrites dans le DESIGN.md (remotion-shared/categories/{catégorie}/motion-list.md).

Section 8 : Annotation du noyau de rendu (optionnelle, par défaut Remotion) : le DESIGN.md précise le backend de rendu — par défaut noyau Remotion ; si l'utilisateur le demande explicitement ou que le style nécessite une sensation de page web, marquer noyau HyperFrames (HeyGen open-source HTML→MP4, voir remotion-build/references/hyperframes-guide.md). Règle de décision : plans de caméra complexes / projet Remotion existant → Remotion ; animations HTML/GSAP pures, besoin d'un lint intégré → HyperFrames. Le noyau de rendu n'affecte que la syntaxe de rendu dans build ; tous les assets, BGM, sous-titres, validation et le plan de l'§8 sont réutilisés.

Phase 5 — Aperçu + Porte d'approbation de l'échantillon de style (optionnelle, par défaut activée)

Ne pas rendre la vidéo complète. Produire :

• 3-5 images clés (npx remotion still <id> --frame=N, couvrant le début/la fin/les transitions) — pour que l'utilisateur valide la composition et la position des sous-titres ;
• ou un échantillon basse résolution de 3-5 secondes (--scale=0.25) — pour que l'utilisateur voie le vrai rythme de mouvement.
• Porte d'approbation de l'échantillon de style (inspiré du style-proof de paper-collage-video) : une fois la direction choisie, rendre d'abord 1-2 phrases clés en échantillon réel de 3-5s (basse résolution) pour que l'utilisateur confirme — le style/les couleurs/les animations sont-ils satisfaisants, puis passer à la réalisation complète de la vidéo par remotion-build (éviter de terminer toute la vidéo pour découvrir que la direction ne convient pas).

Les aperçus sont déposés dans Espace de travail/Vidéo/{slug}/preview/. Le but de l'aperçu est de permettre à l'utilisateur de prendre des décisions sur du visuel réel, pas de montrer „je sais rendre”.

Lignes rouges

• Interdire les schémas par défaut : ne pas proposer systématiquement les dégradés violet-indigo, le même rythme de sous-titres tout au long, la même composition centrée pour chaque plan.
• Interdire la copie : ne pas cloner la vidéo d'autrui pixel par pixel (on peut s'inspirer du style des sous-titres/du rythme, pas copier la vidéo entière).
• Interdire la fabulation : ne pas inventer de données, de faits de marque.
• Seuil de contraste minimum : sous-titres ≥3:1 (y compris sur fond réel/photo).
• Seuil de taille de police vidéo (le texte à l'écran est un élément clé) : sous-titres caption ≥64px/800, mono des données ≥44px/700, titres ≥88px/900 — interdire les notes en petites polices fines. La seule source de vérité pour ces chiffres impératifs = remotion-build/references/video-quality-metrics.md § Seuil dur des sous-titres (ligne „Règle vidéo impérative”), ne pas recopier les chiffres ici ; modifier d'abord les métriques pour changer les seuils.
• Clarifier avant de concevoir : ne pas sauter la Phase 1 pour passer aux propositions.

Fichiers de référence

📍 Ordre de recherche dans la bibliothèque partagée remotion-shared : .claude/skills/remotion-shared/ du projet → Codex global → Claude Code global. Prendre le premier trouvé.

Fichier	Quand le lire
.claude/skills/remotion-shared/video-anti-slop.md	À toute étape où l'on évalue une direction (pour éviter l'uniformisation)
.claude/skills/remotion-shared/video-real-library.md	Phase 2 recherche, pour attraper des références vidéo réelles
Base de connaissances/Outils IA/video-shotcraft/	Bibliothèque de fiches de plans (202 fiches, 12 catégories : mouvements de caméra/rythme/transitions/polices/effets), demos/{cat}/{fiche} directement copiables, voir video-shots-spec

Positionnement de video-shotcraft (deuxième bibliothèque d'animations / bibliothèque de templates, pas un routage de séparation) :

• shotcraft = bibliothèque de composants/animations complète et inspirante (demos/{cat}/{fiche}/{composant}.tsx effets de plans de caméra + template/ projet template + assets/ composants et effets sonores). Toutes les vidéos suivent ce workflow consult→build, pas de séparation par type de vidéo (produit/voix off).
• §8 Sélection de fiches : la colonne des fiches de plans dans DESIGN §8.2 est optionnelle, chaque valeur peut être marquée avec une intention [copie] / [emprunt d'idée]. La seule source de vérité pour les étapes d'intégration = remotion-shared/video-shots-spec.md „Étapes d'intégration des fiches de plans” (build exécute).
• Seulement si l'utilisateur exige explicitement d'utiliser un template shotcraft (Ink Press) / une création libre / une co-création, alors le Skill déclenche video-shotcraft pour suivre son propre workflow (choix explicite de l'utilisateur, pas de routage automatique). | .claude/skills/remotion-shared/video-shots-spec.md | Système de fiches de plans + techniques d'autorité (réalisation/montage/design/son, recherche + plateformes) | | .claude/skills/remotion-shared/video-design-presets.md | Phase 4 choisir des systèmes de design prédéfinis (6 marques validées) | | .claude/skills/remotion-shared/video-tokens-spec.md | Phase 4 écrire les tokens | | .claude/skills/remotion-shared/categories/{catégorie}/DESIGN.template.md | Phase 4 rédiger le brouillon selon le modèle de catégorie | | .claude/skills/remotion-shared/categories/{catégorie}/motion-list.md | Phase 4 choisir les combinaisons d'animations | | .claude/skills/remotion-shared/motion-library/ | Liste des composants de la bibliothèque d'animations générale (50, utilisés par build) | | Base de connaissances/Outils IA/Bibliothèque de systèmes de design/ | Phase 2 recherche/Phase 3 proposition : points d'ancrage esthétiques du DESIGN.md de marque | | Base de connaissances/Outils IA/Bibliothèque de références esthétiques/Aperçu général des références esthétiques.md | Phase 2 tendances front-end/photo/montage + Phase 4 conception du rythme | | .claude/skills/remotion-shared/aesthetic-judgment/ | Phase 4 déterminer la direction : axes de discrimination photo/montage/typographie front-end (style des assets/rythme/disposition) | | .claude/skills/ui-ux-pro-max/SKILL.md | Moteur de règles de design : à consulter pour déterminer le style visuel des plans (Phase 4) | | .claude/skills/hallmark/SKILL.md | Examen anti-AI slop (57 points de contrôle) : la direction est-elle professionnelle/contre les templates (Phase 2/3) | | .claude/skills/taste-skill/SKILL.md | Vérification du goût (Pre-Flight 40+ points) : la direction est-elle suffisamment bonne (auto-vérification Phase 3) | | Base de connaissances/Outils IA/design-skills/open-design/craft/anti-ai-slop.md | Règles anti-template („les sept péchés capitaux”) + 151 alternatives de système de design (Phase 2/4) | | .claude/skills/design-shared/review-panel.md | Panneau de révision : perspective agency-agents + critères de la bibliothèque de systèmes de design/bibliothèque de références esthétiques (auto-vérification de la direction Phase 4 + vérification de cohérence) | | .claude/skills/design-shared/wcag-basics.md | Définir la lisibilité des couleurs/sous-titres (contrainte dure) | | references/video-proposal-format.md | Phase 3 produire la proposition | | references/video-design-system-template.md | Phase 4 écrire le DESIGN.md | | references/video-taste-profile.md | Enregistrer/mettre à jour le profil de goût vidéo de l'utilisateur |

Sortie et conclusion

Terminer par le résumé de livraison unifié :

STATUS: PASS | FAIL | BLOCKED
Livrables: chemin du DESIGN.md + chemin des images clés/échantillon d'aperçu
Décision clé: direction choisie (SAFE/RISK laquelle + memorable-thing + catégorie d'appartenance)
PROCHAIN_RESPONSABLE: remotion-build (générer la vidéo) | user (en attente de confirmation de la direction)
En attente: questions en suspens

Conclure en demandant : la direction est-elle fixée ? Faut-il générer la vidéo ? (Recommander de la confier à remotion-build).