AI workshop

workshop.md

Taller Desarrollo Web Asistido por IA

Este taller es una experiencia práctica diseñada para mostrar cómo los flujos modernos de desarrollo web pueden acelerarse con IA y estándares emergentes como MCP (Model Context Protocol).

En solo una hora, los asistentes crearán una landing page guiados por herramientas de IA, conectarán Figma con ChatGPT, depurarán la aplicación usando Chrome DevTools vía MCP y, finalmente, automatizarán pruebas end-to-end con Playwright MCP.

El enfoque es 100% hands-on: cada parte del taller es un reto que replica procesos del mundo real, permitiéndole a los asistentes aprender nuevas habilidades mientras construyen algo funcional desde cero.

La meta es que salgan con un workflow moderno, replicable y adaptable a sus propios proyectos.

---

🎯 Objetivos del taller

• Demostrar cómo la IA puede asistir en el desarrollo web sin reemplazar la lógica profesional de un desarrollador.
• Acelerar procesos clave del frontend: diseño → código → depuración → pruebas.
• Usar el MCP de Figma para transformar diseños en componentes y layouts reales.
• Integrar Chrome DevTools MCP para inspeccionar, corregir y optimizar una aplicación directamente desde la IA.
• Automatizar pruebas E2E con Playwright MCP, usando prompts como medio de creación.
• Enseñar a los asistentes a crear sus propios flujos híbridos entre herramientas de IA y prácticas modernas de ingeniería.
• Fomentar una mentalidad experimental: iterar, mejorar y refinar con ayuda de IA y observabilidad guiada.

RETO 1 — Diseño → Código usando IA + Figma MCP

Este reto te guía para convertir el diseño del Figma en una landing page real usando IA como copiloto y el Figma MCP como herramienta obligatoria para extraer diseño, contenido, estructura y propiedades visuales de forma precisa.

Objetivo del Reto

Usar el Figma MCP para transformar un diseño real en una landing page en React + Tailwind, generando los componentes a partir de información extraída automáticamente del archivo.

Diseño Base del Reto

Todos los pasos de este reto dependen de este Figma:

Figma:

https://www.figma.com/design/bupnrDo1nH4WAayCF5ahm3/Personal-Portfolio-Website-Template--Community-?node-id=0-1&p=f&m=dev

Debes conectarlo vía Figma MCP antes de empezar.

Qué vas a lograr

• Conectar el diseño real vía Figma MCP
• Extraer estructura, textos y estilos automáticamente
• Generar los componentes base desde el Figma
• Reconstruir la landing completa con ayuda de IA
• Iterar y afinar estilos desde prompts

1.1 Crear el proyecto base

Acción

Crea un proyecto usando Next.js y la estructura minima del proyecto.

Prompt sugerido

• crea en el folder /documents/dev/portafolio un proyecto con next.js

• Genera la estructura mínima del proyecto: - /components - /styles o tailwind.config - Página principal con el layout vacío No agregues estilos todavía.

Qué deberías obtener

• Proyecto listo para recibir componentes

• Layout inicial sin contenido práctico

1.2 Conectar Figma MCP y explorar el archivo

Acción

Activa el Figma MCP desde tu Agente AI o herramienta de IA.

Conecta el archivo usando su URL.

Prompt sugerido

Conéctate al archivo Figma usando el MCP. Aquí está el link: [Pega el link]. Explora el nodo principal y dame una lista de las secciones de la interfaz.

Qué deberías obtener

• Lista precisa de capas, frames y secciones

• Identificación de elementos clave del diseño

• Nombres reales de los nodos (Hero, Header, Episodes, Footer)

Tips

• Si la IA responde algo genérico, añade:

Usa estrictamente el MCP, no interpretes el diseño. Quiero los nodos exactos.

• Si Figma MCP da error, prueba con el ID del archivo en vez del URL.

1.3 Extraer estructura HTML desde el diseño real

Acción

Pide al MCP información estructural de cada zona del diseño.

Prompt sugerido

Usa el Figma MCP para inspeccionar el frame principal. Devuélveme una estructura HTML aproximada basada en la jerarquía del Figma. Quiero una traducción literal de la estructura del diseño.

Qué deberías obtener

• Esqueleto HTML representando el diseño

• Divisiones claras por secciones

• Textos y jerarquías respetadas

Tips

• Evita CSS por el momento.

• Si hay demasiados divs:

Simplifica la estructura sin alterar la jerarquía lógica.

1.4 Generar componentes usando Figma MCP

