Diseño de Experiencia
El ux-ui-kit hace que las interfaces sean correctas: tokens, componentes, estados, accesibilidad, renders verificados. Esta habilidad decide cómo debería ser la interfaz para usarla y recordarla, y convierte eso en decisiones concretas que el kit puede construir. Responde: ¿qué debería notar la gente primero, qué debe mantenerse familiar, dónde se gana su lugar la originalidad, qué se mueve y qué se queda quieto, cómo se comunican las interacciones, dónde alcanza su punto máximo la experiencia y cómo termina, y qué queda cuando se elimina la capa impresionante?
Dónde encaja
| Capa | Propietario | Habilidad |
|---|---|---|
| Estrategia del sitio | lo que el sitio debe lograr y decir, estructura de la página, pruebas, confianza, conversión, SEO | website-excellence |
| Dirección de experiencia (esta habilidad) | atención, familiaridad y originalidad, dirección artística, composición y ritmo, interacción, movimiento, momentos emblemáticos, validación experiencial | experience-design |
| Ejecución y verificación | tokens, componentes, código, texto, puertas | apply-aesthetic, brandkit, design-tokens, design-component, design-code, image-to-code, ux-writing, prototype, redesign, design-review, a11y-audit, performance, design-qa |
Usa el contexto estratégico solo cuando cambie una decisión de interfaz. Si la audiencia, la oferta o el propósito de la página de un sitio web no están resueltos, obténlos de website-excellence primero, o declara la suposición y continúa. La interfaz de producto, las aplicaciones y los paneles de control vienen directamente aquí.
Paso 0: escalar el proceso
Elige la profundidad antes que cualquier otra cosa. Los marcos de trabajo en las referencias son herramientas para el juicio, no etapas que cada solicitud deba atravesar.
| Modo | Úsalo para | Qué producir |
|---|---|---|
| Rápido | un componente, estado, ajuste de pantalla o corrección dentro de un sistema establecido | Lee el registro de decisiones de diseño del proyecto si existe. Orden de atención para la vista afectada, una ficha de interacción o movimiento solo para lo que cambia, el análisis de antipatrones, luego construir. Sin ensayo de tesis. |
| Estándar | una nueva página, flujo o familia de pantallas, o el rediseño de uno | Resumen y tesis de experiencia, mapa de atención, presupuesto de novedad, una dirección (alternativas solo para una compensación real), mapa de ritmo, mapa de interacción y movimiento, notas de adaptación, autocrítica, registro de decisiones. |
| Emblemático | un sitio o lanzamiento que define la marca, un rediseño de identidad, o una solicitud explícita de algo memorable | Todo en Estándar, más exploración de conceptos (tres direcciones genuinamente diferentes, comparadas, una elegida), momentos emblemáticos diseñados, un prototipo de la pieza más arriesgada y un plan de validación experiencial. |
Verificación de moderación. En un servicio gubernamental, proceso de pago, autenticación, configuración, documentación, un panel de control operativo o una tarea médica o financiera, el presupuesto de novedad en las rutas de tareas es cercano a cero. La personalidad vive en la tipografía, la claridad, el tono, la precisión y la calidad de la retroalimentación. Saber cuándo la moderación es la decisión más sólida es parte del trabajo.
El bucle
Ejecuta los pasos que necesita el modo. Cada uno apunta a la referencia que contiene el método.
- Comprender. Escribe el resumen de experiencia: intención del usuario, contexto de llegada, atención primaria, resultado, tono, lo que se mantiene familiar, restricciones, lo que la gente debería recordar. [01]
- Establecer. Escribe la tesis de experiencia y la jerarquía de atención (niveles 1 a 4) para cada vista clave. La tesis filtra cada decisión posterior. [01]
- Explorar (Emblemático, o siempre que la primera idea sea la opción por defecto de la categoría). Tres direcciones que difieren en concepto, no en color; compara conservador, diferenciado y audaz; elige; registra lo que se rechazó y por qué. Deja de explorar una vez que la elección esté clara. [02]
- Dirigir. Establece de tres a siete reglas de dirección artística y traduce la tesis en consecuencias para el diseño, el tipo, la escala, el espacio, la densidad, el color, las imágenes, las superficies, los componentes, la interacción, el movimiento y el comportamiento responsivo. [02]
- Componer. Dibuja el mapa de ritmo: el trabajo de cada sección, densidad e intensidad, dónde se encuentra la quietud, dónde está el pico, cómo termina. Deja que el contenido elija su forma en lugar de encabezado, párrafo, tres tarjetas. [03]
- Interactuar. Escribe fichas de interacción para interacciones significativas (intención, affordance, desencadenante, respuesta, retroalimentación, estado, recuperación, continuidad) y cubre los estados de carga, vacío, error, éxito, interrumpido y de borde. [04]
- Coreografiar. Haz el mapa de movimiento: qué se mueve, qué se queda quieto, una ficha de movimiento por movimiento significativo con su clase de presupuesto y una versión diseñada de movimiento reducido. [05]
- Pico. Elige de cero a tres momentos emblemáticos y ejecuta la prueba emblemática en cada uno. [06]
- Adaptar. Vuelve a decidir la experiencia para pantallas pequeñas, táctil, teclado, zoom y reflujo, movimiento reducido y dispositivos de baja potencia; define la escalera de degradación. [07]
- Probar bajo estrés y editar. Ejecuta las decisiones importantes a través del filtro de decisiones y las ambiciosas a través de la verificación de realidad de implementación; luego el análisis de antipatrones, prueba de intercambiabilidad, prueba de integridad conceptual y autocrítica desde siete perspectivas; luego elimina lo que no se gana su lugar. [08]
- Entregar y verificar. Pasa la Especificación de Experiencia a las habilidades de construcción. Ejecuta las puertas del kit y
motion_audit.mjs; renderiza y observa aproximadamente a 375 y 1440 px, solo con teclado, con movimiento reducido emulado. [07, 08] - Validar, refinar y recordar. Prueba las suposiciones más arriesgadas con el método más barato que pueda responderlas; corrige las debilidades de mayor impacto en lugar de pulir detalles de bajo valor; actualiza el registro de decisiones de diseño. [08]
Innegociables
- Haz familiares las cosas necesarias; haz distintivas las cosas significativas. La navegación, los formularios, el proceso de pago, la autenticación, la búsqueda, la configuración y la recuperación de errores mantienen un comportamiento convencional a menos que la evidencia de la audiencia respalde un cambio. Expresa la marca a su alrededor.
- La accesibilidad es una entrada de diseño. WCAG 2.2 AA es el mínimo. Nada esencial depende solo de hover, arrastrar, movimiento, color o sonido. Cada movimiento tiene una versión diseñada de movimiento reducido, no solo una eliminada.
- Sin movimiento sin un trabajo. Cada movimiento significativo nombra lo que comunica y su clase de presupuesto: esencial, mejorador, expresivo, experimental o evitar.
- Sin interacción sin retroalimentación y recuperación. Cada acción significativa se reconoce en aproximadamente 100 ms y se puede deshacer, cancelar o reintentar cuando tenga sentido.
- Cada mejora tiene un modo de fallo. El contenido y las tareas principales aún funcionan con JavaScript, medios pesados y animación eliminados.
- La variación debe tener significado. Cambia la composición, densidad o intensidad porque el contenido, el ritmo, la jerarquía o la emoción lo requieren, nunca solo para evitar la repetición.
- Las referencias dan principios, no superficies. Nunca reconstruyas la identidad de una empresa real para otra persona; extrae por qué funciona una referencia y exprésala de manera diferente.
- Gasta la novedad, no la espolvorees. Presupuesto típico: Rápido 0, Estándar 0 a 1, Emblemático 1 a 2 ideas desconocidas, concentradas donde crean significado o memoria.
- Etiqueta la confianza en afirmaciones materiales (a continuación) y nunca afirmes un resultado que no mediste (Protocolo de Verificación del kit).
- Escala el análisis a la decisión. Sin teoría para opciones obvias; decide y continúa.
Salida: la Especificación de Experiencia
Llena templates/experience-spec.md hasta la profundidad del modo: aproximadamente diez líneas para Rápido, una o dos páginas para Estándar, dos a cuatro para Emblemático. Al construir, la especificación es un plan de trabajo que impulsa el código; mantén su lenguaje fuera de las copias de página y comentarios de código, y resume solo las decisiones que importan en la entrega. Para trabajo Estándar y Emblemático, escribe o actualiza el registro de decisiones de diseño del proyecto desde templates/design-decision-record.md, y léelo primero en cada tarea posterior en ese proyecto.
Entregas
| Decisión tomada aquí | Ejecutado por |
|---|---|
| Las reglas de dirección artística se convierten en tokens (roles de color, tipo, espacio, radio, profundidad, modo de movimiento y duraciones) | brandkit para una nueva base o apply-aesthetic para una existente, luego design-tokens |
| Componentes y sus estados, a partir de las fichas de interacción | design-component, luego design-code |
| Páginas y pantallas a partir de la especificación | design-code, o image-to-code cuando se construye a partir de una referencia |
| Actualización de una interfaz existente después del diagnóstico de genericidad | redesign |
| Texto para acciones, errores, estados vacíos y retroalimentación | ux-writing |
| Prototipos de momentos emblemáticos e interacciones arriesgadas | prototype |
| Puertas: contraste en todos los estados, axe, trampas de enfoque, desbordamiento responsivo, gusto, movimiento | a11y-audit, design-qa, performance, y node ~/.claude/ux-ui-kit/scripts/motion_audit.mjs <page> |
| Revisión puntuada de una pantalla a través de los lentes de base y experiencia | design-review |
Las reglas del kit aún vinculan la construcción: solo tokens, los 8 estados de componentes, el Protocolo de Verificación en ~/.claude/ux-ui-kit/CLAUDE.md, sin emoji.
Etiquetas de confianza
Úsalas en recomendaciones que un lector podría confundir con un hecho. No etiquetes cada oración.
| Etiqueta | Significado | Equivalente en website-excellence |
|---|---|---|
| Convención de alta confianza | patrón ampliamente establecido con fuerte valor de usabilidad | Convención actual, o Estándar |
| Guía respaldada por evidencia | respaldada por un estándar o investigación relevante; di qué cubre la evidencia | Estándar / requisito, Evidencia sólida |
| Inferencia específica del proyecto | razonada a partir de estos usuarios, restricciones y objetivos; declara la suposición | Inferencia |
| Hipótesis creativa | un juicio destinado a crear un sentimiento o un recuerdo; comprobable, no demostrable por investigación | Heurística práctica |
| Oportunidad experimental | novedosa, resultado incierto; justifícala y pruébala antes de confiar en ella | Evidencia limitada/contextual, más un plan de validación |
La investigación puede establecer restricciones y señalar riesgos. No puede elegir la única dirección artística correcta.
Referencias
Carga solo lo que el modo y el problema necesitan.
- 01 Resumen, tesis y atención: resumen de experiencia, tesis, los tres niveles de respuesta, jerarquía de atención, proporcionalidad por contexto, cuándo gana la moderación.
- 02 Conceptos y dirección artística: territorios creativos, diferencia conceptual, fichas de dirección y comparación, intención a ejecución, tipografía, color, imágenes, superficies, uso de referencias y la biblioteca de estilos.
- 03 Composición, ritmo y contenido: diseñar a través del tiempo, el mapa de ritmo, contraste y ritmo, densidad y pausa, interfaces moldeadas por el contenido, tarjetas, herramientas de composición.
- 04 Diseño de interacción: fichas de interacción, la prueba de comunicación, presupuesto de novedad, temporización de retroalimentación, actualizaciones optimistas, deshacer, formularios, estados de experiencia, paridad de entrada, transformación de patrones, interacciones emblemáticas, uso repetido.
- 05 Sistema de movimiento: evidencia, trabajos del movimiento, clases de presupuesto, mapa y fichas de movimiento, temporización, easing y resortes, coreografía, movimiento vinculado al desplazamiento, transiciones de vista, movimiento reducido como diseño, rendimiento, móvil, herramientas, pruebas.
- 06 Momentos emblemáticos: tipos de momento, memorabilidad sin espectáculo, pico y final, selección, la prueba emblemática, formas estáticas, prototipado.
- 07 Adaptación y degradación: responsivo como adaptación, consultas de entrada y capacidad, consultas de contenedor, zoom y reflujo, alcance, niveles de dispositivo, la escalera de degradación, modos de fallo, accesibilidad para características expresivas, comprobaciones de renderizado.
- 08 Crítica, validación y memoria: el filtro de decisiones, verificación de realidad de implementación, análisis de antipatrones de IA, pruebas de intercambiabilidad e integridad, bucle de autocrítica, edición despiadada, pase de artesanía, métodos de validación para claridad y para sentimiento, el registro de decisiones de diseño.