Después: editar los textos desde Obsidian y pedir cambios con una captura

La skill terminó su trabajo. El sitio está publicado. A partir de acá, lo que hagas es más fino y más tuyo: los cambios que necesite tu proyecto en particular. Te muestro cómo se piden, con los tres que hice yo en el video.

Cambiar un texto sin abrir el código

Abrí Obsidian y, con «abrir bóveda», abrí la carpeta del proyecto de Next.js (no la del primer proyecto, la del segundo). Adentro vas a encontrar dos carpetas que importan: content y data.

En data está todo lo que la web necesita para funcionar. No la toques. En content están los textos de la web, en archivos de texto comunes, para que los puedas cambiar desde ahí. Esto lo hace solamente nuestra skill, y lo hicimos con la intención de que no tengas que abrir el código ni saber nada de cómo funciona una web, dónde buscar los archivos, nada. Un editor de texto y listo.

Por ejemplo, el título del home decía «Find your next pair». Lo cambié por «Hola, soy Martín» con una carita feliz, para probar. Guardé. Y en ChatGPT, en el proyecto de Next.js, escribí:

Corré el proyecto en local y ejecutá el script que pasa los textos de Obsidian a la web.

Esto sí hay que decírselo. El script toma los textos de content y los convierte al formato que la web entiende. Un segundo después, actualicé el navegador y ahí estaba el título nuevo.

Y no es sólo para textos. En content hay un archivo de producto de ejemplo. Si lo cambiás, cambia ese producto; si creás otro archivo con la misma estructura, aparece un producto nuevo. Desde ahí podés editar el contenido de tu sitio entero sin tocar nada de código.

Publicar el cambio

Para que el cambio llegue a internet, hay que pasar por GitHub otra vez. Le dije a ChatGPT:

Desplegá los cambios en una rama nueva y hacé un pull request.

Lo que ya sabés: una rama es una copia exacta del código actual, con los cambios. En vez de mandar los textos a main directamente, los manda a una rama, y nosotros los autorizamos en GitHub con el merge. Lo hacemos a mano por control, pero como la skill audita todo, se puede mergear con seguridad. Y Vercel publica.

Pedir animaciones

Ahora sí, la magia que te prometí en el capítulo anterior. Volví al primer proyecto, el de New Website, el que tiene toda la historia, y escribí:

En el proyecto de Next.js, instalá la dependencia Framer Motion y, usando la skill GPT Taste, llená de animaciones el home. Quiero que los elementos aparezcan recién cuando el usuario hace scroll, y que cuando pase el mouse por un elemento, se anime también.

Fijate en tres cosas de ese mensaje. Primero, le digo en qué proyecto. Segundo, le digo qué librería usar (Framer Motion es una librería de animaciones para React; ya estaba instalada, pero más vale prevenir que curar). Tercero, le digo qué skill usar: GPT Taste, que ya está instalada desde el paso 0, así que no hay que instalar nada.

Te lo muestro así porque así vas a pedir todas las modificaciones de tu sitio. Ya no estamos dentro de la skill; terminó su trabajo. Pero todo ese conocimiento sigue en la carpeta, y ChatGPT lo consulta antes de tocar nada.

Cuando terminó, actualicé. Las cosas cobran vida: aparecen al hacer scroll, se animan al pasar el mouse. Cada vez más interesante.

Pedir cambios con una captura

El último truco es el que más vas a usar. Le saqué una captura al hero, se la pasé a ChatGPT, y le escribí:

Así no me gusta. El fondo está muy básico: quiero un degradado de un color más oscuro al color que tiene ahora. Quiero que sea mucho más dinámico e impactante. Y la barra de arriba quiero que quede sticky (pegada arriba al hacer scroll), transparente con desenfoque; el tamaño está bien mientras el usuario no haya hecho scroll, pero cuando scrollea, que se achique. Usá las skills Huashu, UI UX Pro Max y Apple Design.

Para nombrar las skills en el mensaje, escribís la barra y las elegís de la lista. Apple Design en particular hace una revisión muy buena del diseño que después ChatGPT tiene en cuenta.

Esperé, actualicé, y mirá: el fondo con el degradado, la barra que se queda pegada y se desenfoca, que se achica al scrollear y vuelve a crecer arriba. Esos detalles son los que marcan la diferencia. Y ya te enseñé cómo se piden: una captura, lo que no te gusta, lo que querés, y qué skill usar.

Genial. Ahora despleguemos todo para que esté en Vercel.

Rama nueva, pull request, merge, y Vercel publica. Si entrás a Vercel y vas a Deployments vas a ver los despliegues que se hicieron, con el loguito de tu marca al lado (acordate que cuando creamos la marca, también se crearon los archivos para que se vea bien en favoritos). El último tiene las animaciones, los efectos, todo.

Lo que viene

Con esto podés hacer cualquier sitio. Empezás con la estructura, te dejás guiar por la skill, le pasás las referencias, hacés los wireframes, la marca, elegís entre varios diseños, y llegás a un resultado como este. Y después lo pulís con capturas y pedidos concretos, en el home o en cualquier página.

Por supuesto que se puede mejorar muchísimo más. Pero para lo que es la finalidad de esta guía, este resultado está muy bien y nosotros quedamos conformes.

En las próximas guías y las próximas skills vamos a ampliar esto: se viene usar login, base de datos, todo. Con la misma lógica, la misma mecánica, y lo mismo de siempre: que sea fácil y que lo puedas hacer rapidísimo.

Nos vemos en la próxima.