Saltar a contenido

UX Studio

Plugin de investigacion y diseno UI/UX que cierra el gap entre requerimientos (PRD) e implementacion (codigo). Investiga competencia y tendencias, entrevista al cliente sobre preferencias visuales, genera Design Direction con 3 opciones por componente en Pencil, y entrega un Design Spec completo con tokens, motion, interactions y responsive. Disenado para equipos que usan el flujo sdd-wizards -> ux-studio -> atl-inteliside.

Prerequisitos

  • Claude Code con soporte de plugins
  • Pencil MCP (incluido en Claude -- herramienta de diseno .pen, dependencia obligatoria declarada en plugin.json)
  • Chrome DevTools MCP configurado para la fase de research (opcional pero recomendado)
  • Engram como memoria compartida entre fases del pipeline
  • Un PRD de sdd-wizards es opcional; sin el, el orquestador pide contexto minimo al usuario

Skills

El plugin expone dos skills: un wizard interactivo de descubrimiento que entrevista al cliente sobre preferencias de diseno (marca, mood, motion, plataforma), y un orquestador que coordina las 8 fases del pipeline delegando a subagentes especializados.

Skill Descripcion Invocacion Tools permitidos
ux-discovery Wizard interactivo de entrevista de diseno. 7 secciones: marca, mood (30+ tone options), referencias, plataforma, animacion, funcionalidades especificas, accesibilidad. Genera un UX Brief en Engram. /ux-studio:ux-discovery (no especificados en frontmatter -- hereda del plugin)
ux-orchestrator Orquestador del pipeline completo. Coordina 8 fases secuenciales delegando a subagentes. Genera Design Spec final con tokens, motion, interactions y responsive. /ux-studio:ux-orchestrator (no especificados en frontmatter -- hereda del plugin)

Agentes

El plugin cuenta con tres subagentes especializados que el orquestador lanza en fases especificas del DAG. El researcher investiga competencia y tendencias, el designer crea la direccion visual y genera disenos en Pencil, y el reviewer valida contra 6 dimensiones de calidad antes de la aprobacion del PM.

Agente Rol Modelo Tools maxTurns
ux-researcher Investiga competencia, tendencias UI/UX y motion patterns. Navega sitios con Chrome DevTools y WebSearch. Genera Design Research Report. sonnet Read, Grep, Glob, Bash, WebSearch, WebFetch, chrome-devtools:* (disallowed: Write, Edit, Agent) No especificado
ux-designer Crea Design Direction (visual + motion + interaction + responsive), genera prompts con 3 opciones por componente, y produce disenos en Pencil (.pen). inherit Read, Grep, Glob, Bash, WebSearch, pencil:* (disallowed: Agent) No especificado
ux-reviewer Valida disenos contra 6 dimensiones: consistencia, accesibilidad WCAG AA, alineacion con brief, completitud, anti-generico (AI test), y motion/interaction. sonnet Read, Grep, Glob, Bash, pencil:batch_get, pencil:get_screenshot, pencil:get_variables, pencil:search_all_unique_properties, pencil:snapshot_layout, pencil:export_nodes (disallowed: Write, Edit, Agent) No especificado

Flujo de trabajo

