Prompt de diseño de estados vacío, de carga y de error para Codex

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

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.

Funciona con

Codex, ChatGPT

De la colección

Apps móviles

Sobre este prompt

Codex diseña tres versiones más de una pantalla: vacío, para un usuario nuevo que aún no tiene nada y un siguiente paso claro; cargando, con placeholders tipo skeleton que imitan el layout real; y error, para cuando el dispositivo está sin conexión, con un botón para reintentar. La navegación y el encabezado se mantienen idénticos a los de la pantalla normal, de modo que solo cambia el área de contenido.

Apunta el corchete a cualquier pantalla cuyos datos puedan faltar; un feed, una bandeja de entrada o una pantalla de resultados de búsqueda necesitan los mismos tres estados. Decide el siguiente paso del estado vacío antes de ejecutar el prompt, como añadir un primer libro o importar una lista de lectura, y escríbelo para que Codex no invente uno.

Estos estados suelen aparecer durante el desarrollo, cuando un desarrollador tiene que improvisarlos. Diseñarlos ahora a partir de la pantalla de lista terminada hace que el skeleton coincida con las filas reales y que el mensaje de error conserve el tono de la app. Entrégalos junto con la pantalla principal para que los cuatro se construyan en la misma pasada.

Más prompts de esta colección

• 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.
• Prompt de diseño de flujo de onboarding de una app para CodexDiseña tres pantallas de onboarding conectadas a 390×844, bienvenida, objetivo y primera pantalla de inicio, con un mismo estilo e ilustraciones en CSS.
• Prompt de diseño de pantalla de inicio de app móvil para CodexDiseñ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.