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
React Summit 2025
June 13 - 17, 2025
Amsterdam & Online
The biggest React conference worldwide
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit 2025
React Summit 2025
June 13 - 17, 2025. Amsterdam & 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.

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

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.