Desarrollo Frontend Potenciado por AI: Construyendo Mejores UIs Más Rápido

¿Qué tal, todos? Hablemos sobre cómo construir mejores UIs más rápido con IA. Estos dos primeros son míos. Soy cofundador y CEO de una empresa llamada Builder.io. También he creado algunos proyectos de código abierto geniales. Así que quiero dar un paso atrás por un segundo. La parte loca de nuestra ola actual de IA es que es fácil olvidar que los LLMs son literalmente solo modelos de texto predictivo. Les das un fragmento de texto y predicen qué texto viene a continuación. Como eso es todo. Pero, por supuesto, detrás de ellos hay una red neuronal muy, muy grande modelada libremente según cómo funciona nuestro cerebro. Lo que significa que a veces son sorprendentemente inteligentes. Y la pregunta siempre es, ¿cómo podemos hacer el mejor uso de las partes inteligentes, la codificación y el desarrollo especialmente para UIs, y minimizar las partes no inteligentes?

Y así que no quiero aburrirlos con muchas diapositivas. Quiero una demostración. Así que vamos a ver un par de ejemplos. Quiero hablar sobre el uso de algunos medios diferentes aquí. Pero voy a empezar en cursor. Así que en mi caso, esto es solo cursor IDE. Quiero empezar con lo básico, aquí, vamos a estar en un IDE, y vamos a editar texto. Y así que aquí está solo una aplicación Vite simple. Les mostraré mi aplicación en ejecución. Vamos a npm run dev. Y genial. Hagamos algunas cosas. Hay dos cosas que creo que son realmente valiosas con las herramientas de IA para la codificación. Específicamente en frontends. Así que la primera es lo que simplemente llamarías codificación de ambiente. La segunda es un truco que probablemente no uses mucho, si es que lo usas. Así que estoy emocionado por ese. Pero comencemos con lo básico. Probablemente ya sepas que la IA puede hacer autocompletar. Lo que quizás no estés usando, aprovechando todo su potencial, es simplemente decirle que haga actualizaciones a la UI.

Así que vamos a app.jsx. En cursor, por defecto, el archivo que tengo abierto aquí se incluirá como contexto aquí. Por supuesto, puedo agregar archivos adicionales si esos fueran relevantes también, como app.css. Tal vez sería uno bueno. Pero cursor es bastante bueno para averiguarlo automáticamente. No tienes que gestionar el contexto tan estrictamente como lo hacías en los viejos tiempos, en mi opinión.

Vamos a entrar y digamos, cuando hago clic en el botón de conteo, lanzar un modal y mostrar el modal en el conteo. Así que solo voy a improvisar, ni siquiera lo escribí bien. Solo voy a improvisar algunas actualizaciones de UI que quiero hacer. En muchos casos, he tenido personas, tanto como ingenieros senior en nuestro equipo, básicamente decir algo como, él ya no escribe código. Él escribe lo que quiere y luego deja que la IA lo haga. Y mira, mi actualización de código ya está hecha.

Así que probemos nuestro conteo. Ahí vamos. Genial. Ahora, en este caso, realmente no coincide con el modo oscuro. Supongo que el texto blanco aquí no lo puedo ver. Sí. Así que eso es súper fácil. Tomemos una captura de pantalla y digamos, oye, genial, pero no puedo ver el texto blanco en un modal blanco, amigo. Me gusta hablar con la IA de una manera amigable y de broma. Tú eres, así que eres bienvenido a hablar con la IA como quieras. No recomendaría ser malo si has visto películas de ciencia ficción. Nunca sabes qué va a venir con respecto a nuestros señores de la IA. Genial. Quiero decir, actualicé eso increíblemente rápido. Ni siquiera estoy acelerando esto. Esto es en tiempo real. Genial. Y cada vez que hago clic, el conteo aumenta.

