Mockup de Pyxis en una laptop sobre fondo oscuroVer en vivo
Problema

Pyxis surge en respuesta a algo que viví de cerca como diseñadora trabajando en agencias. Cada vez que llegaba un cliente nuevo, me enviaban un manual de marca para comenzar a diseñar lo antes posible. ¿El problema? Las tipografías no estaban adjuntas, los colores había que copiarlos uno por uno y los logos descargarlos desde una carpeta de Drive. Lo que debería llevar minutos terminaba, en más de una ocasión, en tiempo perdido, con mensajes al equipo pidiendo archivos que se podrían descargar en un solo click.

Esta herramienta, impulsada por IA, optimiza el uso de los manuales de marca y ahorra más del 70% del tiempo a agencias y diseñadores freelance.

Research

Encuesté a 9 diseñadores

Para confirmar si el problema era solo mío o si otros diseñadores pasaban por lo mismo, armé un formulario en Google Forms y se lo compartí a diseñadores que trabajan en agencias y/o freelance. Los resultados confirmaron que el problema de accesibilidad es real: 5 de 9 diseñadores dijeron que consiguen las tipografías por su cuenta, viendo el nombre en el manual y descargándolas ellos mismos. Por otro lado, 5 de los 9 reconocieron haber trabajado en proyectos donde la marca aplicada terminaba siendo muy diferente a lo que decía el manual, lo que demuestra que no está cumpliendo del todo su función.

¿Qué mejorarían?

Al preguntarles qué mejorarían de los manuales de marca, la accesibilidad a los recursos apareció como un factor clave.

Gráfico de torta: 55,6% veo el nombre en el manual y lo descargo yo mismo/a, 22,2% me los envían aparte, 22,2% están adjuntos en el manual

¿Cómo obtenés los recursos de una marca, como tipografías?

  • Me los envían aparte
  • Están adjuntos en el manual
  • Veo el nombre en el manual y la descargo yo mismo/a
“Me gustaría que su navegación pueda ser más fluida y útil. Que el usuario pueda desde el mismo manual y no quede como un simple documento cajoneado.”
“Que se entregue con todos los elementos extras adjuntados en un RAR o ZIP.”
Benchmark

El problema era real

El research confirmó que es un problema más común de lo que pensaba entre diseñadores, y que debería existir alguna solución que simplifique el flujo de trabajo. Como siguiente paso, analicé el mercado para ver cómo lo están resolviendo otros productos.

Una de las soluciones más potentes que encontré fue Frontify. Sin embargo, al analizarla descubrí que no está pensada para diseñadores independientes ni agencias pequeñas: apunta a grandes empresas, como Microsoft, con sistemas de diseño complejos.

Otra alternativa es Canva, que ofrece la opción de generar un brand kit. El problema es que ese brand kit vive dentro de su propio editor: no funciona como un manual que se pueda compartir o consultar por fuera de la plataforma, lo cual limita su utilidad para diseñadores o clientes que no trabajan ahí.

Lo más curioso es que, a pesar de que ya existen algunas propuestas que resuelven el problema de accesibilidad, el formato más popular entre diseñadores para compartir y recibir manuales de marca sigue siendo un PDF de varias páginas.

Benchmark de referencias visuales de manuales de marca
FuncionalidadPDFPyxis
Índice navegable
Descargar activos de marca con un solo click
Múltiples manuales en un solo lugar
Enlace vivo, siempre actualizado
Wireframes

Planteé las primeras ideas

Después de analizar las soluciones existentes y pensar en las necesidades actuales de los diseñadores, diseñé los primeros wireframes en papel y luego en Figma, con la intención de guiar la dirección creativa desde el inicio y no dejarla a la suerte de la IA. Tenía en claro que quería que el manual fuera útil y accesible, pero sin resignar la experiencia visual.

Partí del estilo suizo como base, con un diseño limpio y claro, espacios en blanco generosos y fuertes contrastes tipográficos, ya que se alinea perfectamente con lo que buscaba para la herramienta. Además, es el estilo por excelencia en los manuales de marca convencionales: un formato conocido por todos los diseñadores.

