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-skillNothing 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令牌暗色模式亮色模式角色--black#000000#F5F5F5页面背景OLED 真黑 / 暖白纸面--surface#111111#FFFFFF卡片、浮层表面--surface-raised#1A1A1A#F0F0F0次级抬升--border#222222#E8E8E8细微分隔线仅装饰--border-visible#333333#CCCCCC刻意可见的边框--text-disabled#666666#999999禁用态、装饰元素--text-secondary#999999#666666标签、注释、元数据--text-primary#E8E8E8#1A1A1A正文内容--text-display#FFFFFF#000000大标题、Hero 数字层级即灰阶display → primary → secondary → disabled四级透明度梯度100% / 90% / 60% / 40%就是信息层级本身。每屏最多 4 级靠字体与灰阶建立主次而不是靠颜色。注意一个精巧的细节亮色模式下--text-disabled与--text-secondary的色值互换了位置#999999↔#666666以保证在浅底上灰阶的感知对比度依然平滑。三、跨模式不变的唯一红色强调色与状态色灰阶随模式变化但强调色和状态色在两种模式下完全一致保证品牌感与状态语义不打折令牌色值使用纪律--accent#D71921信号灯红紧急、破坏性操作、错误。每屏至多 1 处绝不装饰--accent-subtlergba(215,25,33,0.15)强调色淡底--success#4A9E5C已确认、已完成、已连接--warning#D4A843注意、待定、性能降级--error#D71921与强调红共享——错误即红色时刻--interactive暗色#5B9BF6/ 亮色#007AFF可点击文本链接、选择器不用于按钮两条使用铁律见 SKILL.md Section 2.5红色不是层级是打断——看这里现在。若屏幕上没有紧急事项就不该出现红状态色只涂在数值上——颜色加在数据值本身标签保持--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 中启用双模式令牌最快使用路径安装技能将nothing-design文件夹复制到 Claude Code 的 skills 目录如~/.claude/skills/触发技能对话中说/nothing-design或 Nothing style选择模式技能会主动询问暗色还是亮色——两者都不是默认值这正是双模式对等设计的体现输出即带令牌生成 HTML/CSS 时自动注入 platform-mapping.md 中定义的 CSS 自定义属性生成 SwiftUI 时映射为Color扩展用Environment(\.colorScheme)切换组件层面的色彩消费规则进度条填充、开关状态、标签页激活态等详见 nothing-design/references/components.md。六、常见踩坑清单 ⚠️误区正确做法硬编码#111之类的十六进制值一律引用--surface等语义令牌用亮色反色派生暗色两套值独立设计查 tokens.md 对照表一屏多个红色元素红色每屏至多 1 处无紧急事项则不用红状态色涂在行背景/标签上只涂数值本身标签保持--text-secondary灰阶层级超过 4 级压缩到 display / primary / secondary / disabled 四级七、文件导航文件内容nothing-design/SKILL.md设计哲学、工艺规则、工作流nothing-design/references/tokens.md色彩系统暗亮、字体、字阶、间距、动效令牌nothing-design/references/components.md按钮、卡片、进度条、开关等组件色彩规范nothing-design/references/platform-mapping.mdHTML/CSS、SwiftUI、React/Tailwind 令牌映射一句话总结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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考