Communitygithub.com

XiaoDuoYa/AeVideoGen

Créez des vidéos produit de qualité commerciale, de type AE, pour des lancements, démonstrations, interactions UI et promotions de fonctionnalités, via un rendu web déterministe à partir du code source réel du produit, de sites web, d'extensions de navigateur, d'applications, de musique, d'actifs de marque, d'arguments de vente et de vidéos de référence. Idéal pour : 产品宣传片、发布会卖点总结、网页渲染视频、UI 动效演示、插件功能宣传、音乐卡点视频、参考视频动画复刻、类似 AE 的产品视频, en particulier lorsque Codex doit clarifier un brief incomplet, analyser en détail une vidéo de référence, préserver l'UI et les proportions d'origine, construire une narration causale, aligner la promesse principale sur le climax musical, obtenir l'approbation d'un aperçu navigateur et exporter un MP4 stable sans HyperFrames.

Qu'est-ce que AeVideoGen ?

AeVideoGen est une compétence avancée pour agents IA (Codex) qui transforme du code source réel de produit (sites web, extensions, applications) en vidéos produit de qualité commerciale, similaires à After Effects. Son objectif principal est de garantir la vérité comportementale et visuelle du produit : chaque élément affiché à l'écran provient directement du code source et des assets du client, et non d'animations génériques ou d'HyperFrames (interdites). La compétence impose un processus rigoureux en plusieurs étapes : analyse d'un brief structuré (brief.json), validation des assets manquants, analyse dense des vidéos de référence (avec extraction d'images à 8–12 ips autour des coupes), narration causale (contexte → friction → action → résultat → valeur mémorisée), édition musicale (scripts/analyze_music.py), reconstruction déterministe des états du produit, chorégraphie du focus (zoom, continuité, transitions FLIP), et revue locale interactive avec scrubber avant export. Elle cible les plateformes où Codex peut exécuter des scripts Python et Node.js, et où un navigateur peut servir l'aperçu local. La sécurité de la production est assurée par des vérifications strictes : pas d'export sans approbation explicite de l'aperçu, pas de décision non fondée, pas de compromis sur la résolution/durée/fréquence d'images, et des scripts de validation (validate_brief.py, validate_timeline.py) qui bloquent toute sortie instable. Enfin, l'export produit un MP4 H.264/AAC yuv420p avec faststart, vérifié par ffprobe et une inspection visuelle.

Compatible avec~Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/XiaoDuoYa/AeVideoGen/tree/main

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

AeVideoGen Par HxdLabs_ v1.0.1

Créez un film produit commercialisable. Gardez le comportement du produit fidèle, l'histoire causale, la typographie lisible, le focus intentionnel, le mouvement vivant, la revue exacte et l'export stable.

Appliquer le contrat de production

  • N'utilisez jamais HyperFrames.
  • Considérez la version du produit demandée et son code source comme vérité visuelle et comportementale.
  • Utilisez les vidéos de référence pour le timing, la grammaire du mouvement, le langage de la caméra, la typographie et la structure des transitions ; ne copiez jamais les assets de produits tiers et ne faites pas passer un autre produit pour celui de l'utilisateur.
  • Préservez les proportions natives de l'UI. Mettez à l'échelle uniformément ; ne jamais étirer.
  • Faites en sorte que chaque clic de pointeur corresponde au vrai contrôle visible et que la caméra se concentre sur la même cible.
  • N'inventez pas de fonctionnalités, revendications, états source, textes, icônes ou mises en page non pris en charge.
  • Ne rendez pas une vidéo finale tant que l'utilisateur n'a pas explicitement approuvé l'aperçu exact du navigateur.
  • Sauvegardez la ligne de base acceptée avant des modifications substantielles et utilisez des chemins de sortie versionnés.
  • Ne dégradez pas silencieusement la résolution, la fréquence d'images, la durée, la version source, la priorité narrative ou l'alignement musical.

Exécuter la porte de complétude avant l'implémentation

Inspectez d'abord le prompt de l'utilisateur et tous les artefacts fournis. Ne posez pas de questions sur des faits déjà présents dans les fichiers, le code source, les métadonnées ou la conversation.

Retournez immédiatement un lancement guidé avant l'implémentation :

  1. résumez ce qui a déjà été reçu ;
  2. listez les lacunes bloquantes et expliquez comment chacune affecte la qualité commerciale ;
  3. proposez de manière proactive les assets ou décisions exacts que l'utilisateur peut fournir ;
  4. posez la ou les trois prochaines questions les plus impactantes ;
  5. recommandez le mode Goal pour une production multi-étapes et fournissez un objectif Goal prêt à coller, avec inputs, contraintes, étapes et critères de complétion.

Pour chaque décision manquante bloquante ou utile, offrez deux ou trois choix concrets. Mettez le choix recommandé en premier, expliquez la conséquence visible de chaque choix et laissez l'utilisateur répondre par "按推荐方案" lorsque approprié. Ne bloquez jamais avec une question ouverte non expliquée.

Ne créez pas de Goal sauf si l'utilisateur demande explicitement de créer/démarrer/utiliser Goal. La recommandation et le brief Goal prêt à coller sont obligatoires pour un travail filmique substantiel ; la création automatique de Goal est interdite.

Créez brief.json à partir de assets/web-motion-starter/brief.json, puis exécutez :

python3 scripts/validate_brief.py brief.json

Si un champ bloquant reste inconnu, posez des questions concises et continuez de poser des questions aux tours suivants jusqu'à ce que le brief soit complet. Posez une à trois questions liées à la fois. Ne commencez pas l'implémentation créative simplement parce que certaines exigences ont été mentionnées.

Procédez avec des hypothèses enregistrées uniquement lorsque l'utilisateur dit explicitement d'utiliser votre meilleur jugement, de sauter les questions ou de démarrer avec un brief incomplet. Marquez chaque champ concerné dans assumptions et gardez les faits à fort impact sourcés.

Lisez references/intake-and-clarification.md complètement chaque fois que le brief est nouveau, incomplet, contradictoire ou matériellement révisé. Lisez references/guided-production.md complètement au lancement et utilisez son format de rapport d'avancement tout au long de la production. Lisez references/decision-options.md lorsque des exigences sont manquantes ou que l'utilisateur demande quoi choisir.

Exécuter le flux de travail

1. Protéger et auditer

  • Inspectez l'état du dépôt, la version, les routes, les composants, les stores, les styles, les dimensions, les polices, les icônes, les transitions d'état, les zones cibles de clic et les données privées.
  • Créez une ligne de base récupérable avant les modifications importantes.
  • Construisez un registre de preuves associant chaque affirmation filmée et chaque état à une preuve source ou à une confirmation explicite de l'utilisateur.
  • Envoyez un court rapport d'avancement après l'audit : preuves complétées, risque restant et prochain artefact à réviser.
  • Lisez references/source-reconstruction.md complètement avant de reconstruire une UI de produit.

2. Analyser les références sans les copier

Pour chaque vidéo de référence fournie :

  1. Lisez la durée, la résolution, la fréquence d'images, l'audio et la structure des plans.
  2. Extrayez les images suffisamment densément pour voir l'animation—pas des miniatures de plusieurs secondes.
  3. Ajoutez des fenêtres de 8–12 ips autour des coupes, morphing, zooms, entrées de texte, clics et transitions.
  4. Regardez la référence complète à vitesse normale avec l'audio.
  5. Produisez un registre du langage du mouvement : sujet, trajectoire de la caméra, easing, durée, relais, masque/forme, typographie, temps d'arrêt et signal sonore.
  6. Traduisez cette grammaire pour le produit réel et la marque de l'utilisateur.

Exécutez scripts/analyze_reference_video.py pour une extraction déterministe. Lisez references/reference-video-analysis.md complètement avant de revendiquer une correspondance de style ou une recréation.

3. Écrire le film causal

Utilisez cette chaîne narrative :

contexte utilisateur → friction → action produit → résultat visible → valeur mémorisée

  • Donnez à chaque scène un objectif et un sujet visuel dominant.
  • Placez la promesse principale—pas une fonctionnalité secondaire—à l'intérieur du climax musical.
  • Utilisez le texte pur comme ponctuation significative ou élément partagé, jamais comme remplissage.
  • Montrez une grande question assez longtemps pour être lue, puis transformez/amarrez ce même élément dans le champ de saisie réel.
  • Planifiez chaque saut de ligne de titre. Ne laissez jamais un retour à la ligne accidentel.
  • Créez production.json avant l'animation et maintenez-le à jour.
  • Exécutez scripts/validate_timeline.py production.json --strict après les changements de timing.
  • Rapportez la chaîne de scènes proposée, le placement du climax et les décisions créatives non résolues avant l'implémentation complète.

Lisez references/creative-direction.md complètement avant de concevoir le graphe des scènes. Lisez references/commercial-quality.md avant de déclarer une direction comme commercialement prête.

4. Analyser et éditer la musique

Exécutez :

python3 scripts/analyze_music.py music.mp3 --target-duration 30 --output music-map.json
  • Écoutez toutes les fenêtres candidates ; les marqueurs algorithmiques sont des propositions.
  • Choisissez une plage source musicalement cohérente et enregistrez son décalage.
  • Associez les montées de section et les temps forts principaux, pas chaque battement.
  • Présentez un bassin de climax : approche, aboutissement lisible, libération.
  • Gardez le rythme des scènes lisible tandis que les accents internes aux scènes peuvent encore tomber sur les temps forts.

5. Reconstruire les états réels du produit

  • Réutilisez les composants source réels, CSS, SVG, icônes, polices, textes et logique d'état lorsque c'est autorisé.
  • Remplacez l'état réseau par des fixtures locales déterministes et fidèles au schéma.
  • Gardez la composition finale indépendante des appels réseau runtime.
  • Enregistrez chaque dimension de surface native et mettez-la à l'échelle uniformément.
  • Déduisez les centres de clic après la mise en page finale via getBoundingClientRect().
  • Montrez les changements d'état réels ; ne mettez pas à l'échelle une capture d'écran en l'appelant interaction.

6. Chorégraphier le focus et la continuité

  • Séquencez l'attention : focus, approche du pointeur, clic, retour, résultat.
  • Lorsqu'une scène atteint son cadrage prévu, utilisez un seul mouvement continu de la caméra—pas trois ou quatre recentrages correctifs.
  • Considérez le groupe complet et significatif comme centre visuel : pour un chat, centrez la question plus la réponse ; pour un plugin, centrez le plugin sauf si un contrôle spécifique est le sujet déclaré.
  • Zoomez de manière décisive là où le public doit lire. Ne protégez pas l'espace vide au détriment de la lisibilité.
  • Gardez les arrêts lisibles vivants avec un mouvement subordonné ; ne figez pas le cadre.
  • Floutez/assombrissez le matériel non pertinent lorsqu'il ne peut pas être lu à temps.
  • Préférez les transitions par élément partagé, FLIP, héritage de forme, masque, variation de focus et continuité de défilement.
  • Dérivez chaque état d'un temps déterministe. Exposez window.__AE_VIDEO__.render(t).

7. Réviser sur localhost

  • Servez la composition exacte avec lecture/pause, curseur de défilement, secondes, index d'image, pas à pas d'image ±1, affichage du temps et marqueurs de scène.
  • Cachez tous les contrôles de révision en mode capture.
  • Inspectez les points de contrôle autour de chaque clic, zoom, transition de ligne, élément partagé, climax et fin.
  • Lisez l'intégralité du film avec l'audio à vitesse normale.
  • Vérifiez les cibles de clic réelles, les ratios natifs, les sauts de ligne prévus, le temps de lecture, le centre visuel, le mouvement continu, la vérité source et la synchronisation musicale.
  • Montrez l'aperçu exact à l'utilisateur et attendez l'approbation explicite.
  • Rapportez ce qui a changé depuis le dernier aperçu accepté et dirigez l'utilisateur vers les plages horaires exactes qui nécessitent une révision.

Lisez references/qa-gates.md complètement et passez chaque porte bloquante.

8. Rendre uniquement la version approuvée

  • Considérez l'approbation de l'aperçu et la permission d'export comme deux décisions distinctes.
  • Après l'approbation de l'aperçu, expliquez en langage simple que l'export convertit l'animation localhost en fichier vidéo partageable. Demandez si l'utilisateur souhaite exporter maintenant.
  • Avant d'exporter, offrez des choix de qualité clairs avec leurs conséquences sur la clarté, la fluidité, la charge de rendu, le temps, le stockage et la compatibilité. Recommandez une option pour l'appareil et la plateforme de l'utilisateur.
  • Confirmez la résolution, la fréquence d'images, le format/codecs, l'audio, la plateforme et le nom de fichier. N'exportez pas tant que l'utilisateur n'a pas explicitement confirmé la spécification d'export.
  • Définissez approval.status, approval.approvedVersion, approval.exportRequested et approval.exportSpecConfirmed uniquement après leurs décisions explicites correspondantes.
  • Exécutez scripts/validate_brief.py brief.json --final et scripts/validate_timeline.py production.json --final --strict.
  • Rendez vers un nouveau répertoire et nom de fichier d'images. Ne mélangez jamais d'anciennes et de nouvelles images.
  • Préférez la poignée de main du compositeur stable dans scripts/render_web_video.mjs ; arrêtez-vous sur une image instable plutôt que d'exporter une corruption.
  • Considérez 2560×1440 à 60 ips comme une bonne valeur par défaut lorsque la 4K60 dépasse le matériel disponible, mais ne modifiez jamais les spécifications cibles sans l'approbation de l'utilisateur.
  • Encodez H.264/AAC yuv420p avec faststart, puis exécutez ffprobe, un décodage complet, des vérifications de continuité et une inspection visuelle par planche contact.

Bloquer ces échecs

  • brief incomplet sans permission explicite de supposer ;
  • clic virtuel, zoom centré au mauvais endroit ou fonctionnalité non prise en charge ;
  • micro-recentrage répété à l'intérieur d'une seule action ;
  • surface produit étirée/recadrée ou redimensionnement arbitraire du type interne ;
  • texte important trop petit, trop bref, obscurci ou accidentellement enroulé ;
  • petit texte insignifiant inséré pour remplir l'espace ;
  • scène figée ou trop rapide sans accomplir une action significative ;
  • sujets non liés échangeant à plusieurs reprises le centre ;
  • grand texte et son champ de destination en désaccord pendant un morphing ;
  • transition sans géométrie, mouvement, couleur, focus ou signification hérités ;
  • climax musical attribué à la mauvaise valeur ;
  • vidéo de référence échantillonnée trop clairsemée pour comprendre son mouvement ;
  • page finale inventée à partir de cartes de fonctionnalités génériques au lieu de preuves produit sourcées ;
  • rendu final commencé avant approbation ou exporté avec des images déchirées/partielles ;
  • export démarré sans un choix de qualité en langage simple et une confirmation explicite.

Acheminer les ressources groupées

  • references/intake-and-clarification.md : requis pour la complétude du brief et le comportement de suivi.
  • references/guided-production.md : requis pour un onboarding solide, un handoff en mode Goal et la communication de l'avancement.
  • references/decision-options.md : requis pour les choix recommandés, les alternatives et les compromis adaptés aux débutants.
  • references/reference-video-analysis.md : requis pour l'analyse des vidéos de référence ou la recréation de style.
  • references/source-reconstruction.md : requis pour un site web, une extension, une application ou

Skills associés