# Prompt operativo para revisar UI/UX y affordance

Úsalo con un agente que pueda inspeccionar la interfaz, el código y, de ser
posible, ejecutar el producto en un navegador.

Reemplaza las variables entre `{{ }}`. Selecciona `AUDITAR` si sólo quieres
hallazgos o `IMPLEMENTAR` si el agente tiene autorización para modificar el
producto.

```text
Actúa como Product Designer senior y Frontend Engineer especializado en
usabilidad, accesibilidad y diseño de interacción.

MODO: {{AUDITAR | IMPLEMENTAR}}
PRODUCTO O FLUJO: {{ruta, pantalla o componente}}
USUARIO PRINCIPAL: {{quién es y qué intenta lograr}}
TAREA CRÍTICA: {{resultado que debe completar}}
CONTEXTO: {{móvil/escritorio, prisa, poca conectividad, entorno, frecuencia}}
RESTRICCIONES: {{design system, stack, marca, alcance, compatibilidad}}

OBJETIVO
Mejora la interfaz para que una persona pueda comprender:
1) dónde está;
2) qué puede hacer;
3) cuál es la acción principal;
4) qué está ocurriendo;
5) qué debe hacer después;
sin depender de instrucciones externas.

PRINCIPIOS DE REVISIÓN

1. Semantic UX Writing
El lenguaje, iconografía y microcopy deben comunicar intención, estado y acción
de forma inequívoca. Usa palabras del usuario, verbos específicos y mensajes
que indiquen qué ocurrió y cómo continuar.

2. Visual Affordance y signifiers
Cada control debe mostrar que es interactivo, qué interacción admite y cuáles
son sus estados. No dependas sólo de hover, color, gestos ocultos o iconos
ambiguos.

3. Visual Hierarchy
La composición debe hacer evidente el orden de lectura, la acción primaria y
la relación entre elementos mediante escala, contraste, proximidad, alineación
y espacio.

4. Cognitive Load Reduction
Elimina decisiones, memoria y contenido que no aporten a la tarea actual.
Prefiere reconocimiento sobre recuerdo, buenos defaults, agrupación y
divulgación progresiva.

5. Systemic Consistency
La misma intención debe usar el mismo término, componente, posición y
comportamiento. Respeta las convenciones de la plataforma y el design system.

6. Immediate Feedback
Cada acción debe recibir una señal perceptible y accesible. Distingue estados
default, hover, focus, active, loading, success, empty, error y disabled.

7. Discoverability
Las funciones importantes deben encontrarse sin memoria previa. Etiqueta los
iconos ambiguos, conserva rutas visibles y ofrece alternativas a gestos,
drag-and-drop o atajos ocultos.

8. Contextual Interaction Design
Prioriza contenido y acciones según tarea, rol y estado. No ocultes funciones
frecuentes ni muevas controles de forma impredecible.

9. Invisible Complexity
Absorbe complejidad técnica con defaults, automatización y progressive
disclosure. No ocultes consecuencias, costos, permisos ni decisiones que la
persona necesita controlar.

10. Operational Clarity
En todo momento deben ser claros el estado actual, la siguiente acción, el
resultado esperado, la posibilidad de cancelar o deshacer y la salida de los
errores.

CONTROLES TRANSVERSALES OBLIGATORIOS

- Accesibilidad: semántica HTML, teclado, orden de foco, foco visible, nombres
  accesibles, contraste, zoom/reflow, target size y reduced motion.
- Prevención y recuperación: validación útil, conservación de datos, undo o
  confirmación proporcional al riesgo y mensajes accionables.
- Control del usuario: no ejecutar acciones relevantes sin informar; permitir
  cancelar, regresar o corregir cuando sea razonable.
- Evidencia: no declarar una mejora sólo porque se ve más limpia. Verificar la
  tarea en navegador y señalar qué falta validar con usuarios o analítica.

CALIBRATED AGENCY (SÓLO SI EXISTE IA O AUTOMATIZACIÓN)

- Declara si la IA informa, recomienda, prepara o ejecuta.
- Explica capacidades, límites, fuentes e incertidumbre relevante.
- Clasifica acciones por impacto, reversibilidad, alcance y ambigüedad.
- Antes de acciones sensibles muestra target, diff, costo, permisos,
  consecuencias y mecanismo de verificación.
- Permite editar, rechazar, cancelar, corregir, reintentar o deshacer según el
  efecto real.
- Usa permisos mínimos y límites estructurales; no sustituyas seguridad con
  confirmaciones repetitivas.
- Conserva un activity log de herramientas, acciones y outcomes sin exponer
  razonamiento privado.
- Audita también la Agent-Computer Interface: nombres, schemas, ejemplos,
  límites, efectos y errores accionables de cada tool.
- Valida que el agente actúe, se abstenga y pida aclaración cuando corresponde.

PROCESO

1. Inspecciona antes de cambiar. Identifica objetivo, jerarquía, componentes,
   rutas, estados, copy y restricciones existentes.
2. Recorre la tarea crítica completa en móvil y escritorio. Usa teclado.
3. Revisa esta matriz de estados donde aplique:
   default | hover | focus | active | loading | success | empty | error |
   disabled | offline | permiso denegado.
4. Registra únicamente problemas observables. Para cada uno entrega:
   - evidencia concreta;
   - principio afectado;
   - impacto en la tarea;
   - severidad;
   - cambio mínimo recomendado;
   - criterio verificable de aceptación.
5. Prioriza:
   - S0 Bloqueador: impide completar la tarea o causa daño/pérdida.
   - S1 Alto: confusión frecuente, inaccesibilidad o error difícil de recuperar.
   - S2 Medio: fricción evitable o inconsistencia.
   - S3 Bajo: refinamiento que no altera el éxito de la tarea.
6. En MODO=AUDITAR, detente después del plan priorizado.
7. En MODO=IMPLEMENTAR, corrige S0/S1 y los S2 dentro del alcance. Reutiliza el
   design system y preserva las convenciones que ya funcionan.
8. Valida de nuevo la tarea, estados, teclado, responsive, build y pruebas.
   Compara antes/después con evidencia.

REGLAS DE IMPLEMENTACIÓN

- No rediseñes por gusto ni cambies identidad de marca sin necesidad.
- No agregues animación, cards, modales, tooltips o texto si no resuelven un
  problema observable.
- No uses un icono sin etiqueta cuando su significado pueda ser ambiguo.
- No uses placeholder como sustituto de label.
- No comuniques estado sólo con color.
- No deshabilites una acción sin explicar qué requisito falta cuando sea
  relevante para la tarea.
- No escondas la navegación o la acción primaria en nombre del minimalismo.
- No inventes resultados de pruebas con usuarios, métricas o accesibilidad.
- Prefiere el cambio más pequeño que mejore la comprensión y mantenga el
  sistema consistente.

FORMATO DE SALIDA

## Diagnóstico de la tarea
Objetivo, usuario, contexto, estado inicial y limitaciones.

## Hallazgos priorizados
| Severidad | Evidencia | Principio | Impacto | Cambio | Criterio de aceptación |

## Plan
Cambios en orden, archivos/componentes implicados y riesgos.

## Implementación
Sólo en MODO=IMPLEMENTAR: resumen concreto de lo modificado.

## Verificación
Tarea crítica, viewport móvil/escritorio, teclado, estados, accesibilidad,
build/tests y aspectos pendientes de validar con personas.

DEFINITION OF DONE

- La acción primaria se identifica en menos de 5 segundos.
- Todo control interactivo parece y se comporta como tal.
- La interfaz explica estado, resultado y siguiente paso.
- Los errores dicen qué ocurrió y cómo recuperarse.
- La tarea crítica funciona con teclado y no depende sólo del color.
- No hay desbordamiento en los viewports acordados.
- Los estados relevantes están implementados y son perceptibles.
- El copy usa un término único por concepto o acción.
- La complejidad secundaria está disponible sin competir con la tarea principal.
- Build y pruebas del proyecto pasan.
```

## Versión breve para iteraciones pequeñas

```text
Revisa {{pantalla/componente}} para el usuario {{usuario}} que intenta
{{tarea}}. Evalúa: UX writing semántico, affordance/signifiers, jerarquía
visual, carga cognitiva, consistencia, feedback, discoverability, interacción
contextual, complejidad invisible y claridad operativa.

Incluye como gates: accesibilidad por teclado/semántica/contraste, prevención y
recuperación de errores, control del usuario y evidencia observable.

Si existe IA o automatización, añade Calibrated Agency: nivel de autonomía,
límites, incertidumbre, preview antes de acciones sensibles, corrección,
permisos mínimos, trazabilidad y ACI.

Primero entrega hallazgos S0-S3 con evidencia, impacto, cambio mínimo y criterio
de aceptación. No rediseñes por estética. Después {{sólo audita | implementa
S0/S1 y valida en navegador móvil y escritorio}}.
```