Desarrollo Frontend Potenciado por IA: 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 IA están cambiando la forma en que diseñamos, construimos y probamos interfaces de usuario. Esta masterclass analiza las tecnologías de IA actuales que están mejorando el proceso de desarrollo frontend y cómo utilizarlas, incluyendo:

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

- Implementar agentes de IA para la escritura y prueba de código automatizadas;

- Ejemplos del mundo real que muestran cómo las herramientas de IA pueden mejorar la velocidad y la alegría del desarrollo.

This talk has been presented at Productivity Conf for Devs and Tech Leaders, check out the latest edition of this Tech Conference.

Steve Sewell
Steve Sewell
19 min
27 Mar, 2025

Comments

Sign in or register to post your comment.
Video Summary and Transcription
La masterclass de hoy presenta el uso de modelos de lenguaje grandes (LLMs) para mejorar el desarrollo frontend. Los LLMs pueden actuar como nuestros cerebros maximizando las partes buenas y minimizando las malas. Una demostración en Cursor, un IDE, muestra cómo se pueden usar los LLMs con el plugin de Figma de builder.io. La masterclass enfatiza la automatización de tareas, como agregar un botón de configuración y resolver errores, con el agente de IA. La retroalimentación y la verificación manual son cruciales para asegurar resultados deseados. Se recomiendan pruebas e iteración continua para garantizar una mayor corrección. Monitorear y guiar a los agentes de IA es importante para mantenerse en el camino correcto. Conectar con otras herramientas como Figma y usar la sugerencia de IA puede mejorar aún más la generación de código. La CLI permite la integración de la base de código y el desarrollo paralelo. El prototipado visual y las actualizaciones sin problemas son posibles con la herramienta Builder. En general, la masterclass destaca cómo los LLMs pueden revolucionar el desarrollo frontend al automatizar tareas, mejorar la eficiencia y facilitar la colaboración.

1. Introduction

Short description:

Hoy quiero hablarles sobre cómo construir mejores front-ends más rápido utilizando LLMs. Los modelos de lenguaje grande son solo sistemas de texto predictivo muy elegantes. Pueden comenzar a actuar mucho como pensamos nuestros cerebros. El objetivo principal es averiguar cómo maximizar las partes buenas y minimizar las partes malas. Nos enfocaremos en el desarrollo front-end porque los LLMs son particularmente fuertes allí. Voy a comenzar a hacer una demostración en Cursor, un IDE, y mostrarles un caso de uso básico con el plugin de Figma de builder.io.

¿Qué tal, todos? Hoy quiero hablarles sobre cómo construir mejores front-ends más rápido utilizando LLMs de maneras que probablemente no estén utilizando hoy. Les garantizo al menos un truco que les muestro aquí. Entonces, ¿quién soy yo? Soy el fundador y CEO de Builder.io. También he creado algunos proyectos de código abierto geniales. Hablemos un poco más sobre algunas de estas cosas en un momento.

Así que para retroceder, los modelos de lenguaje grande, es muy fácil olvidar, son solo sistemas de texto predictivo muy elegantes. Les das un fragmento de texto y predicen qué texto vendría a continuación. Eso es todo. Todas las cosas asombrosas realmente son impulsadas por esa única tecnología básica. Ahora, bajo el capó, hay redes neuronales muy grandes. están diseñadas según cómo funcionan nuestros cerebros. Y resulta, sorprendentemente, que si tienes una red neuronal lo suficientemente grande, puede comenzar a actuar mucho como pensamos nuestros cerebros. Y es casi como pensar computacionalmente, pensar bajo demanda, lo que las hace sorprendentemente inteligentes a veces. Y la cosa que tendemos a encontrar con los modelos de lenguaje grande es que el objetivo principal es averiguar cómo maximizar las partes buenas y minimizar las partes malas porque hay muchas de ambas. Y curiosamente, en los casos de uso de LLM, la codificación es el caso de uso número uno según la mayoría de los estudios, especialmente cuando miras qué están utilizando y adoptando más las personas. Así que tenemos el privilegio de poder utilizar esta tecnología para ayudarnos con la codificación ya que es sorprendentemente buena en eso en comparación con otras tareas. Y así que realmente queremos profundizar hoy un poco más sobre cómo pueden usarlas mejor. Nos enfocaremos en el desarrollo front-end en particular porque los LLMs son particularmente fuertes allí.

