App 深色模式设计提示词（Codex）

为 App 页面做深色模式：用带色调的深色背景代替纯黑，降低点缀色饱和度，文字对比度达到 WCAG AA。

为 [首页] 和 [书库] 页面制作深色模式版本。不要简单地反转颜色：用深 [绿灰色] 背景代替纯黑，降低点缀色的饱和度，文字对比度至少达到 WCAG AA，并告诉我你改了哪些颜色、为什么改。

适用于

Codex, ChatGPT

所属合集

手机 App

这条提示词能做什么

Codex 会为两个页面做出深色版本，并说明每个颜色为什么这样改。提示词里的几条规则正好避开了常见问题：用带色调的深色背景代替纯黑，降低点缀色的饱和度，免得它在深色背景上刺眼，文字对比度至少达到 WCAG AA。

前两个方括号填你要转换的页面。首页加一个内容很多的页面是不错的组合，一个检验主视觉元素，一个检验大段文字。背景色调从品牌色里取：绿色品牌用绿灰，蓝色品牌用蓝灰，这样深色主题看起来仍然是同一个 App。

Codex 列出的改色清单，就是一套可复用的深色色板的起点。可以让它整理成一张按用途列出浅色值和深色值的小表，交给生产代码那一步，深色模式就能基于设计变量来实现，而不是逐个页面去改。把每个浅色页面和它的深色版本并排对比，最容易发现哪个点缀色被调得太暗了。

同一合集里的其他提示词

• Android Material 3 适配提示词（Codex）按 Material 3 规范把 iOS 页面适配到 Android：顶部应用栏、导航栏和悬浮按钮，保留品牌色和字体。
• App 设计稿转 SwiftUI 代码提示词（Codex）让 Codex 在 SwiftUI App 里实现定稿的 HTML 页面：布局和间距一致，颜色取自主题文件，支持 Dynamic Type。
• App 需求说明和页面清单提示词（Codex）写清 App 的用户、核心循环和平台，让 Codex 列出第一版需要的全部页面，分好组并说明每个页面的用途。
• App 新手引导流程设计提示词（Codex）用统一的风格设计三个相连的 390×844 新手引导页面：欢迎页、目标选择页和首页，插画用 CSS 绘制。
• App 首页设计提示词（Codex）为老用户设计 App 首页：围绕你指定的最重要元素展开，下面依次排内容、主按钮、统计和底部标签栏。
• App 列表页和详情页设计提示词（Codex）设计带搜索框和筛选标签的列表页，以及点进去的详情页，分成两个文件，书名和数字都用真实可信的内容。