Nothing Design Skill 色彩令牌详解：一套 Token 同时驾驭 OLED 暗色与暖白亮色双模式

Nothing Design Skill 色彩令牌详解：一套 Token 同时驾驭 OLED 暗色与暖白亮色双模式

【免费下载链接】nothing-design-skillA Claude Code skill for generating UI in the Nothing design language. Monochrome, typographic, industrial.项目地址: https://gitcode.com/gh_mirrors/no/nothing-design-skill

Nothing Design Skill 是一个为 Claude Code 打造的 UI 生成技能，内置一套完整的**设计色彩令牌（Design Tokens）**系统。这套令牌用同一组语义化变量名，同时定义了 **OLED 暗色（真黑背景）与暖白亮色（#F5F5F5 纸张底色）**两套配色值，让 AI 生成的界面在两种模式下保持完全一致的视觉层级。下文详解这套色彩令牌的设计逻辑与使用方法。

一、什么是色彩令牌？为什么双模式设计离不开它

色彩令牌（Color Tokens）是给颜色起的"语义化别名"——你不再直接写死#000000，而是引用--black、--surface、--text-primary这样的变量名。

这种做法在暗色/亮色双模式下尤其关键：

• 一套名字，两套值：--black在暗色模式下是#000000，在亮色模式下自动变成#F5F5F5，组件代码零改动
• 语义不变：令牌名描述的是"角色"（背景、边框、正文），而不是"颜色"（黑、白），切换模式只换值、不换逻辑
• AI 更稳定：Claude Code 生成 UI 时只需引用令牌，不会随手发明新颜色，两种模式的产出严格对齐

全部色彩令牌的精确数值定义在 nothing-design/references/tokens.md 的Section 2 COLOR SYSTEM中。

二、撑起整套界面的 9 个灰阶令牌

Nothing 风格是"单色画布 + 字体层级"，90% 的界面靠灰阶构建。以下是核心的暗色/亮色双值令牌表（摘自 tokens.md）：

💡层级即灰阶：display → primary → secondary → disabled四级透明度梯度（100% / 90% / 60% / 40%）就是信息层级本身。每屏最多 4 级，靠字体与灰阶建立主次，而不是靠颜色。

注意一个精巧的细节：亮色模式下--text-disabled与--text-secondary的色值互换了位置（#999999↔#666666），以保证在浅底上灰阶的感知对比度依然平滑。

三、跨模式不变的"唯一红色"：强调色与状态色

灰阶随模式变化，但强调色和状态色在两种模式下完全一致，保证品牌感与状态语义不打折：

两条使用铁律（见 SKILL.md Section 2.5）：

1. 红色不是层级，是打断——"看这里，现在"。若屏幕上没有紧急事项，就不该出现红
2. 状态色只涂在数值上——颜色加在数据值本身，标签保持--text-secondary，趋势箭头继承数值颜色

四、为什么暗色是"OLED 黑"、亮色是"暖白纸"

双模式设计最大的陷阱是把亮色当作暗色的"反色"。Nothing Design Skill 在 SKILL.md 的 Design Philosophy 中明确：两种模式都是一等公民（Both modes are first-class），互不派生。

• 🌑暗色模式：#000000真黑 + 白色数据发光，模拟"暗房间里的仪表盘（Instrument panel in a dark room）"。OLED 屏上真黑即关闭像素，对比度拉满（--text-display对比度达 21:1）
• ☀️亮色模式：#F5F5F5暖白纸面 + 黑色油墨，模拟"印刷的技术手册（Printed technical manual）"。卡片用纯白#FFFFFF落在灰白页面上，不靠阴影就获得微妙抬升感

而强调红、状态色、全大写标签、字体、字阶、间距、组件形状在两种模式下逐项相同——这正是"一套 Token 驾驭双模式"的含义：变的是底色，不变的是设计语言。

五、在 Claude Code 中启用双模式令牌：最快使用路径

1. 安装技能：将nothing-design文件夹复制到 Claude Code 的 skills 目录（如~/.claude/skills/）
2. 触发技能：对话中说/nothing-design或 "Nothing style"
3. 选择模式：技能会主动询问"暗色还是亮色？"——两者都不是默认值，这正是双模式对等设计的体现
4. 输出即带令牌：生成 HTML/CSS 时自动注入 platform-mapping.md 中定义的 CSS 自定义属性；生成 SwiftUI 时映射为Color扩展，用@Environment(\.colorScheme)切换

组件层面的色彩消费规则（进度条填充、开关状态、标签页激活态等）详见 nothing-design/references/components.md。

六、常见踩坑清单 ⚠️

七、文件导航

一句话总结：Nothing Design Skill 的色彩令牌不是"一套色板"，而是一套带语义的双模式契约——暗色是 OLED 黑上的仪表盘，亮色是暖白纸上的技术手册，同一组令牌名在两种底色下各自成立，这才是一等公民级双模式设计的真正含义。

【免费下载链接】nothing-design-skillA Claude Code skill for generating UI in the Nothing design language. Monochrome, typographic, industrial.项目地址: https://gitcode.com/gh_mirrors/no/nothing-design-skill