A partir de ahí, generé algunas referencias hasta encontrar una dirección que coincidiera con mi idea de producto, y pasé al prototipo.

Primeros wireframes de Pyxis diseñados en Figma
Moodboard de referencias de diseño suizo para Pyxis

Moodboard de referencias de diseño suizo

Prototipo

Construyendo el MVP con IA

Para el desarrollo del MVP, recurrí a la IA para agilizar el proceso y reducir las barreras técnicas de la programación. Usé Claude, en primera instancia, para armar prompts optimizados y no gastar créditos de más; y Lovable para darle vida a Pyxis, apoyándome en las referencias visuales que había creado en Figma para lograr un resultado más fiel y controlado.

Empecé creando la vista de consulta de manual para una marca ficticia llamada “Bruma Beach Club”. Incluí un índice para consultar rápidamente los distintos elementos gráficos, y unas secciones de concepto, tono de voz y público para tener un panorama rápido del proyecto. Además, sumé accesos directos a las redes sociales de la marca, teniendo en cuenta que, durante el research, 5 de 9 diseñadores afirmaron que miran las redes o la página web para ver cómo está aplicada la marca.

Pantalla de Lovable usada para construir el MVP de Pyxis
Vista del manual de marca de Bruma Beach Club en PyxisSección Propósito del manual de marca de Bruma Beach Club

Descarga directa de recursos gráficos

Cada sección de la identidad cuenta con un botón de descarga directa de los recursos gráficos, ya sea de forma individual o agrupados (por ejemplo, el conjunto completo de logos en sus distintas variantes). Esta decisión responde a uno de los problemas más frecuentes detectados en los manuales de marca tradicionales: la baja accesibilidad a los recursos. Al integrar la descarga directamente en la vista de consulta, se evita que los diseñadores tengan que salir del manual para buscar los archivos por su cuenta, o depender de carpetas de Drive.

Sección Logo del manual de Bruma Beach Club con descarga directa de recursos

Paleta cromática que cuenta su origen

La paleta cromática permite copiar los códigos HEX con un solo clic, y además aporta contexto sobre su origen: al hacer hover sobre cada tono, se muestra la fotografía que cuenta de dónde viene el color. Esto responde a la necesidad de comunicar el porqué de cada decisión, algo que surgió en la etapa de research al preguntarle a los diseñadores entrevistados si habían trabajado en proyectos donde la marca aplicada era muy diferente a lo que decía el manual, y por qué creían que pasaba eso. Uno de ellos respondió:

“En la mayoría de los casos creo que sucede porque se trata de manuales muy rudimentarios que contienen solamente decisiones gráficas básicas (tipografía, logo, color). Por lo que todo aquello que va más allá de lo meramente visual queda exento (axiología, narrativa, tono de marca, etc).”

Administrar y editar manuales: todo en un solo lugar

Por último, sumé la página para administrar manuales, separada en “Mis manuales”, donde el diseñador puede ver los que creó él mismo, y “Compartidos con vos”, donde estarán aquellos que le enviaron agencias o clientes, manteniendo todo organizado en un mismo lugar. Además, creé el editor de manuales, que sigue la misma lógica que la vista de consulta. Así, el usuario puede anticipar exactamente cómo se va a ver su manual final, sin sorpresas.

Vista Mis manuales dentro de Pyxis
Editor de manual de Pyxis con campos de proyecto y redes sociales
Aprendizajes

Lo que aprendí

El mayor aprendizaje que tuve al desarrollar este proyecto fue que la IA al servicio del diseño (y no al revés) es una herramienta súper potente para los diseñadores: no solo por su capacidad de agilizar procesos, sino por hacer realidad proyectos que de otra forma hubieran quedado solo en pantallas estáticas en Figma.

En ese sentido, Pyxis es un reflejo de cómo el diseño artesanal puede convivir perfectamente con la tecnología, sin perder sensibilidad y sin dejar de conectar con lo humano.