recordalexia/docs/prompt-claude-design-rutinas-tdah.md

App de rutinas visuales para niños con TDAH — Diseño de interfaz

Contexto

Diseña la interfaz de una aplicación web pensada para una TABLET en horizontal, montada en modo kiosko junto a la puerta de casa. La usan cada día niños con TDAH (trastorno por déficit de atención e hiperactividad). El objetivo es que, de un vistazo, cada niño sepa qué tiene que meter en la mochila para el cole y qué rutinas hacer por la tarde, marcándolo él mismo a medida que lo completa.

Hay un segundo usuario, los padres, que configuran qué material toca cada día, añaden exámenes/deberes, gestionan la tienda de recompensas y ajustan la gamificación, desde un panel protegido.

La aplicación es MULTI-NIÑO: varios perfiles de hijo, cada uno con su horario, sus tareas, su monedero y su progreso independientes.

Principios de diseño (prioridad absoluta: atención y baja carga cognitiva)

• UNA pantalla, UN foco. Mostrar SOLO el día de hoy. Nada de scroll infinito, menús anidados ni información que compita por la atención.
• Estructura "Ahora / Después": primero lo del cole (mañana), luego lo de la tarde.
• Muy gráfico: iconos/pictogramas grandes, texto mínimo y en mayúsculas legibles. Cada material y tarea con su icono reconocible (toalla, zapatillas, flauta...).
• Feedback inmediato y POSITIVO al marcar una tarea: animación clara, la tarea se "completa" visualmente y una moneda vuela al monedero. Opcional: sonido suave.
• Progreso siempre visible: barra o contador tipo "3 de 5 listo".
• Celebración al completar todo el bloque (confeti / personaje feliz). Nunca mensajes negativos, regaños ni rojos de "error". El tono es siempre de logro.
• Predecible y consistente: mismos colores, iconos y posiciones cada día.
• Sin distracciones: sin notificaciones, sin anuncios, sin animaciones de fondo.
• Color FUNCIONAL: cada asignatura/categoría tiene un color, pero fondo calmado (no saturar). Nada debe depender solo del color (icono + texto + color juntos).
• Pensado para "time blindness": opción de temporizador visual de la rutina de mañana ("salimos en 20 min") como cuenta atrás gráfica, no numérica fría.

Pantallas a diseñar

1. Selección de perfil (multi-niño)

• Pantalla de entrada con los avatares grandes de cada hijo para elegir quién va a usar la tablet. Simple, vistosa, de un solo toque.

2. Pantalla principal "HOY" (kiosko, la más importante)

• Cabecera: nombre/avatar del niño activo, día de la semana y fecha en grande, y su monedero (número de monedas con icono).
• Si hay examen o deberes para hoy: AVISO destacado y muy visible en la parte superior, con icono propio (examen / entregar deberes).
• Bloque "PARA EL COLE HOY": lista de materiales como tarjetas grandes con icono
  • nombre + checkbox enorme (área táctil mínima 60x60). Al tocar → marcado.
• Bloque "ESTA TARDE": rutinas (deshacer la mochila, recoger la mesa, practicar piano...) con el mismo formato de tarjeta.
• Barra de progreso global del día.
• Estado final "¡TODO LISTO!" muy celebratorio cuando completa todo.
• Estado vacío amable si un día no hay nada ("Hoy no hay cole / nada pendiente").
• Acceso visible a la tienda de recompensas desde el monedero.

3. Tienda de recompensas (incluida en la v1)

• El niño canjea sus monedas por premios que definen los padres (tiempo de juego, una salida, una chuche...). Tarjetas grandes con imagen/icono del premio, nombre y coste en monedas.
• Distinguir claramente premios alcanzables (puede canjear ya) de los que aún no llega (le faltan X monedas), siempre en tono motivador, nunca de bloqueo.
• Confirmación de canje celebratoria y actualización del monedero.

4. Panel de PADRES (protegido por PIN)

Acceso discreto desde una esquina; pide PIN. Dentro:

• Gestión de perfiles de hijo (alta, avatar, nombre).
• Editor de horario semanal por hijo: rejilla lunes–viernes donde asignar a cada día las actividades del cole y el material que conlleva cada una.
• Gestor de materiales y actividades: crear "Gimnasia" → asociarle toalla, equipación, zapatillas; cada material con su icono.
• Gestor de eventos puntuales: añadir examen o deberes con fecha y descripción.
• Gestor de rutinas de tarde (recurrentes por día de la semana).
• Gestor de la tienda: crear premios canjeables, su icono y su coste en monedas.
• Ajustes de gamificación: monedas que se ganan por tarea / por completar bloque.

Sistema visual

• Tipografía sans grande, redondeada y muy legible; jerarquía clara.
• Botones y áreas táctiles generosos (mín. 48–60px), pensados para dedos de niño.
• Tarjetas con esquinas redondeadas, sombras suaves, mucho espacio en blanco.
• Paleta: base clara y calmada + acentos vivos pero controlados para categorías.
• Iconografía coherente en todo el sistema (mismo estilo de pictograma).
• Cada perfil de hijo puede tener un color de acento propio para reforzar identidad y evitar confusiones entre hermanos.

Microinteracciones

• Marcar tarea: la tarjeta hace un "check" satisfactorio y la moneda vuela al monedero, que se actualiza con una pequeña animación.
• Completar bloque/día: confeti breve y mensaje de ánimo.
• Canjear premio: animación de recompensa y descuento visible de monedas.

Accesibilidad

• Alto contraste, texto + icono + color (nunca solo color).
• Opción de lectura en voz alta de cada tarea (TTS) para apoyo a la lectura.

Entregables

• Pantalla de selección de perfil.
• Pantalla principal "HOY" (kiosko) en alta fidelidad, horizontal.
• Tienda de recompensas.
• Panel de padres (perfiles + horario semanal + gestores + tienda).
• Estados: pendiente, completado, día completado, vacío, aviso de examen.
• Define design tokens (colores, tipografía, espaciado, radios) reutilizables.