Y de aquí en adelante, estaré haciendo una demostración en vivo y voy a comenzar aquí en Cursor. Y vamos a entrar en este repositorio. Cursor es el IDE en el que voy a hacer la demostración. Cursor no es el único gran IDE que tiene estas características. Diría que WinSurf es otra gran opción, no puedes equivocarte con eso. Pero vamos a entrar en un caso de uso básico aquí y déjenme explicar primero qué voy a hacer. Así que estoy trabajando en este plugin de Figma, el plugin de Figma de builder.io. Y añadí una nueva característica genial donde podemos diseñar cosas con IA. Así que tal vez elija como quiero un formulario de contacto. Y puedes seleccionar algo en Figma y usará IA para generar algo basado en lo que pides en el estilo de lo que has seleccionado. Así que ese es un problema común con la IA, no quiero solo un slot de IA genérico que se vea como Tailwinds, quiero algo que se vea como mi marca real o la forma en que realmente diseño, etc. Como aquí podemos ver que está construyendo mi formulario de contacto, más o menos paso a paso.

2. Adding a Settings Button

Short description:

Quiero añadir un botón de configuración que lance un pop over con una casilla de verificación de uso de auto layouts en mi base de código, sin añadir nada manualmente al contexto. El agente automáticamente determina los archivos y el contexto relevantes.

Y se ve con un estilo similar, una marca similar a lo que viste. Y luego, cuando estoy listo, puedo importarlo a Figma y luego ba-bam, lo tenemos. Genial. Pero quiero añadir una nueva característica a esto. Y la característica implica una interfaz de usuario, un botón para desplegar algunas cosas. Así que quiero añadir un botón de configuración al lado de este botón para que pueda cambiar qué estilo de importación. Y lo hago. En este momento solo hacemos una importación genérica, pero quiero hacerlo para que también podamos importar usando marcos anidados y auto layout. Y así, mientras normalmente irías y comenzarías a construir el código para todo esto, déjame mostrarte una manera mucho más fácil que uso prácticamente todos los días.

Regresando a mi IDE, voy a ir a Cursor y usar su modo de agente. Esta es su nueva interfaz de usuario, por cierto. Creo que la mayoría de las personas tienen la nueva interfaz de usuario, pero el modo de agente, creo que es el predeterminado ahora. También puedes acceder a un comando I, activarlo y desactivarlo. Así que aquí solo voy a escribir lo que quiero. Ahora, esta es una base de código real de tamaño completo. Esta base de código tiene muchos archivos, muchas cosas en ella, mucho código. Y lo que voy a hacer es que no voy a añadir nada manualmente al contexto. Voy a dejar que la IA determine las cosas. Así que solo voy a decir, al lado del botón de importación a Figma, añadamos un botón de configuración que lance un pop over que tenga una casilla de verificación de uso de auto layouts. Cuando esa casilla esté marcada, establece usar marcos en verdadero en HTML2 Figma. Y vamos. Estoy siendo bastante específico allí con mis indicaciones y solo le estoy diciendo, como, Hey, quiero añadir, volvamos a decir, Hey, quiero añadir un botón de configuración. No describí cómo lo quiero. Generalmente, estas características de agente son bastante buenas para averiguar usar una cierta biblioteca de íconos, voy a usar esa biblioteca de íconos, etc. Quiero lanzar un pop over y cuál debería ser el comportamiento. Y el agente automáticamente puede comenzar a averiguar qué archivos son relevantes aquí. Así que hizo algunas búsquedas aquí. No sé por qué está dando algunos errores aleatorios, pero lo que sea. Pero puede averiguar el contexto automáticamente. No tuve que especificarlo yo mismo.

3. Implementing UI and Resolving Errors

Short description:

Comenzó a añadir la interfaz de usuario y a resolver errores de linter automáticamente. Verifiqué en Figma y el botón de configuración y la funcionalidad de usar auto layouts están funcionando bien. Aunque los agentes pueden automatizar la creación de código, es importante supervisarlos y proporcionar retroalimentación. Siempre verifica los errores de linter y proporciona retroalimentación continua para asegurar los resultados deseados.

Comenzó a añadir la interfaz de usuario y, lo que es importante, lo que está haciendo aquí también es notar si alguna vez obtiene lo que llama errores de linter. Si algo como la verificación de tipo o el lint o cualquier cosa no está a la altura, automáticamente intentará arreglar y resolver esas cosas.

