Nothing Design Skill 间距系统揭秘：8px 网格如何用留白定义界面层级

Nothing Design Skill 间距系统揭秘8px 网格如何用留白定义界面层级【免费下载链接】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——单色、排版驱动、工业感。它的精髓之一是用 8px 间距网格 留白语义来定义界面层级不靠边框和阴影光靠距离就能让用户一眼分清什么最重要。为什么留白是 Nothing 风格的核心Nothing 的视觉语言源自瑞士排版与 Braun、Teenage Engineering 的工业设计哲学。SKILL.md 里有一句定调Type does the heavy lifting.Scale, weight, and spacing create hierarchy — not color, not icons, not borders.也就是说层级由字号、字重和间距共同塑造。而在 SKILL.md 的2.3 Spacing as Meaning一节中它把间距直接定义为沟通关系的工具——离得近就是一家人离得远就是换话题了。8px 间距网格完整刻度表所有间距都是 8 的倍数来自 tokens.md 的 SPACING 一节令牌值用途--space-2xs2px仅用于光学微调--space-xs4px图标与标签间隙、紧凑内边距--space-sm8px组件内部间距--space-md16px标准内边距、元素间隙--space-lg24px分组分隔--space-xl32px区块外边距--space-2xl48px主要区块分隔--space-3xl64px页面级垂直节奏--space-4xl96px英雄区Hero呼吸空间这套刻度保证了整个界面的节奏感从 4px 的微调到 96px 的大留白每一步都是上一级的翻倍天然形成视觉韵律。四级留白的语义从 4px 到 96px最妙的设计在于——每个间距档位都自带含义**Tight4–8px** 这些属于一起图标标签、数字单位**Medium16px** 同组不同项列表项、表单字段**Wide32–48px** 新分组开始了章节分隔**Vast64–96px** 这是一个新上下文从 Hero 区到正文由此还引出一条金句If a divider line is needed, the spacing is probably wrong.如果画分割线多半是间距没拉开。分割线只是间距不足的症状。同理在 components.md 的容器策略里优先级是纯间距 → 分割线 → 细边框 → 带背景卡片——永远先用最轻的工具。留白如何定义三层视觉层级Nothing 规定每个屏幕只有三层重要性。间距是区分它们的胶水层级内容间距手法Primary主层用户第一眼看到的数字/状态上下留出 48–96px 呼吸空间让主数字浮在背景上Secondary次层标签、描述、相关数据用 8–16px 紧凑地吸附在主元素旁Tertiary元层元数据、导航、系统信息全部大写推到屏幕边缘或底部主元素周围是大片留白次要元素紧贴主元素元数据被推远——距离即关系留白即排版。这也是为什么 Nothing 风格的大数字看起来既克制又有力。三步上手从间距令牌到成品 UI获取项目git clone https://gitcode.com/gh_mirrors/no/nothing-design-skill将nothing-design文件夹复制进 Claude Code 的 skills 目录触发技能对 Claude 说/nothing-design或用 Nothing 风格查看规则技能会先声明所需字体再按 tokens.md 的精确取值排版组件模式参考 components.md跨平台输出CSS / SwiftUI / React见 platform-mapping.md✨ 上手小贴士先画出三层结构再写代码拿不准间距时回到 8px 刻度表发现想加边框或阴影多半说明该把间距再加大一档。小结Nothing Design Skill 把留白从审美变成了工程规则一个 8px 网格四级语义距离三层视觉层级。理解了这套间距系统你就理解了为什么它的界面看起来简单却不空洞——每一像素的空白都在替界面说话。【免费下载链接】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），仅供参考