VITOM: Vision to motion.

Prompt

# BRIEF DE ARQUITECTURA DE PLATAFORMA: `VITOM` ## 1. Propósito central y casos de uso Necesitamos diseñar e implementar **VITOM**, una plataforma especializada en transformar referencias visuales y explicaciones proporcionadas por el usuario en una especificación técnica precisa para la recreación de experiencias visuales e interactivas. VITOM debe concebirse como un **proyecto y plataforma independiente**, con una **interfaz de usuario propia** desde la cual pueda operarse todo el proceso. El objetivo fundamental de VITOM es: > **Recibir referencias aportadas por el usuario —en diferentes formatos, archivos, imágenes, videos, enlaces y explicaciones adicionales en lenguaje natural—, analizarlas y traducirlas a un único entregable: un prompt técnico, exhaustivo y matemáticamente preciso que otro Agente de IA pueda interpretar para ejecutar la recreación del diseño requerido con fidelidad estricta 1:1.** **Es muy importante la atención atómica al detalle.** Cada elemento, interacción y animación observada en la referencia *target* es decisivo para la experiencia completa. Una reconstrucción a medias constituye una entrega inválida. VITOM debe ser completamente agnóstico al contenido: **debe funcionar con la misma solvencia para diferentes casos de uso.** Además de su UI propia, VITOM deberá disponer de un **MCP** que permita conectarlo con plataformas y Agentes de IA externos, como **Cursor y Codex**, de manera que estos puedan consumir el entregable generado por VITOM y proceder posteriormente con la ejecución de la recreación. ### Casos de uso representativos > VITOM puede recrear (mas no limitarse) a los siguientes casos. - **Microinteracciones y estados de componentes:** Animaciones de botones con transformación morfológica (*morphing*), *loaders* orgánicos, transiciones de éxito/error o microrecompensas gamificadas. - **Transiciones de pantalla con elementos compartidos (*Shared Element Transitions*):** Vistas donde una tarjeta pequeña se expande fluidamente a pantalla completa, reacomodando tipografía, imágenes y controles sin saltos visuales. - **Scrollytelling y narrativa visual:** Páginas orquestadas por *scroll* donde elementos vectoriales, textos y capas de fondo se ensamblan, rotan o transforman conforme el usuario avanza verticalmente. - **Visualización dinámica de datos y analítica:** Gráficas financieras o *dashboards* con trazado vectorial animado, barras con aceleración perceptual y *tooltips* con inercia reactiva. - **Físicas y dinámicas de interacción (2D / Canvas):** Comportamientos de arrastre elástico (*drag-and-drop* con tensión), gravedad, sistemas de partículas o colisiones interactivas controladas por el cursor. - **Showcases y visores de producto 3D (WebGL / Three.js):** Cámaras orbitales de 360°, despieces técnicos de producto (*exploded views*) o transiciones de cámara en perspectiva entre estados de visualización. - **Onboardings y carruseles cinemáticos móviles:** Secuencias de bienvenida con ilustraciones multicapa en paralaje, transiciones *swipe* y paginadores fluidos. - **Sistemas de navegación y menús no convencionales:** Menús radiales, *docks* cinéticos con magnificación, acordeones espaciales o barras flotantes con desenfoque de fondo. - **Tipografía cinética y efectos de texto:** Animaciones de fuentes variables (*variable fonts*), máscaras dinámicas de revelado de texto, tipografía tridimensional o cinemática editorial interactiva. - **Mecánicas lúdicas y minijuegos en navegador:** *Loops* interactivos en 2D, como ruletas de premios, dinámicas de equilibrio, interfaces tipo máquina tragamonedas o minipuzzles en Canvas. - **Interfaces diegéticas y HUDs de ciencia ficción (FUI):** Pantallas holográficas, escáneres biométricos, efectos de distorsión CRT o consolas de monitoreo táctico. --- ## 2. El problema a resolver Cuando un Agente de IA intenta recrear una experiencia visual o interactiva a partir de referencias como imágenes o videos, enfrenta varios retos estructurales que **VITOM debe resolver durante la fase de análisis y especificación**, antes de entregar las instrucciones al agente encargado de ejecutar la recreación. ### 2.1. Resolución temporal y comprensión cinética completa - La ingestión multimodal estándar suele muestrear video a tasas muy bajas —por ejemplo, 1 FPS—, omitiendo eventos que ocurren en fracciones de segundo, como cortes rápidos, aceleraciones y microinteracciones. - VITOM debe garantizar que el análisis no se base en aproximaciones ni en fotogramas aislados, sino en la percepción y deconstrucción de la **continuidad temporal completa de la acción**. - El prompt resultante debe representar con precisión suficiente los tiempos, secuencias y comportamientos observados para que el agente ejecutor pueda reconstruirlos posteriormente. ### 2.2. Deconstrucción de capas y naturaleza de los elementos - En un video, toda la información visual aparece aplanada y puede estar degradada por códecs de compresión. - VITOM debe discernir qué elementos deberían reconstruirse nativamente mediante código vectorial —HTML, SVG, CSS, Canvas, etc.— para mantener nitidez matemática, y qué elementos deberían tratarse como texturas plásticas o arte rasterizado que posteriormente pueda regenerarse mediante herramientas generativas de imagen. - Esta deconstrucción debe quedar expresada de manera inequívoca dentro del entregable final. ### 2.3. Fidelidad interactiva dual - La recreación final no debe convertirse en una simple captura pasiva ni en un bucle estático. - VITOM debe especificar una doble exigencia para el agente ejecutor: - Reproducir con precisión milimétrica la coreografía, geometría y tiempos observados en la referencia original. - Mantener la experiencia viva, funcional y manipulable por el usuario final mediante *scroll*, clics y respuestas reactivas. ### 2.4. Traducción visual a una especificación ejecutable VITOM no tendrá como responsabilidad principal implementar directamente la recreación. Su responsabilidad central será **convertir toda la evidencia proporcionada por el usuario en una especificación técnica y matemática expresada como prompt**, eliminando la ambigüedad que normalmente existe cuando otro agente intenta interpretar una referencia visual. El único entregable final de VITOM será: > **Un prompt estructurado, riguroso y matemáticamente preciso que describa al agente ejecutor qué debe reconstruir, cómo debe comportarse y cuáles son las propiedades observables que debe respetar para alcanzar la fidelidad requerida.** --- ## 3. Interacción con el usuario VITOM debe disponer de una **UI propia** desde la cual el usuario pueda proporcionar toda la evidencia disponible para una reconstrucción. \*\*Para que Vitom funcione necesitará un LLM multimodal vía API, tanto para procesar la evidencia como para la generación de assets (imagenes)\*\* La plataforma deberá admitir como entradas: - Referencias visuales en distintos formatos. - Imágenes. - Videos. - Enlaces. - Explicaciones. - Observaciones adicionales. - Detalles escritos libremente en lenguaje natural. Estas entradas pueden complementarse entre sí y deben ser interpretadas como partes de una misma referencia objetivo. El propósito de la interfaz es permitir que una persona entregue sus referencias y contexto de forma natural, sin necesidad de traducir previamente sus observaciones a una especificación técnica. VITOM será responsable de realizar esa traducción. --- ## 4. Entregable único de VITOM VITOM debe producir **un solo entregable**: ### Prompt técnico de reconstrucción Este prompt será consumido posteriormente por otro Agente de IA (Cursor, Codex, Claude Code) encargado de implementar la recreación. Debe contener con suficiente precisión todos los parámetros observables y deducibles necesarios para ejecutar la reconstrucción, incluyendo las **matemáticas exactas** requeridas para representar correctamente: - Geometría. - Posicionamiento. - Proporciones. - Escalas. - Relaciones espaciales. - Movimiento. - Trayectorias. - Duraciones. - Secuencias. - Transformaciones. - Interacciones. - Comportamientos visuales. El objetivo es reducir al mínimo posible la necesidad de que el agente ejecutor tenga que **adivinar**, reinterpretar o completar arbitrariamente información que VITOM pueda extraer de las referencias. --- ## 5. Integración mediante MCP Además de la interfaz propia de VITOM, la plataforma deberá disponer de un **MCP** que permita integrarla con otros entornos y Agentes de IA. Entre los casos contemplados se encuentran: - **Cursor** - **Codex** El propósito de esta integración es permitir que otros agentes puedan recibir y utilizar el prompt generado por VITOM dentro de sus propios flujos de ejecución. VITOM debe permanecer conceptualmente separado del agente que realiza la implementación: ```text Referencias del usuario ↓ VITOM ↓ Análisis y deconstrucción ↓ Prompt técnico matemáticamente preciso ↓ MCP / entrega ↓ Agente ejecutor ↓ Recreación del diseño ``` --- ## 6. Tu encargo como Agente Arquitecto Se requiere que **propongas y diseñes una arquitectura completa, totalmente de tu autoría, para VITOM**, concebida como una plataforma independiente y no como una simple *skill*. La arquitectura debe estar optimizada para realizar el análisis multimodal de referencias, convertirlas en una representación técnica rigurosa y generar el prompt final que consumirá el agente encargado de ejecutar la recreación. Debes también establecer los **requisitos mínimos de multimodalidad** necesarios para que VITOM pueda cumplir correctamente su función. Tu propuesta debe incluir: ### 6.1. Arquitectura general de VITOM Define los principales componentes que deberían conformar la plataforma y las responsabilidades de cada uno. La propuesta debe contemplar explícitamente: - La aplicación/plataforma VITOM. - Su interfaz de usuario. - El procesamiento de las referencias aportadas por el usuario. - El análisis multimodal. - La generación del prompt técnico final. - La integración mediante MCP con agentes y plataformas externas. ### 6.2. Filosofía y principios rectores Define criterios no negociables de: - Calidad. - Fidelidad. - Precisión. - Atención atómica al detalle. - Manejo de incertidumbre. - Salvaguardas contra alucinaciones visuales. - Salvaguardas contra suposiciones injustificadas sobre movimiento, geometría o comportamiento. ### 6.3. Estructura modular del proyecto Propón una organización modular para VITOM y justifica el rol y valor de cada componente o flujo. La estructura debe corresponder a la escala de una **plataforma completa con UI propia, procesamiento multimodal y conectividad mediante MCP**, no a la estructura de una *skill* aislada. ### 6.4. Fases de operación macro Define la secuencia lógica de etapas por las que debe transitar VITOM desde que el usuario proporciona sus referencias hasta que se genera y entrega el prompt técnico final. El flujo debe cubrir el proceso completo de: ```text Ingesta → análisis → deconstrucción → interpretación → formalización matemática → construcción de especificación → generación del prompt → entrega al agente ejecutor ``` ### 6.5. Criterios de verificación y auditoría Define el mecanismo mediante el cual VITOM debe validar empíricamente que la especificación generada representa correctamente la fuente antes de considerar terminado su trabajo. La auditoría debe centrarse en verificar la correspondencia entre: > **Referencia original ↔ interpretación de VITOM ↔ especificación matemática ↔ prompt final** El objetivo es evitar que errores introducidos durante el análisis se propaguen posteriormente hacia el agente encargado de ejecutar la reconstrucción. --- ## 7. Resultado esperado de tu propuesta Presenta una propuesta técnica para **VITOM** estructurada de forma: - Modular. - Concisa. - Rigurosa. - Técnicamente coherente. - Compatible con su naturaleza de plataforma independiente. - Preparada para operar mediante una UI propia. - Preparada para integrarse con agentes externos mediante MCP. No plantees VITOM como una *skill*. El núcleo conceptual de la plataforma debe permanecer claro: > **VITOM recibe referencias heterogéneas y lenguaje natural, las analiza con precisión visual, temporal y matemática, y produce como único entregable un prompt técnico suficientemente exacto para que otro Agente de IA pueda ejecutar la recreación del diseño requerido con fidelidad estricta 1:1.**