Así que aquí ya ha añadido todo lo que pedí. Suena bien, así que déjame ir a Figma, ir a mi botón. Vamos a generar diseño. Hagamos algo más. Hagamos como variantes de botón y veamos si obtenemos, bien, así que tenemos nuestro botón de configuración. No está mal. Se ve similar aquí. Y tenemos nuestro uso de auto layouts, el cuadro emergente de menú desplegable está generando todo tipo de diferentes variantes de botón aquí abajo. Y vamos a conectarlo correctamente.

Así que si miro HTML a Figma, a Figma, no pasó nuestra opción, pero está bien. Tenlo en cuenta, aunque los agentes pueden crear código automáticamente e iterar sobre el código, aún necesitas supervisarlos. Te mostraré otro ejemplo interesante en un segundo donde puedo ser aún más despreocupado en algunos aspectos, pero aún necesitas mirar por encima de tu hombro. Vamos a verificar aquí y podemos ver genial. No hay errores de linter. Así que no hay problemas con este archivo. El archivo está en verde y ya ha conectado, corregido cualquier cosa que necesite. Lo más importante a recordar con la IA es no intentar hacer todo de una sola vez. Dale retroalimentación. No veo que estés pasando la opción correcta a HTML a Figma. Por favor, mira de nuevo. Así que de nuevo, aquí, lo principal que siempre hay que hacer es dar retroalimentación continuamente. Y parece que está verificando su propio trabajo. Eso es genial. Puede que haya pasado por alto esta actualización cuando estaba aplicando los parches. Ahí vamos. Siempre que iba a hacer un commit para que pudiéramos ver un diff más limpio, pero este es un diff bastante limpio aquí. Eso es exactamente lo que queríamos ver. Recuerda, todos, siempre den retroalimentación a su IA.

4. Providing Feedback and Writing Tests

Short description:

Podemos dar retroalimentación sobre la interfaz de usuario e iterar para generar diferentes interfaces rápidamente. Un enfoque alternativo para obtener garantías más sólidas sobre la corrección es escribir pruebas primero, luego escribir código e iterar hasta que las pruebas pasen. La IA puede generar pruebas y ayudar con la escritura de código, pero es importante verificar manualmente la corrección.

Y de nuevo, podemos dar retroalimentación sobre la interfaz de usuario. Diría que la mayor parte del tiempo, cuando genera esta interfaz, simplemente me da un pequeño y limpio engranaje que es como un botón de engranaje y estudios. No me gustó tanto, pero esta es una de las cosas geniales. Puedes continuar iterando, hacer que genere diferentes interfaces para ti todo el tiempo. Y esto, en mi opinión, es una forma realmente genial de construir estas características básicas de front end más rápido. Si no tienes un diseño para ello y solo quieres juntar algo y probar esto, puede funcionar realmente bien.

Ahora déjame mostrarte otra técnica que creo que es realmente interesante y útil cuando se trata de obtener garantías más sólidas sobre la corrección. Porque como viste allí, dijo que pasó el lint, pasó cada verificación automática que la IA estaba haciendo, pero aún así no hizo lo correcto. Dijo que hizo el comportamiento, pero no estaba allí por alguna razón. Déjame mostrarte un enfoque alternativo que puede ser realmente útil para obtener más garantías y sentir que no tienes que estar trabajando para la IA, verificando si hizo las cosas bien y que se verifique a sí misma automáticamente. Así que cerremos esto y vayamos a esta VApp que tengo. Así que aquí quiero mostrarte otra técnica que creo que es realmente poderosa y útil.

Así que en esta aplicación nueva, le voy a dar un aviso. Solo voy a decir, escríbeme una función que convierta nuestro downstream a HTML. La mayoría de los LLMs no pueden hacer esto de un solo intento. Y así que voy a mostrarte un truco que uso todo el tiempo que funciona realmente bien para situaciones como esta. Déjame quitar algunas de estas otras cosas del camino aquí por un segundo. Y voy a decir, escribe pruebas primero, luego escribe tu código, y luego itera sobre el código hasta que las pruebas pasen. Así que para hacer esto, necesitas activar el modo YOLO en cursor. Te mostraré eso en un segundo. Pero básicamente lo que podemos hacer es que está escribiendo pruebas para nosotros. Estas se ven bien. Si estas pruebas pasan, eso significa que tenemos algo que hace básicamente lo que estamos buscando. Siempre podemos decirle al LLM que agregue pruebas o agregar manualmente nuestras propias pruebas o usar este enfoque en un conjunto de pruebas que ya existe. Aquí escribió la función de conversión de markdown. Está averiguando mi conjunto de pruebas. Averiguó mi biblioteca de pruebas automáticamente. Y en este momento, tres pruebas fallaron, dos pasaron. Muy común. Muy común que los LLMs no puedan hacer esto de un solo intento.

