Nothing Design Skill 排版系统全解：三层视觉层级与 Space Grotesk + Space Mono 字体纪律-创锋一号

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-skill

Nothing 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.md	Web / 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 个字重，像预算管理一样对待——每多用一级字号，都在花掉视觉一致性。

字体分工：谁负责什么

角色	字体	职责
Display	`Doto`（点阵字体，最接近 Nothing 的 NDot 57）	仅限 36px+ 的"高光时刻"，绝不用于正文
Body / UI	`Space Grotesk`（300–700）	正文、标题、界面文本的主力
Data / Labels	`Space Mono`（400/700）	一切数据与标签，标签永远全大写

选这三款字不是随手挑的：Space Grotesk 与 Space Mono 同出自 Colophon Foundry，正是 Nothing 官方字体的同一来源，共享设计基因。

什么时候该改字号，什么时候该改颜色

SKILL.md 给了一张非常实用的决策表（SKILL.md#L52-L60）：

区分需求	改字号	改字重	改颜色
标题 vs 正文	✅	❌	❌
标签 vs 数值	❌	❌	✅
激活 vs 非激活导航	❌	❌	✅
主数字 vs 单位	✅	❌	❌

并配有一句堪称金句的经验法则："如果你正准备新增一个字号，那大概率是间距问题——先加距离。"

字号本身由 9 级字阶控制，从--display-xl（72px 英雄数字）一路到--label（11px 全大写仪表标签），完整数值见 tokens.md#L17-L27。

间距即语义：四层间距，四种含义

在 Nothing 排版系统里，间距不是"留白"，而是表达关系的第一工具（SKILL.md#L62-L73）：

间距档位	含义
紧凑 4–8px	"这两样属于一组"——图标+标签、数字+单位
中等 16px	"同组不同项"——列表项、表单字段
宽 32–48px	"新一组开始了"——分节
巨大 64–96px	"这里是全新语境"——主区与内容区之间

由此推出一个反直觉的结论：如果需要一条分隔线，说明间距大概率没做对——分隔线只是间距对比不足的症状。

所有间距基于 8px 基础网格，令牌从--space-xs（4px）到--space-4xl（96px 英雄呼吸空间）共 9 档，定义在 tokens.md#L92-L104。

灰阶即层级：颜色只做三件事

单色系统里，灰阶就是层级，每屏最多 4 档：--text-display（100% 纯白，英雄数字）、--text-primary（90% 正文）、--text-secondary（60% 标签元数据）、--text-disabled（40% 时间戳与禁用态）。

红色#D71921不在层级内——它是中断信号，意为"看这里，马上"。没有紧急事项，屏幕就不该出现红色。

快速上手：两步装进你的 Claude Code

git 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/ 下的参考文件。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

企业官网建设流程全解析