00:00:00El diseño con IA ha ido mejorando con cada nueva herramienta y actualización de modelo,
00:00:04pero un buen diseño no surge de depender de una sola herramienta y esperar que tu app se vea genial.
00:00:09Siempre es la combinación de herramientas y recursos lo que eleva los diseños,
00:00:12pero lo más importante es utilizar la herramienta adecuada para el propósito correcto.
00:00:16Stitch, la herramienta de diseño de IA de Google, acaba de recibir una actualización increíble que facilita mucho el diseño de UI.
00:00:21Además, Vercel lanzó recientemente algo que ha superado a la extensión de Chrome de Claude
00:00:26y se ha convertido en mi herramienta favorita para pruebas de navegador.
00:00:29Hoy tenemos mucho de qué hablar porque no esperaba que esta
00:00:32combinación ofreciera un diseño tan sólido.
00:00:34Google Stitch ya está disponible como un MCP para conectar el agente de IA,
00:00:39permitiéndole crear y gestionar proyectos, así como generar diseños a través del agente.
00:00:43Con esta actualización, no tuve que darle prompts detallados a Stitch yo mismo; dejé que Claude lo hiciera
00:00:48por mí. Ofrece múltiples funciones, como la gestión de proyectos y la capacidad de crear nuevos
00:00:53o recuperar tus proyectos activos. Puede gestionar proyectos mediante pantallas de lista
00:00:57y obteniendo proyectos y pantallas. También permite al agente crear nuevos diseños desde un prompt de texto.
00:01:02El proceso de instalación se explica paso a paso en su documentación.
00:01:06Requiere instalar el SDK de Google Cloud usando curl, pero como uso Mac,
00:01:11lo instalé con brew y dejé que descargara el CLI de Google Cloud.
00:01:14Es necesario iniciar sesión dos veces, una como usuario y otra como aplicación, porque hay que
00:01:19conectarlo a un proyecto en Google Cloud para habilitar la API de Stitch dentro de ese proyecto,
00:01:24ya que utiliza los recursos de ese proyecto para crear los diseños.
00:01:27Una vez completado todo el proceso, puedes conectar Stitch a cualquier editor.
00:01:31Como utilicé Claude Code, lo configuré ahí y todas las herramientas quedaron listas para usarse.
00:01:35Ahora, alguien ha simplificado este largo proceso de configuración creando un MCP de Stitch
00:01:41que se encarga de todo. Desde instalar Google Cloud hasta la configuración del proyecto,
00:01:45lo gestiona de forma automática. Aunque es extraoficial e independiente, funciona de maravilla por ahora.
00:01:50Sin importar lo que estemos construyendo,
00:01:54la planificación antes de la implementación es esencial. Estaba trabajando en una app de entrevistas técnicas
00:01:59que no solo cubre la parte técnica, sino también otros tipos de entrevistas para el sector tecnológico.
00:02:03Durante el video, encontré varios problemas en la forma en que opera el MCP de Stitch
00:02:08y en cómo debería utilizarse mejor para mi proceso de diseño.
00:02:13He incluido todas esas reglas en un archivo Claude.md junto con el código fuente en
00:02:18AI Labs Pro. Para quienes no lo sepan, es nuestra comunidad recién lanzada donde reunimos
00:02:23todos los recursos de este y otros videos: prompts,
00:02:28comandos reutilizables, habilidades que creamos y mucho más. Si valoras
00:02:33lo que hacemos y quieres apoyar al canal, esta es la mejor forma. Enlaces en la descripción.
00:02:38Prefiero planificar mis apps con el modo “plan” de Claude Code porque itera sobre cada aspecto de la
00:02:43idea genérica que le doy y escribe un documento detallado, pero puedes usar el IDE que prefieras.
00:02:48Le di mi idea a Claude Code en modo planificación y le pedí que creara una guía de UI,
00:02:53asegurándome de que el diseño no pareciera el típico estilo genérico de IA.
00:02:58Aunque fue un proceso laborioso, completé toda la fase de planificación. Es
00:03:03fundamental leer el plan a fondo; incluso tuve que ajustarlo a mi gusto
00:03:09haciendo muchos cambios. Seguí refinándolo hasta quedar totalmente satisfecho
00:03:14y, al final, tuve el plan exactamente como quería. Con el plan de diseño finalizado en Claude,
00:03:19llegó el momento de implementarlo. Sinceramente, prefiero las capacidades de diseño de Gemini
00:03:24sobre los modelos de Claude. Así que le pedí a Claude que tomara el plan generado,
00:03:29creara un diseño exacto iniciando un nuevo proyecto con el MCP de Stitch. Utilizó la herramienta MCP
00:03:35para crear el proyecto y empezó a generar las secciones. Identificó el proyecto con un
00:03:40ID y envió un prompt detallado a Stitch, que recibió la instrucción y comenzó a generar
00:03:45las pantallas. Usó Gemini 3 Flash para la primera sección. Algo que no me gustó
00:03:50fue que envió prompts para cada sección de la landing page por separado, en lugar de crear un
00:03:55diseño continuo como se hace normalmente en la web. Esto puede dar problemas al implementarlas juntas.
00:04:00Así que le pedí a Claude que creara un diseño de página completa en lugar de componentes individuales.
00:04:05Claude generó entonces un prompt muy detallado que Stitch usó para
00:04:10crear toda la landing page manteniendo intactas todas las ideas del enfoque anterior.
00:04:15Del diseño, me encantó cómo usó referencias como comentarios y comandos de terminal
00:04:20para darle un toque más cercano a los desarrolladores.
00:04:25Usé la función de vista previa de Stitch para ver cómo lucía la UI en distintas plataformas
00:04:30y los efectos hover funcionaban suavemente. El diseño
00:04:34era responsivo y se veía bien tanto en móvil como en escritorio. Una vez satisfecho con el diseño
00:04:40de Stitch, quise moverlo a mi proyecto de Next.js que estaba construyendo con Claude Code.
00:04:45Le pedí a Claude que usara el MCP de Stitch para obtener el código de la landing page completa
00:04:51e implementarlo en el nuevo proyecto de Next.js en el que estaba trabajando.
00:04:56Usó la herramienta “get screen” para traer las pantallas. Esto devolvió enlaces de descarga de código,
00:05:01así que Claude usó comandos curl en esos enlaces para extraerlo. Con el HTML en mano,
00:05:06fue fácil integrarlo en Next.js. Empezó a incorporar el diseño,
00:05:11pero inicialmente volcó todo en el archivo principal page.tsx, sin seguir
00:05:17la estructura de componentes recomendada para aplicaciones basadas en React.
00:05:22Por ahora, ejecuté el servidor de desarrollo para ver el resultado. La interfaz implementada
00:05:26era casi idéntica a la de Stitch, salvo por la posición del texto en la sección hero.
00:05:31Tenía todos los efectos hover, animaciones en bento grids y el efecto parallax en el fondo.
00:05:36Para solucionar el desorden del código, le pedí a Claude una estructura
00:05:41de componentes adecuada para mejorar la modularidad. Refactorizó y reorganizó el código
00:05:46en un conjunto limpio de componentes y páginas, facilitando la navegación. Gracias a
00:05:51Claude Code y Stitch, creé una aplicación completa con una estética de terminal y vibra de desarrollador.
00:05:57Sin embargo, aún tenía problemas de UI. Por ejemplo, el panel de código
00:06:02debería ser editable, ya que ahí es donde los usuarios escribirán durante su entrevista.
00:06:08Además, la pregunta debería aparecer arriba; su ubicación actual empeora la experiencia de uso.
00:06:14Para probar la aplicación, usé Agent Browser de Vercel. Es una herramienta de CLI para agentes de IA
00:06:19basada en Rust y Node.js, lo que la hace mucho más rápida que las herramientas tradicionales.
00:06:24La instalación es sencilla: solo ejecutas el comando y se instala de forma global.
00:06:29Por ahora se limita a navegadores basados en Chromium y no está disponible en Firefox ni Safari.
00:06:34Agent Browser ofrece mejores funciones que la extensión de Claude, Playwright o Puppeteer.
00:06:40Esto se debe a que las extensiones suelen ejecutar un navegador completo,
00:06:44tomar capturas, mapear píxeles y luego navegar. En cambio,
00:06:50Agent Browser es una herramienta de CLI que funciona con comandos bash y usa snapshots.
00:06:55Básicamente, un snapshot es un árbol de accesibilidad de la página con selectores
00:07:00para identificar componentes. El agente usa estos selectores para navegar con eficiencia.
00:07:05No comparte la sesión con tu navegador actual, se ejecuta por separado, por lo que no podrá
00:07:10realizar acciones que requieran tus sesiones activas, a diferencia de la extensión de Claude,
00:07:14que sí corre dentro de tu navegador y puede actuar en tu nombre.
00:07:19Si quieres ver los comandos disponibles, puedes revisar su repo de GitHub con la lista detallada.
00:07:24Allí muestran cómo navegar, usar selectores, simular el ratón, gestionar cookies y monitorear la red.
00:07:30Para mi app, añadí un archivo Claude.md e instruí a la IA para que usara
00:07:35las herramientas de Agent Browser en todas las pruebas. También le pedí usar
00:07:40el comando de ayuda si tenía dudas. Estas reglas y el flujo de trabajo están en AI Labs Pro.
00:07:45Aunque es una herramienta de automatización headless, podemos activarla en modo “headed”
00:07:50para que muestre la ventana del navegador y verla trabajar en tiempo real.
00:07:55Le pedí a Claude que probara la UI en modo visible. Primero usó el comando de ayuda
00:07:59para ver las opciones y luego abrió el navegador.
00:08:05Utilizó un enfoque similar al de Claude Browser Use: tomar un snapshot de la página completa
00:08:09en lugar de capturas por secciones, lo cual aceleró significativamente el proceso
00:08:14manteniendo la misma precisión.
00:08:19El agente navegó por toda la app probando múltiples funciones y revisando el diseño visual.
00:08:24Completó todo el testeo en solo cuatro minutos, mientras que otras herramientas
00:08:29habrían tardado mucho más al no depender de árboles de accesibilidad.
00:08:34También detectó que el editor debía ser editable e implementó el arreglo de inmediato.
00:08:39Luego lo probó tomando un snapshot, localizando el selector del editor y usando
00:08:43las funciones de clic y escritura para editar código y verificar que funcionara correctamente.
00:08:48Eso nos lleva al final de este video. Si quieres apoyar al canal
00:08:53y ayudarnos a seguir creando contenido como este, puedes unirte a AI Labs Pro.
00:08:57Como siempre, gracias por vernos y nos vemos en el próximo.
00:09:02thank you for watching and I'll see you in the next one.