Tres herramientas de diseño con IA, tres respuestas: La guerra de formatos por el contexto de marca

En seis meses, tres de los jugadores más grandes del mercado lanzaron respuestas incompatibles a la misma pregunta: cuando una herramienta de IA genera una interfaz de usuario (UI), ¿cómo conoce tu marca en lugar de usar por defecto los componentes genéricos de Tailwind?

Vercel pasó gran parte de 2025 construyendo el shadcn Registry de v0 con soporte para Model Context Protocol (MCP). El 17 de abril de 2026, Anthropic lanzó Claude Design. Cuatro días después, Google liberó la especificación abierta DESIGN.md que impulsa su herramienta Stitch. Tres productos. Tres enfoques arquitectónicamente incompatibles. Y solo uno de ellos produjo algo realmente portátil.

Si estás usando herramientas de IA para generar interfaces —y la mayoría de nosotros lo hacemos, al menos para prototipos— el enfoque que adoptes implícitamente importa más que la herramienta por la que pagues.

El cuello de botella cambió

Hace un año, el problema con la UI generada por IA era la calidad del prompt. Eso está mayormente resuelto. El problema ahora es la consistencia: esa “deriva visual” donde cada componente se ve ligeramente diferente y que aparece apenas una semana después de usar cualquier herramienta de UI generativa en un proyecto real.

La solución instintiva son mejores prompts. La solución estructural es un contexto de marca persistente. Un agente sin restricciones de diseño produce un caos visual plausible porque está muestreando de una distribución moldeada por sus datos de entrenamiento, no por tu marca. Pasarle tu identidad visual en cada prompt no escala. Hacer commit de esa identidad en algún lugar que el agente pueda leer en cada sesión, sí.

Tres proveedores están apostando fuerte por tres formas de lograrlo.

Enfoque 1: La marca como especificación (Stitch / DESIGN.md)

La respuesta de Google es un archivo guardado en tu repositorio. DESIGN.md combina YAML front matter para tokens de diseño legibles por máquinas —colores, tipografía, espaciado, definiciones de componentes— con un cuerpo de markdown que explica el razonamiento detrás de esas elecciones. Los tokens le dan al agente valores exactos. La prosa le dice por qué.

La especificación tiene licencia Apache 2.0 y actualmente está en fase alfa (versión 0.1.0 lanzada el 21 de abril). El paquete de npm @google/design.md incluye un linter que valida las referencias de los tokens, marca fallos de contraste WCAG en nivel AA y detecta tokens huérfanos. Las exportaciones a configuraciones de Tailwind y al formato DTCG tokens.json ya funcionan.

Fortalezas: Controlable por versiones. Amigable con los diffs. Legible por cualquier LLM sin herramientas especiales. Se ubica junto a AGENTS.md, CLAUDE.md y .cursorrules: la capa de contexto de agentes que silenciosamente se ha vuelto parte de todo repositorio serio.

Debilidades: Autoría manual; aún no hay extracción automática desde activos existentes. Está en fase alfa, por lo que el formato cambiará. La especificación define el archivo pero no el contrato del lado del agente: cómo una herramienta específica debe consumir el archivo aún no está definido.

Enfoque 2: La marca como conocimiento extraído (Claude Design)

La respuesta de Anthropic es la inferencia. Subes repositorios de código, presentaciones, capturas de pantalla y archivos de diseño existentes; Claude Opus 4.7 los lee y construye un kit de UI interno con colores, tipografía, componentes y patrones de diseño. No hay un archivo que editar. El sistema vive en la configuración de tu organización en Claude Design y se aplica automáticamente a cada proyecto.

Fortalezas: Esfuerzo inicial casi nulo. Maneja señales de marca implícitas que son difíciles de articular explícitamente: ese “sentir” de una marca codificado en muchos artefactos. La entrega a Claude Code empaqueta el contexto de diseño con el prototipo, por lo que el salto del mockup a producción es fluido.

Debilidades: Propietario y opaco. No puedes ver los cambios (diff) de tu sistema de diseño en un pull request. No puedes pasarlo por un linter en tu CI. No puedes llevártelo si Anthropic cierra el producto o cambia los precios.

