Google Stitch + Claude Code: diseño de sitios web sin el «aspecto de IA»

Encontrarás instrucciones adicionales para trabajar con Ailoot en la documentación.

¿Por qué los sitios web creados con Claude Code parecen «AI slop»?#

En el caso práctico que describo, el trabajo en la página de inicio de una aplicación de llamadas empezó con un proyecto vacío y una petición a Claude Code para crear una landing page. El resultado fue el de siempre: slate-950 para el fondo, indigo-500 para el acento, Inter en negrita para el encabezado y tres tarjetas idénticas con sombras debajo. El mismo diseño que la primera v0, la primera Lovable y la primera generación de ChatGPT. Reescribí el prompt cinco veces y añadí «premium», «que no parezca a los demás», «moderno», pero la página seguía pareciendo un tema de WordPress de 2015.

La lógica es sencilla: sin restricciones, el modelo toma la media estadística de lo que ha visto. Y ha visto un millón de landing pages idénticas hechas con Bootstrap y Tailwind. Para obtener un resultado que no sea del montón, tienes que darle detalles concretos al agente: qué colores, qué fuentes, qué espaciado y qué componentes debe tratar como canónicos. Para un modelo, la palabra «bonito» significa «la mediana de 2020». Los adjetivos no lo cambiarán; necesitas parámetros exactos.

Analicé esta misma brecha en una guía sobre sistemas de diseño listos para usar con Refero: allí tomas el estilo de otra marca (Apple, Linear, Stripe) y se lo das al agente. Google Stitch lo aborda desde el otro lado: en lugar de tomar prestado el estilo de otra marca, generas uno propio a partir de tu descripción.

¿Qué es Google Stitch y cómo ayuda?#

Stitch es un experimento de Google Labs que se presentó en Google I/O en mayo de 2025. En el campo del prompt escribes cómo quieres que se vea la aplicación (o subes una captura de pantalla, un boceto en una pizarra o la página de un competidor), y Stitch genera pantallas de interfaz en un lienzo infinito. Por debajo, usa Gemini 2.5 Pro y Flash; Gemini 3 se añadió en diciembre de 2025 para crear diseños más pulidos.

Esto es lo que nos resulta útil:

• Vibe Design: describe la sensación con palabras («minimalista y prémium, como Stripe») y obtén varias propuestas visuales para elegir.
• Referencias: sube una imagen de Dribbble o Pinterest; Stitch conserva su maquetación y aplica tus requisitos.
• Exportación en tres formatos: a Figma, con capas editables; como HTML/CSS limpio; y mediante MCP, directamente al agente.

La diferencia con los estilos listos para usar, como Refero, es importante. Refero es una biblioteca de sistemas de diseño ya extraídos de sitios web reales; tomas una marca existente. Stitch genera desde cero un sistema para tu producto. ¿No tienes un diseño de referencia y quieres una apariencia propia? Stitch. ¿Quieres aplicar rápidamente el estilo de un producto conocido? Refero. Se ocupan de pasos distintos y se complementan bien.

Claude también tiene un modo de diseño integrado; lo expliqué en una guía sobre Claude Design. Stitch es diferente porque proporciona un sistema listo para usar en un archivo externo que el agente lee cada vez que construye algo.

Requisitos de disponibilidad de Google Stitch#

Stitch no está disponible en todos los países: un representante de Google escribió en el foro oficial que el servicio está disponible para usuarios mayores de 18 años en 212 países, y que la lista sigue creciendo. En las regiones restringidas, al entrar solo aparece un mensaje: «Sorry, Stitch is unavailable.»

Necesitas una cuenta de Google; solo puedes iniciar sesión con ella.

Cuando la autorización MCP de Stitch bloquea el flujo de Claude Code#

Hay mucha información basura en Internet sobre cómo conectar MCP, y la mitad de las instrucciones sencillamente no funciona. Por ejemplo, muchas guías, incluidas algunas populares en inglés, recomiendan instalar el paquete @google/stitch-mcp con el comando npx -y @google/stitch-mcp@latest. Ese paquete no existe: npm devuelve 404. No copies ese comando; perderás el tiempo. Por la misma razón, elige integraciones cuya instalación y verificación se hayan confirmado con una tarea real.

El intento de MCP remoto descrito llegó al error Incompatible auth server en Claude Code. Esa observación no es una receta funcional ni prueba de que fallen todas las configuraciones actuales. No sigas con un paso impreciso de «conectar MCP»: usa la exportación manual HTML/CSS siguiente hasta verificar una configuración compatible exacta.

