Prompt de diseño de pantallas de lista y detalle para Codex

Diseñ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.

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.

Funciona con

Codex, ChatGPT

De la colección

Apps móviles

Sobre este prompt

Codex diseña dos pantallas enlazadas en archivos separados: una lista de 12 elementos, cada uno con portada, título, autor y progreso, encabezada por un campo de búsqueda y chips de filtro, y la pantalla de detalle que se abre al tocar un elemento. Diseñarlas juntas hace que un elemento se vea igual en su fila y en la vista completa.

Cambia los corchetes por el par de lista y detalle de tu propia app: productos y una ficha de producto, tareas y una vista de tarea, recetas y una receta. Fija el número de elementos en el que tendría un usuario real y nombra tus estados de filtro reales. La frase final sobre títulos y cifras realistas importa más de lo que parece; un título muy largo junto a un libro al 3% y otro al 100% muestra si el layout de la fila aguanta.

Después, comprueba que ir de la lista al detalle se sentiría continuo: la misma portada, el mismo estilo de título y el mismo tratamiento del progreso en ambos archivos. La pantalla [Biblioteca] de este paso es también la base del prompt de los estados vacío, de carga y de error, así que acierta primero con su estado normal.

Más prompts de esta colección

• 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.
• Prompt de brief de app móvil y lista de pantallas para CodexDescribe los usuarios, el ciclo principal y la plataforma de tu app, y pide a Codex las pantallas de la versión uno, agrupadas y con su propósito.