design-agent

design-world

World dedicado a análisis de diseño web/UI-UX dado una URL (pública o localhost), recomendaciones y mejoras de diseño, y animaciones. Sin código propio de app — orquesta skills y comandos contra worlds destino (otros mundos del universo ai-os, o cualquier URL externa).

Qué hace (3 herramientas complementarias)

Herramienta	Para qué	Cuándo
impeccable	Auditoría/crítica de lo que YA existe (23 comandos: audit, critique, polish, animate, bolder, quieter, distill, harden, delight…; 59 reglas detectoras de “AI slop”)	Sitio/código ya escrito, público o localhost vía Puppeteer
ui-ux-pro-max	Generación de design systems desde cero (192 reglas por industria/estilo/paleta/tipografía)	Producto/página NUEVA, sin código todavía
Stitch MCP	Generación de pantallas con IA de Google Stitch, conversión código↔diseño, extracción de HTML estático desde localhost	Screens nuevas con IA visual, o snapshot de una app corriendo para iterar en Stitch — configurado pero no funcional aún, ver sección Stitch MCP abajo

Animaciones

8 skills GSAP instaladas (gsap-core, gsap-timeline, gsap-scrolltrigger, gsap-plugins, gsap-utils, gsap-react, gsap-performance, gsap-frameworks) — todos los plugins (SplitText, MorphSVG, etc.) gratis desde la adquisición Webflow, sin Club GSAP. Motion y anime.js no tienen skill propia — se usa conocimiento base del modelo + doc oficial bajo demanda.

Matriz de decisión rápida: timelines complejos/scroll-driven → GSAP; ya hay GSAP en el world destino → GSAP; React idiomático simple → Motion; landing vanilla JS/Astro sin build pesado → anime.js.

Política por defecto — recomienda primero, confirma antes de tocar código. Para cualquier tarea de animación (nueva o mejora): 1) analiza el world objetivo, 2) presenta recomendación breve (librería + por qué), 3) espera confirmación explícita antes de instalar dependencias o escribir código de animación. Aplica siempre, incluso dentro de /design-run-on ... animate.

Comandos propios

• /design-run-on <url-o-world> [audit|critique|animate|design-system|stitch] — dispatcher genérico. animate encadena /analyze-site-animations (solo reporte) → confirmación del usuario → /impeccable animate recién ahí.
• /analyze-site-animations <url> — análisis GSAP/motion sección por sección con justificación de brand-fit y costo de implementación, sin implementar nada (solo reporte).

Otras skills instaladas

brand, banner-design, design, design-system, slides, ui-styling — conocimiento de referencia adicional para diseño/marca, complementan a las tres herramientas principales.

Reglas de trabajo

• Antes de auditar localhost: confirmar que el dev server del world objetivo ya está corriendo (no se levanta solo, sin avisar).
• Reportes de auditoría → reports/<world-o-url>-<fecha>/.
• Design systems generados con Stitch → design-systems/<proyecto>/ antes de subir al world destino.
• Cambios de código (animaciones, ajustes de diseño) → rama design/<slug>-<fecha> en el world destino, nunca commit directo a main.
• Usa get_world_context($world) del MCP orchestrator antes de auditar/diseñar, para alinear con el stack real de cada world (React/Vite/Tailwind, Astro/vanilla, Java/Spring, etc.).

Ver AGENTS.md para contexto completo, TASKS.md para el backlog y CLAUDE.md para las convenciones heredadas del universo.

Stitch MCP

Configurado en scope project — vive en .mcp.json de este repo (tracked en git, se comparte con el equipo). El header usa una variable de entorno, nunca el key literal:

{
  "mcpServers": {
    "stitch": {
      "type": "http",
      "url": "https://stitch.googleapis.com/mcp",
      "headers": { "X-Goog-Api-Key": "${STITCH_API_KEY}" }
    }
  }
}

Cada dev necesita STITCH_API_KEY seteada en su propio entorno (shell profile del SO — ~/.bashrc, ~/.zshrc, variables de entorno de Windows, etc.) para que Claude Code la resuelva. No crear un .env en el repo para esto — no hace falta, la variable de entorno del sistema alcanza.

Para conectar a OTRO proyecto de Stitch: solo cambia el valor de STITCH_API_KEY en tu entorno (nuevo key desde la consola de Stitch del proyecto destino) y reiniciá Claude Code. El endpoint (https://stitch.googleapis.com/mcp) es fijo — la selección de proyecto va por el API key, no por .mcp.json. No hace falta tocar el archivo.

Verificar conexión: claude mcp get stitch → debe decir Connected.

Estado conocido (2026-08-19): con scope local (antes de pasar a project) conectaba pero tools fetch failed — can't resolve reference #/$defs/ScreenInstance — server responde, el schema de tools falla. Pendiente re-verificar con scope project. Las skills stitch::* tampoco están instaladas todavía en .claude/skills/ — MCP configurado ≠ skills instaladas, falta npx plugins add google-labs-code/stitch-skills --scope project --target claude-code.