{"id":29912,"date":"2026-10-02T20:13:36","date_gmt":"2026-10-02T18:13:36","guid":{"rendered":"https:\/\/ingenio.la\/blog\/?p=29912"},"modified":"2026-10-02T20:15:59","modified_gmt":"2026-10-02T18:15:59","slug":"google-stitch","status":"publish","type":"post","link":"https:\/\/ingenio.la\/blog\/google-stitch\/","title":{"rendered":"Google Stitch: qu\u00e9 es, c\u00f3mo funciona y para qu\u00e9 sirve al dise\u00f1ar interfaces"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Google Stitch<\/strong> resuelve un problema que casi todo negocio peque\u00f1o conoce: la pantalla que hace falta ma\u00f1ana y el dise\u00f1ador que est\u00e1 ocupado hasta el mes siguiente. Alguien del equipo describe en un p\u00e1rrafo qu\u00e9 debe hacer esa pantalla y, en cuesti\u00f3n de minutos, tiene una propuesta visual con c\u00f3digo listo para revisar.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

La herramienta es un experimento de Google Labs. Cuando se present\u00f3, el 20 de mayo de 2025, el blog para desarrolladores de Google la defini\u00f3 como una forma de convertir \u00abindicaciones sencillas e im\u00e1genes en dise\u00f1os de interfaz complejos y c\u00f3digo frontend en cuesti\u00f3n de minutos\u00bb. Desde entonces ha cambiado bastante, y buena parte de lo que se lee en internet describe versiones viejas.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

Lo que sigue ordena lo que es, lo que ya hace, lo que entrega al exportar y d\u00f3nde conviene desconfiar. Ayuda a decidir si encaja en el flujo de una agencia, un freelance o un negocio que dise\u00f1a sus propias pantallas.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

Qu\u00e9 es Google Stitch y qu\u00e9 hace exactamente<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Es una aplicaci\u00f3n 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\u00eda, botones y espaciados que se pueden seguir modificando.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

Al lanzarse funcionaba con Gemini 2.5 Pro, el modelo multimodal de Google, y despu\u00e9s recibi\u00f3 una actualizaci\u00f3n con Gemini 3. Seg\u00fan varias gu\u00edas de terceros, la herramienta ofrece un modo est\u00e1ndar y uno experimental, con un tope mensual de generaciones en cada uno; esos l\u00edmites cambian con frecuencia, as\u00ed que conviene confirmarlos dentro de la aplicaci\u00f3n antes de planificar un proyecto sobre ellos.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

Tambi\u00e9n 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.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
Aspecto<\/th>Qu\u00e9 se sabe<\/th><\/tr><\/thead>
Origen<\/td>Google Labs, presentado en mayo de 2025<\/td><\/tr>
Entradas<\/td>Texto, voz, im\u00e1genes, bocetos y capturas<\/td><\/tr>
Salidas<\/td>Pantallas de web y m\u00f3vil, c\u00f3digo HTML y CSS, exportaci\u00f3n a Figma<\/td><\/tr>
Modelo<\/td>Gemini, con actualizaciones posteriores al lanzamiento<\/td><\/tr>
Acceso<\/td>Navegador y cuenta de Google, sin instalar nada<\/td><\/tr><\/tbody><\/table>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t

Qu\u00e9 ha cambiado desde el lanzamiento<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

El Stitch de 2025 era un generador de pantallas sueltas. El de 2026 se parece m\u00e1s a un ayudante con el que se conversa mientras el dise\u00f1o toma forma.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

En Google I\/O, el 19 de mayo de 2026, Google anunci\u00f3 dise\u00f1o en tiempo real con el Stitch Agent<\/em>: 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\u00f1o est\u00e9 terminado. El mismo anuncio incluye exportar a Google Antigravity, publicar con Netlify y compartir un enlace mediante Google AI Studio, seg\u00fan detalla el anuncio oficial de Google<\/a>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

DESIGN.md: las reglas de dise\u00f1o en un archivo<\/h3>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

El 21 de abril de 2026, Google public\u00f3 DESIGN.md, un formato abierto para exportar e importar las reglas de dise\u00f1o de un proyecto: colores, tipograf\u00edas y criterios de uso. Seg\u00fan explic\u00f3 la propia empresa, sirve para no reconstruir el sistema visual en cada proyecto y para que los agentes de IA respeten la marca. Tambi\u00e9n valida las combinaciones de color contra los est\u00e1ndares de accesibilidad WCAG.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

Para una agencia con varios clientes, esa es la parte m\u00e1s interesante. Un archivo de texto con la identidad de cada marca evita que cada pantalla generada salga con la paleta del azar.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

C\u00f3mo usar Google Stitch paso a paso<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Los men\u00fas cambian entre versiones, pero el recorrido se mantiene bastante estable. Lo que sigue describe el orden l\u00f3gico de trabajo, no una lista de botones.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
Paso<\/th>Qu\u00e9 ocurre<\/th><\/tr><\/thead>
Entrar<\/td>Se abre stitch.withgoogle.com con una cuenta de Google<\/td><\/tr>
Elegir formato<\/td>Se decide si la pantalla es para web o para m\u00f3vil<\/td><\/tr>
Describir<\/td>Se escribe, se dicta o se sube una imagen de referencia<\/td><\/tr>
Iterar<\/td>Se pide al agente cambiar colores, orden o contenido<\/td><\/tr>
Exportar<\/td>Se lleva el resultado a c\u00f3digo, a Figma o a un enlace compartible<\/td><\/tr><\/tbody><\/table>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t

C\u00f3mo escribir la indicaci\u00f3n para que no salga gen\u00e9rica<\/h3>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

La calidad del resultado depende casi por completo de lo que se pide. \u00abUna p\u00e1gina para una barber\u00eda\u00bb devuelve la plantilla que cualquiera imagina. Una descripci\u00f3n con contexto devuelve algo con car\u00e1cter.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

Un ejemplo de indicaci\u00f3n \u00fatil: \u00abPantalla de reservas para una barber\u00eda de Tegucigalpa: calendario semanal, tres servicios con precio en lempiras, bot\u00f3n de confirmar visible sin desplazarse y estilo sobrio en negro y dorado\u00bb. Incluye el tipo de negocio, los elementos que no pueden faltar y una direcci\u00f3n visual. Con eso, la primera propuesta ya se acerca a algo discutible.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

La conversaci\u00f3n posterior funciona mejor en pasos peque\u00f1os. Pedir \u00abcambia el bot\u00f3n y reduce el encabezado\u00bb da mejores resultados que reescribir toda la indicaci\u00f3n cada vez.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"Presentaci\u00f3n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t

Qu\u00e9 entrega Google Stitch al exportar<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Aqu\u00ed est\u00e1 la diferencia con una simple imagen generada por IA. Cada pantalla puede salir como c\u00f3digo HTML y CSS, y tambi\u00e9n como capas editables hacia Figma, lo que permite que el dise\u00f1ador retome el trabajo donde la herramienta lo dej\u00f3.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

Hay que ser claro con el alcance: es c\u00f3digo de interfaz, no de aplicaci\u00f3n. Genera c\u00f3mo se ve un formulario de reserva, no la l\u00f3gica que guarda la cita ni la base de datos que la almacena. Para eso sigue haciendo falta desarrollo.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

En sitios hechos con WordPress, adem\u00e1s, ese c\u00f3digo no se pega tal cual. La ruta que s\u00ed respeta el editor es otra: conectar la IA al propio sitio, como explica la gu\u00eda sobre el Elementor MCP<\/a>, 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.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

D\u00f3nde falla y qu\u00e9 conviene revisar siempre<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Las rese\u00f1as de terceros coinciden en un patr\u00f3n: 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\u00e9 debe decir la p\u00e1gina o qu\u00e9 acci\u00f3n busca el negocio.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

Eso \u00faltimo no es un defecto menor. Una pantalla ordenada puede esconder lo importante o repartir la atenci\u00f3n entre cinco botones. Decidir qu\u00e9 se ve primero sigue siendo trabajo humano, tal como lo describe la gu\u00eda sobre jerarqu\u00eda visual<\/a>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t
Lo que resuelve bien<\/th>Lo que sigue pidiendo criterio<\/th><\/tr><\/thead>
Primer borrador de una pantalla en minutos<\/td>Qu\u00e9 mensaje y qu\u00e9 acci\u00f3n deben dominar<\/td><\/tr>
Variantes visuales para comparar con el cliente<\/td>Contraste, tama\u00f1os de texto y accesibilidad real<\/td><\/tr>
C\u00f3digo base de interfaz y traspaso a Figma<\/td>L\u00f3gica, formularios funcionales y rendimiento<\/td><\/tr>
Reglas de marca reutilizables con DESIGN.md<\/td>Que el resultado no se parezca a todos los dem\u00e1s<\/td><\/tr><\/tbody><\/table>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

La revisi\u00f3n deber\u00eda incluir tres cosas concretas: comprobar el contraste de color con un verificador, abrir el resultado en m\u00f3vil y leer cada texto como lo leer\u00eda un cliente, porque los textos de relleno se cuelan con facilidad.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

Para qui\u00e9n tiene sentido y por d\u00f3nde empezar<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Resulta m\u00e1s \u00fatil para quien necesita validar ideas r\u00e1pido que para quien busca un dise\u00f1o final. Una agencia puede mostrar tres direcciones visuales a un cliente antes de una reuni\u00f3n, un emprendedor puede bocetar la pantalla de su producto para explic\u00e1rsela a un desarrollador, y un equipo de marketing puede probar la estructura de una landing page<\/a> antes de invertir horas en maquetarla.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

Tambi\u00e9n encaja al arrancar un redise\u00f1o de p\u00e1ginas web<\/a>: cargar una captura de la p\u00e1gina actual y pedir alternativas ayuda a discutir con ejemplos sobre la mesa. El criterio de qu\u00e9 conservar sigue siendo del equipo. Quien quiera ver el panorama completo de estas herramientas puede recorrer la secci\u00f3n de inteligencia artificial aplicada a negocios<\/a>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

Si solo se hace una cosa, conviene elegir una pantalla de bajo riesgo, como una p\u00e1gina de contacto o una secci\u00f3n de precios, generarla con una indicaci\u00f3n detallada y compararla contra la versi\u00f3n actual. Esa prueba cuesta una tarde y muestra mejor que cualquier rese\u00f1a 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\u00e1s posibilidades de seguir sirviendo que el recorrido por los men\u00fas.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

Preguntas frecuentes<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t
\u00bfGoogle Stitch es gratis? <\/div><\/span>\n\t\t\t\t\t\t\t\n\t\t\t<\/path><\/svg><\/span>\n\t\t\t<\/path><\/svg><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Hasta ahora se puede usar sin costo con una cuenta de Google, con l\u00edmites mensuales de generaciones. Al ser un experimento de Google Labs, esas condiciones pueden cambiar.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t\t

\n\t\t\t\t\n\t\t\t\t\t
\u00bfHace falta saber dise\u00f1ar o programar para usarlo? <\/div><\/span>\n\t\t\t\t\t\t\t\n\t\t\t<\/path><\/svg><\/span>\n\t\t\t<\/path><\/svg><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

No. Se trabaja describiendo lo que se quiere en lenguaje normal. Saber de dise\u00f1o ayuda a detectar problemas de jerarqu\u00eda y accesibilidad, y saber de c\u00f3digo ayuda a aprovechar la exportaci\u00f3n.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t\t

\n\t\t\t\t\n\t\t\t\t\t
\u00bfSirve para crear una p\u00e1gina web completa? <\/div><\/span>\n\t\t\t\t\t\t\t\n\t\t\t<\/path><\/svg><\/span>\n\t\t\t<\/path><\/svg><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Genera pantallas y c\u00f3digo de interfaz, no un sitio funcional con formularios, pagos o administraci\u00f3n de contenido. Funciona mejor como borrador visual previo a construir la p\u00e1gina.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t\t

\n\t\t\t\t\n\t\t\t\t\t
\u00bfSe puede exportar el dise\u00f1o a Figma? <\/div><\/span>\n\t\t\t\t\t\t\t\n\t\t\t<\/path><\/svg><\/span>\n\t\t\t<\/path><\/svg><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

S\u00ed. Desde el lanzamiento permite llevar las pantallas a Figma con capas editables, adem\u00e1s de exportar c\u00f3digo HTML y CSS.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t\t

\n\t\t\t\t\n\t\t\t\t\t
\u00bfQu\u00e9 es DESIGN.md en Stitch? <\/div><\/span>\n\t\t\t\t\t\t\t\n\t\t\t<\/path><\/svg><\/span>\n\t\t\t<\/path><\/svg><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Un formato abierto, anunciado en abril de 2026, que guarda las reglas de dise\u00f1o de un proyecto para reutilizarlas en otros y para que las herramientas de IA respeten la marca.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

Google Stitch es la herramienta de Google Labs que convierte texto e im\u00e1genes en interfaces y c\u00f3digo. Qu\u00e9 hace, c\u00f3mo se usa y d\u00f3nde falla.<\/p>\n","protected":false},"author":1,"featured_media":29918,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-29912","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-inteligencia-artificial"],"lang":"es","translations":{"es":29912},"pll_sync_post":{},"_links":{"self":[{"href":"https:\/\/ingenio.la\/blog\/wp-json\/wp\/v2\/posts\/29912","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ingenio.la\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ingenio.la\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ingenio.la\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ingenio.la\/blog\/wp-json\/wp\/v2\/comments?post=29912"}],"version-history":[{"count":5,"href":"https:\/\/ingenio.la\/blog\/wp-json\/wp\/v2\/posts\/29912\/revisions"}],"predecessor-version":[{"id":29919,"href":"https:\/\/ingenio.la\/blog\/wp-json\/wp\/v2\/posts\/29912\/revisions\/29919"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ingenio.la\/blog\/wp-json\/wp\/v2\/media\/29918"}],"wp:attachment":[{"href":"https:\/\/ingenio.la\/blog\/wp-json\/wp\/v2\/media?parent=29912"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ingenio.la\/blog\/wp-json\/wp\/v2\/categories?post=29912"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ingenio.la\/blog\/wp-json\/wp\/v2\/tags?post=29912"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}