La cohérence de marque commence par un petit ensemble de ressources clairement défini. Ce guide emploie le kit libre Claude Motion et les conventions Remotion. Cette préparation aide aussi avec HyperFrames, mais les imports React et staticFile relèvent de Remotion, pas de l’éditeur du site.
Créer un inventaire exploitable
Rassemblez le logo approuvé, ses versions pour fonds clairs et sombres si disponibles, les fichiers exacts des polices, une palette courte et les captures publiables. Notez nom, rôle, origine et autorisation de chaque fichier dans un document près du projet. Ajoutez le nom actuel du produit et l’appel à l’action validé. Signalez clairement les éléments provisoires. Faites lister les fichiers réellement trouvés avant la réalisation. Vous éviterez une maquette convaincante qui remplace le logo ou invente une interface inexistante.
Employer des chemins locaux stables
Dans Remotion, placez les ressources communes sous public, par exemple public/assets/logo.png et public/assets/dashboard.png. Référencez-les avec staticFile, relativement à public. Gardez des noms courts et une casse cohérente : une différence de majuscules peut échouer sur un autre ordinateur. Préférez des fichiers locaux autorisés aux liens temporaires susceptibles d’expirer. N’insérez pas de jetons d’accès dans une URL et ne publiez pas de captures privées de clients sur un hébergeur ouvert pour simplifier le rendu.
Vérifier transparence et recadrage avant l’animation
Ouvrez le logo sur fonds clair et sombre. Un rectangle blanc peut appartenir à l’image ; une marge transparente peut aussi rendre la marque étonnamment petite. Préservez ses proportions et l’espace de protection validé. Décidez si chaque photo remplit son cadre ou reste entièrement visible ; remplir peut couper un élément important. Demandez une image fixe par ressource avant d’animer. Examinez les traits fins à la taille prévue sur téléphone, pas seulement agrandis sur ordinateur.
Charger la vraie police et tester chaque écriture
Remotion documente les polices locales avec @remotion/fonts. Utilisez la famille et la graisse réelles et attendez leur chargement avant de mesurer ou rendre le texte. Vérifiez l’autorisation pour l’usage prévu et conservez la licence. Une police latine peut manquer de caractères chinois, japonais ou coréens : définissez et vérifiez un remplacement adapté. Ne supposez pas une apparence identique dans toutes les langues. Testez le titre le plus long, ponctuation, chiffres et accents. Si une traduction modifie les retours à la ligne, ajustez la mise en page avant de tout réduire jusqu’à l’illisibilité.
Préciser les règles de marque et contrôler l’export
Utilisez le prompt ci-dessous pour préciser les exigences de marque. Examinez ensuite le MP4 pour détecter polices remplacées, logos coupés, variations de couleur ou images manquantes. Gardez ressources, inventaire, informations typographiques et résultat ensemble. Les téléchargements modifiables du site permettent de continuer localement, sans impliquer un import automatique de kit de marque ou un envoi générique de ressources de marque.
Utilise le logo fourni sans le redessiner. Applique le fond crème et le texte anthracite validés ; réserve le vert à l’action principale. Charge les polices fournies. Préserve proportions et contenu des captures. Avant d’animer, montre une image fixe avec logo, titre le plus long et capture.Votre prochaine étape
Fournissez de vrais fichiers et des règles explicites, puis contrôlez le résultat exporté. Un inventaire exact est plus fiable qu’une simple demande de respecter « l’esprit de marque ».
Découvrir l’espace de créationSources et lectures complémentaires
Les références renvoient aux documents originaux et à leurs créateurs. La disponibilité peut évoluer : consultez la source avant de vous abonner ou d’installer un outil.
- Importing assetsRemotion
- Using fontsRemotion
- Visual review loopwhaleyxbt
- Claude Motion Skills public CLIClaude Motion Skills