Creamos un diccionario web interactivo de interfaces y UX

Cada vez trabajamos más con IA para diseñar y desarrollar webs, pero hay un problema bastante básico: muchas veces sabemos perfectamente qué queremos y no sabemos cómo coño se llama.

Entonces acabamos diciendo cosas como:

“Quiero una lista de tarjetas de alturas distintas que vayan ocupando los huecos que dejan las de arriba”.

Cuando en realidad bastaba con decir:

“Quiero un masonry grid”.

Y lo mismo pasa con un eyebrow, un breadcrumb, un drawer, un sticky sidebar, un bento grid, un marquee, un popover, un skeleton o cualquiera de las cientos de piezas y patrones que utilizamos constantemente en interfaces.

Cuanto mejor conocemos ese vocabulario, menos tenemos que explicar y menos cosas tiene que interpretar la IA.

Así que vamos a construir una herramienta pública para resolver ese problema.

La idea es crear una especie de diccionario visual de interfaces web donde no solo puedas buscar un término y leer qué significa, sino también verlo funcionando.

Queremos montar una web de demostración llena de componentes, layouts y patrones reales. Al pasar el ratón por encima de una parte de la interfaz podremos descubrir cómo se llama y abrir una ficha con información sobre ella.

Qué es.

Para qué sirve.

Qué otros nombres puede tener.

Con qué se suele confundir.

Y, sobre todo, cómo pedirle exactamente eso a una IA.

También queremos que funcione al revés.

Si alguien sabe lo que quiere pero no conoce el término, debería poder buscar algo como “el menú que sale desde un lateral en móvil” o “la cuadrícula esa como Pinterest” y llegar a drawer, off-canvas navigation o masonry grid.

Eso nos obliga primero a hacer bastante trabajo de investigación.

Hay términos muy claros, otros que dependen del contexto, conceptos que tienen varios nombres y patrones que Internet lleva años llamando de maneras distintas. Tendremos que decidir qué vocabulario incluimos, cómo lo clasificamos y hasta qué punto merece la pena normalizarlo.

Después vendrá la parte de diseño y construcción.

Habrá que crear una interfaz donde aprender mirando resulte más útil que leer una definición de diccionario. Diseñar el sistema de fichas, las categorías, el buscador y una demo interactiva suficientemente completa para que todo tenga contexto.

Y una vez tengamos una base sólida podremos experimentar con cosas más interesantes.

Por ejemplo, utilizar lenguaje natural para encontrar un componente aunque no conozcas su nombre.

O incluso comprobar si una IA puede analizar una captura de una web y señalar automáticamente qué patrones y componentes está viendo.

El objetivo final no es hacer una lista de términos ni un PDF que termine olvidado en una carpeta.

Queremos publicar una pequeña herramienta independiente, con su propio dominio, que cualquiera pueda abrir cuando esté diseñando, programando o intentando explicarle a una IA exactamente qué coño quiere construir.

Y si por el camino conseguimos además una base de conocimiento que podamos reutilizar dentro de los agentes del Sistema LMB, mejor todavía.

Aquí está el proceso de verdad. Cada Laboratorio es una sesión en la que atacamos una parte concreta del proyecto: investigar, probar, decidir, construir o corregir lo que no ha funcionado.

Todavía no hay una conclusión que merezca llamarse resultado. El proyecto sigue abierto y lo iremos actualizando a medida que las pruebas nos lleven a algún sitio.