La magia: el home primero, después todo el sitio

Ahora que el proyecto está en Next.js y auditado, llega lo que te venía prometiendo: las animaciones, el pulido, los detalles. Esto es lo que hace que un sitio se sienta profesional y tenga vida, en vez de ser algo súper estático.

Pero fijate cómo lo hace la skill, porque el cómo es parte de la lección.

Paso 15: sólo el home

En vez de decirle «agregá magia a todo el sitio», la skill lo hace en un solo lugar: el home. Cuando vemos que funciona bien, lo trasladamos al resto. Es más fácil corregir una página que diez, y los errores que aparezcan se corrigen antes de multiplicarse.

Cuando decís «continuemos», la skill te cuenta qué va a usar. Y acá aparecen los nombres de las skills de otras personas que instalamos en el paso 0:

• Huashu, para diseñar. Es parecido a lo que sería un diseñador trabajando en Figma, pero dentro de ChatGPT.
• Impeccable y GPT Taste, que auditan los diseños: le dan a ChatGPT información sobre qué es algo bien hecho.
• UI UX Pro Max y Apple Design, que le dicen qué características tiene que tener algo bien diseñado, en escritorio y en celular.

Vos no tuviste que hacer nada para que las use, ni yo tampoco. Ya estaban instaladas y la skill de The Mariscal sabe cuándo llamar a cada una. Eso ahorra un dolor de cabeza enorme: hoy hay tantas skills, tantas recomendaciones de usá esta para esto y esta otra para aquello, que uno termina olvidándose de cuál va dónde. La idea de hacerlo de forma sistemática es justamente que no tengas que pensar en eso.

El hero, rediseñado

Lo primero que toca es el hero, porque es la parte más importante de la portada: lo que más tiene que llamar la atención. Fijate cómo lo rediseñó: puso el título arriba, la imagen a la derecha, otra información a la izquierda. Yo no le pedí nada de eso. Ya con las skills que estamos usando, está optimizando el diseño dentro del proyecto de React.

Por eso te decía que el prototipo todavía no era la versión final. No está escrito en piedra. Se lo puede seguir modificando. Lo que conservamos es la idea de lo que queremos hacer, y en función de eso vamos evaluando.

Mientras trabaja vas a ver el cursor moviéndose solo en el navegador, con una silueta blanca: es ChatGPT haciendo los clics, navegando, revisando. Cada vez me gusta más cómo queda. Se ve una página muy profesional. Y todavía podemos seguir mejorando.

Compila, audita, muestra

Después de cada ajuste, compila (¿te acordás? exportar a la versión que se sube, para que aparezcan los errores que en local no se ven). Cuando compila sin errores, vuelve a revisar la página en el celular, en la tablet y en el escritorio. El movimiento que agrega en esta primera pasada es reducido; después le vamos a poner más. Pero paso a paso. El resultado final tiene que quedar increíble, y a eso se llega, no es que vamos de 0 a 100.

Cuando te avisa que la portada está lista para revisar, la abrís en el navegador. Fijate que ya hay animaciones cuando pasás el mouse. Yo le puse que estaba perfecta y que sigamos.

Paso 16: aplicar el nuevo estilo a todo el sitio

Ahora te pregunta si querés aplicar el nuevo estilo del home a todo el sitio. Le decís que sí.

Esto es importante: la skill no lo hace sola. Espera que vos lo pidas, porque extender el rediseño a todas las páginas es una decisión tuya. Una vez que la autorizás, unifica todo lo nuevo del home en el resto: el catálogo, el producto, el checkout, el modal.

Vas a ver que dice algo como «56 archivos coinciden con la versión aprobada». Son muchos archivos porque son los componentes, las piezas de Lego con las que está armado el sitio, que se van poniendo en todas las otras páginas.

Cuando termina, revisás cómo quedó, por ejemplo, la página de las categorías. Aprobás. Etapa 16 cerrada. Estamos muy cerca del final.