El pipeline sigue un DAG de 8 fases secuenciales. Solo las fases 2 (Discovery) y 7 (PM Review) son interactivas; el resto se ejecuta de forma autonoma via subagentes.

  1. Research (ux-researcher) -- Analiza competencia, tendencias y motion patterns. Input: PRD o contexto minimo. Output: Design Research Report en Engram (ux-studio/research-report).
  2. Discovery (ux-discovery skill, interactiva) -- Entrevista guiada de 7 secciones sobre marca, mood, referencias, plataforma, animacion, funcionalidades y accesibilidad. Output: UX Brief en Engram (ux-studio/ux-brief).
  3. Design Direction (ux-designer) -- Genera documento rector con 4 secciones: Visual Direction (paleta, tipografia, texturas), Motion Spec (timing, easing, patrones), Interaction Spec (estados por componente), Responsive Spec (breakpoints, fluid typography). Output: Design Direction en Engram (ux-studio/design-direction).
  4. Prompt Gen (ux-designer) -- Genera 3 opciones por componente/seccion (A: conservadora, B: diferenciada, C: bold) con especificidad extrema (hex, px, ms, font names). Output: Design Prompts en Engram (ux-studio/design-prompts).
  5. Design Gen (ux-designer + Pencil MCP) -- Genera disenos reales en archivos .pen usando tokens del Design Direction. Valida visualmente con screenshots. Output: archivos .pen y metadata en Engram (ux-studio/pen-files).
  6. Review (ux-reviewer) -- Valida contra 6 dimensiones. Si FAIL, vuelve a fase 5 (max 1 iteracion). Output: Design Review en Engram (ux-studio/design-review).
  7. PM Review (interactiva) -- Presenta screenshots de las 3 opciones al PM por componente. El PM elige A, B, C, mezcla o rechaza. Max 2 iteraciones por componente. Output: selecciones en Engram (ux-studio/pm-selections).
  8. Design Handoff (automatica) -- Extrae tokens, componentes e imagenes del .pen aprobado. Compila Design Spec completo. Actualiza Feature Spec en GitHub con label design-ready. Output: Design Spec en Engram (ux-studio/design-spec).

Contratos de datos

Engram

Todos los artefactos se persisten bajo el prefijo ux-studio/ en Engram:

Topic Key Fase Contenido
ux-studio/research-report Research Tendencias, competencia, referencias
ux-studio/ux-brief Discovery Preferencias del cliente
ux-studio/design-direction Design Direction Visual + Motion + Interaction + Responsive specs
ux-studio/design-prompts Prompt Gen 3 opciones por componente/seccion
ux-studio/pen-files Design Gen Paths a archivos .pen generados
ux-studio/design-review Review Resultado de validacion
ux-studio/pm-selections PM Review Opciones elegidas por el PM
ux-studio/design-spec Handoff Spec consolidado final (pm_approved: true)

GitHub

En la fase de Handoff, si GitHub esta configurado: - Busca milestone feat-{feature_name} e issue con label feature-spec - Agrega seccion ## Design References al issue con tokens, component mapping, screens, motion, interactions y responsive - Crea y asigna label design-ready al issue

Si GitHub no esta configurado, el handoff se realiza solo via Engram.

Configuracion para proyectos

Copiar plugins/ux-studio/examples/CLAUDE.md a la raiz del proyecto. La configuracion incluye:

  • Declarar los 3 plugins del stack: sdd-wizards, ux-studio, atl-inteliside
  • Configurar Chrome DevTools MCP (opcional, para research de competencia)
  • Definir proyecto Engram con prefijo ux-studio/
  • Pencil MCP viene incluido en Claude y no requiere configuracion adicional

Ejemplo de invocacion del stack completo: 

claude --plugin-dir ./plugins/sdd-wizards --plugin-dir ./plugins/ux-studio --plugin-dir ./plugins/atl-inteliside

Integración con Doc-Gen

Después de completar el Design Spec con ux-orchestrator, se recomienda correr doc-gen para mantener la documentación del proyecto actualizada.

Cuándo Comando
Después de completar el Design Spec con ux-orchestrator /doc-gen:doc-modulo {path-del-design-system}
Verificación periódica /doc-gen:doc-sync

Limitaciones conocidas

  • No tiene hooks -- no hay validaciones deterministicas pre/post ejecucion
  • Pencil MCP obligatorio -- sin Pencil, las fases 5-8 no funcionan
  • Chrome DevTools puede fallar -- algunos sitios bloquean navegacion automatica; el researcher usa WebSearch como fallback
  • Maximo 8-10 componentes/secciones por propuesta para no saturar el contexto
  • Maximo 1 restart completo por sesion si el PM rechaza todo en fase 7
  • Figma Console MCP esta documentado como alternativa futura pero no es el canal principal; el plugin usa Pencil MCP
  • Fonts prohibidos: Inter, Roboto, Arial, Space Grotesk (principio anti-generico)
  • Colores prohibidos: #3B82F6 (SaaS blue), purple gradients on white
  • Sin agentes propios -- los agentes no tienen maxTurns definido en frontmatter; dependen del orquestador para control de flujo