HyperFrames Creative
Direction de la marque, du rythme, du style, de la narration et de la composition. À utiliser après la mise en place du contrat technique via hyperframes-core.
Pour les motifs de mouvement, les plans de scène, les transitions et les effets de marqueur CSS, utilisez hyperframes-animation — ce skill est intentionnellement non-animé.
Lisez ces DEUX documents en premier pour toute composition non triviale — ils remplacent les instincts web :
references/house-style.md— « interpréter la consigne, générer du contenu réel », la liste des valeurs par défaut paresseuses et la recette des couches arrière-plan/premier plan. C'est ce qui transforme un simple restylage en un concept.references/video-composition.md— échelle, profondeur et détails au premier plan propres au médium vidéo. Il explique comment éviter les mises en page vides de type page web sans imposer un nombre universel d'éléments.Ignorer ces documents est la cause principale de résultats génériques ressemblant à des pages web. Ils ne sont pas optionnels dans la table de routage ci-dessous — pour tout ce qui dépasse une modification d'une ligne, ouvrez les deux avant de choisir des couleurs ou d'écrire du HTML.
Workflow
- Si un projet possède un cahier des charges de design, lisez-le d'abord et traitez ses jetons de frontmatter comme la vérité de la marque (couleurs, polices, espacement, ton, contraintes). Le fichier à lire (priorité
frame.md→design.md→DESIGN.md) et la façon de l'analyser (frontmatter = normatif, prose = contexte) sont définis une seule fois dansreferences/design-spec.md— résolvez et chargez selon ce document. - Si aucun cahier des charges de design n'existe et que l'utilisateur demande une direction visuelle, choisissez une route :
- Préréglage de cadre prêt à l'emploi (optionnel) →
frame-presets/(adoptez unFRAME.mden tant queframe.md; voirreferences/design-spec.md) - Style ou ambiance nommé →
references/visual-styles.md - Valeurs par défaut rapides →
references/house-style.md - Sélection interactive →
references/design-picker.md
- Préréglage de cadre prêt à l'emploi (optionnel) →
- Pour les projets multi-scènes, planifiez les beats et le rythme avant d'écrire le HTML →
references/beat-direction.md. Pour les transitions de scènes, passez àhyperframes-animation/transitions/. - Pour les travaux fortement animés, lisez
references/motion-principles.md(garde-fous de haut niveau), puis allez danshyperframes-animationpour les règles atomiques.
Routage
| Sujet | Lire |
|---|---|
Adopter un préréglage de cadre prêt à l'emploi comme frame.md (optionnel) | frame-presets/ · references/design-spec.md |
| Palettes par défaut, mouvement, typographie, valeurs par défaut paresseuses à questionner | references/house-style.md |
| Préréglages de style nommés, routage ambiance-à-style | references/visual-styles.md |
| Jetons de couleur spécifiques à une palette | palettes/*.md |
| Motifs de composition — PiP, texte-derrière-sujet, carte titre, diaporama | references/composition-patterns.md |
| Présentation de statistiques / infographie | references/data-in-motion.md |
| Expansion structurée pour les consignes ouvertes | references/prompt-expansion.md |
| Densité, échelle, couleur, composition du cadre vidéo | references/video-composition.md |
| Direction par beat, planification du rythme, timing des transitions | references/beat-direction.md |
| Vérification post-rédaction de la conformité (couleurs, typo, coins, espacement, profondeur) | references/design-adherence.md |
| Garde-fous de mouvement de haut niveau et règles de qualité GSAP | references/motion-principles.md |
| Sélection des polices, associations, garde-fous typo pour vidéo rendue | references/typography.md |
| Doctrine narrative — langage d'accroche, valeur avant preuve, storyboard comme proposition | references/story-spine.md |
| Rythme du script, ton, ouvertures, prononciation des nombres | references/narration.md |
| Bandes audio pré-calculées mappées au mouvement | references/audio-reactive.md |
Scripts
scripts/contrast-report.mjs— inspecter les avertissements de contraste des cadres rendus.scripts/extract-audio-data.py— pré-extraire les bandes audio pour les compositions audio-réactives.scripts/package-loader.mjs— script de support pour les outils créatifs groupés.
contrast-report.mjs résout les packages d'aide à partir du projet courant d'abord, puis peut amorcer la version groupée du package HyperFrames. Définissez HYPERFRAMES_SKILL_PKG_VERSION=<version> uniquement lorsque vous exécutez le skill en dehors de l'installation groupée du CLI/skill et que vous devez épingler explicitement cette version d'amorçage.
Exécutez depuis la racine du dépôt avec des chemins explicites, par exemple :
python skills/hyperframes-creative/scripts/extract-audio-data.py <fichier-audio>
L'analyse d'animation (animation-map.mjs) se trouve dans hyperframes-animation/scripts/.
Limites
- Ne pas outrepasser les règles techniques de
hyperframes-core. - Ne pas exiger un système de design pour une composition technique minimale.
- Ne pas ajouter de scènes supplémentaires, de narration, de musique, de sous-titres ou de transitions, sauf si la demande le nécessite ou si vous proposez d'abord l'expansion.
- Gardez les références de recettes spécifiques à la tâche ; ne lisez pas chaque référence pour des modifications simples.