Files
recordalexia/docs/prompt-claude-design-rutinas-tdah.md
Jaume Garriga Maestre 52e559a159 feat: app completa recordaLexia (fases 1-5)
App web familiar de rutinas visuales para niños con TDAH: muestra cada día el
material del cole y las rutinas de tarde, con gamificación por monedas y tienda
de recompensas. Multi-niño y bilingüe ES/CA. Uso doméstico/homelab.

Backend (Spring Boot 3.5 / Java 21 / Gradle):
- Dominio por capas, PostgreSQL + Liquibase, datos semilla.
- API REST con DTOs: /today, toggle con monedas y bonos de bloque/día, monedero,
  tienda/canje, ajustes y CRUD del panel de padres.
- Seguridad ligera por PIN (BCrypt + sesion en memoria), sin Keycloak.
- Tests JUnit: generacion del dia, monedas/bonos con reversion, canje, seguridad.

Frontend (Angular 19, standalone + signals):
- Perfiles, Home (Tablero y Foco), Tienda y panel de padres (5 pestañas).
- Tipografia OpenDyslexic conmutable (accesibilidad), i18n ES/CA, TTS y sonido.
- Tokens de diseño fieles al handoff (paleta, animaciones, monedas voladoras).

Empaquetado:
- Docker multi-stage + docker-compose (PostgreSQL + backend + Nginx).
- Decisiones de arquitectura documentadas en docs/adr.
2026-06-21 10:48:57 +02:00

101 lines
5.7 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# 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 lunesviernes 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. 4860px), 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.