让表面层级清晰可辨
这套配色从 #09090b 起步，用更浅的表面区分卡片与浮层。检查实际对比度；任何单一背景色都不能保证可读性。
StyleKit · 暗色设计规格与提示词
暗黑模式 UI 提示词
暗色模式 UI 提示词需要说清页面任务、暗色表面与文字配色，以及交互和状态要求。先复制下面的起步提示词，替换页面类型和目标用户，再用 Tailwind CSS v4 配置示例和对比度检查验证生成结果。
先复制这条起步提示词
用 React 和 Tailwind CSS v4 为 [目标用户] 构建响应式暗色 [页面类型]。页面背景用 #09090b，卡片用 #131316，抬升表面用 #1a1a20；主文字从 #fafafa、次要文字从 #a1a1aa 开始，并逐一检查与实际背景的对比度。普通文字至少 4.5:1，大号文字至少 3:1。补齐悬停、焦点、禁用、加载、空内容和错误状态，支持键盘操作、减少动态效果以及浅色/暗色/跟随系统三种主题偏好。用 CSS 设计 tokens 和 @custom-variant 实现手动暗色模式。输出组件、主题 CSS 与验证清单；未经测试不要声称满足全部无障碍标准。
把方括号替换成你的页面类型和目标用户，再复制到 AI 编程工具。
8 条提示词5 层表面文字对比度示例EN / ZH
01
表面层级：亮度即海拔
浅色界面靠阴影表达层级；暗色界面里阴影几乎不可见，改用亮度——越接近用户的表面越亮。选择任意一层查看取值与用途。
章节规格 02card
卡片
#131316
静置卡片与面板。比基底亮一档，用 1px 边框而非阴影分隔。
规律：每层比下一层亮约 3-4%，以 1px 低对比边框分隔。五层足以表达任何界面。
02
四条铁律
把这四条写进任何提示词，AI 生成的暗色界面立刻高一个档次。每条附带取值证明。
章节降饱和、提亮度
浅色主题的饱和色在暗底上会「震动」刺眼。文字与图标提亮一档——blue-500 改 blue-400——填充色才保留 500。
白字压光，三档层级
在 #09090b 基底上，主文字 #fafafa、正文 #d4d4d8、说明 #a1a1aa 都超过 7:1 的 AAA 文字阈值。背景改变时，需要重新检查这些 tokens。
一个强调色，花在刀刃上
本示例把强调色留给主操作、当前态和有意义的数据。需要传达信息时可以增加颜色，而不是为每个表面上色。
03
实测对比度
以下每个数值都按 WCAG 相对亮度公式实算。把整张表贴进提示词，再检查生成结果，不能仅凭提示词认定无障碍达标。
章节| Aa | 前景 / 背景 | 对比度 | WCAG |
|---|---|---|---|
| Aa | #fafafa / #09090b | 19.06 | AAA |
| Aa | #d4d4d8 / #131316 | 12.55 | AAA |
| Aa | #60a5fa / #09090b | 7.83 | AAA |
| Aa | #a1a1aa / #09090b | 7.76 | AAA |
| Aa | #a1a1aa / #131316 | 7.24 | AAA |
| Aa | #3b82f6 / #09090b | 5.41 | AA |
| Aa | #71717a / #09090b | 4.12 | AA-LG |
| Aa | #52525b / #09090b | 2.57 | FAIL |
04
八条提示词
每条都带具体色值、层级与对比度约束——仪表盘、SaaS、移动端、登录与定价页。展开查看全文，复制后直接粘进 ChatGPT、Claude、Cursor 或 v0。
章节01暗黑模式仪表盘CHATGPT / CLAUDE
Design a dark mode analytics dashboard. Background colors: #0a0a0a for base, #141414 for cards, #1e1e1e for elevated elements. Text: #f5f5f5 for primary, #a3a3a3 for secondary. Use a single accent color (blue #3b82f6) for interactive elements and data highlights. Cards should have subtle 1px borders in #262626. Charts should use the accent color with varying opacity for data series. Ensure all text meets WCAG AA contrast standards.
02v0 暗色主题应用V0
03Cursor 暗色主题CURSOR
04Claude 暗色主题CLAUDE
05暗黑模式 SaaS 落地页CHATGPT / CLAUDE
06ChatGPT 暗黑模式移动应用CHATGPT / CLAUDE
07Claude 暗黑模式登录页CLAUDE
08Cursor 暗黑模式定价页CURSOR
05
取舍清单
摘自 StyleKit 的 dark-mode 风格定义。生成结果跑偏时，把违反的那条直接贴回给 AI。
章节要
- 使用深色背景 bg-slate-900, bg-gray-900, bg-[#0f172a]
- 卡片使用略浅的背景 bg-slate-800/50，hover 时提亮 hover:bg-slate-800
- 边框使用低对比度 border-slate-700，hover 时照亮 hover:border-slate-500
- 文字使用 text-slate-100 主要, text-slate-400 次要，group-hover 时次要文字提亮 group-hover:text-slate-300
- 高亮色保持高饱和度 blue-500, green-500
- 按钮使用内发光 shadow-[inset_0_1px_0_rgba(255,255,255,0.15)] 模拟暗色光源
- 按钮必须有 active:scale-[0.98] 触觉按压确认
- 所有可交互元素必须有 focus:ring-2 focus:ring-offset-2 focus:ring-offset-slate-900
- 卡片 hover 时 hover:-translate-y-0.5 + 深色外阴影上浮
- 使用 rounded-lg 或 rounded-xl 圆角
不要
- 禁止使用纯白文字 text-white（过于刺眼）
- 禁止使用高对比度边框
- 禁止使用纯黑背景 #000000（过于沉闷）
- 禁止在深色背景上使用深色文字
- 禁止高亮色使用过多
- 禁止阴影使用浅色（深色背景上用浅色阴影无法体现层次）
- 禁止按钮缺少 active:scale-[0.98]（按钮需要触觉确认，否则如同装饰）
- 禁止 focus:ring 缺少 focus:ring-offset-slate-900（暗色背景上焦点环必须与元素分离才可见）
06
参考资源
可运行的暗色模板与相关风格——每个风格页都带完整 tokens、组件配方和可导出的 AI 规则。
章节Tailwind CSS v4：可直接使用的主题配置
默认 dark: 跟随系统偏好。如果希望通过 html 上的 .dark 类手动切换，把下面的配置加入 CSS 入口，再使用 bg-white dark:bg-zinc-950 等工具类。切换器需要同步类名与用户偏好。
@import "tailwindcss";
/* Enable dark:* utilities when .dark is on <html>. */
@custom-variant dark (&:where(.dark, .dark *));
:root { color-scheme: light; }
.dark { color-scheme: dark; }核对依据与适用边界
技术资料核对日期：
- Tailwind CSS — Dark mode
Tailwind v4 使用 CSS 自定义变体实现手动主题切换；默认行为跟随系统偏好。
- W3C — WCAG 2.2 Contrast (Minimum)
普通文字需要 4.5:1 对比度，大号文字需要 3:1。这是文字对比度要求，不等于完整的无障碍认证。
起步模板
- Dark Analytics DashboardGood for dark SaaS analytics prompts with KPI density, charts, and restrained accent color use.
- Frosted CRMUseful for layered dark surfaces, subtle glow, and richer product chrome without losing readability.
- Music PlayerA strong reference for immersive dark media interfaces, ambient accents, and large visual surfaces.
- Messaging UIHelpful for dark chat layouts, sidebars, message panes, and high-contrast collaboration tools.
07
章节常见问题
01什么是暗黑模式 UI 设计？
暗色模式 UI 使用深色表面、较浅的文字和有目的的强调色，而不只是反转浅色主题。每一层表面、文字、焦点指示和交互状态都需要清晰可辨。WCAG 2.2 对普通文字要求至少 4.5:1 对比度，对大号文字要求至少 3:1，并规定了相应例外。
02如何在 Tailwind CSS v4 中实现暗色模式？
Tailwind CSS v4 通过 dark: 变体提供暗色样式，默认跟随 prefers-color-scheme。手动类名切换时，在 CSS 的 @import "tailwindcss"; 后添加 @custom-variant dark (&:where(.dark, .dark *));，再切换 html 元素上的 dark 类。用 CSS 自定义属性定义语义化主题色，并保留浅色、暗色或跟随系统的偏好。Tailwind v3 配置示例不能直接当作 v4 的 CSS 优先方案。
03暗色模式 UI 提示词应该包含什么？
说明页面类型、目标用户、布局、表面与文字 tokens、强调色和响应式行为。要求提供悬停、焦点、禁用、加载、空内容和错误状态，以及键盘操作和主题偏好；逐一检查文字与实际背景的对比度。让工具同时输出代码和验证清单，并在使用起步提示词前替换方括号中的占位内容。
04暗色模式设计常见错误有哪些？
常见问题包括只反转颜色而不检查结果、次要文字过淡、错误状态只靠颜色区分、缺少焦点状态，以及忽略已保存的主题偏好。纯黑和完全不透明的白色并不天然违反无障碍标准；应检查实际的前景与背景组合和阅读场景，而不是套用统一的不透明度规则。
05应该先设计暗色模式还是浅色模式？
根据目标用户、内容和使用环境选择起始主题，再验证产品支持的两种主题。语义化 CSS 变量有助于复用组件。StyleKit 导出内容是实现起点；应检查所选风格和项目里的浅色、暗色状态，而不是假设每一份导出都包含完整的双模式系统。
06暗色模式背景可以用哪些颜色？
本示例使用 #09090b 作为基底、#131316 作为卡片表面、#1a1a20 作为抬升表面。这些是设计选择，不是 WCAG 指定的颜色。通过明度、边框和间距区分层级，并检查文字与控件在各个实际表面上的对比度；不存在适用于所有暗色界面的统一饱和度降幅或背景色。
07如何按 WCAG 检查暗色模式的文字对比度？
WCAG 2.2 的 SC 1.4.3 要求普通文字对比度至少为 4.5:1，大号文字至少为 3:1。大号文字指不小于 18pt（24 CSS px），或加粗时不小于 14pt（约 18.67 CSS px）。检查包含透明度影响后的实际前景与背景色，不要把未达标的比值四舍五入为通过。文字对比度达标不等于完整 WCAG 合规，还需检查键盘、焦点、标签和状态信息。