Google Stitch resuelve un problema que casi todo negocio pequeño conoce: la pantalla que hace falta mañana y el diseñador que está ocupado hasta el mes siguiente. Alguien del equipo describe en un párrafo qué debe hacer esa pantalla y, en cuestión de minutos, tiene una propuesta visual con código listo para revisar.
La herramienta es un experimento de Google Labs. Cuando se presentó, el 20 de mayo de 2025, el blog para desarrolladores de Google la definió como una forma de convertir «indicaciones sencillas e imágenes en diseños de interfaz complejos y código frontend en cuestión de minutos». Desde entonces ha cambiado bastante, y buena parte de lo que se lee en internet describe versiones viejas.
Lo que sigue ordena lo que es, lo que ya hace, lo que entrega al exportar y dónde conviene desconfiar. Ayuda a decidir si encaja en el flujo de una agencia, un freelance o un negocio que diseña sus propias pantallas.
Qué es Google Stitch y qué hace exactamente
Es una aplicación web, a la que se entra con una cuenta de Google, que genera interfaces de sitios y aplicaciones a partir de texto o de una imagen de referencia: un boceto a mano, una captura o un wireframe. El resultado no es una imagen plana, sino pantallas con jerarquía, botones y espaciados que se pueden seguir modificando.
Al lanzarse funcionaba con Gemini 2.5 Pro, el modelo multimodal de Google, y después recibió una actualización con Gemini 3. Según varias guías de terceros, la herramienta ofrece un modo estándar y uno experimental, con un tope mensual de generaciones en cada uno; esos límites cambian con frecuencia, así que conviene confirmarlos dentro de la aplicación antes de planificar un proyecto sobre ellos.
También se presenta como gratuita, al ser un producto de Labs. Eso describe su estado actual y no una promesa: los experimentos de Google pueden cambiar de condiciones o cerrarse.
| Aspecto | Qué se sabe |
|---|---|
| Origen | Google Labs, presentado en mayo de 2025 |
| Entradas | Texto, voz, imágenes, bocetos y capturas |
| Salidas | Pantallas de web y móvil, código HTML y CSS, exportación a Figma |
| Modelo | Gemini, con actualizaciones posteriores al lanzamiento |
| Acceso | Navegador y cuenta de Google, sin instalar nada |
Qué ha cambiado desde el lanzamiento
El Stitch de 2025 era un generador de pantallas sueltas. El de 2026 se parece más a un ayudante con el que se conversa mientras el diseño toma forma.
En Google I/O, el 19 de mayo de 2026, Google anunció diseño en tiempo real con el Stitch Agent: la persona describe lo que quiere por texto o en voz alta, la herramienta va dibujando sobre el lienzo mientras trabaja y permite corregir el rumbo antes de que el diseño esté terminado. El mismo anuncio incluye exportar a Google Antigravity, publicar con Netlify y compartir un enlace mediante Google AI Studio, según detalla el anuncio oficial de Google.
DESIGN.md: las reglas de diseño en un archivo
El 21 de abril de 2026, Google publicó DESIGN.md, un formato abierto para exportar e importar las reglas de diseño de un proyecto: colores, tipografías y criterios de uso. Según explicó la propia empresa, sirve para no reconstruir el sistema visual en cada proyecto y para que los agentes de IA respeten la marca. También valida las combinaciones de color contra los estándares de accesibilidad WCAG.
Para una agencia con varios clientes, esa es la parte más interesante. Un archivo de texto con la identidad de cada marca evita que cada pantalla generada salga con la paleta del azar.
Cómo usar Google Stitch paso a paso
Los menús cambian entre versiones, pero el recorrido se mantiene bastante estable. Lo que sigue describe el orden lógico de trabajo, no una lista de botones.
| Paso | Qué ocurre |
|---|---|
| Entrar | Se abre stitch.withgoogle.com con una cuenta de Google |
| Elegir formato | Se decide si la pantalla es para web o para móvil |
| Describir | Se escribe, se dicta o se sube una imagen de referencia |
| Iterar | Se pide al agente cambiar colores, orden o contenido |
| Exportar | Se lleva el resultado a código, a Figma o a un enlace compartible |
Cómo escribir la indicación para que no salga genérica
La calidad del resultado depende casi por completo de lo que se pide. «Una página para una barbería» devuelve la plantilla que cualquiera imagina. Una descripción con contexto devuelve algo con carácter.
Un ejemplo de indicación útil: «Pantalla de reservas para una barbería de Tegucigalpa: calendario semanal, tres servicios con precio en lempiras, botón de confirmar visible sin desplazarse y estilo sobrio en negro y dorado». Incluye el tipo de negocio, los elementos que no pueden faltar y una dirección visual. Con eso, la primera propuesta ya se acerca a algo discutible.
La conversación posterior funciona mejor en pasos pequeños. Pedir «cambia el botón y reduce el encabezado» da mejores resultados que reescribir toda la indicación cada vez.
Qué entrega Google Stitch al exportar
Aquí está la diferencia con una simple imagen generada por IA. Cada pantalla puede salir como código HTML y CSS, y también como capas editables hacia Figma, lo que permite que el diseñador retome el trabajo donde la herramienta lo dejó.
Hay que ser claro con el alcance: es código de interfaz, no de aplicación. Genera cómo se ve un formulario de reserva, no la lógica que guarda la cita ni la base de datos que la almacena. Para eso sigue haciendo falta desarrollo.
En sitios hechos con WordPress, además, ese código no se pega tal cual. La ruta que sí respeta el editor es otra: conectar la IA al propio sitio, como explica la guía sobre el Elementor MCP, donde lo generado llega como estructura editable y no como HTML ajeno. Stitch sirve entonces como borrador visual para validar la idea antes de construirla.
Dónde falla y qué conviene revisar siempre
Las reseñas de terceros coinciden en un patrón: las propuestas se ven pulidas a primera vista y se descuidan en los detalles. Tienden a repetir distribuciones conocidas, a veces incumplen criterios de accesibilidad y no resuelven cuestiones de estrategia como qué debe decir la página o qué acción busca el negocio.
Eso último no es un defecto menor. Una pantalla ordenada puede esconder lo importante o repartir la atención entre cinco botones. Decidir qué se ve primero sigue siendo trabajo humano, tal como lo describe la guía sobre jerarquía visual.
| Lo que resuelve bien | Lo que sigue pidiendo criterio |
|---|---|
| Primer borrador de una pantalla en minutos | Qué mensaje y qué acción deben dominar |
| Variantes visuales para comparar con el cliente | Contraste, tamaños de texto y accesibilidad real |
| Código base de interfaz y traspaso a Figma | Lógica, formularios funcionales y rendimiento |
| Reglas de marca reutilizables con DESIGN.md | Que el resultado no se parezca a todos los demás |
La revisión debería incluir tres cosas concretas: comprobar el contraste de color con un verificador, abrir el resultado en móvil y leer cada texto como lo leería un cliente, porque los textos de relleno se cuelan con facilidad.
Para quién tiene sentido y por dónde empezar
Resulta más útil para quien necesita validar ideas rápido que para quien busca un diseño final. Una agencia puede mostrar tres direcciones visuales a un cliente antes de una reunión, un emprendedor puede bocetar la pantalla de su producto para explicársela a un desarrollador, y un equipo de marketing puede probar la estructura de una landing page antes de invertir horas en maquetarla.
También encaja al arrancar un rediseño de páginas web: cargar una captura de la página actual y pedir alternativas ayuda a discutir con ejemplos sobre la mesa. El criterio de qué conservar sigue siendo del equipo. Quien quiera ver el panorama completo de estas herramientas puede recorrer la sección de inteligencia artificial aplicada a negocios.
Si solo se hace una cosa, conviene elegir una pantalla de bajo riesgo, como una página de contacto o una sección de precios, generarla con una indicación detallada y compararla contra la versión actual. Esa prueba cuesta una tarde y muestra mejor que cualquier reseña si la herramienta aporta algo al flujo real. Y como se trata de un experimento de Labs, es sensato esperar que la interfaz cambie: las reglas guardadas en DESIGN.md, al ser un formato abierto, tienen más posibilidades de seguir sirviendo que el recorrido por los menús.
Preguntas frecuentes
¿Google Stitch es gratis?
Hasta ahora se puede usar sin costo con una cuenta de Google, con límites mensuales de generaciones. Al ser un experimento de Google Labs, esas condiciones pueden cambiar.
¿Hace falta saber diseñar o programar para usarlo?
No. Se trabaja describiendo lo que se quiere en lenguaje normal. Saber de diseño ayuda a detectar problemas de jerarquía y accesibilidad, y saber de código ayuda a aprovechar la exportación.
¿Sirve para crear una página web completa?
Genera pantallas y código de interfaz, no un sitio funcional con formularios, pagos o administración de contenido. Funciona mejor como borrador visual previo a construir la página.
¿Se puede exportar el diseño a Figma?
Sí. Desde el lanzamiento permite llevar las pantallas a Figma con capas editables, además de exportar código HTML y CSS.
¿Qué es DESIGN.md en Stitch?
Un formato abierto, anunciado en abril de 2026, que guarda las reglas de diseño de un proyecto para reutilizarlas en otros y para que las herramientas de IA respeten la marca.
