Prompts de diseño UI para apps móviles.

Estamos diseñando [Pagely, una app de hábitos de lectura]. Los usuarios son [adultos que quieren leer de 10 a 30 minutos al día pero siempre se les olvida]. El ciclo principal: [fijar un objetivo diario, leer con un temporizador, mantener una racha]. Plataforma: [primero iOS].

Enumera todas las pantallas que necesita la primera versión, agrupadas en onboarding, ciclo principal y ajustes. Para cada pantalla, indica su propósito en una frase y las tres cosas más importantes que aparecen en ella.

Diseña el flujo de onboarding en tres pantallas: bienvenida, elegir un objetivo diario y la primera pantalla de inicio. Cada pantalla es un archivo HTML autocontenido a 390×844 con CSS en línea y fuentes del sistema. Usa un mismo estilo coherente en las tres: [fondo crema cálido, verde oscuro para las acciones, un acento coral, una serif para los titulares]. Muestra un indicador de progreso en la pantalla del objetivo y dibuja cualquier ilustración con CSS.

Diseña la pantalla de inicio para un usuario recurrente en el día [12] de su racha. El elemento más importante es [el progreso de hoy hacia el objetivo diario]; haz que sea lo primero que se vea. Debajo: [el libro que está leyendo con el progreso de páginas], un botón principal para [empezar una sesión] y [las estadísticas de esta semana]. Incluye una barra de pestañas inferior con [Hoy, Biblioteca, Estadísticas, Perfil].

Diseña la pantalla de lista [Biblioteca] y la pantalla de detalle de [un libro] en dos archivos. La lista muestra [12 libros] con portada, título, autor y progreso, además de un campo de búsqueda y chips de filtro para [Leyendo, Terminados, Quiero leer]. La pantalla de detalle se abre desde un elemento de la lista y muestra [el historial de lectura y las notas]. Usa títulos y cifras realistas.

Diseña la pantalla de ajustes con las listas agrupadas estándar de [iOS]: [Cuenta, Objetivo diario, Recordatorios, Apariencia, Datos y privacidad, Ayuda]. Muestra el valor actual a la derecha de cada fila, usa un interruptor para [los recordatorios] y pon las acciones destructivas como [Eliminar cuenta] al final, en rojo.

Para la pantalla [Biblioteca], diseña tres estados más en archivos separados: vacío (un usuario nuevo sin libros, con un siguiente paso claro), cargando (placeholders tipo skeleton que imiten el layout real) y error (sin conexión, con un botón para reintentar). Mantén la navegación y el encabezado idénticos a los de la pantalla normal.

Crea versiones en modo oscuro de las pantallas de [inicio] y [biblioteca]. No te limites a invertir los colores: usa un fondo oscuro [gris verdoso] en lugar de negro puro, baja la saturación del acento, mantén el contraste del texto en WCAG AA o superior y dime qué colores cambiaste y por qué.

Adapta la pantalla de [inicio] a Android con las convenciones de Material 3: barra superior de la app, barra de navegación y un botón de acción flotante para [empezar una sesión] si encaja. Mantén nuestros colores y tipografía de marca. Enumera qué cambió respecto a la versión de iOS.

Implementa las pantallas aprobadas de onboarding e inicio en nuestra app de [SwiftUI]. Reproduce el layout y el espaciado de los archivos HTML de [designs/], usa los colores de [Theme.swift], admite Dynamic Type y reutiliza los componentes existentes cuando encajen.