Una web impresionante con ChatGPT.
Un video, 29 clases. Con el ChatGPT de todos los días y la skill gratis del Mariscal armamos una tienda de zapatillas desde cero y la publicamos. No escribís ni una línea de código.
- Gratis
- 29 clases
- 1 h 48 min
- Hablado en castellano, con subtítulos
Ver el curso · Una web impresionante con el ChatGPT de todos los días
Una web impresionante con el ChatGPT de todos los días
Bienvenido a este video. Vamos a aprender cómo hacer un sitio web impresionante con ChatGPT. Sí, con el ChatGPT que usás todos los días. ¿Y cómo lo vamos a hacer? Usando una skill que hemos preparado en The Mariscal para que no tengas que hacer nada. Nada. La idea es que instalemos esta skill al principio y nos va guiando paso a paso. Y empecemos. Bueno, este es el proyecto final que vamos a terminar creando. En este caso es una página de zapatillas y todo va a comenzar contándole
la idea a ChatGPT. Pero pará, pará, pará, pará. Yo sé, vos sos de los que abren ChatGPT y le dicen: «Quiero tener una página web impresionante». Bueno,
no funciona así, lamentablemente. Así que ahora te voy a mostrar cuáles son los pasos que vamos a hacer en este video. Bueno, el primer paso va a ser crear un proyecto y explicarle a ChatGPT qué es lo que queremos crear. Y con eso va a generar lo que es el plan. El siguiente paso va a ser generar la estructura de lo que es el sitio. Para eso vamos a buscar referencias. Acá no tiene nada que ver el diseño. El siguiente paso es generar los wireframes. Los wireframes son como nuestro sitio, pero sin ningún tipo de diseño. Una vez que tengamos eso, vamos a buscar referencias de diseños. Y con eso, más el wireframe, ChatGPT nos va a dar
varias opciones para que nosotros podamos elegir. Una vez que hayamos elegido el diseño, el siguiente paso va a ser crear nuestra marca. Para eso también vamos a buscar referencias y con eso vamos a tener varias opciones para elegir. Una vez que tengamos eso, el siguiente paso es generar el prototipo de la página principal solamente, donde vamos a poder ver cómo va a ser el diseño que nos propone ChatGPT con la marca. Cuando eso esté bien, vamos a generar el prototipo de todo el sitio. Y una vez que tengamos el prototipo de todo el sitio, vamos a generar el proyecto que vamos a publicar: un sitio web bien hecho, con todos los
requerimientos que usamos los programadores. Una vez que tengamos el sitio, lo vamos a publicar. Y una vez que lo hayamos publicado, como bonus track, vamos a mejorar algunas cosas del diseño, agregar animaciones, agregar magia. Y con eso ya vamos a tener nuestro sitio web. Y vas a poder entender cómo editarlo, cómo editar los textos, cómo editar el diseño, y todo eso sin tocar ni una línea
de código. Ahora que ya sabemos lo que vamos a hacer, ¡manos a la obra! Antes de comenzar, este video está patrocinado por nosotros, ¡The Mariscal! The Mariscal Project es una empresa de software que la creamos un grupo de programadores con más de 10 años de experiencia. Lo que buscamos es democratizar lo que es el software de calidad. Somos los Robin Hood de la informática. La idea es que las empresas pequeñas y la gente emprendedora puedan tener un software con calidad internacional, como el que usan las grandes empresas. Podemos mejorar tu sitio, podemos auditarlo, agregarle seguridad, o
simplemente crearlo desde cero. O también crear software específico para tu empresa. Pero también, si sos psicóloga, dentista, tatuador, barbero, también tenemos un software que es básicamente un WhatsApp con una guía personalizada para tu negocio, que puede dar turno a los usuarios usando Google Calendar para anotar la cita y comunicarse con vos. Así que ya sabés: si tenés alguna idea para una web, una aplicación, lo que sea, contá con nosotros. Entrá a themariscal.com y
ahí comentanos tu idea. Ahora sí, seguimos con el video. Bueno, lo primero que vamos a hacer es entrar a GitHub. Lo vamos a buscar en Google, pero también podés entrar a github.com. Y vamos a crear una cuenta. Esto es importante porque acá vamos a ir guardando todo nuestro código, el código que vaya generando la IA, y vamos a poder tener cada paso que va siendo guardado.
Además nos va a servir para poder publicar el sitio una vez ya creado. Y una vez que ya tengamos la cuenta de GitHub, vamos a descargarnos la aplicación. En este caso para Mac, pero para Windows también funciona. La vamos a descargar y la vamos a ejecutar desde el escritorio. Esta aplicación nos va a permitir poder controlar GitHub y también, al mismo tiempo, poder hacer que la IA tenga acceso a GitHub. Una vez que se descargó, bueno, la abro. La voy a instalar. Yo en este caso ya la tengo instalada, por eso me aparece esto. Pero si no, vos la instalás
tranquilamente. Y el objetivo es poder, como te dije, loguearnos en la cuenta y poder administrar desde ahí. Una vez que lo
tengamos, vamos a entrar a Obsidian. Vamos a descargar esta app. También está para Windows. Y acá, esto nos va a permitir ir leyendo la documentación que vamos a ir escribiendo. Y luego, en el futuro, ya vas a ver, poder administrar el texto del sitio. Una vez que la tenga descargada, a la aplicación de Obsidian la voy a instalar también. Yo también la tengo ya instalada, por eso me aparece esto. Pero vos la vas a instalar tranquilamente. Y ya con eso... No es necesario que la usemos ahora, pero sí es necesario que la tengamos instalada. Ahora voy a abrir la cuenta de GitHub en mi aplicación. Para eso abro la aplicación y la
autorizo. Mirá qué fácil es. Pero es un paso fundamental. Una vez que ya la abrí, ya puedo acceder. Esto lo dejo siempre como está. Es para configurar, digamos, cómo se van a enviar las cosas. Por default te va a tomar los datos que ya habías ingresado, digamos, que es lo que
necesitamos. Vamos a abrir la aplicación de GitHub ahora y vamos a entrar acá arriba: File, Nuevo repositorio. Acá va a ser donde vamos a guardar las cosas, o sea, el proyecto que vamos a crear. Entonces le voy a poner un nombre, en este caso New Website, y lo voy a crear en esta carpeta de Documents/GitHub, por defecto. Creo el repositorio y lo publico. Pero fijate que siempre tiene que decir «Mantener en privado». Una vez que publico el repositorio, esto me está pidiendo permiso, porque como la aplicación de GitHub es nueva, todavía no tiene ciertos permisos de seguridad. Pero se los vamos a ir agregando sobre la marcha. Una vez
que lo tengo, ya puedo abrir ChatGPT. Siempre fijate que sea la última versión. Eso es bastante importante, digo. Y acá en proyectos voy a agregar el proyecto. Pero antes te quiero mostrar que tiene que estar en Work para que me deje abrir los proyectos. Y acá abro la carpeta que acabo de crear, New Website. Está vacía, pero así tiene que estar. Y le pongo un nombre para que sepa ChatGPT: New Website. Pongo «Confiar en la
carpeta». Y ahora ya podemos empezar, por fin. Le voy a decir: «Instalá esta skill». Eso solo. Y el modelo: fijate que acá tengo el Sol, pero te recomiendo que uses el Astra. Y yo acá lo voy a estar usando en High, que da mejor el resultado. Pero lo podés usar en Medium también. En el momento que tengamos que diseñar, sí te recomiendo que lo pongamos en High, porque son mejores los resultados. La instalo y ahora va a estar pensando. Y una vez que revise eso, la va a instalar. Y una vez que ya esté
instalada, la vamos a poder ejecutar. En este caso vamos a ejecutarla poniendo la barra y «themariscal». Así se llama la skill: themariscal-create-amazing-website. Simplemente la ejecuto y ya la skill sabe todo lo que tiene que hacer. Va a configurar el proyecto. A vos te va a demorar un poco más. Yo, para no hacer tan largo el video, he sacado las partes donde ChatGPT se pone a pensar y a pensar. Pero este es el resultado que va a tener: va a instalar todas estas skills que tiene de complemento. Es decir, de la skill de The Mariscal solamente vamos a necesitar una, pero trae varias skills de otras
personas que va a ejecutar cuando sea el momento necesario. El primer paso de la skill es entonces fijarse si vos tenés las skills necesarias. Y si no, hay que instalar todo, como en este caso. Termina de instalar y ya vamos a poder trabajar. Ahora nos pide que expliquemos qué web queremos crear. Yo en este caso voy a crear una web para vender zapatillas, para poder hacer este ejemplo. Es un e-commerce para vender zapatillas.
Entonces, ya con esa información, vamos a crear con la skill todo el plan y el Obsidian, la carpeta, como para poder trabajar paso a paso y que se vayan guardando los pasos. Eso es importante. Ya que estamos poniendo Obsidian acá, lo que va a hacer es guardar todo ahí. Entonces ahora me está diciendo como que no puede publicar en GitHub. Entonces necesita una autorización. Eso te va a pasar al principio, pero después, una vez que le das la autorización, no te va a pasar más. Eso es para que
ChatGPT pueda mandar a GitHub los códigos, que eso va a servir para que nosotros podamos llevar el control de todo lo que vamos haciendo. Acá le doy permiso para siempre. Me pide acá el Mac que yo abra la accesibilidad, y lo único que tengo que hacer es habilitar, como arrastrando, así como se ve acá, y poniendo los datos del administrador de la computadora.
Bueno. Y acá pongo los datos del administrador. Y una vez que lo tengo, tengo que hacer lo mismo con los screenshots. Esto es porque ChatGPT va a sacar screenshots para poder analizar lo que vamos haciendo. Va a ser muy importante para el tema de los diseños para celulares y esas cosas. Entonces, una vez que ya le di los permisos, debería poder enviar a GitHub. Y dice que ya la documentación se envió a GitHub.
Pero como ves, ya se me acabó el plan. De todas formas, no hay problema. Yo lo que voy a hacer es cerrar sesión y entrar con otra cuenta, que eso no nos va a perjudicar en nada, porque estamos guardando todo en una memoria unificada hecha
con Obsidian. ¿Qué es Obsidian? Obsidian es como un bloc de notas, es un lugar para guardar notas. La diferencia y el poder que tiene Obsidian está en que esas notas van unidas. Es decir, lo que hace Obsidian es conectar las notas entre sí y generar lo que es un mapa mental, digamos. ¿Eso para qué sirve?
Para que ChatGPT vaya documentando todo lo que vamos haciendo y vaya conectando todo. Y cuando después necesite encontrar algo, ya lo va a poder encontrar muy rápido. Esto le da memoria ilimitada a ChatGPT. Ese problema de que no se acuerda de nada, con Obsidian se resuelve. Pero también quedate tranquilo, que no vas a tocar nada de eso. Solamente lo vamos a crear y ChatGPT se va a encargar de todo.
Estamos guardando todo en una memoria unificada hecha con Obsidian, que aunque vos no lo veas, esa carpeta está. Y para que veas, te vas a la carpeta New Website y ahí vas a tener Obsidian. Acá tenemos todo lo que fue generando ChatGPT y todo lo que va a ir generando con respecto al plan que vamos haciendo. Acá lo podés ver. Y eso es un mapa, como todo conectado. Como
es una nueva cuenta de ChatGPT, voy a volver a importar el proyecto. Y eso nos va a permitir seguir trabajando. Fijate cómo yo acá importo el proyecto y acá no le tengo que decir nada, ni hacer ninguna colaboración ni nada. Simplemente diciéndole «Continuemos», la skill va a saber en qué paso está.
Esta skill está pensada para hacer varios pasos. En total creo que son 18 o 19. Entre que cada paso lo va a ir desplegando a GitHub, también se va acordando en qué paso está. Acá dice: «El proyecto ya está creado exitosamente». Ese es el paso 1. Entonces yo lo único que le voy a pedir es que continuemos. Acá, a ChatGPT le digo «Continuemos» y ya sabe lo que tiene que
hacer. Retomó con la habilidad de la skill. Y ahora vamos a crear la estructura de la página. Primero necesitamos armar la estructura de lo que va a ser cada página que vamos a tener y cómo va a ser la estructura interna. Para eso, lo que vamos a hacer es usar capturas de pantalla de otra web. Pero también sirve si vos lo dibujás en lápiz y le sacás una foto. O, por ejemplo, podés hacer un collage en Photoshop o en alguna otra aplicación, donde de una página saques el encabezado que te gusta, después pongas el carrusel, por ejemplo, o qué sé yo. Y ese collage se lo vamos a pasar a ChatGPT, porque lo que va a hacer es extraer la estructura. No
importa nada de diseño ahora. Lo que vamos a hacer es generar como el esqueleto de la página que queremos crear, para luego poder diseñarla. Acá, si vos ya tenés alguna referencia o algo, lo podés poner. Yo lo que voy a hacer es basarme en algo que ya está hecho, como en este caso, la página de Puma. Voy a poner acá, clic en el botón derecho, Inspeccionar. Me voy a ir a la parte de consola y yo aprieto Command más Shift más P. Y ahí me aparece eso, donde voy a poner que saque un screenshot a todo el sitio. Y una vez que tengo eso, le pongo, digamos, la imagen a
ChatGPT y le pongo que ese va a ser el home. Lo que va a hacer es generar un archivo .md, Markdown, que lo que va a hacer es poner toda la información de la estructura. O sea, no pensemos que acá estamos sacándole el diseño ni nada. Simplemente la estructura. Eso nos va a permitir crear los wireframes, que va a ser muy valioso para la siguiente parte del diseño. Una vez que ya esté cargada, voy a cargar otras páginas, como, por ejemplo, qué pasa en el product detail, o sea, en el detalle del producto. Acá tengo esta forma que usa Puma, que, por lo que yo estoy haciendo, me parece
bastante útil. Así que Command Shift P, o Control Shift P si estás en Windows, y buscás esta que dice «Capture full size screenshot». Me va a generar una imagen que me la va a guardar en Downloads, que si la veo es todo el sitio, o sea, toda esa página. Y así no tengo que ir sacando varias capturas. Directamente esta, y con eso se la paso a ChatGPT. Y acá le tengo que decir que es la página de producto, product detail. Bueno, acá solamente hay que decirle a qué página corresponde y lo va a guardar en el Obsidian que hemos creado, que yo lo puedo seguir revisando si quiero. Ahí me dice
que va a guardar la referencia. Y ahí lo está guardando. Y dice... la imagen, bueno, te describe un poco lo que ve. Y ahí te permite crear más. Si no, solamente le tenés que decir «Listo». Acá en el Obsidian yo puedo ver la estructura y puedo ver que tengo acá el home. Esto es lo que me creó con la imagen que yo le pasé. No tiene ninguna información de diseño, solo de la estructura de la página. Y con eso ya puedo crear más páginas, o sea, todas las que yo quiera o las que yo ya sé que va a tener mi sitio. Obviamente después podemos crear más, pero cuanto mejor sea la información que demos ahora, mejor va a ser el trabajo que vamos a
poder realizar. Así que si ya las tenemos, agreguémoslas. También podés hacer un dibujo en lápiz en una hoja, sacar una foto y subirla. Eso también va a funcionar. O si ya tenés un diseño, tipo en Photoshop, en Figma, lo que sea, se lo podés subir para que ya use la estructura que ya tenés. O si vos ya tenés un sitio y lo querés rediseñar, simplemente hacés esto con la estructura de tu sitio. Como nosotros partimos desde cero, lo vamos a hacer así. Y acá voy a poner esta imagen, que es la imagen del checkout. Entonces la arrastro a ChatGPT y le digo que es la imagen del checkout.
Listo. Ya con eso tiene que saber qué imagen es para guardarla en el Obsidian. Entonces me dice que la ha guardado y si quiero crear más. ¿Si quiero creer? Creer quiero siempre, pero bueno. Ahora... Bueno, que cree. Quiero creer que todo va a salir hermoso. Bueno, para eso ahora yo, por ejemplo, estoy llenando este formulario con datos falsos, solamente como para que me deje pasar a la siguiente pantalla, que es la de elegir el método de pago.
Entonces acá vamos a poner... Bueno. Ahora... me permite ir a la página de los métodos de pago. Entonces aquí yo le voy a poder sacar otro screenshot. De vuelta, hago lo de ir a la consola, como en Cmd+Shift+P. Eso me va a abrir este menú en el que yo puedo buscar «Capture full size screenshot». Ya la tengo en la carpeta de
Downloads. Acá la tengo completa. Y ahí lo que voy a hacer es ir a ChatGPT, pasársela y decirle que es el Payment Method. Acá, una vez que le dije, ya se pone a pensar y va a guardarla también en el Obsidian. Todo lo está guardando ahí.
Lo que hace en esta parte de la skill es analizar la información que le pasamos, construir el documento .md, pero sin tener en cuenta el diseño. Como te dije, todo esto es necesario para poder crear los wireframes. Entonces ahí vemos que sigue pensando. Muestra, bla, bla. Va analizando y la va creando. Ya se creó. Y «¿Querés crear más?». Entonces, si quiero, busco una más, y si no, directamente le pongo «Listo». Yo voy a agregar una más, que es la de las categorías, que es algo de todos los e-commerce. Yo acá veo que en esta página, en esta parte que estoy relevando... Estoy buscando la parte de las
categorías. Esta me sirve; en este caso son niños, y me sirve. Como acá veo que la página tiene un scroll infinito, no me va a servir lo de capturar todo el screenshot. Así que directamente le voy a sacar una captura convencional, apretando Command Shift 4 en Mac, que lo que me hace es poder seleccionar una parte de la pantalla. Entonces acá, ¡tac!, saco esa parte. Y eso le paso a ChatGPT, la captura, así como me la guarda. Pero como abarca muy poco, voy a tratar de sacar otra parte
de la pantalla. Pero como la parte de abajo y todo eso es la misma, lo voy a dejar así. Pero vos tenés que saber que podés sacar varias capturas para armar una pantalla. Entonces acá le digo que esta es la pantalla de Category. Como ya estuvimos viendo, se pone a pensar. Bueno, va a guardar todo eso. La categoría muestra filtro, blablablá. O sea, está analizando la imagen. Y acá dice que ya la ha guardado. Acordate que a vos te puede demorar un poco más que lo que se ve en este video, porque acá está editado como para que sea un poco más fluido. Acá ya terminé y le digo «Listo». Entonces acá lo que va a hacer es, una vez que
ya había creado las cosas, va a crear un sitemap. O sea, va a crear un archivo en el Obsidian, donde lo guarde, para saber cuáles son todas las páginas que ya hemos cargado y vincularlas entre sí, lo cual nos va a permitir
después hacer los prototipos. Entonces dice: «Paso 2 ejecutado exitosamente». Y ahora lo que tenemos que hacer es «Continuemos», para que sigamos con el paso 3. Aquí se va a poner a pensar también. Y dice que la etapa 2 está completa. Ya tenemos, blablablá, al inicio. Vamos a seguir con la parte 3. Entonces el mapa ya está preparado. Ese era el sitemap que te contaba. En la etapa 3 vamos a generar lo que es, digamos, el sitemap ya como listo, como para diseño en el sitio. Acá me pide que lo apruebe. Y eso lo vamos a hacer muchas veces, o sea, el hecho de validarlo. Porque si tenés
que hacer alguna corrección o algo, este es el momento. En este caso estamos conformes, así que le decimos «Continuemos». Y ya el paso 3 ha quedado completado.
Vamos a ir al paso 4. Siempre fijate que acá dice «Vamos a retomar la tarea». Eso es porque está viendo lo que ya se hizo. La skill va escribiendo cada paso. Ya tiene el plan completo y va escribiendo cada paso, entonces para que sepa. Ahora lo que vamos a hacer es empezar a crear los wireframes. ¿Qué son los wireframes?
Los wireframes se usan en lo que es diseño y armado de páginas y aplicaciones para mostrar la estructura que tiene cada página o cada pantalla. Es decir, si tiene un encabezado, si tiene un carrusel, si tiene una lista de imágenes, cómo está puesto, cómo se va a ver eso en mobile, en celular. Por ejemplo, yo puedo ver en la web tres columnas, en una tablet ver dos y en un celular ver una. Ese tipo de cosas se ven en el wireframe. Esto es fundamental y es lo que diferencia que algo salga bien o que salga mal. Por eso nosotros, en The Mariscal, tenemos un libro que se llama «Cómo se piensa una app», que sale solamente 10 euros, en donde
explicamos todo eso de cómo llegar de una idea a armar la estructura, dibujar los wireframes y todo eso, preparando todo para trabajar con IA. Básicamente, un wireframe es un esqueleto sin diseño de cómo es la estructura de la página. Acá, para crear las imágenes y todo eso, que son, digamos, los archivos HTML y todo, vamos a usar un script, un script de Python, que acá es lo que me está pidiendo que yo acepte. Lo voy a aceptar tranquilamente. Y acá me va a preguntar si puede usar Chrome, que le voy a poner que siempre lo puede usar, porque lo vamos a usar constantemente en lo que es este video. Y yo
había puesto que lo apruebe todo. O sea, ahí abajo vos podés poner que te pregunte, pero yo pongo que solo me pregunte las cosas importantes. Acá vemos que ya está creando, digamos, lo que es un archivo HTML. Eso significa que es un archivo para la web, pero que no tiene ningún tipo de lógica. Solamente nos estamos enfocando en el diseño ahora. Y bueno, acá vemos que tenemos las páginas que fuimos creando, y con eso me va a crear los wireframes de cada página para que yo los pueda navegar. Este es un paso fundamental, porque muchas personas empiezan a diseñar directamente con la IA y después no
saben por qué no les queda bien la página. Básicamente es por esto, porque vos, antes de implementar un diseño, tenés que tener un esqueleto. Cuando hacíamos páginas de internet con código y todo, antes de que saliera la inteligencia artificial, básicamente los wireframes eran claves para que, antes de pasar al proceso de diseño, uno ya sepa bien cuáles son las estructuras que vamos a necesitar. Entonces esto es una forma que hemos recuperado acá en The Mariscal para poder construir verdaderamente sitios web que sean de calidad, y que después, independientemente de la estructura, podamos elegir varios tipos de
diseño. Acá lo que está haciendo ChatGPT: le sacó una foto, digamos, a la página, porque en lo que es la creación de los wireframes, el esqueleto, está como tratando de hacer también que se adapte a celulares y a las tablets, al iPad y a cualquier otra tablet. Entonces va sacando fotos como para saber si se adapta.
Fijémonos que acá ya tenemos la parte de la estructura. Y así va quedando. Como ves, es blanco y negro, sin ningún diseño, pero eso es justamente lo que necesitamos ahora. Entonces ahora la idea es crear los wireframes de todas las páginas que le fuimos diciendo en el paso anterior, pero también las va a ir linkeando entre ellas.
O sea, eso va a ser importante para hacer el prototipo. Acá vemos que tenemos la del payment method, no, la del checkout, creo que era esta, y la otra, la del payment method. Y así va a ir haciendo con todas. Para eso va como analizando y sacando más screenshots, hasta que ya para ChatGPT está bien: el carrito y el cambio. Ya envió, bla bla bla. Y acá dice que los wireframes están listos y que lo puedo abrir en el navegador. La primera página sería como un index de todas las páginas que tenemos, y acá vemos cómo son los wireframes.
Y a esto me refería con la estructura. Ves que ahí tenemos una lista que se mueve horizontal. Bueno, también esto, que son los cuadrados con esta cruz, es una forma de indicar que ahí va una imagen. Vemos que en la categoría tenemos los filtros y tenemos las imágenes. Vemos que en el detalle del producto también tenemos la forma para elegir los productos y todo lo que veíamos que tenía la otra página. Básicamente el checkout y todo. Acá solamente nos interesa trabajar en la estructura, no en el contenido. Si uno quiere cambiar el contenido y todo eso, bueno, lo puede hacer ahora, pero preferible hacerlo después, cuando ya esté
montado el proyecto, para directamente poder hacerlo de una forma fácil, editando el texto. Acá, mirá, me salió cortado porque la captura estaba cortada, la que le pasé en category, ¿te acordás? Entonces esto sí lo puedo corregir ahora. Le pongo: «En category aparece todo cortado, eso en la captura que yo te pasé», le cuento, «estaba cortado, pero ahora necesito que pongas las imágenes bien». Y además le voy a pedir que ponga el footer, que también lo teníamos en las otras páginas. Bueno, acá le pongo: «Hazlo como
en los otros y agregarle el footer». Yo le puedo decir que agregue como en los otros porque gracias a usar el Obsidian esto nos permite que ChatGPT pueda consultar esa memoria y saber qué hicimos nosotros. O sea, acá ChatGPT no va a adivinar nada: nosotros le vamos a indicar siempre qué vamos a hacer. Entonces: «Sí, voy a completar las tarjetas», blablabla. Bueno, hace. Esperamos un toque que vaya ejecutando los comandos y esperamos, entonces, que haga ese cambio. Y acá vemos que lo estoy ejecutando en el navegador para verlo mejor, y lo puedo ver tranquilamente: ya tiene el footer y ya no está
cortado. Así que, una vez que ya quede esto, podemos pasar al siguiente paso. Bueno, estos cortes que van apareciendo acá como bruscamente son porque por ahí se demora mucho en hacer algunos cambios. Entonces yo corté el video como para poder explicarlo mejor y para que no sea tan tedioso verlo. Pero acá dice que ya la etapa de los wireframes quedó lista. Entonces lo que va haciendo: la siguiente etapa de los wireframes, y a probarlo. Por eso dice que la etapa cinco quedó lista. Y lo interesante es que los wireframes están hechos para la computadora, para el celular y para el iPad. Así que, una vez que termine eso,
podemos pasar ya a la etapa de darle un poco de diseño. Acá puedo hacer la última chequeadita como para ver que todo está bien. En mi caso todo está bien, así que le digo: «Listo, sigamos», que está... le digo: «Listo, perfecto, y avancemos con lo demás».
Bueno, acá dice que ya quedó aprobada la versión. Siempre, después de un paso así importante, como en este caso los wireframes, va a esperar la aprobación o va a modificar cosas que le
digamos. En este caso le digo que continuemos. Y acá el paso siguiente es el diseño. Si yo ya he generado otros diseños, suponete que ya hice esto, ya usé esta skill para hacer otra web y quiero usar los diseños que ya había relevado ahí, no es necesario que yo empiece todo de cero: puedo importar en las carpetas. Pero como acá estoy de cero, le puse que analicemos. Voy a entrar acá a Dribbble. Es una web donde se ven diseños bastante buenos que nos van a servir de inspiración. No es que lo vamos a hacer igual, solamente vamos a enseñarle a ChatGPT qué es un diseño que nosotros consideramos
que está bien. Voy a buscar, depende de lo que yo esté haciendo, digamos. Acá estoy buscando sobre tiendas y me aparece esta que me gusta. No es necesario que todas me fascinen, digamos, simplemente que le vea algún potencial. Eso nos va a servir de base para diseñar lo nuestro. Acá también copio esta, y por lo menos yo voy a copiar unas tres o cuatro, digamos. Esta también la voy a copiar. Lo que estoy haciendo es descargar la imagen en Downloads para después pasársela a ChatGPT. Entonces acá descargo, y esta es la primera. Entonces le voy a pasar la imagen, la arrastro
y le digo cómo quiero que guarde ese diseño. O sea, cómo quiero yo que guarde el diseño en Obsidian. Acá le vamos a poner «Dark». Y acá va a ser lo opuesto a lo que hacía para los wireframes. O sea, ahora se va a fijar en el diseño, pero no en la estructura. Así que no importa cuál sea la estructura que tengan estos diseños: lo que se va a fijar es en los colores que usan, la tipografía, en todo eso, pero no en la estructura. Así que no importa que la estructura tenga que ver con lo que vos estés haciendo. O sea, podés tranquilamente usar cualquier otra página que nada tenga que ver. Este diseño también me había gustado, así que lo
voy a pasar y le voy a decir que este diseño se va a llamar «Verde». No me complico mucho con los nombres porque esta es una etapa de las tantas que vamos a seguir y, como te dije, el diseño después lo vamos a modificar, digamos. Esto nos va a servir para ver varias versiones de lo que estamos haciendo, lo que queremos hacer. Y entonces acá me pregunta si quiero seguir agregando o si ya paramos. Siempre que paremos, digamos «Listo». Entonces voy a poner que el siguiente diseño que había sacado, que es este violeta, lo voy a arrastrar, lo voy a poner en el ChatGPT tal cual venimos
haciendo las cosas: «Violeta». Y acá lo que va a hacer en el Obsidian, después vamos a ver, me genera un archivo .md por cada uno de estos diseños. Y esto es lo que le podemos pasar si ya lo tenemos generado, porque, por ejemplo, hicimos otra web con esta skill: lo que va a hacer es usar esos diseños para no tener que hacer todo esto cada vez y hacerlo repetido. Entonces estamos haciendo ahí. Ya me lo guardó, y voy a buscar una más para mostrarte bien cómo funciona esto de los prototipos. Eso tampoco me quiero complicar tanto, pero voy a tratar de buscar algo que sea distinto a lo que ya
venía haciendo. Entonces, esto de la búsqueda es bastante importante porque va a sentar los cimientos con los que se va a construir el diseño de la página. Entonces está bueno que le dediquemos tiempo a buscar realmente cosas que nos sirvan, no meter cualquier cosa. O sea, no pongas cualquier cosa, porque sinceramente con cuatro diseños ya es suficiente. Obviamente podés poner más, pero bueno, después va a tener que generar más plantillas, más cosas, y eso va a seguir como alargando el proceso, y también te va a costar más. Así que con cuatro me parece ya suficiente. Cuatro que vos hayas elegido con cabeza,
digamos, sabiendo como que eso es parecido a lo que querés hacer. Bueno, me está costando un poco elegir porque son todas muy parecidas a lo que ya tengo. Quiero buscar algo que sea un poco distinto. Entonces, bueno, le dedico un poco de tiempo, pero también para no complicarme tanto. Bueno, voy a tratar de elegir una rápido que se vea distinta a lo que yo ya tenía.
Y me parece que esta está bastante interesante. Vamos a... lo guardamos, y la busco también en Downloads, y la pongo en ChatGPT, y le digo que esta se va a llamar «Pink». Y con eso ya la puedo guardar.
Va a pensar y hacer todo lo de recién. Y una vez que lo tenga, ya con eso yo ya puedo dar por terminado este proceso. Ya tengo cuatro, con eso más que suficiente para mí. Y me pregunta si quiero seguir agregando, pero yo le voy a poner que no, que ya estamos bien. Así que le pongo: «Listo, y continuemos», o en este caso: «Sigamos con lo siguiente». Y entonces, una vez que seguimos, va a
cerrar las referencias, es decir, que ya va a guardar que esas son todas las referencias que le hemos pasado. Y con las cuatro referencias va a validarlas, digamos, viendo que... este, viene el criterio de los archivos que está generando. Y ahí me pide aprobación también, y
me dice que seguimos con la marca. En este caso me pregunta si tengo algo. Si tenés, pasale, pero si no, como en este caso que no tenemos nada, vamos a hacer un relevamiento de marca. Ese relevamiento es básicamente lo mismo que hicimos para el diseño, pero solo con la marca. Para eso yo entro acá a Google y me pongo a buscar marcas de zapatos, que es lo que estamos queriendo vender nosotros. O en tu caso vas a poner lo que estés haciendo vos. Podés buscar de muchas formas, acá no hay ninguna ciencia.
Simplemente logotipos que a nosotros nos parezcan que pueden llegar a servir, solamente de inspiración, porque también después lo vamos a modificar. Pero de no tener nada a empezar así es una buena forma de hacerlo. Acá, bueno, vamos buscando alguna marca que nos convenza. Cierto, voy a cambiar la búsqueda y voy a poner ya ahora «diseño marcas de tiendas».
Bueno, acá esto que encontré lo voy a abrir, y lo que voy a sacar es una captura. No voy a pasar todas, o sea, tenemos que pasar una nomás, la que me gustó, esta del medio. Entonces le saco una captura con Command Shift 4. En Windows, bueno, la sacarás como estás acostumbrado. Y acá le pongo de dónde es la marca, ¿no? O sea, cómo quiero que la almacene. Entonces, bueno, la está analizando, la marca, y con eso va a guardar un archivo .md para poder hacer lo nuestro. Acá me dice, bueno: «Destaca la pincelada roja», blablabla. La va analizando y ya la
guarda. «¿Querés agregar más marcas?» Y nosotros vamos a agregar un par más, también tres o cuatro, no mucho más que eso. La de Levi's la vamos a poner también. Le ponemos que es de Levi's y se la mandamos. Bueno: «Voy a añadir Levi's», bueno, blablabla. Está haciendo el archivo .md, y ahora voy a entrar a Dribbble también para poder buscar otro tipo de inspiración.
Principalmente estos son los lugares donde yo más uso, digamos: el buscador de Google y este. También podés usar Pinterest si querés. Esta me gustó también, le vamos a sacar un screenshot y la vamos a pasar. No se preocupen, que no estamos robando nada. Simplemente estamos formando el criterio de ChatGPT para que sepa bien a qué dirección queremos ir, digamos, que puede ser muy distinta de acuerdo al caso. Entonces, por eso hacemos esto de las referencias, que son simplemente eso, referencias. Y una vez que ya tengo estas tres, voy a
decirle que, bueno, sigamos, avancemos, pues ya la verdad que con tres para mí es suficiente: «Listo, sigamos». Y bueno: «Crearé...», blablabla. Lo mismo que venimos haciendo. Y acá me pregunta cómo se llama mi marca. Yo voy a poner una marca para este ejemplo, que es shoezzz, entre shoes y zzz.
Esa va a ser mi marca. Acá obviamente vos vas a poner la tuya. Y con esa información ya vas a ver cómo tiene que armar las cosas. Lo que va a hacer ahora es, tomando el nombre que yo le pasé más la referencia que le pasé, lo que va a hacer ChatGPT es generar esto como mockups, digamos, como para que yo pueda elegir una.
Acá me muestra cómo va a ser el ejemplo de uso. La tercera, la tercera es la que más me gusta, digamos, en este caso. Y voy a decirle que usemos esta de Mega Absorb.
Obviamente te va a generar una por cada referencia que vos le pasaste. Así que si le pasaste 6, vas a tener 6 y así vas a poder elegir. Y ahora tenés que elegir una también. Tranquilo, que también podemos modificar después. Esto solamente lo que hace es darnos una referencia como para poder tener algo que modificar. O sea, no empezar de cero, digamos. El problema es querer empezar con el diseño ya finalizado, o sea, que de una me salga bien, y estos son varios pasos, digamos. Esa es un poco la idea de esta skill, pero también es como se trabaja realmente a nivel profesional. Y vamos a... nos dice que
ya está aprobado. Entonces ahí yo tengo que poner «Autorizar», que es la que ya empieza a crear las imágenes que necesitamos para todo lo que es el sitio. Mirá esta que me creó acá: está bastante buena.
Como te digo, después se la pueden como cambiar, pero como para empezar está bien. Acá me hace, como ves, una versión también blanco y negro, porque son necesarias también esas versiones para diferentes partes del sitio. Entonces, siempre que haga algo a color, va a tratar de hacer algo que se pueda usar también: la marca como palabra y la marca como imagen.
Como vemos acá, esto nos va a servir para hacer los íconos de la web. Siempre es importante tener un logo así, para cuando lo guarden en favoritos y todo eso. Y acá me muestra cómo se ve en la implementación de modo oscuro y modo claro, cómo va a ser la implementación. También lo revisa, que se vea bien en el celular. Esto va a ser como el perfil de marca, que va a estar bastante bueno para seguir usándolo. Quizás después creás el perfil de marca, un documento para eso exclusivamente, y este documento te va a servir como base. Así que por eso es que se fija que esté bien adaptado. Y ahora ya lo que va a hacer es
limpiar, va a optimizar lo que ya hicimos, lo que ya probamos. Si por ejemplo acá tengo otra observación, como por ejemplo «quiero que la pincelada sea azul en vez de roja», este es el momento para decirle. O sea, antes de decirle que estaba perfecto, como hice yo acá, vos le hacés esas observaciones para que vuelva a rehacer la marca hasta que a vos te convenza. Cuando te convence, le decís que continuemos. Entonces ahora lo que está haciendo es revisar bien esto. Por ahí puede parecer que son muchas revisiones y todo, pero ya vas a ver que cuando veas el resultado final vas a entender por qué lo
hace. En este caso lo hace para siempre verificar que las cosas
se vean correctamente en todos lados. Y una vez que ya tengo la marca, podemos pasar a la parte más emocionante, que es la de los diseños. Justamente, para poder hacer un buen diseño necesitaba tener la marca, por eso te la pide ahora. Y yo acá le digo que sigamos con todos los pasos. Me dice la skill que va a usar, y los diseños que yo le pasé: Dark, Verde, Violeta y Pink. Va a usar la skill huashu-design y prototype para hacer los prototipos.
Ahora lo que vamos a hacer es poder elegir varias versiones, pero tampoco nos pongamos tan finos ahora, porque después vamos a poder modificarlo, digamos, cuando tengamos ya la base. Acá me pregunta qué quiero hacer con las imágenes. Como estamos usando ChatGPT, y ChatGPT puede generar las imágenes, yo lo que le voy a pedir es que usemos fotos de muestra, digamos. O sea, que genere fotos para que nos sirvan de ejemplo. Así yo puedo verlo más parecido a lo que va a ser el resultado final. Entonces por eso pongo que use fotos de muestra. Y ya, una vez que tengo eso, el
siguiente paso es que ya genere la propuesta. Entonces acá yo no le había... no había llegado a hacerle click y había seguido automáticamente. Pero, como ves, yo puedo hacer click y volver a hacer la respuesta para que no invente ChatGPT y se base solamente en lo que yo le estoy pidiendo. Entonces acá va a seguir pensando: «Usaré la foto que», bla bla bla bla. Y la foto...
Ya están guardadas y revisadas. Y acá va generando. Ahora sí, con los archivos de estilo, que antes no los estaba usando. Y acá vemos cómo... esto sí va a demorar un poco, digamos, acá se lo ve bastante rápido. Va a generar un archivo por cada diseño, pero solo del home, para que podamos elegir, digamos. Y después podemos seguir. Y también me va a hacer una página donde se puedan ver y revisar todos, tipo
un índice. Acá ya podemos ver el primer diseño. O sea, estaba basado en este diseño Dark que hicimos. Y acá está descargando imágenes ChatGPT, porque va comprobando. Fijate que ahí está cómo se vería en el celular horizontal. Y va a ir probando todas las resoluciones para que podamos obtener una versión de cada uno, pero que esa versión esté bien estructurada, digamos. Todo esto porque en el wireframe ya lo hicimos así también, y ahí vemos la importancia de hacer los wireframes. Acá ya vemos cómo se vería en el celular el primer diseño. Ya
estamos viendo el segundo diseño. Fijate que, si bien la estructura es la misma, cambian los colores, cambia la tipografía. Esa es la idea. Después, este es el diseño que llamamos Violeta, y lo estamos viendo en todas las resoluciones, porque acá lo va a ir probando, va a ir descargando imágenes. Y este ya es parte del último diseño que pusimos, el Pink. Cambia toda la tipografía, cambia el color de los botones, cambia todo eso, que esa es la información que extrae de los diseños que le vamos pasando. Esa es la magia de la skill, digamos, que cada
proceso, cada momento de la creación del sitio va creando documentos que luego los podemos modificar todo a nuestro gusto, pero que en esos documentos tienen la información específica para ese paso. Y esa es un poco la idea que queremos transmitir con este proyecto: que no es que vos vas a poner un prompt que diga «Haceme la mejor página del mundo» y ya está. Fijate cómo fuimos buscando referencias, fuimos armando eso. Mirá acá el pop-up este, el modal, como le decimos nosotros los programadores. El modal también lo está diseñando. Y
ahora el paso que estamos haciendo es el de crear los diferentes tipos de diseños para poder visualizarlos ya con el wireframe. O sea, en vez de estar visualizando un diseño genérico, estamos viendo cómo se aplica ese diseño a la estructura que nosotros hicimos con el wireframe. Entonces, una vez que nosotros vemos todo eso, podemos elegir ya con conciencia. Y una vez que lo elijamos, lo que vamos a hacer es crear el prototipo con todas las otras páginas que fuimos apuntando en la primera parte, digamos. Esa es la ventaja de poder hacerlo así: al comienzo poder hacer
bien la elección de las páginas para luego tener un prototipo bastante funcional a lo que realmente va a ser el producto final, digamos, y parecido a lo que va a ser el producto final. Porque ahora estamos haciendo la parte visual, no tiene nada que ver con las animaciones, con todas esas cosas que van a venir después, en los pasos finales, cuando creemos ya realmente el proyecto que vamos a subir a la web. Como para darte una idea, si no sabés nada de programación, entonces no importa, pero lo que es el diseño y maquetado de la web, tenemos archivos que se llaman .html, que
son los archivos que estamos viendo acá en pantalla. Esos archivos son archivos donde uno estructura la página, por ejemplo, cuál va a ser el encabezado, en este caso el hero, que es esto que tenemos al comienzo, o sea, la primera parte que vemos al comienzo. En este caso tiene dos columnas, qué tipografía usa, el botón, adónde va el botón, ese tipo de cosas.
Ya lo que son animaciones y ese tipo de movimiento y demás, no le podríamos decir... eso se hace en este caso de otra forma, con otras bibliotecas y librerías de animación. Pero bueno, por el momento ya vemos, tenemos las cuatro formas, los cuatro diseños. Y acá nosotros lo tenemos como...
Hasta el índice quedó bueno, como lo hizo la skill, quedó bien diseñado. Pero vamos a evaluar el diseño. Este del primero me encanta, me parece muy sólido cómo está hecho. Estamos usando skills acá, además de la nuestra, que auditan los diseños, los arman lo más correcto posible. Pero fijate cómo el wireframe, que era blanco y negro, se transformó en esto. En este caso, a mí el diseño que más me parece como oportuno para esto es este, el Violeta. Pero te muestro los cuatro. Este es como quedó el Pink. Las tipografías también son importantes, aunque luego las podemos modificar y cambiar. Entonces, una
vez que yo ya tengo el diseño que me gusta, se lo tengo que decir a ChatGPT. Entonces le voy a poner: «El Violeta es el que me gusta». Con el Violeta. Y ahora ya ChatGPT va a apuntar la decisión y va a empezar a crear las próximas páginas del sitio, y ahora sí hacer un prototipo. ¿Cuál es la diferencia entre prototipo y el resultado final? Básicamente, que el resultado final lo vamos a hacer con React, que es una librería para construir sitios web, que la fabricó Facebook, y es el estándar en lo que es programación, digamos, en lo que
es crear una web. Es el estándar más completo. Bueno, no sé si decir más completo, pero sí, más usado. Y con completo me software también lo hacen. Y donde nosotros vamos a deployar la página web es en Vercel, que también está adaptada para construir con React. Vemos que el prototipo, que en este caso el prototipo va a ser en HTML para que nosotros podamos, antes de crear el proyecto final, poder ajustar todo. Vemos que ya la skill esta del Mariscal en ChatGPT está de diseño un poco más bonitas, como pone la foto ahora, el uso de
tipografía. Esto igual lo vamos a seguir modificando, porque una vez que ya tengamos el prototipo, ahí ya se viene un poco más de magia. Acá seguimos guardando las capturas y ChatGPT sigue como auditando lo que es el diseño multiplataforma, el diseño responsive, y eso también es importante verlo en wireframes. ¿Por qué?
Porque básicamente, por ejemplo, acá en el hero nosotros tenemos dos columnas, ¿cierto? Que es una estructura estándar en lo que son diseño de página. En el hero se llama formato F, porque ves como que la lectura del usuario va a ir como primero el header, después, digamos, el toolbar donde está la marca, después el header, que es el titular, abajo la descripción y el botón de acción, el call to action se llama, que, digamos, un botón que tiene que invocar a la acción principal. Pero claro, vemos que en mobile esas dos columnas se transforman en una y queda por arriba
la de la columna derecha. Queda por arriba; también podría ser al revés, pero es siempre recomendable poner el texto abajo. También vemos cómo ahora se ve el modal este, que quedó con el diseño de este sitio. Es lo bueno de trabajar de esta forma, porque son pasos sólidos. No, no son cosas que nosotros tenemos que estar diciéndole «ah, pero no lo quería así», «ah, pero lo hiciste así». Porque al generar la propuesta, y nosotros al elegir una, lo que estamos haciendo con esta skill es generar un archivo de diseño. ¿Qué significa eso? Que
tiene toda la información de diseño, en donde ChatGPT va a saber cuáles son las características que tiene el diseño del sitio. Entonces todas las páginas las va a construir usando ese archivo de diseño. Acá ya están refinando la última parte. De todas maneras, nosotros vamos a poder corregir cosas, y está creando todas las vistas que necesitamos. Y el prototipo... La idea de generar prototipo antes de generar el proyecto final es justamente el hecho de poder modificar cosas que no
nos gusten o no terminen de agradar con respecto al diseño y a la estructura, porque después, cuando empecemos a agregar animaciones y comportamientos más dinámicos, la idea es que eso ya esté establecido, digamos. O sea, que no estemos cambiando las cosas todo el tiempo, sino que aprovechemos cada paso para hacer modificaciones sobre lo que tiene que ver ese paso, y así podamos seguir. Sin embargo, la idea es hacer un diseño y un sitio que sea funcional al comienzo, que sea la base, y que después nosotros podamos seguir modificándolo. Ya vas a ver cómo acá, ya
habiendo elegido la propuesta que queríamos, ya empieza a generar lo que es el prototipo, pero solo del home. Nosotros acá le tenemos que decir que estamos de acuerdo, y con respecto a eso... o sí, aprobamos, es lo mismo. Y con respecto a eso va a seguir. Acá dice que va a probar la versión 1, y dice lo de versión 1 porque en este paso, justamente cuando terminamos de elegir el diseño, cada modificación que nosotros hagamos va a crear una nueva versión. Eso, para después poder decir: «Bueno, elijo la...»,
para tener una forma de volver atrás. Con esto ya queda completa la etapa 11, y
tiene que continuar creando ya la propuesta para los demás, las demás páginas. Le decimos que sigamos: «Sí, dale», le puse. Entonces ya empieza a registrar la descripción y va a continuar con el prototipo completo, como habíamos dicho. Y acá es donde se pone interesante, porque ahora ya está construyendo el sitio, y fijate que casi no tuvimos que hacer nada, o sea, pasarle la idea y seguir con eso.
Bueno, tuve que cerrar acá ChatGPT, cambiar de usuario, como venía haciendo esto. Lo podés hacer vos también, podés esperar. Yo, para hacer el video, lo puse de esta forma, pero lo interesante es que, viste que muchos sienten que ChatGPT no se acuerda de nada, o al otro día se olvidó todo.
Al implementar Obsidian acá no corremos ese riesgo. O sea, poder abandonar una semana el proyecto y volver y decirle «continuemos», que ya se va a acordar de todo. Y acá sigue como creando lo que son las diferentes páginas, y sigue como auditando lo que son los diseños responsive. Bueno, la...
todas las resoluciones, que cumpla con las normas de diseño. Acá vemos cómo está haciendo la parte de las categorías, cómo puso los filtros, va descargando las imágenes. Todo esto lo va haciendo automático, pero por ahí se queda un poco colgado ahí y manualmente hay que guardarlo. Pero otras veces ChatGPT aprieta solo el...
Acá, por ejemplo, le cambia el nombre, y acá vemos cómo ya se empieza a ver lo que es la página del producto. Nosotros acá no estamos haciendo absolutamente nada. Ya él sabe qué página tiene que construir y cómo. Fijate que tiene la estructura de la página que relevamos al comienzo. Si la estructura hubiese sido otra, el diseño hubiese sido el mismo, pero la estructura hubiese cambiado. Qué interesante eso de trabajar primero la estructura y luego el diseño, luego hacer el prototipo, y una vez que está el prototipo recién empezamos con lo que es la cuestión cosmética, podríamos decir, de animaciones, o hasta de rehacer y
rediseñar el hero, como lo vamos a hacer también más adelante. Acá tenemos ya el checkout también. Fijate cómo me conserva, de la página que relevamos, que el código postal y la ciudad están en dos columnas, también el nombre. Eso es lo importante de la estructura. Como te digo, también la estructura podría haber sido un dibujo con un lápiz en una hoja, sacándole una foto, porque claro, lo importante es esa estructura de la página antes de aplicar el diseño. Y ahí es donde muchas personas también cometen el error de pensar que de una te tiene que salir todo
terminado, de una tiene que estar bien diseñada, de una tiene que ser... Pero básicamente ChatGPT no sabe lo que para vos es un parámetro de buen diseño. Sí sabe, gracias a la skill que le pusimos y a los pasos, cuáles son los parámetros que tiene que tener un buen diseño, pero no qué es lo que estás buscando vos. Entonces, en vez de estar como creando y creando y creando, y que no nos gusta, y pidiendo cambiar todo, fijate cómo de esta forma ordenada y secuencial cada paso que damos es un paso sólido y un paso para continuar, digamos.
Por esta razón de hacerlo con esta visión de primero la idea, después la estructura, después los wireframes, después relevamiento de diseño, relevamiento de marca. Fijate que el color que usa la marca, el mismo que usa en el botón, o sea, eso, al unificarlo, ya el sitio tiene coherencia y ya se siente como un sitio web bien hecho. No son cosas aisladas: hay un manual de normas, hay un manual de diseño de qué tipografía tiene que llevar, o fuente, el título,
cómo tiene que ser la descripción y la bajada del texto. Todo eso se guarda en ese archivo de diseño, que por supuesto se puede modificar, y ya vas a ver que lo vamos a hacer, pero ahora estamos más en la cuestión general, digamos, en la cuestión de primero tener algo lo cual modificar después, digamos.
Esta es una forma de trabajar que yo siempre te recomiendo, o te voy a recomendar, o que yo siempre recomiendo a las personas que están usando IA: la de armar un plan al principio. Con la misma IA armás el plan, pero le decís cuáles van a ser los pasos que vamos a hacer. Claro, gracias a que esta skill que creamos ya tiene el...
La intención de hacer esta skill es ahorrarte todos esos pasos, pero si estás haciendo otro tipo de cosas, podés tomar esto de ejemplo para saber cómo tenés que trabajar. Ya tenemos el prototipo listo. Este es el home. Bueno, el home quedó idéntico a lo que ya habíamos aprobado. Lo interesante sí viene acá, que vemos las categorías, tenemos los filtros, cómo se van a ver las imágenes. Después tenemos la página del producto, y después tenemos el checkout, cómo va a ser el checkout. Hay cosas... Todo lo que tiene que ver con el contenido no te...
modificaciones con respecto al diseño, ahora es un buen momento para decirle, antes de autorizarlo. Pero si son cosas en cuanto a que el sitio está muy estático, que todavía no hay animaciones, todo eso, no es el momento para hacerlo. Respetemos cada momento. Todavía no hemos pasado a un proyecto de React, hemos pasado al proceso de prototipo, que ahora, dándole el OK, vamos a empezar ya a generar lo que es la versión final del prototipo y a comenzar ya con el proyecto. Pero fijate cómo, de una idea y de una intención de «quiero hacer una página de zapatillas», ya
llegamos a este momento donde realmente se ve bastante aceptable, bastante bien, y ahora le vamos a poner un poco de magia. Fijate acá ChatGPT cómo nos dice que aprobemos esto y que es el momento de cambiar cosas. Nosotros acá estamos bastante conformes con esto, así que vamos a seguir.
Y acá lo que va a hacer es registrar que ya está el prototipo listo, y nos pide la URL de un repositorio de GitHub, que acá es donde va a crear ya el proyecto final. Para eso nos vamos a la aplicación de GitHub, nuevo repositorio, en la misma carpeta de GitHub. Yo siempre acostumbro a llamarlo por la tecnología antes, que vamos a usar, y en este caso la tecnología se llama Next.js, guion, y acá le ponemos el nombre del sitio. Te dije que íbamos a usar React, y ponemos Next.js porque esto es un framework que trabaja con React, pero nos permite hacer sitios web ya mucho más sólidos
y sofisticados, digamos. Esto ya es un framework; React es solamente una librería. Y nosotros, al ya tener esa carpeta, le pasamos la carpeta. No es necesaria la URL de GitHub; eso simplemente si vos querés, capaz que estás trabajando con otra cosa. Pero lo que tenés que hacer es crear el repositorio y pasarle la carpeta vacía, y en esa carpeta vacía es donde en este paso ya va a empezar a montar lo que necesitamos para subirla a la web, con varias salvedades, varias buenas prácticas que vamos a usar, que la skill nuestra les recomienda. También va a crear
un Obsidian dentro, y lo maravilloso es que desde ese mismo Obsidian nosotros vamos a poder modificar el texto y las cosas de la página. Eso es algo que solo lo hace esta skill nuestra, y lo hicimos con la intención de que los usuarios no tengan que abrir el código y no tengan que saber nada de lo que es usar código de la web y eso, sino que solamente con un editor de texto ya puedan cambiar todo.
Bueno, me había quedado sin... así que lo que dice es que ya hay espacio libre, y seguimos. Muchas veces... bueno, yo acá estaba grabando el video mientras hacía las cosas; por eso también me iba ocupando. Pero bueno, siempre tenemos que tener un poco de espacio para poder hacer este tipo de cosas, porque también los temporales de ChatGPT y todo eso van consumiendo espacio. Acá vemos que ya se creó el proyecto, y lo vemos exactamente igual que el prototipo, pero ya son páginas de React, ya no son HTML, y eso es lo que
nos va a dar la base para poder empezar a poner animaciones, a cambiar cosas, también a generar componentes. Que, por ejemplo, en un HTML, si nosotros tenemos la misma toolbar o barra, mismo, en los HTML cada vez la va a tener que dibujar. En cambio, en lo que son ya React, como usa componentes, lo que hace es reutilizar ese componente para las diferentes páginas, y eso nos va a permitir como editar una vez y que se cambie en todos lados, que el proyecto tenga una arquitectura mucho más saludable.
Acá seguimos como verificando que la aplicación compile bien y que se vea bien en todos los dispositivos y resoluciones, porque esa es una de las cosas que quizás, por ejemplo, estás haciendo una página sin esta metodología, o una web, bueno, quizás si vos no le aclarás a ChatGPT, o a la inteligencia artificial que estés usando, que tiene que ser responsive, no lo hace. Pero al mismo tiempo hay reglas para eso, y en esa skill que estamos usando nosotros le hemos integrado algunas
reglas y algunas otras skills también que nos ayudan con eso. Entonces acá está corriendo lo que es ya en un... básicamente, que corre la aplicación web como si estuviera en la web, pero está en nuestra computadora. Básicamente es eso. Acá estamos ya llegando a la finalización de lo que es la creación del prototipo... bah, no del prototipo: con el prototipo, poder hacer la versión del proyecto, la versión final. Entonces también crea la ruta de la URL. También
crea una página como 404, que es cuando no se encuentra en ningún otro sitio, o sea, ninguna otra página en el sitio. Una página de error, digamos. Y básicamente, con ya nuestro sitio, una base sólida para poder corregir y agregar más productos, para poder trabajar ya directamente. Esa es la razón también por la que creamos otro proyecto, porque una cosa es la creación del prototipo, que finaliza cuando están las páginas base, digamos, y otra cosa es
cuando tenemos el proyecto que está hecho en otra tecnología, digamos. Si viene HTML... todo está hecho en React, pero con un framework de Next.js, y por eso lo separamos, para ya después trabajar de una forma mucho más limpia y tener un Obsidian también dentro del proyecto, pero que corresponda al resultado ya que se generó para hacer el proyecto de Next.js, y no que contenga toda la información previa. Que si nosotros quisiéramos consultar la información previa, también podemos. Los chats de ChatGPT van a estar vinculados entre los proyectos. Fijate que acá estamos trabajando,
seguimos en el proyecto que creamos al comienzo, pero está modificando ya la otra carpeta. Eso también es gracias a que los Obsidian están conectados entre sí y cada uno sabe de la existencia del otro. Una vez que ya tengamos las vistas de mobile, ya tengamos todas las vistas como auditadas, ya vamos a poder empezar a poner las animaciones y un poco de magia para que el sitio no quede tan estático. Eso también es algo bastante importante para un sitio profesional: que tenga vida, no que sea algo superestático. Y el que tenga vida tiene que ver con el concepto también del
sitio que estamos creando. No poner animaciones y cosas porque sí, sino que tengan que ver con lo que se está armando. Acá, la página de los productos. Estamos chequeando todas las páginas. Fijate que yo no estoy haciendo nada ya en este momento. Todo lo está haciendo ChatGPT solo, el que está modificando las páginas, creándolas, auditándolas. Por eso también es que consume a veces tantos tokens, por todos los pasos que va haciendo para cerciorarse de que quede bien.
Pero es necesario, porque al no auditar, al no chequear que todo está funcionando bien en todas las resoluciones, es algo que después nos puede jugar muy en contra cuando ya tengamos un resultado bastante cerca del final. Porque en esa construcción, como ahora está construyendo de cero, todo es mucho más fácil para ChatGPT darse cuenta y hacerlo bien de una sola vez.
Pero claro, todo eso hay que pedírselo y hay que usar skills que estén diseñadas para eso. Bueno, y cuando termina ya de auditar todas las páginas, vamos a nosotros poder chequear que el diseño esté bien. Yo le pido que continuemos porque lo vi bastante bien, lo vi conforme a lo que estaba hecho el prototipo. Básicamente,
ahora es llevar el prototipo a un proyecto de Next.js, y en esto es que nos pide esa aprobación. Y una vez que nosotros ya tenemos auditado todo, ahora sí se viene lo que es agregarle un poco de magia. En esta parte del proceso, cuando digo magia me refiero a esto de las animaciones, estas cosas. Fijate que dice que va a usar la skill huashu-design, que es para diseñar; es un poco una réplica de lo que sería Claude Design.
Impeccable y GPT Taste sirven para auditar los diseños, para dar información a lo que ChatGPT considera que es algo bien hecho. Y después tenemos la skill UI UX Pro Max y Apple Design, que ChatGPT, de qué características tiene que tener algo bien diseñado.
Pero si bien esa skill vos ya la tenés instalada, porque es lo que hicimos al comienzo, fijate que vos no tuviste que hacer nada, ni yo, ni decirle a ChatGPT, porque ya la skill del Mariscal lo hace sola, digamos. Eso también ahorra muchos dolores de cabeza, porque por...
Y vos ves que quizás otras personas te recomiendan: usá esta, usá esta, usá esta otra. Uno termina ya viendo tantas skills y tantas cosas que hasta uno se puede olvidar de dónde hay que usarlas. Básicamente, lo que quisimos ahorrar, ese tiempo, es no tener que pensar en esas cosas, digamos.
Básicamente, al hacer el plan y al poder hacerlo automático con skills, nos estamos ahorrando, en cada paso, tenernos que acordar qué hay que hacer. Y ya cuando encuentra un poco ya lo que es el resultado final... Lo que vamos a hacer ahora, cuando me decía lo de agregar magia y todo eso, lo vamos a hacer solo en el home al principio, para poder corregir cosas antes de hacer todo esto en el sitio.
En vez de eso, lo hacemos en un lugar; cuando vemos que funciona bien, lo trasladamos. Y bueno, ahí me dice que la página nueva de inicio ya está implementada, que conserva el contenido, la ruta, bla, bla, y estamos ya implementando lo que es el hero, que quizás sufra cambios también, porque el hero es la parte más importante de lo que es la portada, o sea, la página de bienvenida nuestra. Es lo que más tiene que llamar la atención.
Fijate cómo ahora se ha rediseñado para poner el título arriba, poner la imagen a la derecha. Sigue estando, pero a la izquierda hay otra información. Ahora pusimos el título arriba, y eso, fijate que yo no le he pedido nada, pero ya con...
modificando. Conservemos nosotros lo que es la idea de lo que queremos hacer, y en función de eso vayamos evaluando. Fijate cómo acá ChatGPT es el que está haciendo los clics y está navegando. Se puede ver ahí el cursor, que se ve como con una silueta, como con una sombra y una silueta en blanco.
Y ahora sí ya está como puliendo. Lo importante es empezar con un esqueleto, una estructura, después darle forma, ponerle diseño, hacer la marca, y luego ir puliendo, ir puliendo, ir puliendo, hasta que te...
una página muy profesional, pero todavía podemos seguir mejorando, y eso lo vamos a hacer ahora. También el pop-up lo vamos a modificar, y eso. Todavía hay tela para cortar, y lo vamos a seguir puliendo, pero todo esto dentro de la misma skill que estamos usando. Fijate que yo no escribí ningún prompt, no escribí nada. Simplemente donde más escribí fue al comienzo, que tampoco fue mucho, diciéndole que quiero hacer un e-commerce para vender zapatillas, y eso ya fue suficiente para que ChatGPT construya el Obsidian y construya los pasos. Y luego, con la referencia, bueno, ya
le dimos la idea de la estructura que para nosotros es la que tenemos que usar en el sitio, y ya en función de eso la skill hace todo. Nosotros lo único que tenemos que hacer es aprobar y pedir algunos cambios, si es que corresponden. Ya los ajustes van quedando, y compila.
¿Qué es compilar? Compilar es cuando se puede exportar ya a una versión, que es la que vamos a subir. Generar una carpeta que se llama build. Esa carpeta tiene el sitio ya exportado. Muchas veces hay errores en el código que nosotros, cuando lo estamos corriendo en local, no somos capaces de verlos, y por otro lado tampoco le importa mucho al framework, porque podemos seguir trabajando aunque estén esos errores. Pero aparecen. Entonces lo que va haciendo ChatGPT es fijarse de que compile sin
errores. Eso es una gran cosa que hicimos en esta skill, porque que nosotros vayamos verificando paso por paso que compila es lo que nos va a dar la seguridad de que ese paso realmente fue, como, bien ejecutado y finalizado.
Entonces dice: compila ya sin errores, se ve en el móvil, en la tableta y en el escritorio. Y lo que vamos a hacer ahora es, si ya compila, bueno, vamos a ver si ya la podemos desplegar antes de hacer las últimas modificaciones.
Y ya, como pudo compilar, bueno, ahora en esta parte lo que va a hacer la skill con ChatGPT es verificar todos los diseños de todas las partes y todas las páginas. Entre eso, bueno, el home, cómo se ve en mobile.
Pero ya basta con el home. El movimiento que vamos a agregar al principio, como decía ayer, es un movimiento reducido, y luego vamos a ponerle más movimiento también, pero paso a paso, ¿no? Eso es importante saber, que vamos de a poco.
El resultado final tiene que quedar increíble, pero a eso se llega. No es que vamos de cero a cien, sino que estos son los pasos. Y entonces, bueno, acá ChatGPT se va a poner a evaluar las otras páginas o la misma página, en este caso del home, pero en diferentes partes, para asegurarse de que se ve bien y que todo se ve correctamente dentro de todas las resoluciones. Acá, por ejemplo, ya lo estamos viendo en una resolución más de tablet. Y bueno, eso lo...
página. Mirá cómo nos quedó el modal. Ya en sí el modal está bastante bien. Al modal también le podemos agregar animaciones. Acá nos quedó la parte de las categorías. Y bueno, ya acá nos dice que la portada está lista para revisar. La portada sería el home.
Y podemos revisarla nosotros en... Acá, fijate cómo ya hay una serie de animaciones cuando paso el mouse. Pero todavía podemos hacer mejores cosas, así que yo le pongo acá que está perfecta y que sigamos, porque en el próximo paso ya es donde vamos a empezar a...
...la magia de
ir armando paso a paso. Y acá me pregunta si ya el nuevo estilo lo quiero aplicar para todo el sitio. Sí, le digo. Y esto lo que va a hacer ya es unificar todas las nuevas cosas y el rediseño que le pusimos al home. Ya esto quedó autorizado, así que...
Bueno, el cierre de la portada está publicado y los 56 archivos coinciden con la versión aprobada, y acá va a empezar a aplicar todo. Cuando dice lo de los archivos, se refiere también a los componentes con los que estamos armando. Por eso es que parece que son demasiados, pero en realidad esto se arma como si fueran piezas de Lego que se van poniendo en todas las otras páginas. Y ya llegamos a que la adaptación ya está aplicada, el catálogo, bla, bla, bla, bla, todo lo que ya sabemos.
Y ahora va a comprobar la última cosa, y ya luego lo vamos a poder subir como para empezar a testearlo ya en lo que va a ser el lugar donde va a estar alojada. También el alojamiento va a ser completamente gratuito, podría alojar un montón de proyectos ahí. Y también podés sumarle otras cosas, como estadísticas o cosas así, pero ya lo vamos a ver bien después.
Acá ya terminamos de crear las otras páginas, y ya con eso queda cerrada la etapa 16. Ya estamos muy cerca del final, así que ahora solo queda comprobar cómo quedó el sitio. Y para eso nos pide que aprobemos. Lo apruebo, sigo.
Y acá estamos viendo cómo quedó la página de las categorías. Así que bueno, ya con esto vamos a poder empezar a publicar lo que es el sitio. Igual le vamos a agregar más cosas, pero también está bueno, cuando terminemos la primera parte (ya la misma skill te lo va a ir guiando), probar la publicación. Porque cuantas más cosas le agreguemos, después más difícil se va haciendo volver atrás en algunas cosas.
Entonces está bueno como: bueno, ya terminamos esta parte, probemos. Ya terminamos esta, probemos. Esa es una forma en que los programadores vamos testeando que cada paso va bien, ¿no? Y eso es un poco no esperar hasta tener el resultado final para hacer esas pruebas, sino ir probando cada vez que podamos, básicamente.
Y para poder desplegarlo, se va a hacer automáticamente, para eso teníamos el GitHub. Y lo que hace este skill también es desplegarnos a GitHub. Pero sí vamos a tener que aprobarlo, ya lo vamos a ver ahora.
Lo bueno de la skill es que también nos proporciona el despliegue. Que eso es algo importante también, porque no muchas personas saben cómo hacer una vez que ya tienen la página hecha con su inteligencia artificial favorita.
No saben cómo llevarla a que esté funcionando para todo el mundo. Y de eso también se encarga este skill. Como vas a ver, este skill es bastante poderosa, porque desde el comienzo nos instala la skill necesaria, te pregunta la idea, arma el plan, arma la bóveda.
Y es desde la idea hasta el despliegue, básicamente, como dice el título. Y acá, una vez que ya terminó con lo que es la última comprobación antes de subir... Después, cuando vos hagas modificaciones, no hay que comprobar tanto, pero sí es importante tener una base sólida.
Por eso es que estamos haciendo tantas comprobaciones ahora. Y fijate que acá en GitHub, una vez que nosotros entramos con nuestra cuenta, fijate que arriba dice el nombre de la rama y después decía «Comparar». Ese es el último paso, digamos.
Pero también se está encargando acá nuestra skill. Esto es una maravilla. Porque fijate que siempre, cuando se hace un pull request, como se llama en GitHub, que es una solicitud de unirlo a lo que es la rama principal, que es donde va a estar nuestro código, que va a estar en internet, en la página funcionando, hay que agregar descripciones y todo eso. Pero fijate que ya lo hace automáticamente.
O sea, básicamente no hay que saber ni de GitHub ni nada para poder usar esto. Ya se encarga de todo la skill. Y fijate que ahora nosotros sí tenemos que entrar a GitHub. Ahí te muestro que entramos a nuestro GitHub.
Y ahí entrás a repositorios. Entrá al que dice Next.js. Te vas a pull requests. Y ya tenés abierto el pull request que hizo ChatGPT. Y acá vas a poner «Merge» y «Confirm merge», que es mergearlo, que significa unirlo a lo que es la rama main.
Y ahora vamos a entrar a Vercel. Acá lo estoy poniendo en Google, así lo vas a encontrar. Y en Vercel vamos a crearnos una cuenta, si es que no tenés. Esta cuenta la vamos a combinar con nuestro GitHub.
Yo acá estoy intentando hacer un login. No tenía una cuenta. Así que voy a poner crear una con Google. Una vez que ya tenemos la cuenta, me pregunta cuál es el nombre del equipo y si estoy trabajando. Poné que estás trabajando en un proyecto personal para tener el plan Hobby, que es gratuito. Voy a poner el nombre del equipo: Mariscal.
Y voy a poner «Continuar». Y acá voy a poner GitHub en «Importar repositorio». Y acá me va a vincular con el GitHub en el que estuvimos trabajando. Y acá tengo que instalar este plugin de Vercel.
Y voy a poner todos los repositorios, porque la cuenta es nueva. Y tengo que verificar con un código, que lo voy a poner. Una vez que ingreso el código, ya en Vercel me van a aparecer los proyectos, y el que voy a importar es este: Next.js.
Y ya detecta que es Next.js. Ya detecta todo. Y voy a poner «Deploy». Y ya con esto vamos a tener la web para que todo el mundo la pueda ver.
Pero igual le vamos a hacer unas modificaciones para que veas qué pasa, cómo vas a hacer las modificaciones una vez que ya esté en la web. Esto puede demorar un poco. No va a demorar tampoco tanto, porque el proyecto es nuevo y es chico.
Pero cuando tu proyecto empieza a crecer, los despliegues van a ir demorando cada vez más. Y ya terminó. Y acá vamos a poner «Continue to the Project».
Y acá tengo la dirección donde está desplegado, que es esta de Vercel, acá. Como podemos ver ahí, la actualizo. Y ya tengo la página disponible para todo el mundo. Fijate cómo hemos empezado con una idea y estamos acá con el proyecto subido a la web, para que cualquiera lo pueda leer. Ya público.
Fijate. Acordate cómo era el wireframe. Y mirá cómo está exactamente acá. ¿Viste? Para eso era el wireframe. Bueno, me creías, ¿no? Así que el wireframe es lo mejor para empezar siempre. Vemos que acá tengo la página del producto.
Mirá qué linda me quedó. Mirá cómo me aparece el modal. Y mirá cómo terminó haciendo ya el checkout. Los colores y todo eso. Fijate que hay un equilibrio en lo que es todo el sitio, porque usa el mismo archivo de diseño.
Lo que ya te fui explicando, digamos. Pero ahora lo podés ver en acción. Hay cosas que no están funcionando todavía, como estos filtros. Pero eso es porque habíamos hecho solamente el diseño. ¿Te acordás? Y ahora vamos a empezar a pedirle algunos cambios.
Pero ahora le voy a decir como que ya mergeé a main y desplegué. Entonces con esto va a comprobar el despliegue. Y es importante decirle eso para que chequee que todo esté bien.
Y que siga, le pongo. Bueno, voy a comprobar, bla, bla, bla, bla, hasta que termine la comprobación. Acá me va a pedir cuál es la URL que nos dio Vercel, la versión final.
Entonces voy y copio esta que tengo acá, que está en dominios, digamos. Después yo puedo poner un dominio personalizado. Pero este es el que nos da provisoriamente para que podamos evaluar todo antes de eso. Y ya con esa información puede verificar y analizar bien.
Fijate cómo va viendo también el GitHub atrás. Esto es lo bueno, que maneja todo, digamos. Pero con prudencia y con mucha reglamentación que le fuimos agregando. Ya el PR está en main. Ya sabe todo.
Acá abre la app para chequear qué tal se subió. Ahora la está auditando. Y una vez que ya termina la revisión, vamos al siguiente paso.
Entonces el siguiente paso va a ser hacer modificaciones. Fijate, mirá: ahora yo voy a entrar a Obsidian. Y en Obsidian voy a abrir... Mirá cómo quedaron todas las notas que hicimos. Mirá cómo se armó. Todo está vinculado.
Eso es lo bueno de Obsidian. Lo que voy a hacer yo ahora es abrir. Acá, «Open Vault». Y pongo «Open». Y voy a abrir la de Next.js. No la del primer proyecto, sino la del segundo.
Y fijate acá que tenemos Content y Data. En Data va a estar todo lo que necesita la web. Y en Content va a estar para que nosotros lo podamos cambiar desde acá. Mirá. Esto nos hace el skill, tan hermoso.
Decime si no es lo más hermoso que viste en tu vida. Por ejemplo, acá tenemos el título: «Find your next pair». Voy a poner, para modificar, «Holis y una cajita feliz», para que probemos y que revises bien que todo está funcionando.
Guardo, y acá le digo... Esto sí hay que decírselo: corré el proyecto en local y ejecutá el script de los textos de Obsidian.
De Obsidian a la web. Y acá lo que hace es pasar los textos de Obsidian al formato que la web va a entender. Pero para eso es: la comodidad de poder después editarlo desde un bloque de texto. O sea, no tenés que saber nada de cómo funciona una web, de dónde buscar los archivos. Incluso hasta para crear nuevos productos: solo hay que crear un nuevo archivo de producto con la estructura que ya tenemos. Y listo.
Y acá... Bueno, ya mirá cómo... Tomá, ¿no? ¿No confiabas? Fijate cómo lo cambiamos en Obsidian y se cambió ahí.
Y acá, lo que te decía: tenemos un archivo de ejemplo que, si cambiamos este o creamos otro, se van a crear nuevos productos. Entonces desde acá podés editar el contenido de tu sitio web y no tocar nada de código.
Acá le estoy diciendo como que despliegue los cambios en una rama nueva y haga un merge request. Básicamente esto es lenguaje de GitHub. Una rama es una copia exacta del código que está actualmente, pero con los cambios. Entonces, ¿qué pasa?
En vez de nosotros mandar los cambios a la rama principal, que es la main, creamos una rama. Mandamos los nuevos cambios, en este caso los textos. Y después tenemos que autorizarlo en GitHub. Esto lo hacemos a mano para tener un poco de control, si es que hace falta.
Pero básicamente, como ya lo audita todo la skill, podemos con seguridad hacer el merge. Bueno, y ahora va a llegar la forma...
Te voy a mostrar la forma, y va a llegar el momento de agregar magia. Vuelvo a abrir el proyecto de este nuevo website en el que estuvimos trabajando todo el video. Y pongo, en el proyecto de Next.js... Y pongo: en el proyecto de Next.js, instalá la dependencia Framer Motion y, usando la skill GPT Taste... Bueno, y yo voy a abrir la herramienta, llená de animaciones el home, y quiero que los elementos aparezcan recién
cuando el usuario hace scroll. Entonces esto yo te lo estoy mostrando así porque así le vas a pedir todas las modificaciones que vos necesites hacer en tu sitio. Fijate que el skill ya no está, ya terminó su trabajo la skill, ya no estamos dentro del skill, pero igual sigue todo ese conocimiento en la carpeta. Entonces lo que le estoy pidiendo es que aparezcan las cosas cuando se hace scroll, y quiero que cuando el usuario pase el mouse por un elemento se anime también. Entonces acá fijate que está diciendo: bueno, voy a chequear todo lo que ya veníamos viendo siempre. Y lo vamos a usar para, desde
acá, empezar ya a pedir los cambios que queremos. Y una vez que termina ya de hacer todo eso, bueno, lo va explicando, te va mostrando cómo aplica todo. Fijate que no tuvimos que instalar nada de GPT Taste y eso, porque ya se instaló al comienzo, y ya estaba instalado Framer Motion, pero yo por las dudas le digo, porque más vale prevenir que curar. Y fijate cómo ahora, cuando actualizamos, mirá cómo ahora ya las cosas van cobrando vida, ¿no? Paso el mouse y tengo ya otras animaciones, fijate ahí. Entonces ya va cada vez poniéndose
más interesante, y así vos podés hacer con cualquier cosa. Pero ahora te voy a mostrar cómo, por ejemplo, yo le saco una captura acá y le voy a pedir que cambiemos el color del hero. Esto para que veas cómo yo ahora empiezo a modificar. Ya la skill terminó su trabajo; ya esto que estoy haciendo ahora es un proceso más fino y más de lo que yo necesito en mi proyecto en particular. Le digo que así no me gusta, el fondo está muy básico, quiero un degradado de un color más oscuro, y que va a ser un color oscuro el color que está ahora, y que use la skill. Para usar la skill aprieto la barra, le digo
Huashu Design y UI UX Pro Max, y vamos a usar la skill de Apple, que hace una revisión bastante buena, para que la tenga en cuenta después ChatGPT. Lo estoy haciendo de esta forma, mostrándote, para que vos veas cómo tenés que hacer los cambios después, ya al haber desplegado y al estar en Vercel. Ya el trabajo del skill terminó; esto es un bonus track, digamos, donde yo te estoy mostrando cómo agregarle los cambios que necesites a cualquier parte del sitio. Le digo que quiero que sea mucho más dinámico, impactante, y acá le digo que el toolbar quiero que se quede sticky. Eso
significa que se quede pegado arriba y sea transparente con desenfocado, que el tamaño está muy grande, pero que está bien el tamaño mientras esté en la primera, o sea, mientras el usuario no haya hecho scroll, pero que cuando haga scroll quiero que sea chico. Bueno, acaba de empezar a recibir esta instrucción, y ahí es donde empieza la magia también de lo que es la edición y cómo vamos a estar modificando las cosas ya en el proyecto. Vos fijate que ya tenemos un proyecto desplegado, todo, cualquiera lo puede ver. Y entonces, cuando termina de hacer los cambios, actualizamos y ¡tomá! Qué bien que
quedó, ¿no? Y fijate el toolbar cómo queda pegado y se desenfoca, pero vuelve arriba y queda bien. Mirá eso: esos detalles son los que marcan la diferencia. Y ya te enseñé cómo lo tenés que pedir, ¿no? Fijate que ahora, en cualquier parte del sitio que vos quieras hacer cambios, le sacás un screenshot y le decís que use estas skills que usamos, y lo va a hacer ahí. Pero bueno, fijate la diferencia de cómo empezó el prototipo y cómo
terminó. Y digo: genial, ahora despleguemos todo para que esté en Vercel. Y ya con eso vos le decís eso y ya empiezan los despliegues, hasta que queda la web disponible ya en Vercel. Vercel es donde lo estamos alojando. Y bueno, eso de los despliegues nos termina llevando también a GitHub, porque ahí, fijate, acordate que ahí es donde vamos a desplegar las cosas. Pero mirá que acá podés también ver previsualizaciones en Vercel. Eso es lo bueno de haberlo conectado, que antes de que vos hagas el merge... Cuando hago el merge, ya va a quedar público para todos automáticamente. Fijate, ahora estoy
entrando a Vercel, y fijate que ahora voy a poner acá en Deployments, y dice «Building», y ahí tengo los diferentes que hice. Fijate cómo aparece el loguito que hicimos, ahí al lado, en el favicon. Eso es porque cuando creamos la marca, creó también los archivos para que uno, cuando lo guarde en favoritos, se vea bien y todo. Y acá voy, y fijate que ya tengo los cambios con las animaciones, con los efectos, con todo. Así que mi trabajo
aquí ha terminado. Fijate que ahora con esto vos podés hacer cualquier sitio, cualquier sitio, cualquier sitio que quieras. Empezás con la estructura, te dejás guiar por la skill, empezás pasándole las referencias, después hacemos los wireframes, después hacemos el diseño de la marca, después elegimos entre varios diseños, vamos eligiendo uno, y así hasta que podamos nosotros llegar a este resultado, que, bueno, el home es el único al que le hice modificaciones con las animaciones, pero vos se las podés hacer en todos lados, digamos. Esto básicamente era para mostrarte
cómo funciona el skill y para después darte elementos para que vos puedas pulir las cosas que veas y modificarlas, y quede ya con un diseño impactante como el que hemos logrado acá. Por supuesto que lo podemos mejorar muchísimo más, agregarle otras cosas, pero para la finalidad de este curso, este resultado es bastante aceptable y nosotros quedamos bastante conformes. Y bueno, ya con eso terminamos este curso. Espero que te haya gustado, nos vemos la próxima. ¡Chau!