Todo esto está vinculado. Hermoso. Puedes darle continuamente cualquier retroalimentación que desees. Es bueno actualizando UIs y replicando patrones que ya ve en las UIs. Increíble. En muchos casos, quieres agregar un botón. Quieres hacer una cosa. Bla, bla, bla. Solo lo codifico con vibraciones. Y solo me meto en los detalles cuando realmente me importa.

Si necesitas agregar instrucciones adicionales, puedes agregar instrucciones personalizadas. Hablemos de un caso de uso más avanzado y un flujo de trabajo más avanzado que definitivamente personalmente no veo que la gente use lo suficiente. Así que me viste aquí donde hice algo que tuve que verificar yo mismo y tuve que decirle qué estaba mal. Eso es un poco lento, ¿verdad? Básicamente ahora soy un tester de QA. Soy como un gerente de producto más un tester de QA. El gerente de producto dice lo que quiere. El tester de QA verifica si obtuvimos lo que queríamos y luego repite.

Pero eso puede ser realmente tedioso. Puede ser realmente molesto solicitar, probar manualmente, solicitar, probar manualmente. Sientes que estás en este bucle infinito de muerte, especialmente con cosas más complejas que requieren muchas iteraciones. Así que lo que encontré con gran éxito es realmente usar una variante del desarrollo guiado por pruebas. Déjame mostrarte. Así que entremos aquí y continuaré. Ni siquiera es un repositorio Git. Hagamos de esto un repositorio Git rápidamente. Git init. Increíble. Git add. Y por cierto, otra característica genial de Cursor y VS Code es hacer clic en un botón. Generará un mensaje de commit para ti.

Bam, no está tan mal. Solía ser verboso en el pasado. Ya no es tan verboso. Me gusta. Bien.

Así que hagamos algo más avanzado. Vamos a entrar aquí y haré este prompt un poco más grande porque vamos a ponernos un poco elegantes con nuestros trucos de prompts ahora mismo. Y voy a decir que me escribas una función que convierta una cadena de markdown a una sola línea de cadena html. Aquí está la parte importante. Si hicieras eso, nueve de cada 10 veces, la IA no lo hará bien en el primer intento. Tal vez 95 de cada 100 veces, honestamente. Incluso el último modelo es súper genial. Tu modelo favorito. No me importa. No lo hace bien con esto. Pero hay un truco.

Lo que vamos a decir es escribir pruebas primero, escribir el código, ejecutar las pruebas y luego actualizar el código hasta que nos pruebe. Bam. Ahora necesitas activar la ejecución automática para esto en Cursor primero. Así que lo dejaré ir. Va a empezar a hacer algunas cosas. Genial. Ahora asegurémonos de que nuestra configuración sea correcta aquí para cualquiera que esté configurando esto desde cero. Vamos a ir a características. Creo que es. Habilitar el modo de ejecución automática. Así que solo puedes activar este interruptor. El modo de ejecución automática significa que puede ejecutar automáticamente comandos bash. También puedes darle una lista de permitidos y denegados muy específica, etc. Y también puedes controlarlo mientras avanza.

Así que volvamos a nuestro chat. Y luego diré una cosa, Cursor está haciendo esta cosa realmente molesta últimamente, donde solía simplemente hacer cosas. Y ahora siempre pregunta, ¿quieres que haga estas cosas? Y siempre tengo que decir que sí. Solo haz la cosa, por favor. No sé qué pasó. Esto sucedió en la última semana o dos. Y es realmente molesto.

Pero esto es genial. Está avanzando e instalando dependencias. Me gusta la elección de VTest. Así que sigamos adelante y hagámoslo. Añadió react route o DAW. ¿O qué fue eso? No, añadió react testing library. Así que aquí, comenzó generando mis pruebas. Esto se ve bastante bien. Bastante agradable. Diré que si estas pruebas pasan, entonces tengo una buena idea de lo que quería.

