Diseño multipantalla de aplicaciones móviles a 390×844: prompts, flujos y revisiones
Cuando pides una aplicación móvil a un agente de IA sin reglas de viewport y de flujo, normalmente obtienes una página de escritorio comprimida en una columna estrecha: etiquetas diminutas, navegación concentrada arriba y cuatro tarjetas anidadas que compiten por el espacio. El diseño móvil real parte de un viewport de 390×844, dedica cada pantalla a una única tarea principal y revisa de tres a cinco pantallas conectadas una junto a otra.
Ideas clave
- Define los diseños a 390×844 (o en viewports específicos del dispositivo, como 198×242 para relojes) y coloca las acciones principales dentro del alcance natural del pulgar.
- Entrega tanto un index.html interactivo como un screens.html con las pantallas una junto a otra, para poder evaluar de un vistazo la continuidad del flujo desde la lista hasta el detalle y la finalización.
- Centra cada obra en un cambio de estado táctil: recorrer una curva de mareas, confirmar el punto de recogida de un trayecto o abrir girando una máquina de cápsulas.
- Elimina los envoltorios de tarjetas anidadas que desperdician espacio horizontal de relleno en una pantalla de 390 píxeles.
npx skills add oil-oil/oil-uiExplora más de 30 demos y prompts de aplicaciones móviles multipantalla en /es/inspiration/mobile-app-design/.
Por qué una aplicación móvil no es una página web estrecha
En un monitor de escritorio de 1440 píxeles, el usuario puede recorrer al mismo tiempo una barra lateral, una cabecera y una cuadrícula de varias columnas. En una pantalla de teléfono de 390×844, la atención pertenece al paso que está justo debajo del pulgar. Apilar una barra de búsqueda, un banner promocional, cuatro etiquetas de categorías y una cuadrícula de tarjetas de dos columnas en una sola pantalla hace que todos los controles resulten estrechos.
Observa cómo las obras móviles de la galería de Oil UI centran cada pantalla: Tide se basa en arrastrar una línea de tiempo para ver cómo se mueven sincronizados la altura del oleaje, el viento y la curva de mareas; Pickup (ride) combina un mapa en directo con un panel inferior para confirmar el punto, ver la llegada del conductor y editar el destino durante el trayecto; Pact (bank) y Luma (sleep) dan prioridad a la tipografía y al espacio libre sobre los elementos decorativos.
| Obra y modelo | Viewport | Pantalla 1 (entrada) | Pantalla 2 (interacción principal) | Pantalla 3 (resolución / estado) |
|---|---|---|---|---|
| Tide, previsión de surf (GPT 6.1 Sol) | Teléfono a 390×844 | Puntos de surf guardados con aviso de la mejor ventana | Oleaje, viento y curva de mareas de 7 días para un punto | Recorrido de la línea de tiempo para inspeccionar una hora concreta |
| Pickup, transporte con conductor (Claude Sonnet 5.5) | Teléfono a 390×844 | Confirmación del punto y hoja de estimación de la tarifa | Llegada del conductor en directo con comprobación del vehículo y la matrícula | Cambio de destino durante el trayecto y recálculo de la tarifa |
| Luma, meditación y sueño (GPT 6.1 Sol) | Teléfono a 390×844 | Inicio nocturno tranquilo organizado por objetivo de sueño | Guía de respiración activa y reproducción de audio | Resumen matinal del ritmo y la duración del sueño |
| Splitwater, reloj de natación (GPT 6.1 Sol) | Reloj a 198×242 | Natación activa (negro puro, un único recuento de largos gigante) | Anillo de cuenta atrás del descanso en el borde con señal háptica | Bloqueo de agua con giro de la corona y resumen posterior a la natación (5 pantallas) |
Revisión de flujos completos con screens.html en paralelo
Juzgar una aplicación móvil por una única pantalla de inicio oculta transiciones rotas y alturas de cabecera incoherentes. En el flujo de trabajo de Oil UI, los agentes generan dos vistas para los proyectos móviles:
Un index.html interactivo a 390×844
Permite pulsar pestañas de navegación, abrir paneles inferiores, arrastrar controles deslizantes y probar transiciones de estado directamente en el navegador.
Un screens.html con de 3 a 5 pantallas clave una junto a otra
Coloca la pantalla de entrada, el estado de interacción activa y el estado completado en un mismo lienzo para verificar la escala tipográfica, el relleno del área segura y la continuidad cromática durante todo el recorrido.
Verificación mediante capturas de alta densidad de cada pantalla
Captura cada pantalla de 390×844 con DPR=2 para comprobar el tamaño de las áreas táctiles (mínimo de 44 píxeles), el espacio libre del indicador de inicio inferior y los saltos de línea de las etiquetas.
Plantilla de prompt para aplicaciones móviles multipantalla
Utiliza esta estructura de prompt en Claude Code, Codex o Cursor para generar una interfaz móvil multipantalla coherente:
Usa Oil UI para diseñar e implementar una [categoría de aplicación, por ejemplo, planificador de viajes en grupo / aplicación de presupuesto personal] en un viewport móvil de 390×844.
- Tarea principal y respuesta: [Describe la interacción distintiva, por ejemplo, arrastrar paradas para reordenar el programa de un día con actualizaciones del tiempo de trayecto en directo / registrar un gasto en dos toques y ver cómo se ajusta la barra de presupuesto semanal].
- Tres pantallas obligatorias:
1. Pantalla 1: [Vista principal, por ejemplo, resumen del viaje día por día];
2. Pantalla 2: [Estado de interacción activa, por ejemplo, arrastrar una parada o abrir el panel de gastos compartidos];
3. Pantalla 3: [Estado completado o vista de detalle secundaria].
- Entregables: Crea tanto un index.html interactivo como un screens.html con las tres pantallas una junto a otra. Diseña para el alcance del pulgar y una jerarquía móvil a todo lo ancho, en lugar de tarjetas de escritorio anidadas.Aunque tu aplicación de producción utilice React Native, Flutter o SwiftUI, crear primero un prototipo del panel de 3 pantallas en HTML permite fijar el espaciado y la jerarquía en minutos.
Ejemplos funcionales y prompts de la galería
Abre las demos en directo a 1440 o 390 píxeles para examinar cómo el modelo y el prompt dieron forma a la interfaz final.
Tide
App de pronóstico de surf y mareas
Una app de pronóstico de surf y mareas para surfistas (390×844): una lista de puntos de surf guardados y, para cada punto, la altura y el periodo de las olas, la dirección y velocidad del viento de hoy y de los próximos siete días, una curva de mareas y una sugerencia sobre la mejor hora para ir. Las mareas y las condiciones cambian con el tiempo, por lo que esta es una pieza de visualización de datos: al arrastrar la línea temporal, las olas, el viento y la marea se actualizan a la vez. Diseña la lista de puntos, el detalle de un punto y el arrastre de la línea temporal hasta un momento concreto. Entrega `index.html` y un `screens.html` con tres pantallas una al lado de otra.
Ver obra y prompt →
Pickup
App de solicitud de viajes
La pantalla posterior a reservar un viaje en una app de transporte (390×844): un coche que se acerca en el mapa, datos del conductor y del vehículo, hora estimada de llegada y progreso del trayecto después de recoger al pasajero. Dibuja la red viaria y la ruta con código en lugar de usar capturas de mapas reales. Esperar el coche es el momento de mayor ansiedad, así que haz que su distancia resulte evidente de inmediato. Captura tres estados: esperando, coche llegado y viaje en curso. Entrega `index.html` y `screens.html` con las tres pantallas una al lado de otra.
Ver obra y prompt →
Luma
Meditación y sueño
Una app que ayuda a adultos con dificultades para dormir a relajarse y conciliar el sueño (390×844), con interfaz en inglés: una rutina de relajación antes de acostarse, respiración y meditación guiadas, una mezcla de sonidos para dormir y un informe matinal sobre el sueño de la noche anterior. La guía respiratoria es el núcleo: la imagen se expande y se contrae con el ritmo de la respiración, por ejemplo, inhalar durante 4 segundos, mantener 7 y exhalar 8. Debe resultar cómoda de mirar por la noche. El informe matinal debe transmitir de un vistazo cómo fue la noche sin acumular métricas. Evita el cliché de un degradado morado estrellado con una ilustración de la luna. Diseña tres pantallas: Esta noche, con una rutina de relajación, ejercicios recomendados y mezcla de sonidos; un ejercicio de respiración en curso; y un informe matinal de sueño con tiempo hasta conciliar el sueño, despertares, fases del sueño a lo largo de la noche y comparación con esta semana. Entrega `index.html` y `screens.html` con las tres pantallas una al lado de otra.
Ver obra y prompt →
Pact
Banca digital
Una app de banca digital para autónomos y jóvenes profesionales (390×844), con interfaz en inglés: saldo, transacciones recientes, gastos del mes, objetivos de ahorro, gestión de tarjetas y transferencias. El nombre del banco, los diseños de las tarjetas y los logotipos de comercios son ficticios. Las transferencias y los controles de tarjeta son el núcleo: elegir destinatario, introducir un importe en un teclado numérico y confirmar la transferencia debe transmitir seguridad y eficiencia. Congelar una tarjeta con un toque debe producir un cambio de estado claro. Diseña tres pantallas: Inicio con saldo, transacciones recientes y gastos mensuales; Tarjetas con el diseño de la tarjeta, control de congelación, límites y pagos sin contacto; y el flujo de transferencia desde el importe hasta el envío correcto. Entrega `index.html` y `screens.html` con las tres pantallas una al lado de otra.
Ver obra y prompt →Perfecciona paneles móviles, recuperación de errores y minijuegos táctiles con Oil UI Pro
Oil UI Pro cubre patrones de navegación móvil, paneles inferiores, recuperación de errores dentro del formulario y listas especializadas de comprobación de diseño y estados para aplicaciones táctiles y minijuegos como Klak (juguetes en cápsulas), Ding! Mint Arcade (empujamonedas) y Gotcha! (máquina de garra).
npx github:oil-oil/oil-cli install oil-ui-proPreguntas frecuentes
¿Por qué los ejemplos de aplicaciones móviles de la galería muestran tres o cinco pantallas una junto a otra?
Una única pantalla de inicio estática rara vez indica si una aplicación funciona realmente. Renderizar todas las pantallas clave en paralelo mediante screens.html permite examinar cómo avanza el usuario de principio a fin, mientras que la demo en directo permite interactuar con cada pantalla.
¿Puedo usar Oil UI en proyectos de React Native, Flutter o SwiftUI?
Sí. Muchos equipos piden al agente que cree un rápido panel HTML de 3 pantallas a 390×844 para definir el diseño, la tipografía y el color en el navegador; después trasladan la dirección aprobada a componentes de SwiftUI, Flutter o React Native.
¿Cómo gestiona Oil UI pantallas que no son teléfonos, como relojes inteligentes, televisores o pantallas de coche?
Dando prioridad a la distancia física de visualización y al hardware de entrada. En Yeying (aplicación de televisión a 1920×1080), los estados de foco del mando se distinguen claramente desde tres metros; en Yantu (pantalla de coche a 1920×720), las indicaciones de giro se amplían dinámicamente durante la conducción; en Splitwater (reloj a 198×242), el desbloqueo mediante la corona con la pantalla mojada forma parte del modelo de estados.
¿Cuál es el error de diseño de IA más común en móvil?
Anidar tarjetas con relleno dentro de contenedores con relleno en una pantalla de 390 píxeles, lo que deja apenas 260 píxeles para el contenido real. Sustituir las cajas de tarjetas exteriores por secciones a todo lo ancho y divisores sutiles abre la pantalla de inmediato.