5. Tweaking Code and Building on Test Suite

Short description:

La IA itera sobre el código hasta que las pruebas pasan, proporcionando garantías de comportamiento correcto. Usar el modelo adecuado, como CLAWD 3.5 SONNET, es importante para obtener resultados óptimos. Construir sobre el conjunto de pruebas permite agregar y verificar nuevo código.

Pero lo que ves que está sucediendo ahora es que ahora está ajustando el código hasta que puede hacer que los tests pasen. Así que ahora lo hizo peor en ese caso, y eso no es poco común. A veces lo que hará el LLM es repensar su enfoque para manejar mejor las pruebas, y a veces más pruebas fallan antes de que mejoren. Creo que eso es bastante común entre los humanos también. Pero continuará ejecutando la prueba.

Bien, ahora estamos de vuelta a tres fallos, dos pasados. Y de nuevo, sin manos. No estoy haciendo nada en este momento. La IA está haciendo todo el trabajo e iterando hasta que esas pruebas pasen. Y esta vez cuando las pruebas pasen, tenemos ciertas garantías de que el comportamiento funciona como se esperaba o como se desea. No tengo que probarlo manualmente cada vez. Así que ahora estamos reducidos a solo dos fallos. Todavía está funcionando. Y esto es, en mi opinión, un verdadero flujo agente.

Encontrarás a muchas personas hoy en día que dicen, oh, tenemos un agente para esto. Consulta nuestra nueva función de agente que hace este agente. Un verdadero agente es cuando un LLM está en un bucle. Hace algo. Evalúa su trabajo. Refina y continúa. Y por cierto, en mi experiencia, es ideal usar CLAWD 3.5 SONNET para esto. Parece que es interesante. Cursor tiene un modelo predeterminado. Ni siquiera sé qué significa predeterminado. Espero que sea CLAWD 3.5 SONNET. CLAWD 3.7 SONNET a veces es demasiado inteligente y comenzará a actualizar las pruebas para que pasen, incluso si realmente no deberían. Cambiará el código de prueba para que pasen de todos modos, lo cual no es mi favorito. Aquí debo haber escrito pruebas particularmente difíciles porque generalmente puedo encontrar que esto puede pasar después de solo un par de iteraciones, lo cual es más común para cursor y CLAWD 3.5 SONNET. Y una cosa genial que también puedes hacer es que puedes construir sobre el conjunto de pruebas para siempre, así que puedes continuar agregando código, agregar pruebas y asegurarte de que cualquier nuevo código pase todas las pruebas. Démosle otro minuto.

6. Monitoring and Guiding Agents

Short description:

Los agentes pueden seguir trabajando hasta que estén seguros de haber terminado. Sin embargo, es importante monitorear e intervenir si se desvían. Tratar las herramientas de IA como compañeros de trabajo y proporcionar orientación puede llevar a mejores resultados.

Como pueden ver, sin embargo, los agentes pueden continuar trabajando hasta que estén seguros de que las cosas han terminado y han pasado. Y luego está hecho. Así que muchas veces estableceré esto, me iré y viviré mi vida, haré lo mío y volveré y lo revisaré, o más probablemente responderé correos electrónicos y cosas así. Pero ten en cuenta una cosa también, todavía tienes que cuidar de estos LLMs. A veces están realmente fuera de curso y solo necesitas intervenir y detenerlos y darles retroalimentación. No es nada raro que tenga que detenerme y decir, espera, estás yendo por un camino equivocado.

Trabajar con un agente en mi experiencia es muy parecido a trabajar con un desarrollador junior o un colega o especialmente un nuevo empleado. Y hay momentos en los que necesitas simplemente darles orientación. Y así, aunque no vimos una ejecución perfecta esta vez, esta es la expectativa que deberías tener. Y a veces querrás seguir utilizando tus habilidades de desarrollo para revisar qué está mal y tal vez comenzar a señalar, hey, aquí hay una diferencia en el enfoque que podrías querer tomar. Generalmente, con las herramientas de IA, encuentro que si puedes tratarlas como un empleado, como alguien con quien estarías trabajando, como un compañero de trabajo, y darles un plan detallado y bien pensado, aquí está cómo sugeriría implementar esto y aquí y donde especialmente donde sea necesario puede ir muy lejos. No te rendirías si tu primer intento no es un resultado perfecto. Le di un aviso bastante vago y simplemente intenta de nuevo cuando quieras.