Así que de nuevo, si estamos trabajando en algo, especialmente que no es inherentemente tan visual, podría ser front end, pero podría no ser puramente visual en la UI. Es agradable no tener que ser una especie de conejillo de indias donde tengo que ejecutar el código y ser como, oh, ¿hice eso bien? Aquí, tengo, bam, pruebas automatizadas. Ahora mismo. Oye, al menos estas pasan. Está haciendo algo bien. Y como puedes ver, está pasando y está ejecutando las pruebas por sí mismo. Y está usando la salida de las pruebas para luego hacer actualizaciones subsecuentes. Ejecutó las pruebas y vi que una estaba fallando. Ahí está nuestro fallo. Una segunda vez, fallaron y luego, bam, buen momento. Ahora todas pasan. Esto es realmente agradable porque tengo garantías. La cosa hace la cosa y lo encuentra por sí mismo.

No tengo que decírselo cada vez. {{^}}No tengo que probarlo cada vez. Simplemente continuará trabajando en el problema con comentarios claros. Eso es lo que generalmente necesita la IA, comentarios claros. Ese es el gran secreto del éxito de los LLM en mi opinión. Comentarios claros. Y si puedes escribir código que proporcione los comentarios, aún mejor.

Así que hagamos esto más complejo. Veamos qué tan bien lo hace nuestro commit de IA. Me encanta. Es hermoso. Paquetes actualizados y acolchados. Markdown. Cada generación de cosas. Genial. Así que vamos aquí y le decimos, por favor maneja casos de uso más avanzados. Añade pruebas más elaboradas y asegúrate de que todas pasen.

Así que en este caso, le estoy diciendo que haga cosas más complicadas. No veo mucho anidamiento. ¿Veo listas aquí? Oh, veo listas, pero no veo algo locamente avanzado. Vamos a ver si podemos lograr que pasen 15 de 15 pruebas, incluyendo todo este material más matizado, incluyendo manejo de espacios en blanco, múltiples cosas, etc. Lo único que quiero compartir como consejo, sin embargo, es que aunque es emocionante que no estoy usando las manos en este momento, no me alejaría de tu escritorio o computadora y seguiría con tu vida asumiendo que la IA va a resolver todo.

Hay problemas. La IA puede quedar atrapada en extraños bucles de muerte donde simplemente nunca puede resolver algo. Así que, en mi opinión, quieres observar estas cosas. Si claramente está atrapada en un bucle, muchas veces solo querrás pausarla. Si obtuvo el mismo resultado varias veces, podría comenzar a hacer cosas extrañas y sospechosas en el código.

Volvamos a centrarnos más en el front-end. En el front-end, estamos tratando con UIs. Estamos tratando con sistemas de diseño. Estamos tratando con diseños de Figma. Estamos tratando con muchas cosas que son inherentemente visuales. Y encontré que este entorno puramente de texto no es lo perfecto para todo cuando tienes ese tipo de consideraciones.

Así que quiero mostrarte algo, un adelanto de algo que vamos a lanzar pronto que actualmente llamamos Fusion. Esto es una especie de intento de tomar el entorno de Cursor pero hacerlo lo más visual posible. Hacer que se conecte profundamente con herramientas como Figma, más que una simple integración MCP haría. Y hacer que se sienta como un diseño, un entorno más visual.

Déjame mostrarte a qué me refiero. Y todos ustedes pueden decirme, pueden tuitearme si piensan que esto es algo bueno o un pedazo de basura. Así que Fusion es esta nueva pestaña de proyectos en Builder. Y de nuevo, esto está tratando de tomar LLMs y usarlos para lo que son mejores, actualizar código, pero hacerlo una experiencia más visual. Y te mostraré a qué me refiero.

Así que aquí puedes conectar cualquier repositorio o simplemente construir cualquier aplicación, codificar en vivo, lo que sea. Y luego dentro de estos repositorios, tengo algunos. Lancemos un par. Así que tengo este. Este es nuestro sitio de Builder Academy. Esta es una plataforma que tenemos para mostrar cursos, base de código personalizada de Next.js, etc. Y puedo entrar y esto es una especie de cursor visual. Ahora podemos hacer cosas más visuales.

