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

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

Las herramientas de AI están cambiando cómo diseñamos, construimos y probamos interfaces de usuario. Esta charla analiza las tecnologías actuales de AI que están mejorando el proceso de desarrollo frontend y cómo usarlas, incluyendo:

- Uso de Visual Copilot para convertir diseños de Figma en código listo para producción;

- Implementación de agentes de AI para escritura y prueba de código automatizadas;

- Ejemplos del mundo real que muestran cómo las herramientas de AI pueden mejorar la velocidad y el disfrute del desarrollo.

This talk has been presented at React Summit 2025, check out the latest edition of this React Conference.

Steve Sewell
Steve Sewell
19 min
17 Jun, 2025

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Discutiendo la construcción de mejores UIs más rápido con AI, enfatizando el uso de LLMs como modelos de texto predictivo y la necesidad de maximizar sus aspectos inteligentes en la codificación y el desarrollo de UI. Explorando la gestión del contexto de archivos en Cursor IDE y demostrando actualizaciones rápidas de UI usando AI para eficiencia en la codificación y resultados en tiempo real. Discutiendo flujos de trabajo avanzados para un desarrollo eficiente usando enfoques impulsados por retroalimentación e incorporando desarrollo guiado por pruebas para pruebas iterativas y automatizadas en Cursor IDE. Explorando trucos avanzados de prompts en Cursor IDE para un desarrollo eficiente escribiendo pruebas primero, actualizando el código de manera iterativa y habilitando el modo de ejecución automática para pruebas automatizadas y comandos bash. Comportamiento molesto de los prompts de Cursor, beneficios de las pruebas automatizadas y desarrollo guiado por pruebas para un código confiable. Importancia de la retroalimentación de AI y complejidad de las pruebas de AI con objetivos claros. Desafíos de AI, enfoque visual en el frontend y vista previa de Fusion. Integración de diseños de Figma para ajustes visuales, exploración de nuevas características y sistemas de diseño, actualización de la pestaña de clientes y realización de ediciones visuales, creación de carrusel y actualizaciones visuales, actualizaciones de diseño granulares e integración de AI, actualizaciones dinámicas y refactorización de componentes, etiquetado de Builder Bot para actualizaciones de código automatizadas.

1. AI-Powered UI Development

Short description:

Discutiendo cómo construir mejores UIs más rápido con IA, enfatizando el uso de LLMs como modelos de texto predictivo y la necesidad de maximizar sus aspectos inteligentes en la codificación y el desarrollo de UIs. Demostrando ejemplos en IDE y mencionando el valor de las herramientas de IA en la codificación frontend, particularmente en la codificación de ambiente y actualizaciones de UI.

¿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.

2. Efficient UI Updates with AI

Short description:

Explorando la gestión del contexto de archivos en cursor IDE y demostrando actualizaciones rápidas de UI usando IA para eficiencia en la codificación y resultados en tiempo real.

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.

3. Optimizing Development Workflows

Short description:

Discutiendo flujos de trabajo avanzados para un desarrollo eficiente utilizando enfoques basados en retroalimentación e incorporando desarrollo guiado por pruebas para pruebas iterativas y automatizadas en Cursor IDE.

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.

4. Advanced Prompt Tricks in Cursor IDE

Short description:

Explorando trucos avanzados de prompts en Cursor IDE para un desarrollo eficiente escribiendo pruebas primero, actualizando el código de manera iterativa y habilitando el modo de ejecución automática para pruebas automatizadas y comandos bash.

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.

5. Automated Testing and Reliable Code

Short description:

Comportamiento molesto de los prompts de Cursor, beneficios de las pruebas automatizadas y desarrollo guiado por pruebas para un código confiable.

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.

6. AI Feedback Importance and Testing Complexity

Short description:

Importancia de la retroalimentación de IA y complejidad de las pruebas de IA con objetivos claros.

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.

7. AI Challenges and Fusion Preview

Short description:

Desafíos de IA, enfoque visual en el front-end y vista previa de Fusion

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.

8. Visual Builder Project Overview

Short description:

Visual Builder Project Overview

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.

9. Integration of Figma Designs for Visual Tweaks

Short description:

Integration of Figma Designs for Visual Tweaks

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.

10. Explorando Nuevas Funciones y Sistemas de Diseño

Short description:

Explorando Nuevas Funciones y Sistemas de Diseño

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.

11. Visual Edits and Customer Tab Updates

Short description:

Updating Customers Tab and Making Visual Edits

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.

12. Design Changes and Carousel Setup

Short description:

Making Carousel and Visual Updates

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.

13. Granular Design Updates and AI Integration

Short description:

Granular Design Updates and AI Integration

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í.

14. Dynamic Updates and Component Refactoring

Short description:

Dynamic Updates and Component Refactoring

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.

15. Automated Code Updates and Builder Bot Tagging

Short description:

