Que fait HyperFrames Créatif ?
Direction de marque, rythme, style, narration et composition. À utiliser après que le contrat technique de hyperframes-core soit en place.
Pour les motifs de mouvement, les schémas de scène, les transitions et les effets de marqueurs CSS, utilisez hyperframes-animation — cette compétence est intentionnellement non-animation.
Lisez ces DEUX en premier pour toute composition non triviale — ils remplacent les instincts web :
references/house-style.md— « interpréter l'invite, 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 restylage littéral en un concept.references/video-composition.md— échelle du média vidéo, profondeur et détails au premier plan. Il explique comment éviter les mises en page vides de type page web sans imposer un nombre universel d'éléments.Ignorer ces deux fichiers est la cause la plus fréquente de sorties génériques ressemblant à des pages web. Ils ne sont pas des lignes optionnelles 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.
Flux de travail
- Si un projet a une spécification de conception (design spec), lisez-la d'abord et traitez ses jetons de préambule (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 manière de l'analyser (préambule = normatif, prose = contexte) sont définis une fois dansreferences/design-spec.md— résolvez et chargez conformément à ce document. - Si aucune spécification de conception n'existe et que l'utilisateur demande une direction visuelle, choisissez une route :
- Préréglage de cadre (frame-preset) prêt à l'emploi (facultatif) →
frame-presets/(adoptez unFRAME.mdcommeframe.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 (frame-preset) prêt à l'emploi (facultatif) →
- Pour un travail multi-scènes, planifiez les battements et le rythme avant d'écrire du HTML →
references/beat-direction.md. Pour les transitions de scène, passez àhyperframes-animation/transitions/. - Pour un travail intensif en mouvement, 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 (facultatif) | frame-presets/ · references/design-spec.md |
| Palettes par défaut, mouvement, typographie, valeurs par défaut paresseuses à remettre en question | 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 de titre, diaporama | references/composition-patterns.md |
| Présentation de statistiques / infographies | references/data-in-motion.md |
| Expansion structurée pour les invites ouvertes | references/prompt-expansion.md |
| Densité, échelle, couleur, composition de cadre du média vidéo | references/video-composition.md |
| Direction par battement, planification du rythme, synchronisation des transitions | references/beat-direction.md |
| Vérification post-rédaction de la spécification (couleurs, police, 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 de polices, associations, garde-fous de type pour vidéo rendue | references/typography.md |
| Doctrine narrative — langage d'accroche, valeur avant preuve, storyboard comme proposition, visuels traçables | 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 images rendues.scripts/extract-audio-data.py— pré-extraire les bandes audio pour les compositions audio-réactives.scripts/package-loader.mjs— script d'assistance pour les outils créatifs groupés.
contrast-report.mjs résout les packages d'assistance d'abord dans le projet actuel, puis peut amorcer la version groupée du package HyperFrames. Définissez HYPERFRAMES_SKILL_PKG_VERSION=<version> uniquement lorsque vous exécutez la compétence en dehors de l'installation groupée du CLI/de la compétence 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 remplacer les règles techniques de
hyperframes-core. - Ne pas exiger un système de conception pour une composition technique minimale.
- Ne pas ajouter de scènes, narration, musique, sous-titres ou transitions supplémentaires, sauf si la demande l'exige ou si vous proposez d'abord l'expansion.
- Gardez les références de recette spécifiques à la tâche ; ne lisez pas chaque référence pour des modifications simples.