Así que algunas de las cosas que podemos hacer es presionar un botón de edición y comenzar a editar. Así que tal vez queramos hacer algo como duplicar esto y ponerlos uno al lado del otro. Y tal vez queramos dos de esto. Y tal vez queramos un poco de espacio. Y tal vez queramos cambiar el diseño y la dirección de esto. Todo esto es algo que podemos hacer de una manera muy similar a otras herramientas de diseño. Ahora, eso está bien y todo, pero en realidad, eso no es lo que quiero hacer, ¿verdad? Quiero comenzar a extraer actualizaciones que tenemos en Figma.

Déjame mostrarte eso y mostrarte cómo una interfaz más visual para tu código y a través de un LLM puede ser útil. Así que vamos a Figma y vamos a aquí vamos. Así que aquí, este es un diseño que prácticamente refleja esto, me faltan algunas secciones, pero las voy a incorporar. Así que vamos y simplemente tomemos esto y copiemos. En realidad, tenemos que lanzar el plugin de builder y presionamos exportar diseño y luego simplemente genial. Simplemente pegaremos esto. Genial. Nueva sección añadida. Y la parte genial es que, como es visual, también puedo hacer algunos ajustes visuales. Así que tal vez quiera un poco más de espacio aquí, tal vez menos o lo que sea. Puedo hacer lo que quiera. Tal vez quiera una cantidad diferente de espacio aquí. Como este margen es más grande de lo que esperaba. Tal vez simplemente lo ajustemos más. Maravilloso. También puedo hacer cosas adicionales. Por ejemplo, agreguemos un poco de contexto aquí también. Y traigamos algunas cosas adicionales. Así que digamos que quiero agregar un carrusel debajo de esto y quiero múltiples diapositivas en él. Así que no solo puedo copiar y pegar en el lienzo aquí. También puedo copiar y pegar en el contexto. Así que vamos aquí y digamos, tomemos nuestra primera diapositiva, exportar diseño, copiar y decir también agregar un carrusel con dos diapositivas debajo de esta diapositiva uno y simplemente pegar el contenido de Figma. Y luego vamos a la diapositiva dos y pegamos. Y ahora podemos aplicar todo esto de una vez. Así que los cambios visuales que hice, cualquier cambio de UI, copiado, pegado, ajustado, etc. , y contexto adicional. Como, también quiero estas cosas adicionales que quiero que conviertas en un carrusel. Puedes usar esto para flujos de múltiples pasos que puedes limpiar después, múltiples páginas, construir aplicaciones completas. Todo eso está bien y es genial. Mientras esto se ejecuta, hagamos un par de otras cosas.

Así que vamos a otra rama que hice. Ups, ese es un diseño diferente aquí. Otra rama de la misma aplicación. También te mostraré otras cosas. Y en esta, quiero usar solo lo que tenemos actualmente para hacer algo nuevo. Así que simplemente voy a solicitar y decir que añada una página de contacto y añada un enlace en la red. Simplemente voy a presionar ir. El agente aquí puede trabajar por un tiempo si tienes algo suficientemente avanzado, una aplicación muy compleja con un millón de cosas. Escaneará tu base de código. Hará muchas de las cosas que solías hacer con Cursor.

Pero de nuevo, estamos en un entorno muy visual, uno donde podrías traer a tus diseñadores al herramienta y obtener pull requests de ellos. Te mostraré eso en un segundo. Y uno donde podrías tener a tus PMs aquí. Todos podrían estar colaborando en un solo lienzo de manera efectiva. Mientras esto se ejecuta, déjame verificar, está bien, todavía estamos optimizando nuestro carrusel. Vamos a mostrar algunas cosas con otro tipo de sistemas de diseño y APIs. Así que aquí tengo este ejemplo de sistema de diseño cloud scape.

