Tecnología potente, Operaciones en caos. MindStudio es una plataforma líder para construir agentes de IA, permitiendo a usuarios orquestar LLMs, variables y APIs externas. Cuando llegué, el producto era técnicamente robusto pero operacionalmente frágil. El equipo de ingeniería había entregado una cantidad increíble de funcionalidades, pero sin gobernanza de diseño. No había componentes, ni tokens, ni lenguaje compartido.
Enfrentábamos un cuello de botella crítico: La velocidad de innovación superaba nuestra capacidad de mantener calidad. Cada nueva funcionalidad—desde el editor visual hasta el dashboard—se construía desde cero, creando una UI fragmentada que confundía a usuarios y ralentizaba el desarrollo.
01. El Problema
Velocidad vs. Gobernanza
El producto parecía coherente en la superficie, pero la arquitectura subyacente era un escenario de “Wild West” que impedía escalar.
Entropía Visual
Sin una 'fuente de verdad', la interfaz iba a la deriva. 40% del código frontend se dedicaba a sobrescribir estilos conflictivos.
Sobrecarga Cognitiva
La falta de patrones estandarizados significaba que los usuarios tenían que reaprender la UI para cada nueva funcionalidad.
El 'Factor Bus'
El conocimiento de diseño era tribal. El onboarding tomaba semanas porque el sistema existía solo en las cabezas de las personas.
02. Objetivos
Estabilizar para Evolucionar
Mi mandato no era solo “ordenar Figma”, sino construir la infraestructura necesaria para entregar la próxima generación de funcionalidades.
Detener la Hemorragia
Auditar y consolidar patrones existentes en un Design System unificado.
Desbloquear Complejidad
Usar el nuevo sistema para rediseñar interfaces críticas como el Node Canvas y Variable Manager.
Validar Escalabilidad
Probar la robustez del sistema desplegando Dark Mode sin refactoring de código.
03. El Proceso
De Auditoría a Arquitectura
Pasamos de diseño reactivo a una hoja de ruta estratégica de 3 fases:
Proceso de alto nivel
Fase 1: Triaje
- Auditoría Producción
- Arquitectura Tokens
- Definición Prioridades
Fase 2: Motor del Sistema
- Librería Core
- Densidad de Datos
- Inputs Complejos
Fase 3: Pivote Producto
- Node Canvas
- Lógica/Datos
- Dark Mode
Fase 1: Triaje — Audité el entorno de producción para separar “patrones esenciales” del “ruido”. Establecimos una arquitectura de tokens estricta (Primitivos → Semánticos) inmediatamente.
Fase 2: El Motor del Sistema — Construimos una librería de componentes optimizada para alta densidad de datos. MindStudio necesitaba inputs complejos, bloques de código y selectores de variables que pudieran manejar interacciones pesadas.
Fase 3: El Pivote de Producto — Con el sistema en su lugar, me uní al Equipo Core para abordar funcionalidades complejas bloqueadas por deuda de diseño:
Orquestación Visual
Rediseñé el editor de nodos para soportar lógica ramificada compleja, paneo infinito y colaboración en equipo.
Manejo de Lógica y Datos
Abstraje el paso de datos JSON en un selector visual de 'Variables y API', reduciendo errores en flujos multi-paso.
Dark Mode Sistematizado
Aproveché tokens semánticos para lanzar un tema oscuro impecable, validado como actualización 'plug-and-play'.
04. Resultados
Impacto Medible
El sistema no fue solo una librería; se convirtió en el sistema operativo del equipo de producto.
- 40% Handoff más rápido: Los desarrolladores dejaron de adivinar códigos hex y comenzaron a usar variables semánticas.
- 80% Reducción en peso de Figma: Eliminamos cientos de frames detachados, reemplazándolos con una librería única.
- Calidad a escala: Los tickets de QA visual cayeron 25% en tres sprints ya que el sistema forzaba consistencia automáticamente.
- Dark Mode desbloqueado: Lanzamos una funcionalidad enterprise muy solicitada en tiempo récord.
“Ahora no estamos adivinando — estamos construyendo sobre terreno firme.” — Head of Product
05. Reflexión
Pragmatismo sobre Perfeccionismo
En una startup de IA de ritmo acelerado, no puedes esperar un sistema “perfecto”. Construimos el avión mientras volaba—consolidando caos en orden mientras entregábamos funcionalidades críticas. Este proyecto demostró que un Design System sólido no es una restricción; es el máximo acelerador para la innovación de producto.