为什么 Nothing 风格如此高级？Nothing Design Skill 单色、排版与工业美学的终极拆解

为什么 Nothing 风格如此高级Nothing Design Skill 单色、排版与工业美学的终极拆解【免费下载链接】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 打造的设计系统技能包让 AI 按照 Nothing 品牌标志性的单色、排版驱动、工业美学风格生成 UI 界面——深色 OLED 黑、机械感进度条、点阵数字高级感拉满。上图就是 Nothing Design Skill 生成的真实界面点阵数字时钟、分段进度条、等宽字体数据面板典型的 Nothing 设计语言。一、什么是 Nothing Design Skill如果你刷过 Nothing 的手机、耳机产品一定被那种黑到发亮 点阵数字 机械感的界面打动过。Nothing Design Skill就是把这套视觉语言打包成了一个可复用的技能包直接装进 Claude Code。你只需要说一句 Nothing style 或输入/nothing-designAI 就会自动遵循这套设计系统生成界面代码输出 HTML/CSS、SwiftUI 或 React/Tailwind 三种格式。它解决了一个很真实的痛点作者之前每次都要反复向 Claude 解释我要瑞士排版、OLED 黑底、分段进度条、点阵风格现在一句话搞定。项目结构一览都在 nothing-design/ 目录下文件内容SKILL.md设计哲学、工艺规则、工作流程references/tokens.md颜色、字体、间距、动效令牌references/components.md按钮、卡片、列表、表格等组件规范references/platform-mapping.md各平台输出映射CSS / SwiftUI / React二、单色美学为什么只有黑白色反而更高级普通人做界面先挑一个五彩斑斓的配色板。 Nothing 做界面先删掉颜色。2.1 灰度本身就是层级在这套系统里颜色层级被严格限制在4 级灰度令牌不透明度用途--text-display100%主数字、标题每屏只允许一个--text-primary90%正文、主要内容--text-secondary60%标签、说明文字--text-disabled40%时间戳、弱化信息当颜色被拿掉之后对比度、字号、间距就成了唯一的设计工具——这也逼着设计回归信息本身。2.2 红色是事件不是默认值整套系统里唯一的强调色是信号红#D71921。规则很残酷它不属于灰度层级是一个打断——意思是看这里、现在如果没有任何紧急信息屏幕上一个红点都不该有这就是高级感的来源克制到极致一点红才有分量。三、排版驱动文字就是重活主力Nothing 风格的第二根支柱是瑞士排版传统。核心规则可以用一句话概括层级靠文字大小和字重建立不靠颜色、不靠图标、不靠边框。3.1 三层视觉层级法则SKILL.md 中明确规定每个屏幕恰好有三层重要性多一层少一层都不行层级放什么怎么表现主层用户第一眼看到的东西超大号展示字体48–96px 呼吸空间次层辅助上下文、描述正文/小标题与主层紧密成组底层元数据、导航、系统信息等宽字体、全大写、推到边缘 官方给的检验方法很形象眯起眼看屏幕还能不能分清什么最重要如果两样东西在打架就缩小、变淡或挪走其中一个。3.2 字体预算制2 字体 3 字号 2 字重这套系统把字体当预算来管字体家族最多 2 个Space Grotesk正文 Space Mono数据标签Doto点阵字体只留给主角时刻字号最多 3 个一大、一中、一小字重最多 2 个Regular 一个其他 一个实用经验当你想加一个新字号时多半是间距问题——加距离而不是加字号。有趣的细节Space Grotesk 和 Space Mono 都出自 Colophon 字体厂与 Nothing 自家字体的设计血统相同连字体都是按神似来选的详见 references/tokens.md 的 Typography 章节。四、工业美学把界面做成仪表盘Nothing 风格的第三根支柱来自 Braun 和 Teenage Engineering 式的工业设计控件就该长得像控件——开关就是物理拨杆仪表盘就是仪表。4.1 标志性组件分段进度条这是整套系统最出片的组件见上方预览图的 CPU LOAD 和 BATTERY 区块由一个个方形小段组成的离散进度条2px 间隙无圆角填充部分用纯色空的部分是暗色描边视觉感受机械、精密、像老式电平表完整规范在 references/components.md 的 SEGMENTED PROGRESS BARS 一节。4.2 间距即语义这套系统给间距赋予了对话能力8px 基准节奏间距语义紧凑4–8px这些东西是一体的图标标签、数字单位标准16px同组但不同项列表项、表单字段宽松32–48px新分组开始巨大64–96px这是全新的上下文规则毒辣但有效如果你需要一条分割线说明间距大概率不够。分割线只是间距失效后的补救药。4.3 反模式清单这些高级感杀手一律禁止SKILL.md 专门列了一页绝不做什么堪称反面教材合集❌ UI 骨架里的渐变色❌ 阴影、模糊——只用扁平表面 边框分隔❌ 骨架屏加载动画改用[LOADING...]文字❌ Toast 弹窗改用内联状态文字[SAVED]❌ 悲伤表情插图、可爱吉祥物❌ 表格斑马纹❌ 弹跳缓动动画只允许克制的 ease-out你会发现高级感不是加了什么而是拒绝了多少。五、暗色/亮色双模式两个都是一等公民很多设计系统的暗色模式是把亮色反一下色Nothing Design Skill 的态度完全不同暗色黑屋子里的仪表盘——OLED 纯黑#000000底白色数据发光亮色印刷版技术手册——米白纸面#F5F5F5 黑色油墨白色卡片自带纸面浮起的微妙层次两种模式拥有完全独立的完整令牌表见 references/tokens.mdAI 在生成前甚至会主动问你先做暗色还是亮色六、如何安装使用三步搞定 安装方式极简——把技能文件夹放进 Claude Code 的 skills 目录即可git clone https://gitcode.com/gh_mirrors/no/nothing-design-skill cp -r nothing-design-skill/nothing-design ~/.claude/skills/下次启动 Claude Code说 Nothing style 或/nothing-design技能就会自动激活。它的工作流程定义在 SKILL.md 的 Workflow 章节声明所需字体Doto / Space Grotesk / Space Mono询问暗色/亮色模式先草图规划三层视觉层级再动手按工艺规则组装界面查令牌表取精确值查组件规范生成组件按目标平台Web / iOS / React映射输出七、总结Nothing 风格高级感的秘密配方支柱核心手法 单色4 级灰度建层级红色只给紧急事件✒️ 排版三层重要性 字体预算制间距代替分割线⚙️ 工业分段进度条、机械开关、数据即美一句话总结这个项目的设计哲学Subtract, dont add做减法而非加法。如果你受够了五彩斑斓的白式 AI 生成界面Nothing Design Skill 就是一个低门槛的审美外挂——不用学设计理论一句话让 AI 替你执行 20 年工业设计 瑞士排版的肌肉记忆。【免费下载链接】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），仅供参考