Acción

Usa el Figma MCP para extraer un componente específico, por ejemplo el Header.

Prompt sugerido

Usa el Figma MCP para inspeccionar el nodo del Header. Dame: - Texto - Espaciados - Jerarquía visual - Layout general Con esa información, genera el componente <Header /> en React + Tailwind.

Qué deberías obtener

• Componente React fiel al Figma

• Tipografías y tamaños aproximados

• Estructura clara y simple

Tips

• Si el código se ve muy complejo, pide: haz una versión simplificada

1.5 Generar secciones completas (Hero & Footer)

Acción

Repetir el proceso para cada sección del diseño.

Prompt sugerido

Inspecciona el nodo [nombre exacto desde MCP] con el Figma MCP. Devuélveme su estructura y genera el componente en Tailwind.

Qué deberías obtener

• Hero con textos, botones o imágenes

• Footer con estructura del diseño

1.6 Montar la landing final

Acción

Unir los componentes en la página principal.

Prompt sugerido

Enséñame cómo debería quedar mi archivo page.jsx importando los componentes Header, Hero y Footer.

Qué deberías obtener

• Página funcional

• Componentes importados correctamente

• Layout cercano al diseño final

1.7 Afinar estilos desde el Figma MCP

Acción

Pide ajustes usando datos reales del Figma.

Prompt sugerido

Usa el Figma MCP para inspeccionar colores, tipografías y espaciados del diseño. Dame la paleta y el estilo tipográfico. Aplica esos valores a mis componentes.

Qué deberías obtener

• Colores sincronizados

• Espaciados consistentes

• Tipografías acorde al diseño original

Tips

• Si algo se ve desbalanceado en la UI: mantén la esencia, pero hazlo más limpio y moderno.

🎉 Resultado final

Una landing page completa generada en menos de 30 minutos usando:

• Figma MCP para extracción automática

• IA para generar y ensamblar componentes

• Tailwind para la implementación rápida

• React/Next para estructura

RETO 2 — Automatizar Código y Flujos usando IA + Figma MCP

Este reto enseña a los asistentes cómo usar IA para generar, refactorizar y automatizar código repetitivo dentro del mismo proyecto de la landing.

Aquí el objetivo es acelerar tareas típicas de frontend:

• generar datos
• crear componentes dinámicos
• refactorizar
• mapear componentes desde datos
• documentar
• probar partes del sistema Todo usando prompts y la información del diseño extraída mediante Figma MCP.

Objetivo del Reto

A partir del diseño ya implementado en el Reto 1, los asistentes deben convertir elementos estáticos en componentes dinámicos, automatizar generación de contenido y refactorizar partes del código con apoyo directo de la IA.

Qué vas a lograr

• Convertir secciones creadas manualmente en UI dinámica

• Generar datos y contenido desde IA

• Crear componentes escalables y reutilizables

• Utilizar el Figma MCP para verificar dimensiones, props y reutilización

• Usar IA para refactorizar código de forma segura

2.1 Crear un componente dinámico basado en datos

Queremos desarrolar la sección “Projects” con datos reales.

Acción

Extrae los elementos de una tarjeta de proyecto usando Figma MCP.

Prompt sugerido

Usa el Figma MCP para inspeccionar el nodo del componente de Projects. Dame: - Los textos - Estructura - Tamaños aproximados - Elementos repetidos Con eso genera un componente <ProjectCard /> que reciba props.

Qué deberías obtener

• Componente parametrizable

• Props claras

• Layout consistente con el Figma

Tips

• Si la estructura es muy compleja: Reduce la cantidad de contenedores sin romper la UI.

2.2 Generar contenido ficticio automáticamente

Acción

Pide a la IA crear un JSON consistente con el diseño.

Prompt sugerido

Genera un arreglo JSON con 6 projectos con: - título - descripción corta - imageUrl - imageAlt - imagePosition No inventes campos que el diseño no muestre en Figma.

Qué deberías obtener

• Datos listos para mapear

• Coherencia con el diseño original del Figma

• Tipos claros si usas TypeScript

2.3 Mapear el contenido en la UI

Acción

Integra el JSON con el componente creado.

Prompt sugerido

Muéstrame cómo debería verse mi componente Projects.tsx para mapear el arreglo de proyectos y renderizar <ProjectCard /> por cada elemento.

Qué deberías obtener

• Mapeo funcional

• Layout responsivo si el diseño lo permite

• Código limpio

2.4 Refactorización asistida con IA

