00:00:00Tus agentes de IA se han vuelto muy buenos diseñando.
00:00:02Ya no presentan esos problemas donde los sitios que creaban tenían elementos rotos.
00:00:06Pero como todos los modelos han sido entrenados con los mismos datos, los diseños siempre son
00:00:10demasiado similares y genéricos.
00:00:11Incluso los modelos de Claude necesitan un prompt especial para no cometer este error.
00:00:15Google Stitch es una herramienta creada específicamente para el diseño, y puede integrarse directamente
00:00:19en tu flujo de trabajo de Claude Code.
00:00:21Así que en este video, veremos 4 formas de usar Stitch con Claude Code para asegurar
00:00:26que tus aplicaciones no terminen pareciéndose a cualquier otro sitio generado por IA.
00:00:30La nueva actualización de Stitch utiliza un sistema de diseño para construir tu interfaz,
00:00:34y estos sistemas se basan en todas las características que forman la guía de UI para sitios web,
00:00:38que incluye campos como colores, temas, fuentes y más.
00:00:41Estas características se definen mediante el uso del archivo design.md.
00:00:45Este archivo es también lo que hace que el diseño sea transferible de un agente a otro.
00:00:49Puedes transferir este archivo design.md a cualquier agente con el que implementes el diseño,
00:00:54y este logrará que todo el estilo y tema coincidan perfectamente.
00:00:56La razón por la que esto funciona es que el archivo está especializado para agentes.
00:00:59Contiene un lenguaje más específico para que puedan captar la intención del diseño con facilidad.
00:01:04También visualiza todos los sistemas de diseño en pantalla, así que no tienes que
00:01:08interpretar el estilo solo mediante texto.
00:01:10Puedes hacerte una idea de cómo se verá la app una vez implementada al ver
00:01:14los colores y las fuentes uno al lado del otro.
00:01:16Siempre que construyes algo con Stitch, el primer paso que da es crear un archivo design.md
00:01:21y un sistema de diseño.
00:01:22Incluso si no se lo pides explícitamente en tu prompt.
00:01:25Una vez fijado el sistema de diseño, cada vez que crea un sitio, es capaz de asegurar
00:01:30la consistencia a través de múltiples páginas y regeneraciones.
00:01:32Esto soluciona el mayor problema que teníamos al trabajar con Stitch, ya que antes
00:01:36no podía mantener la consistencia del diseño tan bien como ahora.
00:01:39Pero en lugar de confiar en el sistema de diseño que Stitch crea por sí solo,
00:01:43tú también puedes crear tus propios sistemas de diseño.
00:01:45Puedes configurar el tema según tus necesidades o, si tienes un archivo de diseño, solo
00:01:49tienes que subirlo; Stitch lo incorporará automáticamente como un sistema de diseño
00:01:53y lo visualizará por ti.
00:01:54Lo importante es asegurarse de que cualquier design.md que utilices
00:01:58siga una estructura adecuada.
00:01:59Esta estructura está optimizada para agentes, específicamente para Stitch, y les ayuda
00:02:04a entender las intenciones de manera eficiente.
00:02:06A menudo intercambiamos ideas sobre nuestras apps con Claude u otros agentes.
00:02:09Así que, si quieres crear diseños a partir de esas sesiones de lluvia de ideas en Stitch,
00:02:13puedes llevar el estilo de diseño a Stitch mediante un archivo design.md.
00:02:17Puedes darle a Claude la estructura para el archivo de diseño que puedes obtener
00:02:21del repositorio oficial de habilidades de Google que contiene todo lo relacionado con Stitch.
00:02:25En los ejemplos puedes obtener una plantilla de archivo de diseño optimizada para Stitch.
00:02:29Así que, sin importar qué agente uses, puedes proporcionarle el estilo del sitio que quieres
00:02:33junto con la plantilla, para que genere el design.md basándose en ella
00:02:38siguiendo correctamente la guía de estilo.
00:02:39Una vez que tu agente genere el archivo design.md detallado, llévalo a Stitch y simplemente
00:02:44pégalo en la sección de design.md al crear un nuevo sistema de diseño.
00:02:48En cuanto presionas "Guardar diseño", se crea una visualización del mismo.
00:02:52Una vez visualizado, puedes usarlo y pedirle a Stitch que implemente la UI
00:02:56usando el sistema de diseño recién creado como base.
00:02:59Stitch implementa el diseño reflejando el sistema que creaste,
00:03:03capturando exactamente el estilo del design.md.
00:03:05Usando estos sistemas de diseño, puedes crear de forma iterativa tantas páginas como quieras,
00:03:10y cada una seguirá el mismo estilo visual.
00:03:12Si ya has creado proyectos en Stitch y quieres extraer su design.md,
00:03:16puedes hacerlo utilizando las habilidades creadas por Google.
00:03:19En las habilidades que han desarrollado, la de design.md convierte proyectos de Stitch
00:03:25en un archivo design.md siguiendo la plantilla optimizada para el flujo de Stitch.
00:03:28Además, si te gusta nuestro contenido, considera presionar el botón de "hype",
00:03:32ya que nos ayuda a crear más videos así y llegar a más personas.
00:03:35Las capacidades de Stitch son impresionantes, pero aún hay lagunas al implementar
00:03:39una buena UX para el nicho específico de tu sitio web.
00:03:42No siempre es preferible diseñar desde cero.
00:03:44Los sitios web existentes se basan en patrones que ya funcionan para su nicho específico,
00:03:48así que imitar sus patrones te ayuda a crear un sitio que realmente funcione
00:03:53para tus usuarios.
00:03:54Antes, al construir con IA, solíamos proporcionar una captura de pantalla y pedirle
00:03:58a la herramienta de diseño que copiara ese diseño.
00:04:00Intentaba replicar el diseño, los componentes y todo tal cual estaba.
00:04:04Pero la nueva actualización de Stitch ha cambiado eso.
00:04:06Con la función de rediseño de Stitch, sigues dándole una captura de pantalla,
00:04:10pero ahora no la copia.
00:04:11La utiliza como una guía de estilo.
00:04:12Extrae los patrones, la ubicación de componentes y el lenguaje visual de esa referencia
00:04:17y los aplica a tu propio sitio web.
00:04:18Así que básicamente construyes algo original sobre un patrón ya existente.
00:04:22Para usar la función de rediseño, necesitas una captura de pantalla.
00:04:25Pero capturar sección por sección es una forma muy tediosa de hacerlo.
00:04:28En su lugar, usa cualquier extensión como GoFullPage para una captura de página completa
00:04:33y así proporcionar la referencia de estilo de una sola vez.
00:04:35Cuando le das la captura del sitio cuyo diseño quieres replicar, Stitch la usa
00:04:39como referencia de estilo y ubicación de componentes para crear una interfaz similar
00:04:44a la de la captura.
00:04:45Utiliza las capacidades de generación de imágenes de Nano Banana para crear imágenes
00:04:50en diferentes secciones que coincidan con el estilo de la UI.
00:04:51También hay otras formas de copiar el estilo de otro sitio web.
00:04:54Puedes imitar el estilo de todo un sitio copiando el enlace y luego, desde los sistemas de diseño,
00:04:59puedes importar el diseño de cualquier sitio como un archivo design.md.
00:05:03Solo proporciona el enlace e importará el sistema de diseño rastreando el sitio
00:05:06y obteniendo de él el estilo y la tipografía.
00:05:09Pero a veces, Stitch no capta el estilo exacto que tenías en mente.
00:05:12En esos casos, puedes subir un boceto rápido o un wireframe con el estilo
00:05:17que realmente deseas.
00:05:18También puedes especificar el tema de diseño que quieres que use tu sitio.
00:05:21Con las referencias y la especificación del tema, la UI generada por Stitch coincidirá
00:05:26exactamente con el wireframe y la guía de estilo, alineándose con tus requisitos.
00:05:31Y si hay algo específico que quieras modificar, puedes hacerlo
00:05:34usando las funciones de anotación y edición de Stitch.
00:05:36Puedes anotar la parte que no te gusta indicando cómo la quieres, hacer clic en aplicar
00:05:40y Stitch implementará el estilo deseado.
00:05:42Pero antes de continuar, escuchemos unas palabras de nuestro patrocinador.
00:05:45Uptime Robot.
00:05:46Estás construyendo con APIs de IA, ya sea OpenAI, Anthropic o cualquier otra.
00:05:49Todo parece estar bien, recibes un 200 OK, pero la respuesta es basura.
00:05:52Tu app se rompe y solo te enteras cuando los usuarios empiezan a quejarse.
00:05:56Ahí es donde entra Uptime Robot.
00:05:57Detecta el problema antes que ellos.
00:05:59Sondea tus APIs, verifica la respuesta real, no solo el código de estado, y te alerta al instante
00:06:04en Slack, por correo o donde sea que trabajes.
00:06:06Monitorea endpoints de IA, rastrea créditos de API antes de llegar al límite y detecta errores
00:06:10antes de que se conviertan en tickets de soporte.
00:06:12Incluso obtienes páginas de estado públicas con estadísticas de tiempo de actividad e historial de incidentes.
00:06:16Configurarlo toma segundos.
00:06:18Añade tu endpoint, define la respuesta esperada, elige tus alertas y ya estás en marcha.
00:06:21Hay un nivel gratuito con 50 monitores para que lo pruebes.
00:06:24El monitoreo de API está incluido por solo $7 al mes, más barato que alojarlo tú mismo.
00:06:28Usa el código AI Labs para un 10% de descuento, válido hasta fin de año.
00:06:32Haz clic en el enlace del comentario fijado y empieza a construir hoy mismo.
00:06:35Otra forma de construir es conectando las capacidades de Stitch con las de tus agentes
00:06:40actuales como Claude Code o cualquier otro que soporte habilidades de agente.
00:06:44Google ha desarrollado múltiples habilidades para este fin, otorgando capacidades
00:06:48adicionales al agente para trabajar con Stitch.
00:06:51Puedes instalar la habilidad que necesites siguiendo los pasos en el repositorio.
00:06:54La más importante para usar en tu flujo es la habilidad "Enhance Prompt".
00:06:58Transforma los prompts vagos que proporcionas en prompts optimizados para Stitch,
00:07:02ajustándolos exactamente a la forma en que Stitch trabaja mejor.
00:07:05Contiene referencias para palabras clave comunes porque Stitch se basa en adjetivos
00:07:09para identificar el ambiente, más que en descripciones exactas del diseño.
00:07:12Aparte de eso, hay una habilidad para construir sitios completos llamada Stitch Loop.
00:07:16Permite al agente usar las herramientas de desarrollo de Chrome y construir el sitio de forma iterativa
00:07:20desde Stitch usando un patrón de bucle autónomo, como se detalla en el prompt.
00:07:23La idea es mantener un seguimiento adecuado de los prompts y pasarlos de una etapa a otra.
00:07:28Como estas habilidades gestionan todo por su cuenta, es lo más parecido a un flujo
00:07:32de trabajo para construir una app en un solo intento.
00:07:33Pero antes de usar estas habilidades, debes asegurarte de que Stitch MCP esté conectado,
00:07:38ya que es lo que Stitch usa internamente para construir y obtener diseños.
00:07:41Hay un video en el canal que explica el proceso de instalación de MCP
00:07:46y cómo solucionar problemas comunes que puedes consultar.
00:07:49Ahora, cuando exportas el diseño de Stitch, ya sea vía MCP o código, suele darte
00:07:53un archivo HTML enorme donde todo está agrupado en un solo archivo.
00:07:56Dado que la mayoría de las aplicaciones se basan en React y estructuras de componentes,
00:08:01esto supone una carga extra para los agentes al mapear HTML a React.
00:08:03Para simplificar esto, puedes usar la habilidad de componentes de React.
00:08:06Convierte el diseño de Stitch en componentes modulares usando métricas de validación adecuadas.
00:08:10Utiliza scripts para validar y obtener diseños de modo que los componentes se mapeen fácilmente.
00:08:15Con este flujo, puedes crear un archivo Clod.md que liste el proceso que quieres seguir.
00:08:20Debe seguir este orden:
00:08:21Primero, usas la habilidad Enhance prompt para convertir tus prompts vagos en prompts específicos,
00:08:26asegurando que Stitch reciba la entrada correctamente.
00:08:28Luego, debería construir el diseño usando Stitch Loop.
00:08:31Una vez terminada la construcción, debe implementar el diseño en la app usando componentes de React.
00:08:35Cuando des el prompt para la landing page que quieres construir, seguirá las instrucciones
00:08:39establecidas en Clod.md.
00:08:41Primero carga la habilidad Enhance prompt, que genera el prompt mejorado
00:08:45utilizando las herramientas y habilidades disponibles.
00:08:47Una vez que el prompt está listo, te pedirá permiso para proceder al siguiente paso.
00:08:50Tras la aprobación, carga la habilidad Stitch loop y usa los Stitch MCPs para crear el proyecto.
00:08:56Una vez creado el proyecto, envía el prompt generado por la habilidad Enhance prompt a Stitch,
00:09:00el cual genera primero el sistema de diseño y luego el diseño real.
00:09:04Para facilitar las imágenes, utiliza la generación de imágenes como parte del proceso de diseño.
00:09:08Una vez completado el diseño, pasa al siguiente paso usando la habilidad de componentes de React
00:09:12para crear una estructura por componentes e implementar la app correctamente,
00:09:17optimizada para el framework que estés usando.
00:09:18Si inicias el servidor de desarrollo, verás que la aplicación mapea exactamente el diseño
00:09:22de Stitch, incluyendo efectos de hover en botones, haciendo este flujo mucho más fácil
00:09:26y rápido para construir apps totalmente funcionales.
00:09:28Por cierto, el Clod.md usado aquí, junto con todos los recursos creados, están disponibles
00:09:33en AI Labs Pro.
00:09:34Esto incluye recursos de este video y de todos los anteriores, los cuales puedes
00:09:38descargar y usar en tus propios proyectos.
00:09:40Si valoras lo que hacemos y quieres apoyar al canal, esta es la mejor forma
00:09:43de hacerlo.
00:09:44El enlace está en la descripción.
00:09:46Construir desde cero no siempre es buena idea, y esto también aplica a los componentes.
00:09:50La UI generada por componentes básicos de React es demasiado estática y solo se enfoca
00:09:54en lo visual, por lo que necesitarías trabajo extra para añadir interacciones y efectos.
00:09:58En lugar de construir desde cero, deberías usar librerías de UI en tus apps,
00:10:02ya que facilitan la creación al tener funciones de interacción integradas
00:10:07que puedes usar para darle vida a tu interfaz.
00:10:08Para facilitar esto aún más, Google ofrece una habilidad de ShadCN UI que sirve de guía
00:10:13al convertir una aplicación de Stitch a componentes de ShadCN.
00:10:16Esta habilidad es básicamente una guía detallada sobre cómo implementar correctamente
00:10:21estos componentes en toda la aplicación.
00:10:22Dado que ShadCN permite conectarse con múltiples registros, puedes expandir sus capacidades
00:10:26aún más integrándolos y aprovechando sus funciones.
00:10:30Pero se recomienda configurar el MCP de ShadCN antes de construir para que el flujo
00:10:35de trabajo sea fluido.
00:10:36Para usarlo eficazmente, también debes configurar un archivo Clod.md e incluir instrucciones
00:10:41para que, al usar Stitch MCP, se use automáticamente la habilidad de ShadCN para
00:10:47convertir el diseño en componentes.
00:10:48Como puedes añadir registros, puedes especificar cuáles quieres usar en tu proyecto.
00:10:52Por ejemplo, al construir el sitio, elegimos Glassmorphism y Motion Primitives
00:10:57porque contienen componentes que tienen una sensación premium.
00:11:00Puedes elegir los que mejor se adapten a las necesidades de tu proyecto.
00:11:03Si ya has creado una interfaz en Stitch, puedes convertirla en una app
00:11:07con componentes de ShadCN.
00:11:08Debes especificar el nombre del proyecto que quieres implementar y pedirle
00:11:12que lo haga en la aplicación.
00:11:13Primero obtendrá el proyecto con el nombre indicado, cargará la habilidad de ShadCN UI
00:11:18y usará las herramientas de ShadCN MCP junto con los registros especificados para
00:11:23implementar toda la app.
00:11:24Una vez completada la implementación, la app reflejará exactamente lo que ves en Stitch
00:11:27pero construida con componentes de ShadCN UI.
00:11:29Esto marca una gran diferencia, ya que la app generada en un solo paso se vuelve
00:11:34mucho más interactiva gracias a la facilidad de implementación.
00:11:36Con esto llegamos al final del video.
00:11:38Si quieres apoyar al canal y ayudarnos a seguir creando videos como este, puedes
00:11:42hacerlo usando el botón de "Súper gracias" de abajo.
00:11:44Como siempre, gracias por vernos y nos vemos en el próximo video.