7. Connecting to Other Tools and AI Prompting

Short description:

Puedes conectar con otras herramientas como Figma y usar el plugin de Builder.io para convertir diseños en código. El editor visual de Builder.io permite la edición de código y se puede solicitar a la IA que cree tablas. La edición visual con código es posible al pasar contexto adicional.

Ahora, lo siguiente que quiero mostrar es lo que prometí hace un momento, que es, esto es todo genial. Podrías hacer muchas cosas interesantes aquí con texto de entrada y salida. Pero, ¿qué pasa si quieres conectar con otra herramienta que no es texto puro, como volver a Figma? Y así, Figma no es texto puro y Cloud y otras herramientas no suelen ser tan buenas para manejar datos JSON en bruto. Así que solo le di los datos JSON en bruto de Figma, no va a convertir eso a código de manera muy efectiva. Así que déjame mostrarte lo que puedes hacer en su lugar.

Así que aquí, en realidad usaré la versión de producción esta vez para que podamos lanzar el plugin de Builder.io. Y aquí hay un diseño que tengo. En realidad, voy a usar un diseño ligeramente diferente para mi demostración. Quiero usar esto porque muestra un diseño que está realmente incompleto. Volveremos a eso en un segundo. Pero aquí, desde el plugin de Builder, solo voy a presionar este botón de exportar a código. Lo que vamos a hacer bajo el capó es usar una combinación de modelos de última generación y modelos autoentrenados para convertir esto en código. Cuando esté listo, voy a lanzar a Builder y luego podemos empezar a llevar esto un paso más allá. Así que una vez que estemos en un terreno de código, que es de lo que pueden hablar los LLMs, aquí es donde podemos empezar a hacer cosas realmente geniales. Así que aquí ahora lo que debería sentirse como una interfaz estilo Figma es el editor visual de Builder.io, pero en realidad esto está editando código.

Así que voy a entrar y agregar un poco de padding aquí. Creo que se ve mejor. Lo ocultaré en móvil. Ahí vamos. No está mal. Pero como viste, no tenemos una tabla aquí. Así que en lugar de tener que crear eso manualmente, lo que podemos hacer es solicitar a la IA que lo haga. Así que voy a saltar aquí y decir, reemplaza esto con una tabla de nuestros usuarios. Déjame asegurarme de que estoy en el espacio correcto. Estoy. Bien. De acuerdo, esto debería funcionar como se esperaba. Así que bajo el capó, porque todo esto es código, ahora podemos editar visualmente esto con código. Puedes pasar contexto adicional.

8. Generating Code and Customizing Functionality

Short description:

La IA puede agregar funcionalidad faltante y generar código basado en elementos de diseño. Se pueden realizar ediciones visuales, como opciones de ordenamiento y hacer que los botones funcionen. Permite la creación rápida de prototipos y pruebas, incluso por personas que no son desarrolladores. La generación de código está disponible para diferentes frameworks con opciones personalizables.

Lo que hice fue darle un ejemplo realmente simple de cómo funcionan nuestras APIs, ni siquiera documentación completa ni nada. Solo dije, Oye, tenemos esta API de usuarios que toma estos parámetros, usa la salida y puede averiguar que es digital junto. Debido a que esto está en código donde viven mis componentes, donde viven mis tokens de diseño, etcétera, y vino de Figma, cuando va a generar algo o agregar funcionalidad a algo, lo hará de una manera que sea correcta para mi propia base de código personal o el estilo que hacemos estas cosas.

