HABU — Diseñando una PWA junto a la IA
Un experimento entre diseño de producto, desarrollo asistido por IA y minimalismo digital.
Idea inicial
HABU nace de la idea de crear una experiencia simple, fluida y consciente. Su nombre evoca sutilmente la palabra habit con un toque de inspiración en la filosofía japonesa. Quería reflejar una marca limpia, ligera y tranquila.
Quería crear una herramienta que yo misma pudiera usar desde mi escritorio durante mi jornada laboral: una PWA sencilla para gestionar mis tareas diarias de forma rápida y sencilla.
A su vez, este proyecto surge como un experimento de diseño y desarrollo asistido por IA, explorando cómo distintas herramientas pueden colaborar entre sí dentro de un flujo real.
Inspiraciones
- El auge de las herramientas de desarrollo asistido por IA y cómo están transformando la creación de productos digitales.
- Mi interés por el minimalismo digital y las interfaces que reducen fricción en lugar de añadir complejidad.
Conceptualización
El proyecto se planteó como una exploración entre diseño de producto y desarrollo asistido por herramientas de IA. Quería entender cómo la IA puede ayudar a crear las partes técnicas que yo, como diseñadora, no domino a día de hoy.
Así pues, investigación, arquitectura, flujos, decisiones visuales y sistema de componentes, todo este proceso fue cosa mía, no quería dejar entrar a la IA en esta fase, necesitaba plasmar mi estilo propio y esencia, y eso, la IA no lo hace.
La IA apareció después, en la fase de desarrollo, lo que me permitió construir algo funcional y mas personal sin necesitad de dominar los lenguajes de programación.
La interfaz
La idea era diseñar una experiencia fluida y directa.
Una interfaz que acompañara mi rutina laboral sin competir por atención. Algo limpio, ligero, y con un toque zen. Un lugar de calma y tranquilidad donde crear una tarea fuese el foco principal del uso de la PWA.
Sin dashboards. Sin métricas. Sin gamificación. Ya hay demasiadas apps de productividad que mas que ser una solución acaban convirtiéndose en un problema más.
Las herramientas
Uno de los aspectos más interesantes de este proyecto fue observar cómo distintas herramientas empezaban a “hablar” entre ellas mientras construía mi propio ecosistema de trabajo.
Aunque el desarrollo estaba apoyado por la IA, mi papel fue el de orquestadora del sistema, necesitaba asegurar la coherencia entre el diseño, la lógica y el producto hasta el final.
Flujo del proyecto
Figma → Codex
Diseñaba flujos, componentes y layouts en Figma, mientras Codex transformaba esas estructuras visuales en código funcional.
Codex → ChatGPT
Cuando aparecían errores o limitaciones técnicas ChatGPT me ayudaba a entender y orientarme.
Codex → GitHub
El código generado se versionaba y desplegaba desde GitHub, cerrando el ciclo entre diseño, desarrollo y producto final.
La pócima final
El resultado es HABU:
Una PWA minimalista de tareas diseñada para acompañar jornadas laborales reales de forma silenciosa y eficiente.
Aprendizajes
- Aprendí a traducir decisiones UX/UI en instrucciones más precisas para herramientas de desarrollo asistido por IA.
- Entendí mejor cómo conectar diseño visual y arquitectura técnica dentro de un flujo híbrido entre humano e IA.
- Trabajar con Codex me permitió experimentar una nueva relación entre diseñador y desarrollo, donde el diseñador empieza a actuar también como director de sistemas y flujos.
- He podido comprobar que la IA acelera procesos, pero la fase creativa y de experiencia sigue necesitando dirección y revisión humana.
He podido comprobar que la IA acelera procesos, pero la fase creativa y de experiencia sigue necesitando dirección y revisión humana.