Primero, crea una clave. En Stitch: haz clic en tu avatar → Stitch settings → la sección API key → Create key → cópiala.

Después, añade el proxy a Claude Code con un solo comando:

bash

Guarda la clave en una variable de entorno. Es el método más sencillo: no tienes que complicarte con la consola de Google ni con tokens que caducan.

export STITCH_API_KEY="your-key-from-stitch-settings"

Si prefieres configurarlo manualmente, se ve así (en ~/.claude.json o .mcp.json en la raíz del proyecto):

json

Reinicia Claude Code y comprueba que la conexión funciona:

claude mcp list

El flujo de Stitch y DESIGN.md es context engineering en estado puro: introduces tokens exactos en el contexto de Claude de antemano y el modelo los sigue al pie de la letra, sin «adivinar lo que quise decir». La metodología completa reúne los tres pilares: el clon de IA, el Second Brain y Context Engineering. Esta combinación convierte a Claude de un «asistente que adivina» en una herramienta que produce resultados predecibles.

¿Qué es DESIGN.md y por qué es mejor que una captura de pantalla?#

Este es un detalle clave que la mayoría de las instrucciones explican mal: en Stitch no hay un botón «Export DESIGN.md». El agente prepara el archivo por su cuenta. Según el codelab oficial de Google, el prompt sería más o menos así: «ve al proyecto a través de Stitch MCP, extrae la paleta y la tipografía, y prepara un DESIGN.md con ellas». Ese codelab presupone una conexión MCP funcional. En esta vía manual, Claude Code lee el HTML/CSS exportado y crea el archivo estructurado en la raíz; debe señalar tokens ausentes en lugar de deducirlos de una imagen.

DESIGN.md contiene detalles concretos en lugar de adjetivos:

# DESIGN.md
## Colors
- Primary:   #0F172A
- Accent:    #F97316
- Success / Error / Warning: ...
- Background / surfaces: ...
## Typography
- Font (body): "Instrument Sans"; (headings): "Instrument Serif"
- Scale: H1 48/1.1, H2 36/1.15, Body 16/1.6, Caption 13/1.4
- Weights: 400 / 500 / 700
## Spacing (base 8px)
- xs 4, sm 8, md 16, lg 24, xl 40, 2xl 64
## Layout
- Container max-width: 1200px; breakpoints: 640 / 768 / 1024 / 1280
## Components
- Button: radius 10px; variants primary / secondary / ghost; states hover / active / disabled
- Card: radius 16px; shadow 0 4px 24px rgba(0,0,0,.08)

Para que Claude Code lo use, haz referencia al archivo desde CLAUDE.md; por ejemplo, añade la línea «Usa el diseño de todos los componentes de DESIGN.md». Así, el agente incluye los mismos tokens en cada sesión. Un botón hecho el lunes y una tarjeta hecha el viernes tendrán el mismo estilo porque existe una única fuente de verdad.

Aquí trabajan juntas dos referencias locales. DESIGN.md contiene colores, tipografía, espaciado y componentes. El HTML/CSS exportado de Stitch y sus recursos aportan la pantalla concreta. MCP es opcional y no es un requisito para esta vía.

¿Cómo se crea un sitio web? El proceso completo, del texto al diseño#

Este es el proceso completo, en orden:

1. Abre Stitch. Comprueba disponibilidad en tu país e inicia sesión en stitch.withgoogle.com con tu cuenta Google.
2. Describe el producto. Indica pantallas y recorrido; confirma o modifica la lista propuesta.
3. Añade una referencia. Sube la captura prevista e indica colores, tipografía y distribución que quieras conservar.
4. Genera y pule. Elige una pantalla y refínala antes de ampliar.
5. Exporta la pantalla como HTML/CSS. Guarda archivos y recursos necesarios en una carpeta de referencia del proyecto. Abre el HTML localmente y comprueba que sea la pantalla seleccionada; una captura no contiene valores CSS exactos.
6. Crea DESIGN.md desde la exportación local. Pide leer HTML/CSS, registrar valores reales de color, fuentes, espaciado, distribución y componentes y enumerar los ausentes para decidirlos. Esta vía no requiere clave Stitch ni autenticación MCP.
7. Construye y comprueba una página. Usa estos prompts, sustituyendo la carpeta por la ruta real de tu exportación:

Lee la exportación HTML/CSS de Stitch en refs/stitch-export/. Crea DESIGN.md en la raíz con los valores presentes en esos archivos. Identifica los valores ausentes en lugar de inventarlos.