Tagging Builder Bot for Automated Code Updates

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Construyendo un Asistente AI Activado por Voz con Javascript
JSNation 2023JSNation 2023
21 min
Construyendo un Asistente AI Activado por Voz con Javascript
Top Content
This Talk discusses building a voice-activated AI assistant using web APIs and JavaScript. It covers using the Web Speech API for speech recognition and the speech synthesis API for text to speech. The speaker demonstrates how to communicate with the Open AI API and handle the response. The Talk also explores enabling speech recognition and addressing the user. The speaker concludes by mentioning the possibility of creating a product out of the project and using Tauri for native desktop-like experiences.
El Flujo de Trabajo del Desarrollador Asistido por IA: Construye Más Rápido e Inteligente Hoy
JSNation US 2024JSNation US 2024
31 min
El Flujo de Trabajo del Desarrollador Asistido por IA: Construye Más Rápido e Inteligente Hoy
Top Content
AI is transforming software engineering by using agents to help with coding. Agents can autonomously complete tasks and make decisions based on data. Collaborative AI and automation are opening new possibilities in code generation. Bolt is a powerful tool for troubleshooting, bug fixing, and authentication. Code generation tools like Copilot and Cursor provide support for selecting models and codebase awareness. Cline is a useful extension for website inspection and testing. Guidelines for coding with agents include defining requirements, choosing the right model, and frequent testing. Clear and concise instructions are crucial in AI-generated code. Experienced engineers are still necessary in understanding architecture and problem-solving. Energy consumption insights and sustainability are discussed in the Talk.
IA y Desarrollo Web: ¿Exageración o Realidad?
JSNation 2023JSNation 2023
24 min
IA y Desarrollo Web: ¿Exageración o Realidad?
Top Content
This talk explores the use of AI in web development, including tools like GitHub Copilot and Fig for CLI commands. AI can generate boilerplate code, provide context-aware solutions, and generate dummy data. It can also assist with CSS selectors and regexes, and be integrated into applications. AI is used to enhance the podcast experience by transcribing episodes and providing JSON data. The talk also discusses formatting AI output, crafting requests, and analyzing embeddings for similarity.
El Ascenso del Ingeniero de IA
React Summit US 2023React Summit US 2023
30 min
El Ascenso del Ingeniero de IA
Top Content
The rise of AI engineers is driven by the demand for AI and the emergence of ML research and engineering organizations. Start-ups are leveraging AI through APIs, resulting in a time-to-market advantage. The future of AI engineering holds promising results, with a focus on AI UX and the role of AI agents. Equity in AI and the central problems of AI engineering require collective efforts to address. The day-to-day life of an AI engineer involves working on products or infrastructure and dealing with specialties and tools specific to the field.
Aplicaciones Web del Futuro con Web AI
JSNation 2024JSNation 2024
32 min
Aplicaciones Web del Futuro con Web AI
Web AI in JavaScript allows for running machine learning models client-side in a web browser, offering advantages such as privacy, offline capabilities, low latency, and cost savings. Various AI models can be used for tasks like background blur, text toxicity detection, 3D data extraction, face mesh recognition, hand tracking, pose detection, and body segmentation. JavaScript libraries like MediaPipe LLM inference API and Visual Blocks facilitate the use of AI models. Web AI is in its early stages but has the potential to revolutionize web experiences and improve accessibility.
Cobertura de código con IA
TestJS Summit 2023TestJS Summit 2023
8 min
Cobertura de código con IA
Premium
Codium is a generative AI assistant for software development that offers code explanation, test generation, and collaboration features. It can generate tests for a GraphQL API in VS Code, improve code coverage, and even document tests. Codium allows analyzing specific code lines, generating tests based on existing ones, and answering code-related questions. It can also provide suggestions for code improvement, help with code refactoring, and assist with writing commit messages.

Workshops on related topic

