La coherencia de marca empieza con un paquete pequeño y explícito de materiales. Esta guía usa el kit abierto Claude Motion y las convenciones de Remotion. La preparación también ayuda en HyperFrames, pero los imports de React y staticFile pertenecen a Remotion, no al editor de este sitio.
Crea un inventario que el agente pueda seguir
Reúne un logo aprobado, sus variantes claras y oscuras si existen, archivos exactos de fuentes, una paleta breve y capturas que puedas publicar. Registra nombre, función, origen y permiso de uso de cada archivo en un documento junto al proyecto. Añade el nombre actual del producto y la llamada a la acción aprobada. Identifica los elementos provisionales. Antes de implementar, pide una lista de archivos realmente encontrados. Evitarás una maqueta convincente que sustituya el logo o invente una interfaz inexistente.
Usa rutas locales estables
En Remotion, guarda materiales comunes bajo public, por ejemplo public/assets/logo.png y public/assets/dashboard.png. Refiérelos mediante staticFile con rutas relativas a public. Usa nombres cortos y mayúsculas coherentes: una diferencia de capitalización puede fallar al cambiar de ordenador. Prefiere archivos locales autorizados frente a enlaces temporales que caducan. No incluyas tokens de acceso en una URL ni subas capturas privadas de clientes a un servidor público solo para facilitar el renderizado.
Comprueba transparencia y recorte antes de animar
Abre el logo sobre fondos claros y oscuros. Un rectángulo blanco puede formar parte de la imagen; el margen transparente también puede hacer que la marca se vea pequeña. Mantén proporciones y espacio de protección aprobados. Decide si cada foto debe llenar el marco o mostrarse completa; llenar puede recortar contenido importante. Solicita un fotograma fijo por material antes de añadir movimiento. Examina trazos finos al tamaño previsto en móvil, no únicamente ampliados en el escritorio.
Carga la fuente real y prueba cada escritura
Remotion documenta la carga local mediante @remotion/fonts. Usa la familia y el peso reales y espera a que carguen antes de medir o renderizar texto. Confirma que el permiso cubra tu uso y conserva la licencia. Una fuente latina puede carecer de caracteres chinos, japoneses o coreanos: define y revisa una alternativa adecuada. No supongas que todos los idiomas se verán iguales. Prueba el titular más largo, puntuación, números y tildes. Si una traducción cambia los saltos, ajusta el diseño antes de reducir todo a un tamaño ilegible.
Da instrucciones de marca precisas y revisa la exportación
Usa el prompt de abajo para concretar los requisitos de marca. Después, revisa el MP4 para detectar fuentes sustituidas, logos recortados, cambios de color o imágenes ausentes. Guarda materiales, inventario, información tipográfica y resultado juntos. Las descargas editables del sitio permiten continuar localmente, pero no implican una carga genérica de marca ni una importación automática de kits.
Usa el logo proporcionado sin redibujarlo. Emplea el fondo crema y texto carbón aprobados; reserva el verde para la acción principal. Carga las fuentes entregadas. Conserva proporciones y contenido de las capturas. Antes de animar, muestra una imagen fija con logo, titular más largo y capturaTu siguiente paso
Entrega archivos reales y reglas claras, y compruébalos en el vídeo exportado. Un inventario correcto es más fiable que pedir algo que simplemente «parezca de la marca».
Explora el espacio de creaciónFuentes y lecturas adicionales
Las referencias enlazan a la documentación original y a sus creadores. La disponibilidad puede cambiar; consulta la fuente antes de suscribirte o instalar.
- Importing assetsRemotion
- Using fontsRemotion
- Visual review loopwhaleyxbt
- Claude Motion Skills public CLIClaude Motion Skills