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 打造的技能包，专门生成单色、排版驱动、工业风的 UI 界面。它把「OLED 纯黑背景、Space Mono 全大写标签、分段式进度条、点阵元素」等设计原则打包成一套可复用规范，让 AI 不再需要你反复描述设计规则。本文带你通读官方组件清单 components.md，一次性讲清按钮、卡片、列表、表格、覆盖层这 5 类核心组件的规格与使用细节，新手也能快速上手这套设计规范。

组件规范总览：4 个核心文件怎么分工

整个技能由 4 个文件组成，各司其职：

组件规格全部集中在components.md的 15 个小节里，下面按「五大核心组件」逐一拆解 ⬇️

按钮规范：4 个变体 + 5 条通用规则

按钮规格见 components.md#L11-L21，只有 4 个变体，靠背景与边框区分层级：

所有按钮共用 5 条硬规则：

• 字体统一Space Mono，13px，全大写
• 字距 0.06em，内边距 12px 24px
• 最小高度44px（保证可点触）
• 没有阴影、没有渐变，只有扁平色块
• Destructive 是唯一的「红色事件」——红色（--accent: #D71921）不是装饰色，而是打断色，详见 tokens.md#L54-L66

卡片设计：扁平表面 + 边框分隔，禁用阴影

卡片（表面容器）的完整规则见 components.md#L3-L7：

• 背景用--surface或--surface-raised，无阴影，靠边框与底色区分层次
• 圆角：标准卡片 12–16px、紧凑型 8px、技术型 4px
• 内边距 16–24px，边框用 1px--border或干脆不用

💡 核心理念是「结构即装饰」：层次靠表面色差和 1px 边框表达，而不是靠投影。上方预览图中左侧 OLED 黑面板与右侧浅灰卡片的对比，正是「明暗双模式一视同仁」的体现。

列表设计：用分隔线代替斑马纹

列表与数据行规则见 components.md#L32-L42：

• 行与行之间用1px 全宽分隔线，行内垂直留白 12–16px
• 左侧标签：Space Mono 全大写 + 次级灰；右侧数值：主色文字
• 永远不要交替行背景色（斑马纹）——分隔线就是答案
• 统计行：数值颜色 = 状态色（绿/琥珀/红/中性），趋势箭头跟随数值同色
• 层级行：子项缩进 16–24px，缩进本身就是层级，不需要树形线或展开/收起

表格设计：数字右对齐、文本左对齐

表格/数据网格规格见 components.md#L44-L51：

• 表头用 label 样式（Space Mono 全大写），底部 1px--border-visible实线
• 单元格：数字用 Space Mono、文本用 Space Grotesk，内边距 12px 16px
• 数字靠右、文本靠左，无斑马纹、无单元格背景色
• 选中行：--surface-raised背景 + 左侧 2px 红色指示条

这套表格规则与列表一脉相承——信息密度优先，视觉装饰为零。

覆盖层规范：模态框、底部弹窗、下拉与内联状态

覆盖层规则见 components.md#L137-L145，总原则是「不用阴影，用背景对比 + 边框表达层级」：

四种状态模式同样克制（components.md#L147-L153）：错误 = 边框变红 + 下方文字；空状态 = 居中留白 96px 以上；加载中 = 分段式 spinner 或[LOADING]文字；禁用 = 40% 透明度。永远不要红色背景、加载骨架屏或弹窗提示。

输入框与开关：表单控件的两个细节

• 输入框：优先用底部下划线（1px 可见边框），聚焦时边框变主色、报错时变红；标签一律放在输入框上方，Space Mono 全大写（components.md#L23-L30）
• 开关：胶囊轨道 + 圆形滑块，关闭时轨道灰、滑块暗灰，开启时轨道白、滑块黑，最低触控目标 44px——它看起来就该像一个物理开关（components.md#L87-L92）

如何使用：3 步生成 Nothing 风格 UI

1. 安装技能：克隆仓库后把nothing-design文件夹复制进 Claude Code 的 skills 目录：

   git clone https://gitcode.com/gh_mirrors/no/nothing-design-skill cp -r nothing-design ~/.claude/skills/

2. 触发技能：下次启动 Claude Code 时，输入/nothing-design或说一句「用 Nothing style 做」即可。

3. 跟随 7 步工作流：技能会按 SKILL.md#L159-L168 的流程执行——声明字体 → 询问深色/浅色模式 → 先定 3 层视觉层级 → 套用排版纪律 → 查 Token → 按组件规格构建 → 最后通过 platform-mapping.md 输出 HTML/CSS、SwiftUI 或 React/Tailwind 代码。

⚙️ 别忘了配套的招牌组件——分段式进度条（components.md#L93-L113）：方头矩形块 + 2px 间隙，填充色随状态变化，永远与数字读数成对出现。「条形表示比例，数字表示精度」，这正是 Nothing 设计语言最机械、最诚实的一面。

总结：5 类组件背后的 3 个设计思想

• 减法优先：每屏只允许 3 层视觉层级，元素必须「挣得」自己的像素（SKILL.md#L16-L23）
• 结构即装饰：分隔线、边框、缩进承担全部结构表达，阴影与斑马纹被整体禁止（SKILL.md#L143-L156）
• 机械的诚实：开关像物理开关、仪表像真实仪表、数据本身就是视觉——36GB/s的等宽数字配一个红色信号点，就是完整的设计

掌握这份核心组件清单后，你既能人工评审 AI 产出的 Nothing 风格界面，也能把这些规格当作自己项目的设计约束直接套用。

【免费下载链接】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