Nothing Design Skill 排版系统全解三层视觉层级与 Space Grotesk Space Mono 字体纪律【免费下载链接】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 按 Nothing 品牌设计语言生成 UI 界面的技能包——单色、字体驱动、工业质感。这篇文章带你完整拆解它的排版系统核心三层视觉层级与Space Grotesk Space Mono 字体纪律即使你是设计新手也能读懂这套仪表板式界面是怎么被规则约束出来的。下图就是该技能生成的典型界面点阵时间显示、分段进度条、单色数据卡片全部出自同一套排版规则。它是什么一个把设计师规范打包成 AI 技能的开源项目Nothing Design Skill 的作者受 Nothing 的视觉语言启发Swiss 排版、Braun/Teenage Engineering 式工业设计把一套设计规则沉淀为可复用的技能。你在 Claude Code 中输入/nothing-design或说 Nothing style它就会按规则输出 HTML/CSS、SwiftUI 或 React/Tailwind 三种形态的界面。整个仓库结构一目了然文件作用nothing-design/SKILL.md设计哲学 工艺规则排版系统的宪法nothing-design/references/tokens.md字体、字阶、色彩、间距等全部设计令牌nothing-design/references/components.md按钮、卡片、列表、进度条等组件规范nothing-design/references/platform-mapping.mdWeb / SwiftUI / Paper 平台输出映射README.md项目说明与安装方式三层视觉层级每块屏幕只允许 3 层重要度这是整套排版系统的第一原则定义在 SKILL.md#L31-L41每块屏幕恰好有三层重要度不多不少。层级放什么怎么做主层 Primary用户第一眼看到的唯一元素一个大数字、标题或状态Doto 或 Space Grotesk 显示字号--text-display纯白周围留 48–96px 呼吸空间次层 Secondary支撑性上下文标签、描述、相关数据Space Grotesk 正文字号--text-primary以 8–16px 紧凑贴附主层辅层 Tertiary元数据、导航、系统信息Space Mono 小号字全大写压到屏幕边缘或底部验收测试只有一个动作眯起眼看屏幕还能不能一眼看出最重要的是什么如果两件事在打架其中一个必须缩小、变淡或挪走。新手最常见的错误是把所有元素都做成次层——尺寸均匀、间距均匀结果就是视觉扁平。规则的答案很直接大胆一点把主层放大到荒谬把辅层缩到最小。对比本身就是层级。字体纪律把字号当预算花字体部分定义在 tokens.md#L5-L34。整套系统只允许2 个字体族 3 个字号 2 个字重像预算管理一样对待——每多用一级字号都在花掉视觉一致性。字体分工谁负责什么角色字体职责DisplayDoto点阵字体最接近 Nothing 的 NDot 57仅限 36px 的高光时刻绝不用于正文Body / UISpace Grotesk300–700正文、标题、界面文本的主力Data / LabelsSpace Mono400/700一切数据与标签标签永远全大写选这三款字不是随手挑的Space Grotesk 与 Space Mono 同出自 Colophon Foundry正是 Nothing 官方字体的同一来源共享设计基因。什么时候该改字号什么时候该改颜色SKILL.md 给了一张非常实用的决策表SKILL.md#L52-L60区分需求改字号改字重改颜色标题 vs 正文✅❌❌标签 vs 数值❌❌✅激活 vs 非激活导航❌❌✅主数字 vs 单位✅❌❌并配有一句堪称金句的经验法则如果你正准备新增一个字号那大概率是间距问题——先加距离。字号本身由 9 级字阶控制从--display-xl72px 英雄数字一路到--label11px 全大写仪表标签完整数值见 tokens.md#L17-L27。间距即语义四层间距四种含义在 Nothing 排版系统里间距不是留白而是表达关系的第一工具SKILL.md#L62-L73间距档位含义紧凑 4–8px这两样属于一组——图标标签、数字单位中等 16px同组不同项——列表项、表单字段宽 32–48px新一组开始了——分节巨大 64–96px这里是全新语境——主区与内容区之间由此推出一个反直觉的结论如果需要一条分隔线说明间距大概率没做对——分隔线只是间距对比不足的症状。所有间距基于 8px 基础网格令牌从--space-xs4px到--space-4xl96px 英雄呼吸空间共 9 档定义在 tokens.md#L92-L104。灰阶即层级颜色只做三件事单色系统里灰阶就是层级每屏最多 4 档--text-display100% 纯白英雄数字、--text-primary90% 正文、--text-secondary60% 标签元数据、--text-disabled40% 时间戳与禁用态。红色#D71921不在层级内——它是中断信号意为看这里马上。没有紧急事项屏幕就不该出现红色。快速上手两步装进你的 Claude Codegit clone https://gitcode.com/gh_mirrors/no/nothing-design-skill cp -r nothing-design-skill/nothing-design ~/.claude/skills/下次启动 Claude Code直接说 /nothing-design 做一个系统监控面板它会先向你声明要加载哪些 Google Fonts、询问深色还是浅色模式再按三层层级 → 工艺规则 → 核对令牌的流程产出界面。常见反模式这些设计习惯在这里全部禁止最后送上一份新手对照清单摘自 SKILL.md#L143-L156 无渐变、无阴影、无模糊——平面表面 边框分隔 无骨架屏加载——用[LOADING...]括号文本或分段旋转器 无 Toast 弹窗——用内联状态文本[SAVED]、[ERROR: ...] 无斑马纹表格行、无填充图标、无表情符号当 UI 卡片圆角 ≤ 16px按钮要么胶囊 999px要么工业风 4–8px总结一套可以照抄的排版纪律Nothing Design Skill 的价值不在于教你画出 Nothing 的界面而在于它示范了如何用最少变量维持最强秩序3 层层级、2 个字体族、3 个字号、2 个字重、4 档间距——每个数字都是一条可执行的规则。把这套纪律迁移到任何项目里你的界面都会立刻少一点随意、多一点仪表盘的笃定。完整令牌与组件细节可继续查阅 nothing-design/ 下的参考文件。【免费下载链接】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），仅供参考