Prompt de diseño de flujo de onboarding de una app para Codex

Diseña tres pantallas de onboarding conectadas a 390×844, bienvenida, objetivo y primera pantalla de inicio, con un mismo estilo e ilustraciones en CSS.

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.

Funciona con

Codex, ChatGPT

De la colección

Apps móviles

Sobre este prompt

Codex diseña tres pantallas como archivos HTML separados con el tamaño de un iPhone: una pantalla de bienvenida, una para elegir un objetivo diario con un indicador de progreso y la primera pantalla de inicio a la que llega un usuario nuevo. Pedirlas juntas hace que compartan un mismo conjunto de colores, tipografía y espaciado, en lugar de que cada pantalla invente el suyo.

La línea de estilo entre corchetes es tu dirección visual en una frase: fondo, color de acción, un acento y una tipografía para los titulares. Usa pocos colores y nómbralos por su función; “verde oscuro para las acciones” le dice a Codex dónde va un color, una lista de cinco códigos hexadecimales no. Si tu onboarding pide otra cosa que un objetivo, como intereses o permiso de notificaciones, cambia el nombre de la pantalla intermedia para que coincida.

Lee los tres archivos en orden, como los encuentra un usuario nuevo. En un lienzo de Codex Design quedan alineados de izquierda a derecha, lo que facilita detectar un salto de estilo o un indicador de progreso que nunca avanza. Cierra el flujo aquí, porque el siguiente prompt diseña la versión de la tercera pantalla para el usuario recurrente.

Más prompts de esta colección

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