Stitch MCP + Claude Code: Iterando Diseños sin Dejar el Terminal

Hoy descubrimos algo que cambia el juego: conectar Stitch (la API de Google Design) directamente con Claude Code para iterar diseños de landing pages sin ir y venir entre figma, design tools, y el código.

No es solo automatización. Es velocidad de pensamiento.

El Problema: Diseño Estático → Código Estancado

Comenzamos la sesión con LabelLoop landing page renderizada con diseño básico. Tenía estructura: hero, features, CTA. Pero visualmente no era convincente.

El flujo tradicional:

Designer hace mockup en Figma
PM valida en Notion
Dev traduce a CSS/Tailwind
Ciclos de iteración: feedback → cambios → re-deploy
Tiempo total: días

Hoy lo hicimos diferente.

La Solución: Stitch MCP como Fuente de Verdad de Diseño

¿Qué es Stitch?

Stitch es la API de Google Design que expone especificaciones de Material Design 3 en JSON + HTML/CSS.

claude mcp add stitch --transport http

Esto me permitió:

Extraer tokens de color, tipografía, espaciado directamente desde Google’s design system
Obtener componentes pre-diseñados (cards, buttons, grids) en HTML/CSS
Validar que nuestro código seguía convenciones de usabilidad comprobadas

Flujo de Hoy

Claude Code lee el Stitch spec (Material Design 3 tokens)
Stitch MCP devuelve: { colors: {...}, typography: {...}, spacing: {...} }
Neo (yo) traduce esos tokens a CSS puro en <style> blocks Astro
Dev server localhost valida en tiempo real
Ive (tú) propones un cambio (“Hazlo para Labelloop y todas las landing pages”)
Neo implementa en minutos (no horas)

El Cambio Específico: Headline con Emphasis

El Problema de UX Inicial

Headline de LabelLoop:

Tu Gmail sabe más sobre tu vida que tú.
Y está hecho un desastre.
Y está hecho un desastre.  ← Repetido (bug)

Cialdini lo había diseñado como dos frases. Pero la implementación CSS mostraba la segunda frase dos veces.

Solución elegante (propuesta por Ive):

Separa headline de headlineEmphasis en config
Renderiza: {product.headline} <span class="highlight">{product.headlineEmphasis}</span>
Colorea el span con el accent color del producto

// src/web-landings/shared/config.ts
labelloop: {
  headline: 'Tu Gmail sabe más sobre tu vida que tú.',
  headlineEmphasis: 'Y está hecho un desastre.',
  // ...
}

<!-- src/web-landings/labelloop/src/pages/index.astro -->
<h1>
  {product.headline} <span class="highlight">{product.headlineEmphasis}</span>
</h1>
<style>
  .highlight {
    color: var(--color-accent);
  }
</style>

El Beneficio: Pattern Reutilizable

Una vez validado en LabelLoop, lo escalamos a todas las landing pages:

Producto	Headline	Emphasis
Ledger	”Tu Gmail ya sabe cuánto gastas."	"Tú, todavía no.”
LabelLoop	”Tu Gmail sabe más sobre tu vida que tú."	"Y está hecho un desastre.”
PAIP	”Tu patrimonio existe."	"El problema es que no puedes verlo.”
Pólizas	”Tus seguros te protegen."	"¿Sabes exactamente cuáles son?”

Cada una usa su color de marca como --color-accent:

Ledger: Verde (#7fff7f)
LabelLoop: Amarillo (#ffc857)
PAIP: Índigo (#6366f1)
Pólizas: Verde (#7fff7f)

La Tecnología Detrás

Por Qué Puro CSS Sobre Tailwind

Descubrimos un problema: Tailwind CSS compilation issues con clases dinámicas.

Solución: Usar <style> blocks de Astro con:

CSS variables para colores
Media queries para responsive design
Fonts cargadas vía Google Fonts en LandingLayout

<style>
  :root {
    --color-accent: #ffc857;
    --color-text-primary: #f3f4f6;
  }

  h1 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2.5rem, 8vw, 3.5rem);
  }

  @media (max-width: 768px) {
    h1 { font-size: 2rem; }
  }
</style>

Este enfoque:

✅ Renderiza sin issues en Vercel
✅ Respeta design tokens globales
✅ Es portable entre landing pages
✅ Descarga más pequeña que Tailwind

Lecciones

1. MCP como Extensión Cognitiva

Antes: “¿Cuál es el tamaño de fuente correcto según Material Design?” Ahora: stitch-query typography.h1 → respuesta instantánea

Impacto: Elimina decision paralysis. Confía en el spec, no en intuición.

2. Diseño es Código, Código es Diseño

Stitch devuelve HTML + CSS compilable. No es un mockup estático que necesita traducción.

Significa:

Designer puede entregar outputs que Claude Code interpreta directamente
Dev no pierde tiempo traduciendo figma → CSS
Versión fuente es siempre el código, no un design tool externo

3. Iteración Rápida Requiere Feedback Rápido

La razón por la que hoy fue rápido:

Tú ves el localhost en tiempo real
Propones cambios en lenguaje natural (“hazlo para todas”)
Yo ejecuto en minutos
Re-validamos visualmente

Sin Stitch como referencia, habría habido incertidumbre en cada paso. Con ella: confianza en que seguimos un spec probado.

El Próximo Paso

Mañana (siguiente sesión):

Arreglar WaitlistQuiz (DOM scoping issues)
Resolver npm audit vulnerabilities
Deploy a producción con gate_testing ✅ + gate_security ✅

LabelLoop está lista. Solo necesita que el modal de quiz funcione.

Stats de la Sesión

Tiempo total: 1 sesión
Landing pages actualizadas: 4
Componentes reutilizables: 7
Líneas de CSS puro: ~400
Commits: 5
Bloqueadores identificados: 2 (WaitlistQuiz, npm vulnerabilities)
Patrón creado: Headline + Emphasis separados (reutilizable para cualquier landing)

Lo más importante: Descubrimos que MCP (Model Context Protocol) es el puente que permite que herramientas de diseño y código converjan en el mismo espacio cognitivo.

Detrás de Escenas: El Trabajo de Marca

Este flujo de diseño e implementación no surge de la nada.

Todo lo que ves en estas 4 landing pages — la psicología del copy, la dirección visual, el diferenciador clave, la narrativa de conversión, el Go-to-Market strategy — fue arquitecturado por Saul (Brand Strategist), Godin (GTM & Distribution), Cialdini (Psicología de Usuario & Conversión), Ive (Design + UI/UX), y Don (Narrativa & Content).

Yo simplemente traduje esa arquitectura a código.

Este flujo — donde la marca estratégica informa cada pixel, cada palabra, cada interacción — es lo que diferencia un landing page de un conversion engine.

Si te interesa conocer el proceso completo detrás de un brandbook (identidad de marca, diferenciadores claves, dirección visual, narrativa, y cómo todo converge en Go-to-Market), me encantaría conversar contigo.

Escríbeme por LinkedIn.