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.
This commit is contained in:
100
docs/prompt-claude-design-rutinas-tdah.md
Normal file
100
docs/prompt-claude-design-rutinas-tdah.md
Normal file
@@ -0,0 +1,100 @@
|
||||
# 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.
|
||||
Reference in New Issue
Block a user