Y aquí, ¿por qué no hacemos esto? Decir que añada una nueva página en slash weather y que sea un panel de control del clima impulsado por la API de OpenMatteo. Puedes usar tus propios sistemas de diseño. Puedes usar tus propias APIs. Pero lo que es genial es que este agente también puede buscar cosas en la web, buscar la documentación, averiguar cosas o referenciar documentación local o documentos privados que tengas. Hagamos otro ejemplo genial. Vamos a este panel de control de Mui y cambiemos a modo claro para que puedas verlo un poco mejor. Y entremos aquí y digamos, oh, no hay nada en esta pestaña de clientes.

Digamos, actualiza el contenido de la pestaña de clientes para tener una tabla y pueblala con usuarios de random user dot me añade botones de edición donde cuando presiono editar, hay un modal con los campos de usuario que puedo editar. Vamos a ejecutar eso. Así que un montón de cosas diferentes que podemos hacer usando diferentes sistemas de diseño y diferentes configuraciones y cosas así.

Aquí está esa página de contacto que ahora estamos generando. ¿Y por qué no entramos y miramos eso y la otra página de contacto usando todas nuestras diferentes cosas. Y aquí es donde podemos entrar y hacer ediciones adicionales. Así que, ¿por qué no entro aquí y digo algo como, oh, hay algo específico que quiero. En realidad, preferiría que esto estuviera por encima de este. Y digamos, también haz que las FAQs sean un acordeón. Así que hice mis cambios visuales.

Puedes usar todos los tipos de configuraciones de CSS y como un editor estilo Figma y luego dejar que funcione. De vuelta aquí. Boom. Aquí están las otras actualizaciones que pedimos hace un minuto donde hicimos algunos cambios. Y también trajimos estas dos nuevas secciones. También añadimos este carrusel. Y de nuevo, fue del contexto.

Paso en diseño, lo vendí para hacer un carrusel con estas diapositivas. Y lo hizo. Múltiples cambios en uno. Pero si vamos a hacer dos cosas más. Vamos aquí y este tipo de ancho se redujo un poco. Así que realmente quiero que estas cosas llenen todo el ancho para que podamos seleccionar en el menú de capas. Vamos a llegar a la raíz del carrusel. Y parece que estas cosas tienen un ancho del 100 por ciento, pero en realidad llenan el 100 por ciento del ancho. Este también. Este es como una cuadrícula. Tenemos un ancho máximo. No quiero ese ancho máximo aquí. Deshazte de eso. Boom. Eso es más como lo que realmente estoy buscando. Y voy a adivinar que tenemos un ancho máximo en algo aquí. Sí, no necesariamente quiero eso. Oh, podría romper nuestro carrusel. ¿Por qué no nos ponemos un poco menos elegantes por un segundo? Pero la idea aquí es que tienes un lienzo completo e ilimitado para hacer lo que quieras para aplicar cambios como quieras. Déjame mostrarte otro caso de uso realmente genial, también, que es realmente útil cuando tienes este lienzo visual es actualizaciones de diseño. Es muy común que vayas aquí. Y digamos que estamos como, oh, no me gusta cómo tenemos un fondo morado versus uno gris. Así que vamos aquí y actualizaré el diseño para que ahí vamos. Recortamos algo de padding y espaciado y le dimos el fondo gris. Y ahora lo que voy a hacer es tomar esta capa actualizada y voy a exportar eso. Y esta vez agregaré el contexto. Pero esta vez lo que voy a hacer es una transferencia de estilo. Así que voy a tomar el código existente que tenemos, ya sea generado por builder o hecho por un humano. Y voy a saltar aquí y voy a seleccionar esto y voy a decir, actualiza mi selección para tener los cambios de diseño que acabo de hacer.

Pegar. Así que estoy pegando el famoso contexto y estoy incorporando cambios de diseño. Así que puedes usar esto para hacer actualizaciones de manera muy granular. Encontramos una interfaz visual donde puedes seleccionar, modificar e incorporar diseños. Aplica esto aquí, eso allá. Puede ser mucho más impactante que simplemente una especie de figura general tipo YOLO.