Lo genial es que mientras puedo llenar cosas que faltan, agregar cosas basadas en lo que pido, también puede agregar funcionalidad completa. Ahí vamos. Hay una tabla. Lo pausé por un segundo porque estaba tardando un momento en generar, pero aquí puedo entrar y continuar haciendo ediciones visuales. Lo genial es que puedo hacer clic en esos diferentes mosaicos para ordenar por diferentes cosas. Como aquí, estoy navegando y haciendo clic para ordenar por las diferentes opciones. Pero también noté que tenemos estas opciones de ordenar aquí, sin embargo, no están haciendo nada. Así que vamos aquí y escribamos mi prompt favorito, haz que estos botones funcionen. Ups, asegurémonos de tener ambos seleccionados. Bam. Y ahora puede simplemente entrar y agregar la funcionalidad. Podemos llevar nuestro diseño a un prototipo funcional, o una versión básica funcional, aquí en solo un par de segundos, y dejar que la IA haga el trabajo básico. Podemos empezar a prototipar, podemos tener personas que ni siquiera son desarrolladores en el equipo comenzando a probar para asegurarnos de que estas interacciones se sientan bien, o que la funcionalidad se sienta bien, y llegar a un punto donde realmente sentimos que tiene lo básico de la manera que lo necesitamos. Y aquí podemos probarlo. Genial. Eso se ve hermoso. Podemos seguir haciendo esto para llenar nuestros diferentes botones de paginación, podríamos continuar editando visualmente, como tal vez quiero entrar aquí y digamos agregar un poco de espacio, hacer lo que quieras. Este es como el mundo es tu ostra aquí. Y luego, cuando estemos listos, todo lo que tenemos que hacer es ir a la pestaña de desarrollo y podemos obtener código. Podemos obtener código a través de un montón de diferentes frameworks. Así que aquí hay un montón de diferentes frameworks de front-end que podemos usar, estilos, lenguajes. Podríamos hacer que genere automáticamente pruebas, etcétera. Aquí está pensando en un plan y comenzando a implementar. Hermoso. Lo hermoso aquí en el código que genera es que usará mi elección de bibliotecas, etcétera. Tengo algunas instrucciones personalizadas que dicen, oye, me gusta 10-stack query, así que usa eso para todo el enrejado de datos. Está creando hooks, está creando los diferentes componentes.

9. Working with CLI and Code Base Integration

Short description:

Se están reutilizando componentes, importándolos del sistema de diseño y la biblioteca. Generando código en un CLI y pegándolo directamente en la base de código. El comando CLI puede averiguar automáticamente los frameworks, bibliotecas y agregar los archivos requeridos.

Se están reutilizando nuestros componentes cuando es relevante también, y así para importar componentes de nuestro sistema de diseño y biblioteca. Y luego, cuando todo esto haya terminado de generar código, simplemente podemos tomarlo de un CLI y pegar y ejecutarlo en nuestra base de código. Esto podría ahorrarte un montón de tiempo, pero quiero mencionar un truco útil más que creo que ayudará a mucha gente. Porque una cosa que podrías notar es que mientras generamos algo completamente nuevo, a menudo quieres trabajar en actualizaciones.

Y así, déjame mostrarte una última cosa realmente genial antes de que se me acabe el tiempo aquí. Así que volviendo a Figma, cerremos estas cosas y déjame mostrarte otro flujo de trabajo realmente genial. Así que de vuelta en Figma, tomemos esto, y voy a tomar esta página. Tengo un sitio web local que está relacionado. Aquí está mi hermoso blog en localhost 3000, y aquí está mi nueva página de contacto que quiero agregar. Vamos a entrar y ejecutar el plugin de builder, y voy a hacer clic en exportar a código justo como viste antes. Pero en lugar de saltar a la interfaz de usuario de builder, en realidad voy a tomar este comando.

Así que aquí hay un comando CLI. Es muy parecido a copiar de Figma. Y luego puedo simplemente ir a mi builder, a mi, aquí está cursor, tal vez sea código o lo que sea, y simplemente ejecutar el comando CLI. Copiar de Figma, pegar aquí. Y esta vez está directamente dentro de mi base de código. Puede averiguar automáticamente qué frameworks estoy usando. Estoy usando Nixjib, Sass, etc. Dale una instrucción, como agregar esta página de contacto, y déjalo hacer. Solo voy a omitir hacer algo elegante aquí, como agregar contexto. De manera similar a cursor, de manera agente, podemos simplemente averiguar el contexto y agregar los archivos correctos, planearlo y agregar lo que estamos buscando, de la manera que lo queremos.

Así que sabe que estamos usando React y Tailwind aquí. Sabe que estamos usando NixJS AppRouter. En realidad sabe qué bibliotecas usamos también. De hecho, podrás ver en este código, automáticamente va a usar, agregar validación para mí basado en las bibliotecas de validación que estoy usando. Y luego, una vez que haya terminado de generar, podremos simplemente entrar y ver el resultado final justo aquí dentro de nuestro IDE. Si viste rápidamente, viste que estaba usando Zod justo ahí, así que es genial. Estoy usando Zod, y React tomó forma o algo así. Olvidé qué biblioteca, la IA sabe qué biblioteca estamos usando mejor que yo a veces. Y genial.