Construye una página desde DESIGN.md y la exportación local Stitch, con componentes modulares. Compárala renderizada con la exportación en anchuras de escritorio y móvil. Verifica por separado navegación y estados interactivos.

A partir de ahí, todo es trabajo de Claude Code: navegación entre pantallas, adaptación a los puntos de ruptura de DESIGN.md, animaciones e interactividad. Stitch proporciona pantallas estáticas y un prototipo en el que se puede hacer clic, pero no crea lógica funcional ni publica el sitio en un servicio de hosting; eso le corresponde al agente.

Cómo eliminar el «aspecto de IA»: ¿qué debes cambiar exactamente?#

Estos son los detalles concretos que hacen que un sitio deje de delatarse:

• Color. El indigo-500 morado es el primer indicio. Define los colores principal y de acento con valores hexadecimales exactos en DESIGN.md. Cada agente interpretará «azul de marca» a su manera.
• Fuente. Inter es la opción más segura y, por eso, la «fuente de IA» más reconocible. Elige una combinación con personalidad: por ejemplo, una sans serif para el cuerpo del texto y otra con carácter para los encabezados. Configúrala en el diseño de Stitch y anótala en DESIGN.md.
• Una referencia en lugar de un adjetivo. El modelo interpreta «hazlo moderno» como «la mediana de 2020». Si tiene una captura de pantalla real, interpreta literalmente «usa el diseño de esta página». Sube una imagen de referencia a Stitch; no puedes transmitir el gusto con palabras.
• Espaciado y amplitud. Una maquetación de plantilla se reconoce por sus bloques apretados e idénticos. Define una escala de espaciado generosa en DESIGN.md; el agente distribuirá los elementos con más libertad.

La precisión gana a los adjetivos subjetivos. Stitch es, en esencia, una máquina que traduce tu «lo quiero así» en tokens precisos, para que el agente no tenga que adivinar.

Google Stitch o alternativas: ¿cuál elegir?#

Comparé las herramientas según los aspectos que realmente importan al hacer vibe coding con poco presupuesto:

Mi propio flujo de trabajo: Stitch para explorar el diseño → Claude Code para construir y programar la lógica. Para hacer vibe coding con poco presupuesto, Stitch gana porque es gratis y crea desde cero una apariencia única para tu producto. Si quieres conocer el conjunto completo de herramientas disponibles en el mercado, lo traté en el artículo principal con qué programar en 2026.

¿Cuáles son las limitaciones de Google Stitch?#

Aquí tienes una lista sincera para evitar que te decepcione antes de la tercera pantalla:

• Solo interfaz. No incluye backend, base de datos ni publicación en un servicio de hosting. Para eso necesitas Claude Code (o Lovable si quieres tenerlo todo en un mismo sitio).
• Edición limitada dentro de la herramienta. No puedes mover un elemento individual con el ratón: solo cambiarlo mediante un prompt y volver a generarlo. No es Figma.
• Falta de determinismo. El mismo prompt genera resultados distintos. Es útil para explorar ideas, pero resulta incómodo cuando necesitas resultados reproducibles.
• Cuota. Alcanzarás el límite de generaciones gratuitas (actualmente, diario); no puedes comprar más, así que tienes que esperar a que se restablezca la cuota. El número exacto varía; compruébalo en la interfaz.
• Estado experimental. Google Labs no garantiza el soporte a largo plazo. El servicio podría cambiar o cerrar.
• Restricción geográfica y problema de autorización de MCP en Claude Code, mencionados en las secciones sobre disponibilidad y configuración.

Stitch no es una buena opción si tienes una guía de marca estricta para muchos proyectos, si el diseño ya está en Figma o si necesitas una aplicación con backend que ya esté publicada.

¿Qué sigue?#

Crea el flujo de trabajo más pequeño posible con una pantalla: describe el producto en Stitch, genera la página de inicio, exporta HTML/CSS y pide a Claude Code preparar DESIGN.md y construir la página con esos archivos locales. Cuando veas que el degradado morado desaparece por sí solo, lo demás será más fácil.

Diseñar con Stitch es una técnica de context engineering. El sistema completo combina un clon de IA, el Second Brain y context engineering para que Claude pueda apoyarse en reglas y contexto preparados.

El clon de IA, el Second Brain y context engineering son importantes para el producto. Diseñar con Stitch es el primer elemento de esta combinación.

Para seguir trabajando con modelos, puedes ir a Ailoot.