Nothing Design Skill 招牌组件实战：用分段式进度条复刻 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
Nothing Design Skill是一个面向 Claude Code 的设计系统技能包，它把 Nothing 标志性的单色、打字排印、工业风语言沉淀成可复用的规则。本文聚焦它的招牌组件——分段式进度条，教你用几行指令让 AI 生成仪表级数据可视化界面，从零复刻 Nothing 式的精密观感。
Nothing 风格仪表盘预览：CPU 环形仪表、内存分段式进度条、点阵时钟与存储条状图
为什么是"分段式进度条"
普通进度条是一根圆滑的填充条，而 Nothing 风格的分段式进度条由一个个离散的矩形块组成——像机械仪表上的刻度格，而不是流畅的动画条。
在 references/components.md 中，它被定义为"The signature data visualization"（标志性数据可视化）：
- 离散方角块，2px 间隙，无圆角，机械仪表感
- 上方是标签 + 数值，下方是全宽条状块——条形表达比例，数字表达精度
- 状态色编码：中性白、超限红（
#D71921）、健康绿、警示黄 - 三档尺寸：Hero 16–20px、标准 8–12px、紧凑 4–6px
- 溢出时，填充块会越过"满格"标记继续以状态色延伸
这就是 Nothing 的"数据即美感"（Data as beauty）：36GB/s这样的数字配 Space Mono 字体本身就是画面，不需要插图。
快速上手：安装 Nothing Design Skill
整个项目只包含一份设计"知识库"，安装极简：
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 style"，技能即被触发。触发词、设计哲学与工作流都定义在 nothing-design/SKILL.md 中，安装说明见 README.md。
实战：一条指令生成仪表级界面
对 Claude Code 说：
"用 Nothing 风格做一个系统监控面板，包含 CPU 环形仪表、内存分段式进度条、存储分区条形图和电池仪表，深色 OLED 模式。"
AI 会按 SKILL.md 中的工作流依次执行：声明字体（Doto + Space Grotesk + Space Mono）→ 询问深浅模式 → 梳理三层视觉层级 → 应用工艺规则 → 核对 token → 生成组件 → 适配平台输出。
输出的可以是 HTML/CSS、SwiftUI 或 React/Tailwind，平台差异规则写在 references/platform-mapping.md。
💡小提示：先明确"哪块数据最重要"。按设计哲学，每屏只有三层重要性，主数据（Hero 数字）应大到"夸张"，元数据则小到"几乎看不见"。
进阶技巧：让界面更像 Nothing
想从"像 Nothing"升级到"就是 Nothing"，重点核对这三条规则：
1. 数据密集屏换着花样画
当一屏出现 3 个以上数据区时，形式要变化、语气要统一——Hero 大数字、分段式进度条、同心环、迷你内联条、sparkline 交替使用。规则见 SKILL.md 的"Visual Variety in Data-Dense Screens"。
2. 严守 token 值
颜色、字号、间距、动效都有精确数值：OLED 纯黑#000000、强调红#D71921、8px 基础间距、200ms ease-out 过渡。所有值集中在 references/tokens.md，直接引用即可。
3. 避开反模式清单
无渐变、无阴影、无骨架屏、无斑马纹表格、无回弹动效——SKILL.md 的"ANTI-PATTERNS"一节列了 11 条禁止项，生成后可以逐条自查。
项目文件导航
| 文件 | 内容 |
|---|---|
| SKILL.md | 设计哲学、工艺规则、工作流与反模式 |
| references/components.md | 按钮、卡片、分段式进度条、图表等组件规格 |
| references/tokens.md | 字体、色彩、间距、动效 token |
| references/platform-mapping.md | CSS / SwiftUI / React 输出映射 |
装好这个技能包，你不需要背诵任何设计细节——只要说出"Nothing style"，仪表级的分段式进度条、点阵时钟与精密单色界面就会自动生成。🔧
【免费下载链接】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），仅供参考