10. Actualizando Diseños y Desarrollo Paralelo

Short description:

Después de generar el código, se puede usar el comando CLI para actualizar la página de contacto con los nuevos cambios de diseño automáticamente, dejando el resto del código intacto. Esto permite un desarrollo paralelo y una fácil integración de las actualizaciones de diseño. El proceso implica tener un diseño preliminar, implementarlo y luego incorporar cualquier cambio posterior o retroalimentación de los usuarios. La herramienta Builder se puede usar para sincronizar diseños desde el código, permitiendo la creación de prototipos visuales con el equipo y actualizaciones sin problemas a medida que cambian los diseños.

Cuando todo esté hecho, solo puedo pasar por aquí. Puedo ver que tengo un nuevo enlace de contacto en el encabezado, así que lo descubrió automáticamente. Y boom. Hay una nueva página de contacto. Es hermosa. Pero obtener un nuevo diseño es genial, pero ¿qué pasa si el diseño se actualiza? Así que déjame mostrarte lo que podemos hacer para eso.

Voy a salir de aquí. Solo voy a guardar, hacer commit, y vamos a pretender que nuestro diseño se actualizó. Digamos que vamos a eliminar un par de estos campos, y voy a seleccionar un par de cosas y solo vamos a usar algunos resaltados azules ahora. Quizás esto y esto. Vamos a cambiar estos colores de selección a azul primario. Está bien. Un poco más de acentos azules divertidos.

Si quiero incorporar esos cambios de diseño, todo lo que tengo que hacer es presionar Experts Code nuevamente. Cuando termine de desglosarlo, solo voy a agarrar el comando CLI. Lo mismo de nuevo, es muy parecido a copiar y pegar desde Figma. Voy a ejecutar el CLI. Esta vez, solo diré actualizar la página de contacto, actualizar la página de contacto con los estilos actualizados, y luego dejar que funcione.

La parte genial es que descubrirá automáticamente qué debería cambiar. Dejará el resto intacto. Y esto abre algunas oportunidades interesantes que llamamos desarrollo paralelo. Si queremos movernos más rápido como equipo, una cosa que podría ser genial es tener un borrador de un diseño. No tiene que ser perfecto y final. No estamos tratando de hacer un desarrollo en cascada aquí. Y luego ir y comenzar a implementar.