Enfoque 3: La marca como distribución (Vercel v0 + shadcn Registry + MCP)

La respuesta de Vercel es código ejecutable. Los componentes, bloques y tokens viven en un registro estilo shadcn, expuestos a cualquier agente a través de Model Context Protocol. v0, Cursor, Windsurf —cualquier herramienta compatible con MCP— puede traer tus componentes reales de producción a su contexto de generación.

Fortalezas: Unifica el diseño y el código. El registro es el código de producción. Coincide con la forma en que los equipos de ingeniería ya distribuyen librerías. El soporte multienfoque vía MCP significa que tus restricciones funcionan tanto en Cursor como en v0.

Debilidades: Requiere una inversión real de ingeniería. Está acoplado al ecosistema de shadcn/ui y a las convenciones de Tailwind. El bloqueo (lock-in) a nivel de protocolo cambia un problema por otro: no estás bloqueado a un proveedor, pero sí a un ecosistema.

Las tres apuestas

Cada enfoque codifica una teoría diferente de lo que es un sistema de diseño cuando su consumidor principal es un agente. Reglas declarativas, representación aprendida o distribución ejecutable. Ninguno está obviamente equivocado, y la mayoría de los equipos terminarán usando más de uno.

Pero estos enfoques fragmentan el ecosistema de maneras importantes. La asimetría entre los tres es clara: solo uno es abierto, portátil y agnóstico a la herramienta.

Por qué el formato abierto gana

Claude Design lee DESIGN.md. v0 puede consumir sus exportaciones de Tailwind. Una sesión de Cursor puede inyectarlo como contexto de prompt. Cualquier agente que lea markdown —que son todos— puede trabajar con el formato. Ni Claude Design ni v0 emiten nada con un alcance comparable.

Ese es el hecho estratégico. El artefacto que puedes exportar a cada herramienta es el que reduce el riesgo de tu inversión. Las herramientas son adquiridas, pivotan o cambian sus precios. Tu DESIGN.md sigue funcionando.

Análisis Técnico: La Capa de Contexto de Agentes

Estamos viendo la aparición de una nueva capa en el stack de software: Contexto de Agentes. Así como tenemos .env para secretos y package.json para dependencias, ahora necesitamos una forma estándar de decirle a los agentes de IA sobre nuestra intención, arquitectura y diseño.

Fundación Requerida: El Contrato con el Agente

Al implementar cualquiera de estas herramientas, debes definir el contrato entre tu código y el agente. En un mundo con DESIGN.md, ese contrato es el esquema de tokens.

# Fragmento de DESIGN.md
tokens:
  colors:
    brand:
      primary: '#1a1a1a' # Cumple WCAG AA contra #ffffff
      accent: 'var(--color-accent)'
  spacing:
    container: '2rem'

Implementación: Integrando DESIGN.md en CI

El verdadero poder de una especificación abierta es que puedes construir tus propias herramientas alrededor de ella. Así es como puedes conectar el linter de design.md en tus GitHub Actions:

name: Design Lint
on: [push]
jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npx @google/design.md lint DESIGN.md

Trade-offs y Limitaciones

• DESIGN.md requiere mantenimiento manual. Si actualizas tu Figma pero olvidas el archivo MD, el agente generará una UI desactualizada.
• Claude Design es increíblemente rápido para empezar pero crea una “caja negra” de reglas de diseño.
• Vercel Registry es el más robusto pero requiere que mantengas un servicio de registro o endpoint por separado.

Siguiente Paso

Crea un DESIGN.md minimalista esta semana y conecta el linter en tu flujo de CI. Un archivo de diez líneas con tus colores principales y escala tipográfica es un contexto de marca más portátil que el que tienen la mayoría de los equipos actualmente.

Ruta de Aprendizaje

• Especificación de DESIGN.md — la especificación completa y CLI.
• Documentación de Vercel Registry y MCP — el enfoque de registro.
• Guía de configuración de Claude Design — contexto basado en extracción.

Discusión

¿A cuál de los tres enfoques se ha comprometido tu equipo implícitamente? ¿Y qué pasará con esa inversión si la herramienta cambia dentro de dieciocho meses?