El prototipo completo: todas las páginas, un solo diseño

Acá se pone interesante, porque ahora está construyendo el sitio. Y fijate que casi no tuvimos que hacer nada: pasarle la idea, pasarle las capturas, elegir. Lo demás lo hizo la skill.

Paso 12: aplicar el diseño a todo

Decís «sigamos» y ChatGPT empieza a crear, una por una, las páginas que relevamos al principio: las categorías con sus filtros, el detalle del producto, el carrito, el checkout, el pago. Todas con el diseño Violeta. Todas usando el mismo archivo de diseño.

Mientras lo hace, vuelve a auditar cada página en todas las resoluciones. Va descargando las imágenes, probando, corrigiendo. Todo automático. A veces se queda un poco colgado y hay que guardar a mano, pero otras veces ChatGPT aprieta solo el botón de guardar y hasta le cambia el nombre al archivo. Dejalo trabajar.

Vas a ver aparecer la página del producto, y vas a notar algo: tiene exactamente la estructura de la página que le pasaste en el paso 2. Y en el checkout, el código postal y la ciudad están en dos columnas, como en la página que relevamos. Eso es lo importante de la estructura. Y la estructura podría haber sido un dibujo a lápiz en una hoja: lo que importa es tenerla antes de aplicar el diseño.

Acá es donde mucha gente comete el error de pensar que de una te tiene que salir todo terminado, bien diseñado, bien hecho. ChatGPT no sabe qué es, para vos, un buen diseño. Sabe, gracias a la skill, qué parámetros tiene que cumplir un buen diseño en general. Pero no qué estás buscando vos. Por eso, en vez de crear y crear y que no te guste y volver a pedir, cada paso que damos es sólido y es un paso para continuar: la idea, después la estructura, después los wireframes, después el relevamiento de diseño, el de marca, el prototipo.

Qué estás mirando

El prototipo es HTML. Si no sabés nada de programación, no importa; pero te doy una idea. Un archivo HTML es donde se estructura la página: el hero tiene dos columnas, usa esta tipografía, este botón va a tal lado. Las animaciones y los movimientos se hacen de otra forma, con otras librerías, y eso viene después, cuando creemos el proyecto que vamos a subir a la web.

Fijate en el modal, el pop-up: ya quedó con el diseño del sitio. Eso es lo bueno de trabajar de esta forma. Son todos pasos sólidos; no son cosas que tengamos que estar diciéndole «ah, pero no lo quería así», «ah, pero lo hiciste así». Al elegir una propuesta generamos un archivo de diseño con toda la información, y todas las páginas se construyen desde ese archivo.

Paso 13: revisar y aprobar

Cuando termina, revisás el prototipo entero. El home quedó idéntico al que ya habías aprobado. Las categorías tienen los filtros. La página de producto, el checkout, el pago: están todas.

Si querés hacer modificaciones de diseño o de estructura, este es el momento de decirlo, antes de autorizar. Pero fijate qué tipo de modificaciones:

• «El botón de comprar no se ve en el celular» → ahora.
• «En el checkout falta el campo de teléfono» → ahora.
• «El sitio está muy estático, no tiene animaciones» → no es ahora.

Respetemos cada momento. Todavía no pasamos a un proyecto de React; estamos en el prototipo. Las animaciones y los comportamientos dinámicos vienen después, y la idea es que para entonces el diseño y la estructura ya estén establecidos. Que no estemos cambiando las cosas todo el tiempo, sino que aprovechemos cada paso para hacer las modificaciones que tienen que ver con ese paso.

Todo lo que tiene que ver con el contenido (los textos, los nombres de los productos) tampoco te preocupes ahora.

Nosotros estábamos bastante conformes, así que lo aprobamos. Pensá que de una idea y una intención («quiero hacer una página de zapatillas») llegamos a un sitio navegable que se ve bastante bien. Ahora le vamos a poner un poco de magia.