El objetivo: mostrar cómo la IA mejora tu código sin perder control.

Acción

Dale tu archivo actual Projects.tsx.

Prompt sugerido

Aquí está mi componente actual Projects.tsx. Refactorízalo con estas reglas: - Código más simple - Mejor legibilidad - Uso consistente de Tailwind - Sin alterar diseño ni lógica

Qué deberías obtener

• Código más limpio

• Menos duplicación

• Mejor estructura de componentes

Tips

• Si la IA rompe algo, copia el error y pide corrección explícita.

2.5 Crear variantes del diseño usando Figma MCP

Queremos automatizar la generación de “estados alternos”.

Acción

Usa el MCP para revisar si el diseño tiene variantes.

Prompt sugerido

Usa el Figma MCP para ver si el componente ProjectCard tiene variantes. Si no las tiene, inspírate en los estilos del Figma y genera: - Variante compacta - Variante horizontal Dame ambos componentes en React + Tailwind.

Qué deberías obtener

• 2 variantes nuevas

• Código reutilizando gran parte del original

• Props claramente definidas

2.6 agregar el component a la landing page*

Acción

agregar el component Projects a la landing page.

Prompt sugerido

Agrega el component projects a la landing page sin modificar sus estilos

Qué deberías obtener

• landing completa

🎉 Resultado final del Reto 2

Al terminar, tendrás:

• Una landing page REAL

• Componentes dinámicos

• Datos generados automáticamente

• Código refactorizado con IA

• Variantes del UI

• Documentación y tests básicos

RETO 3 — Depura, corrige y optimiza tu landing con el MCP de Chrome DevTools

Ahora que ya tienes tu primera versión de la landing construida con ayuda de IA y del MCP de Figma, es hora de llevarla al nivel profesional: depurarla, corregir estilos y medir su rendimiento usando el MCP de Chrome DevTools.

Este reto replica el flujo real de un frontend moderno:

IA para construir — DevTools para perfeccionar — MCP para acelerar.

Objetivo del reto

Usar el MCP de Chrome DevTools para:

• Identificar errores visuales y estructurales de tu landing.

• Diagnosticar problemas de rendimiento.

• Ajustar estilos, layout y accesibilidad.

• Obtener sugerencias automáticas y ejecutar comandos desde el Agente AI.

Qué vas a hacer

1. Abrir tu landing en Chrome.

2. Conectar el Agente AI al Chrome DevTools MCP.

3. Pedir análisis, sugerencias, correcciones y acciones directas.

4. Aplicar los cambios sugeridos por IA usando DevTools y tu editor.

5. Hacer un mini-reporte de mejoras.

3.1 Instala y activa el MCP

Repositorio:

https://github.com/ChromeDevTools/chrome-devtools-mcp

Instala según tu sistema.

Cuando esté listo:

• Abre Chrome

• Abre Developer Tools (Cmd + Option + I)

• El Agente AI mostrará que detecta el MCP.

3.2 Carga tu landing en Chrome

Usa tu servidor local:

npm run dev

O cualquier extensión tipo Live Server.

3.3 Conéctate con el Agente AI

Pídele algo como:

Conéctate al MCP de Chrome DevTools y analiza mi sitio abierto en esta pestaña.

El Agente AI podrá:

• Inspeccionar DOM

• Leer CSS aplicado

• Usar Performance Panel

• Ver estadísticas

• Revisar accesibilidad

• Detectar nodos innecesarios

• Sugerir refactors

3.4 Pide un análisis completo de UI y estructura

Ejemplos listos:

• Detecta todos los elementos que no coinciden con el diseño del Figma.

• Identifica inconsistencias de spacing y alineación.

• Encuentra reglas CSS redundantes o no usadas.

• Evalúa CLS, LCP y FID de esta landing.

3.5 Acepta y aplica sugerencias

El workflow ideal:

1. El Agente AI detecta errores.

2. Te propone una lista de fixes.

3. Te genera código corregido.

4. Usas DevTools para previsualizar.

5. Pasas los cambios reales a tu proyecto.

3.6 Corre un test rápido de performance

Pídele al MCP:

Ejecuta una auditoría rápida de rendimiento y dame un top 5 de mejoras.

El MCP puede mostrar:

• Reflows innecesarios

• Imágenes pesadas

• CSS que bloquea el render

• JS costoso

• Elementos con tiempo de carga crítico

🎉 Resultado final del Reto 3

Al terminar, comparte:

a) Antes / Después visual