IA a demanda: IA sin servidor
DevOps.js Conf 2024DevOps.js Conf 2024
163 min
IA a demanda: IA sin servidor
Top Content
Featured WorkshopFree
Nathan Disidore
Nathan Disidore
En esta masterclass, discutimos los méritos de la arquitectura sin servidor y cómo se puede aplicar al espacio de la IA. Exploraremos opciones para construir aplicaciones RAG sin servidor para un enfoque más lambda-esque a la IA. A continuación, nos pondremos manos a la obra y construiremos una aplicación CRUD de muestra que te permite almacenar información y consultarla utilizando un LLM con Workers AI, Vectorize, D1 y Cloudflare Workers.
AI para Desarrolladores de React
React Advanced 2024React Advanced 2024
142 min
AI para Desarrolladores de React
Top Content
Featured Workshop
Eve Porcello
Eve Porcello
El conocimiento de las herramientas de AI es fundamental para preparar el futuro de las carreras de los desarrolladores de React, y la suite de herramientas de AI de Vercel es una vía de acceso accesible. En este curso, examinaremos más de cerca el Vercel AI SDK y cómo esto puede ayudar a los desarrolladores de React a construir interfaces de transmisión con JavaScript y Next.js. También incorporaremos APIs de terceros adicionales para construir y desplegar una aplicación de visualización de música.
Temas:- Creación de un Proyecto de React con Next.js- Elección de un LLM- Personalización de Interfaces de Transmisión- Construcción de Rutas- Creación y Generación de Componentes - Uso de Hooks (useChat, useCompletion, useActions, etc)
How to 9,2x Your Development Speed with Cline
JSNation 2025JSNation 2025
64 min
How to 9,2x Your Development Speed with Cline
Featured Workshop
Nik Pash
Nik Pash
La forma en que escribimos código está cambiando fundamentalmente. En lugar de quedar atrapado en bucles anidados y detalles de implementación, imagine enfocarse puramente en la arquitectura y la resolución creativa de problemas mientras su programador de pares de IA maneja la ejecución. En esta masterclass práctica, te mostraré cómo aprovechar Cline (un agente de codificación autónomo que recientemente alcanzó 1M de descargas en VS Code) para acelerar drásticamente tu flujo de trabajo de desarrollo a través de una práctica que llamamos "vibe coding" - donde los humanos se enfocan en el pensamiento de alto nivel y la IA maneja la implementación.Descubrirás:Los principios fundamentales del "vibe coding" y cómo se diferencia del desarrollo tradicionalCómo diseñar soluciones a un alto nivel y hacer que la IA las implemente con precisiónDemostración en vivo: Construcción de un sistema de almacenamiento en caché de grado de producción en Go que nos ahorró $500/semanaTécnicas para usar IA para entender bases de código complejas en minutos en lugar de horasMejores prácticas para solicitar a los agentes de IA que obtengan exactamente el código que deseasErrores comunes a evitar al trabajar con asistentes de codificación de IAEstrategias para usar IA para acelerar el aprendizaje y reducir la dependencia de ingenieros seniorCómo combinar efectivamente la creatividad humana con las capacidades de implementación de IAYa sea que seas un desarrollador junior que busca acelerar tu aprendizaje o un ingeniero senior que desea optimizar tu flujo de trabajo, saldrás de esta masterclass con experiencia práctica en desarrollo asistido por IA que puedes aplicar inmediatamente a tus proyectos. A través de demostraciones de codificación en vivo y ejercicios prácticos, aprenderás cómo aprovechar Cline para escribir mejor código más rápido mientras te enfocas en lo que importa: resolver problemas reales.
Building Full Stack Apps With Cursor
JSNation 2025JSNation 2025
46 min
Building Full Stack Apps With Cursor
Featured Workshop
Mike Mikula
Mike Mikula
En esta masterclass cubriré un proceso repetible sobre cómo iniciar aplicaciones full stack en Cursor. Espere comprender técnicas como el uso de GPT para crear requisitos de producto, esquemas de base de datos, hojas de ruta y usarlos en notas para generar listas de verificación que guíen el desarrollo de aplicaciones. Profundizaremos más en cómo solucionar alucinaciones/errores que ocurren, indicaciones útiles para hacer que su aplicación se vea y se sienta moderna, enfoques para conectar cada capa y más. Al final, ¡espere poder ejecutar su propia aplicación full stack generada por IA en su máquina!
Por favor, encuentre las preguntas frecuentes aquí
Webinar gratuito: Construyendo aplicaciones Full Stack con Cursor
Productivity Conf for Devs and Tech LeadersProductivity Conf for Devs and Tech Leaders
71 min
Webinar gratuito: Construyendo aplicaciones Full Stack con Cursor
Top Content
WorkshopFree
Mike Mikula
Mike Mikula
Para asistir al webinar, por favor regístrate aquí.En este webinar cubriré un proceso repetible sobre cómo iniciar aplicaciones Full Stack en Cursor. Espera entender técnicas como usar GPT para crear requisitos de producto, esquemas de base de datos, hojas de ruta y usar esos en notas para generar listas de verificación que guíen el desarrollo de la aplicación. Profundizaremos más en cómo corregir alucinaciones/errores que ocurren, indicaciones útiles para hacer que tu aplicación se vea y se sienta moderna, enfoques para conectar cada capa y más. Al final, ¡espera poder ejecutar tu propia aplicación Full Stack generada por IA en tu máquina!
Trabajando con OpenAI y la Ingeniería de Prompts para Desarrolladores de React
React Advanced 2023React Advanced 2023
98 min
Trabajando con OpenAI y la Ingeniería de Prompts para Desarrolladores de React
Top Content
Workshop
Richard Moss
Richard Moss
En esta masterclass daremos un recorrido por la IA aplicada desde la perspectiva de los desarrolladores de front end, enfocándonos en las mejores prácticas emergentes cuando se trata de trabajar con LLMs para construir grandes productos. Esta masterclass se basa en los aprendizajes obtenidos al trabajar con la API de OpenAI desde su debut en noviembre pasado para construir un MVP funcional que se convirtió en PowerModeAI (una herramienta de creación de ideas y presentaciones orientada al cliente).
En la masterclass habrá una mezcla de presentación y ejercicios prácticos para cubrir temas que incluyen:
- Fundamentos de GPT- Trampas de los LLMs- Mejores prácticas y técnicas de ingeniería de prompts- Uso efectivo del playground- Instalación y configuración del SDK de OpenAI- Enfoques para trabajar con la API y la gestión de prompts- Implementación de la API para construir una aplicación orientada al cliente potenciada por IA- Ajuste fino y embeddings- Mejores prácticas emergentes en LLMOps