Nothing Design Skill 设计哲学深度解析『做减法』凭什么成为工业级 UI 的终极密码【免费下载链接】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 设计技能对 AI 说一声 Nothing style它就能生成 Nothing 风格的工业级 UI——黑白单色、排版驱动、仪表般的机械质感。这篇文章带你拆解它的设计哲学。一、先搞清楚它到底是什么一句话把一位资深的 Nothing 风格设计师装进了 Claude Code 里。Nothing 这个品牌你可能有印象——点阵屏幕、OLED 纯黑、瑞士排版走的是「极简 工业」路线。这个项目把这套设计语言打包成一个可复用的 Skill 文件AI 生成的界面自动遵循同一套规则三层视觉层级大标题 / 正文 / 元数据仅此三层Space Grotesk Space Mono Doto 字体体系完整深色 / 浅色双模式 Token 系统分段进度条、机械式开关、仪表风组件输出 HTML/CSS、SwiftUI、React/Tailwind 三种平台代码完整说明见 README.md。二、核心哲学6 条「减法戒律」所有规则写在 nothing-design/SKILL.md 的开篇值得逐条品味戒律含义减去而非添加每个元素都必须挣得自己的像素默认先删掉结构即装饰直接暴露网格、数据与层级本身不必额外装饰单色是画布颜色是事件而非默认值只在必要时出现排版承担重活层级靠字号、字重、间距而不是靠颜色和图标双模式一视同仁OLED 纯黑与暖白底色都享有完整设计投入工业温度感技术而精确但绝不冰冷要能摸到人的痕迹对新手最有用的一条是第三条红色#D71921不在层级系统里它是打断——看这里现在。如果屏幕上没有紧急的事就不许出现红色。三、三层规则为什么你的界面总是平SKILL.md 给出的诊断一针见血把一切都做成次要就是视觉扁平。规则是每个屏幕有且只有三个重要层级。Primary主层——用户第一眼看到的唯一事物一个数字、一个标题。48–96px 留白大胆到夸张Secondary次层——支撑性上下文标签、描述紧贴主层Tertiary元层——元数据、导航全大写等宽字体推到边缘测试方法眯起眼看屏幕还能分辨出什么最重要吗如果两件事在打架其中一个必须缩小、变淡、或挪走。 反直觉的要点对比本身就是层级。主层要夸张地大元层要夸张地小——平庸的中间值才是敌人。四、把克制量化字体预算与间距语义这套体系的精彩之处在于把品味变成了数字4.1 字体是预算不是菜单每个屏幕最多2 个字体族、3 个字号、2 个字重。想再加字号先问自己——这个区分能不能用间距或颜色解决4.2 间距在说话间距语义4–8px我们是一伙的图标标签16px同组不同项列表项32–48px新分组开始了64–96px这是一个全新语境一条判断法则如果你需要画一条分割线大概率是间距出了问题。分割线是间距对比不足的症状。4.3 允许破例——但只能破一处全屏幕保持一致性然后恰好在一处打破一个超大的数字、灰色群中的一抹红、一片所有地方都紧凑时突然出现的巨大留白。一处破例 设计本身零处破例 死板的网格多处破例 视觉混乱所有精确数值8px 基准间距、8 级字号、双模式色板、动效时长 150–250ms都沉淀在 nothing-design/references/tokens.md 中这是克制能被 AI 严格执行的前提。五、反模式清单AI 也守纪律nothing-design/SKILL.md 里的反模式章节基本就是现代网页审美黑名单❌ 无渐变、无阴影、无模糊——平面表面 边框分隔❌ 无骨架屏——用[LOADING...]文字或分段加载器❌ 无 Toast 弹窗——用行内状态文字[SAVED]、[ERROR: ...]❌ 无斑马纹表格、无填充式图标、无 emoji 当 UI❌ 无弹簧/回弹动效——percussive, not fluid打击感而非流体感最后一句很有意思想象 UI 发出的声音——是咔哒click不是嗖swoosh。过渡动画应该是机械而精确的。六、组件长什么样从分段进度条看「机械诚实」组件规范收录在 nothing-design/references/components.md最能体现哲学的是分段进度条离散方块2px 间隙直角端头无圆角。填充色 状态色空段 边框灰。永远搭配数字读数——条形表示比例数字表示精度。其他标志性细节开关 物理拨动开关的隐喻胶囊轨道 圆形滑块数据即美48px 等宽字体的36GB/s本身就是视觉不需要插画仪表盘感细描边圆环 刻度线数字居中仪表板标签Space Mono、11px、全大写、加宽字距——仪表盘面板质感七、如何上手两步安装 一句指令安装只需两步git clone https://gitcode.com/gh_mirrors/no/nothing-design-skill cp -r nothing-design-skill/nothing-design ~/.claude/skills/使用启动 Claude Code输入/nothing-design或直接说 用 Nothing 风格做一个设置页。AI 会按内置工作流执行声明字体 → 询问深色/浅色 → 先勾勒三层层级 → 套用工艺规则 → 查 Token 取精确值 → 建组件 → 按平台输出。跨平台输出约定Web CSS 变量、SwiftUI 颜色扩展、Paper 设计稿见 nothing-design/references/platform-mapping.md。八、写在最后减法为什么是「终极密码」Nothing Design Skill 的本质是把主观审美翻译成可执行的规则系统可量化——每层字号、每个间距都有精确数值AI 才能复现可验证——眯眼测试、一处破例都是可执行的检验标准可迁移——同一套 Token 映射到 Web / SwiftUI / 纸面风格不断裂对新手来说它最大的价值或许不是Nothing 风本身而是这套方法论先定义能删什么再谈要加什么。当你的 AI 助手也学会默认先删掉时工业级 UI 的质感就真的只差一句指令了。【免费下载链接】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），仅供参考