Prompt de diseño de modo oscuro de una app para Codex

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

Crea versiones en modo oscuro de las pantallas de [inicio] y [biblioteca]. No te limites a invertir los colores: usa un fondo oscuro [gris verdoso] en lugar de negro puro, baja la saturación del acento, mantén el contraste del texto en WCAG AA o superior y dime qué colores cambiaste y por qué.

Funciona con

Codex, ChatGPT

De la colección

Apps móviles

Sobre este prompt

Codex crea versiones oscuras de dos pantallas y explica sus decisiones de color. Las reglas del prompt se adelantan a los problemas habituales: un fondo oscuro teñido en lugar de negro puro, un acento menos saturado para que no brille sobre el oscuro y un contraste de texto que cumpla al menos WCAG AA.

Nombra las pantallas que quieres convertir en los dos primeros corchetes. La pantalla de inicio más otra con mucho contenido es una buena pareja, ya que una prueba tu elemento visual clave y la otra los tramos largos de texto. Toma el tinte del fondo de tu marca, un gris verdoso para una marca verde o un gris azulado para una azul, para que el tema oscuro siga sintiéndose como la misma app.

La lista de colores cambiados es el comienzo de una paleta oscura reutilizable. Pide a Codex que la convierta en una pequeña tabla con valores claros y oscuros por función, y pásala al paso del código de producción para que el modo oscuro se construya a partir de tokens y no pantalla por pantalla. Comparar cada pantalla clara con su gemela oscura lado a lado es la forma más rápida de detectar un acento que se ha apagado demasiado.

Más prompts de esta colección

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