¿Qué hace Ecosistema Remotion — Arquitectura de Habilidades Unificada?
Alcance
Esta es la capa de integración que transforma 91 habilidades individuales en un pipeline de producción de video cohesivo. No reemplaza ninguna habilidad, sino que proporciona los patrones de enrutamiento, flujo de datos y orquestación que las conectan.
Cada habilidad a continuación se puede usar de forma independiente. Este documento del ecosistema describe cómo se componen juntas al construir sistemas de video Remotion de extremo a extremo.
Las Diez Categorías
remotion-ecosystem/
├── 01-core-video/ ← Motor de renderizado + estrategia de video
│ ├── remotion-video-pro (andamiaje, animación, renderizado por lotes)
│ ├── marketing-video (selección del enfoque de producción)
│ ├── video-generation (creación de video con IA)
│ └── video-understand (análisis de video)
│
├── 02-data-ingestion/ ← Obtención de contenido para datos de video
│ ├── firecrawl-scrape (extracción de páginas renderizadas con JS)
│ ├── firecrawl-crawl (rastreo masivo de sitios)
│ ├── spider (escaneo de sitios + auditoría de seguridad)
│ ├── web-reader (metadatos de página + contenido)
│ ├── web-search (búsqueda en tiempo real)
│ └── browserbase-fetch (obtención ligera de URL)
│
├── 03-browser-automation/ ← Autenticación + interacción para contenido protegido
│ ├── browser-cdp (reutilización de sesión de Chrome)
│ ├── agent-browser (automatización de navegador con interfaz gráfica)
│ └── browserbase-autobrowse (bucles de navegación auto-mejorables)
│
├── 04-ai-intelligence/ ← Razonamiento de IA + orquestación de modelos
│ ├── think (razonamiento multi-marco a través de Gemini)
│ ├── council-of-five (debate en paralelo con 5 personas)
│ ├── amazon-bedrock (invocación de modelos Claude/Llama/Nova)
│ ├── LLM (completado de chat)
│ └── VLM (comprensión de visión-lenguaje)
│
├── 05-content-design/ ← Activos visuales + diseño de movimiento
│ ├── charts (visualización de datos)
│ ├── image-generation (creación de imágenes con IA)
│ ├── image-edit (edición de imágenes con IA)
│ ├── ui-ux-pro-max (sistema de diseño + razonamiento de UI)
│ ├── anthropic-frontend-design (interfaces distintivas)
│ └── web-shader-extractor (extracción de efectos visuales)
│
├── 06-monitoring-security/ ← Observabilidad + protección
│ ├── sentry-ai-monitoring (trazado de llamadas LLM + seguimiento de tokens)
│ ├── sentry-nextjs-sdk (monitoreo de errores y rendimiento en Next.js)
│ ├── audit-analyzer (auditoría del sistema)
│ ├── diagnose (depuración + diagnóstico)
│ └── mcp-spy (depuración de tráfico MCP)
│
├── 07-marketing-strategy/ ← Crecimiento + experimentación
│ ├── marketing-ab-testing (hipótesis + significancia chi-cuadrado)
│ ├── marketing-launch (marco de lanzamiento en 5 fases)
│ ├── marketing-mode (orquestación de marketing de crecimiento)
│ └── content-strategy (planificación de contenido)
│
├── 08-devops-deploy/ ← Infraestructura + CI/CD
│ ├── aws-agents-deploy (despliegue en Railway/Vercel/Lambda)
│ ├── amazon-bedrock (despliegue de modelos de IA en AWS)
│ ├── vercel (despliegue en Vercel)
│ ├── deployment-manager (despliegue multi-plataforma)
│ ├── github (CI/CD + gestión de repositorios)
│ └── fullstack-dev (desarrollo full-stack con Next.js)
│
├── 09-document-output/ ← Informes + entregables a partir de datos de video
│ ├── docx (documentos de Word)
│ ├── pdf (generación de PDF)
│ ├── ppt / pptx (presentaciones)
│ ├── xlsx (hojas de cálculo)
│ └── infographic-gen (infografías)
│
└── 10-agent-systems/ ← Orquestación de agentes + memoria
├── agent-roles (personas de agente especializadas)
├── superpowers (especificación primero + delegación a sub-agentes)
├── proactive-agent (auto-mejora autónoma)
├── self-improving-agent (registro de errores + aprendizaje)
├── persistent-memory (memoria entre sesiones)
└── context-compressor (optimización de la ventana de contexto)
Arquitectura del Pipeline
El ecosistema Remotion sigue un pipeline de 6 etapas:
[1. ADQUIRIR] → [2. PENSAR] → [3. DISEÑAR] → [4. RENDERIZAR] → [5. PROBAR] → [6. DESPLEGAR]
┌──────────────────────────────────────────────────────────────────┐
│ Etapa 1: ADQUIRIR — Ingesta de Datos (02-data-ingestion) │
│ │
│ firecrawl-scrape ──→ extraer páginas de competidores │
│ browser-cdp ──────→ extraer contenido tras autenticación │
│ spider ───────────→ escanear páginas de productos en busca de datos│
│ web-search ────────→ recopilar inteligencia de mercado │
│ web-reader ────────→ extraer contenido de artículos │
│ │
│ Salida: { productos, competidores, testimonios, precios } │
└────────────────────────────┬─────────────────────────────────────┘
▼
┌──────────────────────────────────────────────────────────────────┐
│ Etapa 2: PENSAR — Inteligencia Artificial (04-ai-intelligence) │
│ │
│ think ─────────────→ análisis de primeros principios de los datos │
│ council-of-five ───→ debate de 5 personas sobre el enfoque del video│
│ amazon-bedrock ────→ generar guión / copia / storyboard │
│ LLM ────────────────→ refinar mensajes y CTAs │
│ │
│ Salida: { guión, storyboard, variantes de copia, plan de escenas }│
└────────────────────────────┬─────────────────────────────────────┘
▼
┌──────────────────────────────────────────────────────────────────┐
│ Etapa 3: DISEÑAR — Contenido + Visual (05-content-design) │
│ │
│ image-generation ──→ imágenes hero, tomas de producto │
│ charts ─────────────→ visualizaciones de datos para el video │
│ ui-ux-pro-max ─────→ sistema de diseño + color + tipografía │
│ web-shader-extractor → efectos visuales de sitios de referencia │
│ │
│ Salida: { imágenes, gráficos, paletas de color, especificaciones de movimiento }│
└────────────────────────────┬─────────────────────────────────────┘
▼
┌──────────────────────────────────────────────────────────────────┐
│ Etapa 4: RENDERIZAR — Video Principal (01-core-video) │
│ │
│ remotion-video-pro → componer componentes React como fotogramas │
│ marketing-video ────→ seleccionar el enfoque de producción │
│ video-generation ──→ metraje B-roll generado por IA │
│ video-understand ──→ analizar videos de referencia │
│ │
│ Salida: { renders MP4, composiciones de variantes } │
└────────────────────────────┬─────────────────────────────────────┘
▼
┌──────────────────────────────────────────────────────────────────┐
│ Etapa 5: PROBAR — Monitoreo + A/B (06 + 07) │
│ │
│ marketing-ab-testing → significancia chi-cuadrado en variantes │
│ sentry-ai-monitoring → trazar llamadas LLM durante la generación │
│ audit-analyzer ─────→ escaneo de seguridad de activos renderizados│
│ diagnose ────────────→ depurar fallos de renderizado │
│ │
│ Salida: { resultados de prueba, puntuaciones de significancia, informes de error }│
└────────────────────────────┬─────────────────────────────────────┘
▼
┌──────────────────────────────────────────────────────────────────┐
│ Etapa 6: DESPLEGAR — DevOps + Marketing (08 + 07) │
│ │
│ aws-agents-deploy ─→ desplegar en Lambda/Railway │
│ marketing-launch ───→ lanzamiento de producto en 5 fases │
│ vercel ──────────────→ alojamiento de servicio webhook │
│ fullstack-dev ───────→ panel Next.js para gestión de renderizados │
│ │
│ Salida: { renders en vivo, endpoints webhook, campaña de lanzamiento }│
└──────────────────────────────────────────────────────────────────┘
Rutas de Integración
Ruta A: Video de Inteligencia Competitiva
spider (escanear sitios de competidores)
→ firecrawl-scrape (extraer páginas de productos)
→ amazon-bedrock (analizar el panorama competitivo)
→ council-of-five (debatir el ángulo del video)
→ charts (crear visualizaciones comparativas)
→ remotion-video-pro (renderizar video de comparación de competidores)
→ marketing-ab-testing (probar variantes del video con A/B)
→ aws-agents-deploy (desplegar en Lambda)
Ruta B: Campaña de Video de Lanzamiento de Producto
marketing-launch (planificar lanzamiento en 5 fases)
→ web-search (recopilar datos de mercado)
→ think (estrategia de mensajes de primeros principios)
→ amazon-bedrock (generar guión de video)
→ image-generation (crear imágenes hero)
→ ui-ux-pro-max (diseñar sistema visual)
→ remotion-video-pro (renderizar video de lanzamiento)
→ video-generation (metraje B-roll con IA)
→ sentry-ai-monitoring (trazar todas las llamadas de IA)
→ aws-agents-deploy (desplegar pipeline)
→ marketing-ab-testing (probar variaciones de gancho)
Ruta C: Videos Personalizados Basados en Datos
firecrawl-crawl (extraer por lotes fuentes de datos de clientes)
→ browser-cdp (extraer datos CRM tras autenticación)
→ amazon-bedrock (personalizar copia del video por destinatario)
→ charts (generar visualizaciones de datos personalizadas)
→ remotion-video-pro (renderizar por lotes con props de personalización)
→ sentry-ai-monitoring (monitorear el uso de tokens LLM por lotes)
→ aws-agents-deploy (renderizado por lotes en Lambda)
→ docx/xlsx (generar informe ROI de la campaña)
Ruta D: Pipeline de Reutilización de Contenido
video-understand (analizar video fuente)
→ browserbase-autobrowse (recopilar contenido de referencia)
→ think (planificar estrategia de reutilización)
→ firecrawl-scrape (extraer contenido de blog como referencia)
→ marketing-video (seleccionar enfoque de formato corto vs largo)
→ image-generation (crear variantes de miniatura)
→ remotion-video-pro (renderizar versiones específicas para cada plataforma)
→ marketing-launch (coordinar distribución multi-plataforma)
Ruta E: Pruebas A/B de Variantes de Video a Escala
marketing-ab-testing (diseñar hipótesis + variantes)
→ council-of-five (debatir qué variantes probar)
→ amazon-bedrock (generar copia/guiones de variantes)
→ ui-ux-pro-max (diseñar sistemas visuales de variantes)
→ remotion-video-pro (renderizar composiciones A/B)
→ sentry-ai-monitoring (trazar costos de generación)
→ marketing-launch (desplegar prueba a la audiencia)
→ charts (visualizar resultados de prueba)
→ pdf (generar informe de prueba)
Aspectos Transversales
Seguridad (06-monitoring-security)
Cada etapa del pipeline debe estar envuelta con:
- sentry-ai-monitoring: Trazar todas las llamadas LLM (conteo de tokens, latencia, costo)
- sentry-nextjs-sdk: Monitorear la salud del servicio webhook
- audit-analyzer: Escaneo de seguridad periódico de la infraestructura desplegada
- mcp-spy: Depurar integraciones de herramientas MCP en desarrollo
Memoria (10-agent-systems)
Continuidad entre sesiones para producción de video recurrente:
- persistent-memory: Almacenar guías de marca, paletas de color, campañas pasadas
- context-compressor: Optimizar la ventana de contexto al ejecutar pipelines complejos
- self-improving-agent: Aprender de fallos de renderizado y resultados de pruebas A/B
Calidad (01-core-video)
Hacer cumplir las reglas de oro de remotion-video-pro en cada renderizado:
- Determinismo basado en fotogramas (sin Math.random)
- Animaciones con spring en lugar de lineales
- React.memo en cada componente de escena
- Validación de esquema Zod en todas las props
- Hooks de validación previa al commit
Referencia Rápida — Habilidad a Etapa del Pipeline
| Habilidad | Etapa Principal | Uso Secundario |
|---|---|---|
| remotion-video-pro | 4. RENDERIZAR | 5. PROBAR (validación) |
| firecrawl-scrape | 1. ADQUIRIR | 6. DESPLEGAR (verificar páginas) |
| firecrawl-crawl | 1. ADQUIRIR | 3. DISEÑAR (contenido de referencia) |
| spider | 1. ADQUIRIR | 6. DESPLEGAR (escaneo de seguridad) |
| browser-cdp | 1. ADQUIRIR | 3. DISEÑAR (contenido autenticado) |
| browserbase-fetch | 1. ADQUIRIR | — |
| browserbase-autobrowse | 1. ADQUIRIR | 2. PENSAR (investigación) |
| think | 2. PENSAR | 5. PROBAR (análisis de depuración) |
| council-of-five | 2. PENSAR | 7. MARKETING (estrategia) |
| amazon-bedrock | 2. PENSAR | 4. RENDERIZAR (generación con IA) |
| LLM | 2. PENSAR | — |
| VLM | 2. PENSAR | 4. RENDERIZAR (análisis de escena) |
| charts | 3. DISEÑAR | 9. SALIDA (informes) |
| image-generation | 3. DISEÑAR | 4. RENDERIZAR (activos) |
| ui-ux-pro-max | 3. DISEÑAR | 2. PENSAR (razonamiento de diseño) |
| marketing-ab-testing | 5. PROBAR | 7. MARKETING (crecimiento) |
| marketing-launch | 6. DESPLEGAR | 7. MARKETING (campaña) |
| sentry-ai-monitoring | 5. PROBAR | 6. DESPLEGAR (monitoreo en producción) |
| aws-agents-deploy | 6. DESPLEGAR | — |
| fullstack-dev | 6. DESPLEGAR | 3. DISEÑAR (paneles) |
| docx/pdf/xlsx | 9. SALIDA | 7. MARKETING (informes) |
| agent-roles | 10. SISTEMAS | 2. PENSAR (delegación) |
| superpowers | 10. SISTEMAS | — |