Los wireframes: el esqueleto en blanco y negro

Un wireframe es un dibujo de la estructura de una pantalla, sin diseño. Blanco, negro y gris. Cajas con una cruz donde va a ir una foto, líneas donde va a ir un texto, un rectángulo donde va a ir un botón. Se usan en diseño de páginas y de aplicaciones para decidir cómo está puesto cada elemento antes de pensar en cómo se ve.

Y, sobre todo, para decidir cómo cambia en cada tamaño de pantalla: en la computadora veo tres columnas de productos, en una tablet veo dos, en el celular veo una. Ese tipo de decisiones se toman acá.

Cuando hacíamos sitios a mano, antes de la inteligencia artificial, los wireframes eran clave. Mucha gente hoy los saltea, empieza a diseñar directamente con la IA, y después no entiende por qué la página no les queda bien. Es por esto. Si no tenés un esqueleto, cada página sale distinta y nada encaja. En The Mariscal recuperamos esta forma de trabajar justamente para poder construir sitios de calidad con la IA, y para poder probar varios diseños sobre la misma estructura, como vas a ver dentro de dos capítulos.

Paso 4: la skill los dibuja

Decís «continuemos» y la skill empieza. Lo primero que hace es pedirte dos permisos:

• Ejecutar un script de Python. Es el que arma los archivos HTML de los wireframes. Aceptalo.
• Usar Chrome. Lo va a usar para abrir cada wireframe, sacarle una captura y revisar que se adapte al celular y a la tablet. Lo va a usar constantemente en lo que queda, así que yo le puse que siempre puede.

Sobre los permisos en general: abajo de la caja de texto de ChatGPT podés elegir que te pregunte todo o sólo las cosas importantes. Yo tengo puesto que me pregunte sólo lo importante. Si no, te pasás la tarde apretando «sí».

A partir de ahí no hacés nada. ChatGPT crea un archivo HTML por cada página del sitemap, los enlaza entre sí, les saca captura en los tres tamaños, corrige lo que no se adapta, y vuelve a sacar captura. Vas a ver pasar las capturas: la del checkout, la del método de pago, la del carrito. Cuando termina te avisa que los wireframes están listos y que los podés abrir en el navegador.

Qué vas a ver

La primera página es un índice con todas las páginas. Desde ahí entrás a cada wireframe. Vas a ver, en gris y blanco:

• En el home, una lista de productos que se mueve en horizontal, los cuadrados con la cruz donde van las fotos.
• En la categoría, los filtros a un costado y la grilla de productos.
• En el detalle del producto, las fotos, el selector de talles, todo lo que tenía la página que le pasaste.
• El checkout y el pago, con sus formularios.

Lo único que importa ahora es la estructura. El contenido (los textos, los nombres de los productos) no. Si querés cambiarlo lo podés hacer, pero es mejor esperar al final, cuando el proyecto esté armado y los textos se editen desde un archivo.

Paso 5: corregir y aprobar

Es tu oportunidad de hacer ajustes. A mí me pasó algo que te puede pasar: la página de categoría salió cortada, con las imágenes mal, porque la captura que le había pasado estaba cortada (¿te acordás, la del scroll infinito?). Y además le faltaba el pie de página que sí tenían las otras.

Se lo dije así:

En category las imágenes están cortadas. Ponelas bien, como en las otras páginas, y agregale el footer.

«Como en las otras» funciona porque ChatGPT puede consultar el Obsidian y ver exactamente qué hizo en las otras páginas. Acá no adivina nada: nosotros le indicamos siempre qué hacer, y él tiene memoria de lo que ya hizo.

Esperás que ejecute, abrís el wireframe en el navegador, y ya tiene el pie y las imágenes enteras.

Cuando todo está bien, escribís «listo, sigamos». La skill registra la versión que aprobaste. Esto es importante: queda guardada exactamente esa versión, y todo lo que venga después tiene que respetarla. Los wireframes quedaron hechos para computadora, tablet y celular.

Paso 5 completado. Ahora sí: el diseño.