Vamos a ver tal vez nuestros tableros rápidamente. Así que aquí creo que queríamos como una página del clima, solo dile a la IA que lo arregle y luego puede ir y comenzar a encontrar una solución. Y luego, ¿por qué no saltamos? Teníamos otro sistema de diseño. Teníamos el material UI. Dejemos que esos se ejecuten por un segundo y se arreglen. Y mientras eso sucede, déjame mostrarte una última cosa que es realmente genial es cuando estás contento con los cambios, todo lo que haces es hacer clic en el botón de enviar PR.

Hagamos un par para que podamos verlo. Comenzaremos con este. Así que este es uno usando material UI. Y hagamos uno más. Hagamos el de la nube, nube. Así que aquí está nuestra página del clima. Veamos si nuestros errores están corregidos. La IA hizo todo por mí. Escribamos San Francisco. Y esto es 100%. La IA simplemente ideó esto. Hermoso. Estoy recibiendo un poco de no un número, pero tengo todas estas cosas. Podría alimentar una captura de pantalla y decir, ups, arregla esos nones. Pero entiendes la idea. Esto es bastante genial. Y tenemos un buen número de estadísticas aquí.

Todo dinámico. Vamos a Nueva York, Nueva York. Bam. Y tal vez podamos ver si nuestras otras actualizaciones se aplican. Un error más por corregir. Nuevamente, deja que la IA lo resuelva. Este es un ejemplo de detección automática de errores y aplicación de correcciones.

Pero mientras hacemos eso, echemos un vistazo al PR para nuestro tablero del clima, así como nuestra tabla de material, quizás. Así que aquí está nuestra solicitud de extracción para nuestro tablero del clima. Puedes ver que sabe actualizar la ruta. Es una configuración adyacente. Está usando la API de open Mateo. Está usando tipos. Está haciendo todo tipo de cosas útiles e interesantes.

Lo otro genial es que está usando componentes de CloudScape de principio a fin. Reutilizando componentes existentes usando CloudScape. Quiero decir, casi no se encuentra un solo div aquí. Es CloudScape de arriba a abajo. Así que esto es genial. Y lo más genial también, en este mundo, es lo que podemos hacer es, digamos que algunos de estos, encontremos un componente que sea un poco grande, ya sabes, demasiado grande y queremos dividirlo.

Digamos que podemos etiquetar al builder bot aquí en un comentario. Y decir builder bot, mueve esto para que esté en su propia clase y presiona comentar. Podemos etiquetar al builder bot y puede hacer actualizaciones y enviar actualizaciones al PR para que podamos darle retroalimentación continuamente y puede actualizar el código para que sea como lo queremos. ¿Por qué no volvemos y también podemos ver otra cosa es que toma un segundo, pero agregamos o deberíamos haber agregado cuando vamos a nuestro otro PR y nuestro otro PR. Podemos ver que agregamos una descripción y título de PR realmente agradable. Boom. Gestión de clientes. Bam, volviendo a este PR.

Toma un segundo. La IA va a generar todo esto. Eso tal vez tome un momento más. Pero de todos modos, entiendes la idea. Esto es completamente nuevo y algo que estamos lanzando. Y me encantaría ver tus comentarios en un momento. Bueno, se nos va a acabar el tiempo para mi charla, pero en un momento veremos que el agente dijo que volverá a trabajar de inmediato y enviará actualizaciones. Oh, ya envió una actualización. Oh, te lo mostraré ahora antes de que se me acabe el tiempo.

Este PR ya está desactualizado. El agente hizo una actualización. Vamos a ver su commit. Y ba-bam. Lo sacó y lo puso en su propio archivo, tal como lo pedí. Así que, perfecto. Realmente, realmente impresionante. Me encantaría cualquier comentario que tengan. Prueben esto. Usen esos consejos geniales de cursor. Déjenme saber cómo están funcionando para ustedes. Prueben Builder para una interfaz más visual. Pueden hacer que todo su equipo colabore y haga una generación de UI más precisa y granular y transferencia precisa de diseño de Figma, etc. Muchas gracias por escucharme hablar.