Prompt de diseño de pantalla de inicio de app móvil para Codex

Diseña el inicio de una app para un usuario recurrente, centrado en el elemento que nombres como más importante, con barra de pestañas y estadísticas.

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].

Funciona con

Codex, ChatGPT

De la colección

Apps móviles

Sobre este prompt

Codex diseña la pantalla de inicio que ve un usuario recurrente, en el ejemplo el día 12 de una racha de lectura. El prompt nombra un elemento, el progreso de hoy hacia el objetivo, y pide que sea lo primero que se note; después coloca el resto debajo en orden: el libro actual, la acción principal y las estadísticas de la semana, con una barra de cuatro pestañas abajo.

Cambia cada corchete por el equivalente de tu app: el número de días o el estado que convierte al usuario en recurrente, el elemento que más importa, el contenido que va debajo, la acción principal y los nombres de las pestañas. Conserva la instrucción de nombrar un único elemento más importante. Sin ella, las pantallas de inicio tienden a convertirse en una cuadrícula de tarjetas con el mismo peso.

Coloca el botón principal al alcance del pulgar, en la mitad inferior de la pantalla, y comprueba que la barra de pestañas no lo agobie. Esta pantalla marca el patrón de las pantallas de lista, de ajustes y de estados que vienen después, así que merece una o dos rondas de refinamiento antes de seguir.

Más prompts de esta colección

• Prompt de diseño de pantallas de lista y detalle para CodexDiseña una pantalla de lista con búsqueda y chips de filtro y la pantalla de detalle que abre, en dos archivos, con títulos y cifras realistas.
• Prompt de diseño de pantalla de ajustes de una app para CodexDiseña una pantalla de ajustes con listas agrupadas estándar, el valor actual en cada fila, interruptores donde corresponde y las acciones destructivas en rojo.
• Prompt de diseño de estados vacío, de carga y de error para CodexDiseña los estados vacío, de carga y de error de una pantalla de app en archivos separados, con la misma navegación y el mismo encabezado que el estado normal.
• Prompt de diseño de modo oscuro de una app para CodexCrea versiones en modo oscuro de pantallas de una app con fondo teñido, acentos atenuados, contraste de texto WCAG AA y una lista de colores cambiados.
• Prompt de adaptación a Android con Material 3 para CodexAdapta una pantalla de iOS a Android con Material 3: barra superior, barra de navegación y botón de acción flotante, con tus colores y tipografía.
• Prompt de mockups de app móvil a código SwiftUI para CodexPide a Codex que construya las pantallas HTML aprobadas en tu app SwiftUI, con el mismo layout, tus colores de tema y compatibilidad con Dynamic Type.