b) Lista de mejoras detectadas por IA

c) Código corregido

d) Qué cambiarías si tuvieras más tiempo (máximo 3 puntos)

⭐ Bonus opcional (si queda tiempo)

• Pídele a la IA generar un modo oscuro automáticamente.

• Haz una auditoría de accesibilidad completa.

• Identifica métricas de gas cost (CSS/JS inflation).

RETO 4 — Testing E2E con Playwright MCP

Usa el Playwright MCP para que la IA genere y ejecute pruebas E2E en tu landing. El objetivo es que el Agente AI controle un navegador a través de MCP, realice interacciones basadas en el diseño de Figma y te ayude a validar flujos clave.

Objetivo del reto

• Automatizar pruebas de la landing creada (desde retos anteriores) con prompts.

• Validar navegación, botones, estructura y contenido.

• Capturar snapshots de accesibilidad en vez de usar capturas de pantalla.

• Generar código Playwright válido a partir de la IA y luego ejecutarlo.

Qué vas a hacer

1. Instalar y configurar el MCP de Playwright.

2. Conectar el Agente AI al servidor MCP.

3. Escribir prompts para que la IA genere pruebas: clicks, validaciones, navegación.

4. Ejecutar los tests generados.

5. Analizar los resultados y refinar las pruebas si hace falta.

4.1 Instalar y levantar el servidor Playwright MCP

Acción Configura tu cliente MCP para apuntar al servidor de Playwright:

Este es el setup estándar. GitHub

Arranca el servidor MCP:

npx @playwright/mcp@latest

Qué deberías obtener

• Servidor Playwright MCP corriendo localmente

• El Agente AI (u otra IA) puede interactuar con él

Tips

• Usa modo persistente si quieres mantener sesión entre runs. GitHub

• Si vas a probar cosas simples, no necesitas modo aislado.

4.2 Abre tu landing en un navegador controlado por MCP

Acción Con tu servidor MCP activo, abre una pestaña controlada por él:

• Asegúrate de que la landing está corriendo.

npm run dev

• Usa tu cliente MCP para decir: “abrir url http://localhost:3000” (o tu puerto).

Qué deberías obtener

• Una pestaña accesible por el servidor MCP

• Posibilidad de inspeccionar la página con los comandos de Playwright MCP

4.3 Generar pruebas E2E con prompts

Acción Usa tu IA conectada al MCP para generar flujos de prueba. Por ejemplo:

Crea una prueba E2E con Playwright que: 1. Abra la página principal. 2. Verifique que el header tiene el logo y la nav. 3. Haga scroll al área de projectos. 4. Compruebe que al menos una tarjeta de proyecto tiene título y descripción. 5. Verifique que el footer está presente con texto esperado. Devuélveme el código Playwright en Typescript.

Qué deberías obtener

• Código de prueba .spec.ts válido

• Uso de comandos del MCP como browser_click, browser_snapshot, browser_wait_for GitHub

• Snapshots de accesibilidad (árbol de accesibilidad)

Tips

• Si es muy genérico, pide “localizadores más robustos” o “esperas explícitas”.

• Solicita que la IA genere pruebas en varias resoluciones si quieres test responsive.

4.4 Ejecutar las pruebas generadas

Acción Copia el código generado en tu proyecto de Playwright (o crea uno nuevo). Configura tu playwright.config.ts si lo necesitas.

Corre los tests:

npx playwright test

Qué deberías obtener

• Ejecución de pruebas que interactúan con tu landing

• Reportes de éxito/fallo

• Capturas de accesibilidad o snapshots según lo que definiste

4.5 Inspección y refinamiento con MCP

Acción Pídele a la IA que revise los resultados, verifique posibles fallos y proponga correcciones:

Revisa el resultado de las pruebas. Hay un fallo en la verificación del footer. Detecta por qué no lo encuentra (usando su snapshot) y genera un parche Playwright para corregir el selector o la lógica.

Qué deberías obtener

• Diagnóstico del error basado en el árbol de accesibilidad o estructura MCP

• Código actualizado para la prueba

• Mejoras a los selectores para hacerlo más robusto

🎉 Entrega final del Reto 4

Al finalizar, debes presentar:

1. El código de tus tests E2E generados por IA.

2. Capturas (o logs) de ejecución con éxito o errores.

3. Análisis de lo que la IA corrigió o mejoró.

4. Ideas adicionales de pruebas que agregarías si tuvieras más tiempo (por ejemplo, pruebas de estado, errores, UI responsiva).