Y si el diseño cambia, está bien. Implementamos el diseño original, el código, agregamos la funcionalidad. Y si el diseño avanzó más, obtuvimos retroalimentación de los usuarios, etc. Podemos simplemente incorporarlo en cualquier momento. Y así aquí podemos echar un vistazo a nuestro diff. Tenemos, genial, tenemos nuestros colores actualizados. Volvamos al índice. Así que puedes ver que estamos actualizando los colores que queríamos, incluidos los estilos de modo oscuro aquí también, así que puede inferir eso automáticamente y no cambiar nada más, así como eliminar nuestros campos de formulario, etc., para coincidir con las actualizaciones de diseño que teníamos. Así que aquí podríamos simplemente hacer commit del diff y seguir adelante. No tiene que ser algo completamente nuevo cada vez. De todos modos, hay un millón de cosas más que podríamos mostrar aquí, pero espero que esto haya sido una visión general útil de trucos interesantes que recomendaría probar. Cursor y los agentes de cursor, no solo para agregar UIs basadas en las especificaciones que tienes, sino activar el modo YOLO, dándole permisos específicos, como que solo se le permite ejecutar pruebas automáticamente y hacer que ejecute pruebas e itere hasta que las pruebas pasen, y luego usar herramientas como Builder para sincronizar diseños desde el código, si no solo una vez. Puedes agregar y prototipar visualmente con todo tu equipo también, y luego bajar o usar un CLI que se conecte y actualice cada vez que cambien los diseños.

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

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.
Menos desorden, más poder: Aprovecha el poder de la plataforma web
C3 Dev Festival 2024C3 Dev Festival 2024
30 min
Menos desorden, más poder: Aprovecha el poder de la plataforma web
This talk focuses on the powerful features of CSS and HTML that can level up developer skills and enhance web UI. Scroll-driven animations, popover API, and anchor positioning are explored as ways to create dynamic effects, improve performance, and increase accessibility. The talk also emphasizes the benefits of building presentations with CSS and HTML, separating logic from styling, and leveraging core platform features. Wishlist features for the web platform and the challenges of pushing updates across browsers are discussed.
Olvida el mal código, concéntrate en el sistema
React Summit US 2023React Summit US 2023
27 min
Olvida el mal código, concéntrate en el sistema
Top ContentPremium
Setting up the system and separating concerns are important in software development. Modular construction and prefab units are a new trend that makes construction quicker and easier. Architectural complexity can lead to a drop in productivity and an increase in defects. Measuring architectural complexity can help identify natural modules in the code. Best practices for avoiding architectural complexity include organizing code by business domain and using prop drilling. Atomic design and organizing a monorepo are recommended approaches for managing architectural complexity.
Confesiones de un Impostor
JSNation 2022JSNation 2022
46 min
Confesiones de un Impostor
Top Content
The Talk discusses imposter syndrome and reframes it as being a professional imposter. It emphasizes the importance of sharing and starting, embracing imposterism, and building inclusively for the web. The speaker shares personal experiences of being an imposter in various technical disciplines and highlights the significance of accessibility. The Talk concludes with the idea of building a collective RPG game to remove excuses for not making things accessible.
Maximize Productivity with AI Agents
Productivity Conf for Devs and Tech LeadersProductivity Conf for Devs and Tech Leaders
25 min
Maximize Productivity with AI Agents
I'm Tejas Kumar, a software developer with over 20 years of experience. AI agents are defined as entities that act on behalf of users or groups to produce specific effects. Agents consist of an orchestration layer, a language model, and tools represented as JSON functions. Langflow is an open-source tool that allows users to build their own AI agents by connecting language models and tools. Composio is a tool that enhances agent capabilities by offering integrations and apps, such as Google Calendar integration. MCP (Model Context Protocol) is a way to share context with models and extend their capabilities. It allows functions to be made available to models over standard input/output or an HTTP endpoint. MCP can be used with GitHub to perform various tasks like searching and fixing code issues. The Talk covered the basics of AI agents, building agents with Langflow and enhancing them with Composio, and using MCP with GitHub. The speaker encouraged audience questions and exploration of these concepts.
Mejorando la Felicidad del Desarrollador con IA
React Summit 2023React Summit 2023
29 min
Mejorando la Felicidad del Desarrollador con IA
GitHub Copilot is an auto-completion tool that provides suggestions based on context. Research has shown that developers using Copilot feel less frustrated, spend less time searching externally, and experience less mental effort on repetitive tasks. Copilot can generate code for various tasks, including adding modals, testing, and refactoring. It is a useful tool for improving productivity and saving time, especially for junior developers and those working in unfamiliar domains. Security concerns have been addressed with optional data sharing and different versions for individuals and businesses.

Workshops on related topic

Cómo Crear una Aplicación Web de Manera (Casi) Autónoma Usando Clean Coder
Productivity Conf for Devs and Tech LeadersProductivity Conf for Devs and Tech Leaders
95 min
Cómo Crear una Aplicación Web de Manera (Casi) Autónoma Usando Clean Coder
Workshop
Grigorij Dudnik
Grigorij Dudnik
Imagina reemplazarte a ti mismo con un programador de IA multi-agente para desarrollar tu aplicación web de producción. Eso es exactamente lo que hicimos en mi startup takzyli.pl. Para lograr esto, diseñamos y utilizamos el Clean Coder - marco de agentes de IA para la escritura autónoma de código (https://github.com/GregorD1A1/Clean-Coder-AI), que es un proyecto de código abierto, con suerte. Si funcionó para nosotros, ¿por qué no debería funcionar para ti?En esta masterclass, te mostraré cómo crear una aplicación web completa de manera (casi) autónoma y reducir drásticamente el tiempo que tú o tus empleados pasan escribiendo código.
Test, Code, Repeat: Dominando el Desarrollo Asistido por AI
Productivity Conf for Devs and Tech LeadersProductivity Conf for Devs and Tech Leaders
53 min
Test, Code, Repeat: Dominando el Desarrollo Asistido por AI
Workshop
Marco Pierobon
Marco Pierobon
"Test, Code, Repeat: Dominando el Desarrollo Asistido por AI" introduce a los desarrolladores a una forma transformadora de codificación con AI como un socio colaborativo. Esta masterclass se centra en cómo los flujos de trabajo iterativos, como la técnica de emparejamiento ping pong, permiten una interacción mejorada entre la creatividad humana y la eficiencia de AI.