Content Studio
Motor de plantillas y sistema de composición interna
"Un pequeño sistema operativo de contenido basado en código que permite crear, renderizar en iframe aislado y exportar carruseles e imágenes sin salir del cliente."
El punto de partida del desafío
Hurgando bajo la superficie: ¿Qué investigué?
Analicé herramientas como Canva, Buffer, Later, Figma, editores HTML visuales y sistemas de templates. Detecté que el diseño no era reutilizable de verdad: las herramientas reutilizaban "slides", no sistemas. Duplicar requería intervención manual. El contenido visual y el copy estaban separados, fragmentando el flujo creativo. Los templates eran sumamente rígidos, limitando la validación, el tipado o la generación automática de formularios basados en datos. Y las herramientas priorizaban usuarios no técnicos, limitando el control fino sobre el layout, CSS y exportación. Entendí que el verdadero problema no era "crear imágenes", sino construir un sistema capaz de producir contenido consistente sin rehacer trabajo constantemente.
"El insight principal fue que el contenido escalable funciona de manera muy similar al software. El diseño debía ser parametrizable, los layouts reutilizables, el contenido estructurado y el sistema debía entender variables y presets. Comprendí que Canva resuelve la creación puntual pero no la producción sistemática. Buffer resuelve la programación pero no la creación visual. Y Figma resuelve el diseño pero no la exportación automatizada. La herramienta que necesitábamos no existía en ninguna de esas categorías. Estaba en la intersección de las tres."
Comprender este pilar transformó por completo la dirección táctica del proyecto, permitiendo depurar el ruido innecesario y enfocarse en valor estricto.
Análisis de compromisos: opciones sobre la mesa
Construir software a medida requiere evaluar escenarios honestamente. Ninguna arquitectura es perfecta, cada decisión tiene un precio:
Seguir usando Canva + herramientas sueltas
Ventaja: sin costo de desarrollo. Desventaja: trabajo duplicado, inconsistencia visual, sin trazabilidad de rendimiento ni reutilización real.
Editor visual puro (tipo Canva interno)
Ventaja: UX más simple para usuarios no técnicos. Desventaja: muy difícil lograr reutilización real y control fino sobre layouts y CSS.
Templates tipados + renderizado HTML/CSS + editor de código
Ventaja: máxima flexibilidad, reutilización real, control absoluto sobre el rendering y la exportación. Desventaja: arquitectura más compleja de construir y mantener.
La Decisión: El camino elegido
LO QUE FUNCIONÓ DE VERDAD
El sistema de templates fue un acierto rotundo, transformando layouts estáticos en estructuras totalmente configurables. La mezcla fluida entre editor visual y código dio una velocidad creativa excelente con absoluto control técnico. El pipeline de exportación fue sumamente preciso, eliminando por completo los problemas típicos de renderizado inconsistente entre preview y descarga. El sistema de slides facilitó la creación de carruseles de forma natural y el tipado de templates evitó errores de configuración que antes eran comunes.
LIMITACIONES Y COMPROMISOS
El bundle inicial resultó sumamente pesado debido a Monaco Editor y las librerías de rendering, lo cual era aceptable al ser una herramienta interna pero requeriría code splitting para uso público. El parsing HTML/CSS a través de html-to-image es frágil en ciertos navegadores móviles o restrictivos. SQLite como almacenamiento de presets limitaba el crecimiento y la colaboración real multiusuario. Y el sistema carecía de autenticación nativa por ser de uso interno, lo que impedía cualquier escenario remoto.
DE LA BITÁCORA PERSONAL DE GONZALO: ¿QUÉ HARÍA DIFERENTE HOY?
"Separaría más claramente el motor de rendering del editor visual para construir un core completamente desacoplado con plugins y adaptadores. Implementaría una solución híbrida de renderizado: manteniendo la exportación en cliente por velocidad, pero agregando soporte opcional con Puppeteer y colas en el backend para dispositivos con pocos recursos. Escalaría la base de datos a PostgreSQL implementando autenticación para abrir la herramienta a múltiples usuarios de forma remota. Y mejoraría el sistema de preview en tiempo real para que los cambios en el código se reflejen instantáneamente sin perder estado del formulario."
Anotación retrospectiva posterior al lanzamiento