Nothing Design Skill：给 Claude Code 装上 Nothing 手机的工业美学

每次让 AI 帮你写界面，出来都是千篇一律的圆角卡片配渐变色？我也是。

最近发现一个挺有意思的东西——有人把 Nothing 手机的整套设计语言做成了 Claude Code 的 Skill。装上之后，跟 Claude 说"用 Nothing 风格做个设置页"，出来的界面直接就是那种黑白分明、点阵元素、精密仪器感的调性，辨识度拉满。

Nothing 的设计为什么值得做成 Skill？

Nothing 这个品牌可能有人不太熟，它是一加联合创始人 Carl Pei 出来创业做的，手机和耳机产品都走了一条跟主流完全不同的设计路线。

简单概括就是——把 80 年代 IBM 大型机的点阵打印美学搬到了 2024 年的消费电子产品上。

具体来说有这么几个特点：

• 纯黑白灰，不掺一点彩色。在现在满屏渐变和渐变按钮的 App 里，这种单色调看着反而特别舒服
• OLED 纯黑 #000000。因为 Nothing Phone 的背面灯带和 Glyph 接口就是在这个基础上设计的，真黑背景是它视觉体系的地基
• 瑞士排版。严格的网格、精确的字号层级，不搞花哨的字体效果
• 点阵图案。那个标志性的 Dot Matrix 排布，致敬的是早期计算机的点阵打印机
• 工业感。分段进度条、等宽字体、精密仪表盘式的呈现方式

这套视觉语言做出来的东西，一眼就能认出来。而把它封装成 Skill 的意义在于——不用每次都给 AI 从头描述一遍"我要那种黑白的、工业风的、有点复古科技感的界面"。

这个 Skill 里都有什么

整个包的结构挺清晰的：

设计 Token 那块做得比较细——颜色不是随便给个黑和灰，而是有精确的阶值。间距基于网格系统。动效规范也写了，不过走的是克制的路线，过渡动画只在必要时出现。

组件规格覆盖了日常开发最常用的几种：

• 按钮：描边风格，不填充，hover 和 active 状态都定义好了
• 卡片：极细边框，无圆角或者很小的圆角
• 列表和表格：等宽字体，严格对齐，分隔线精确
• 浮层：半透明黑色背景，模糊值也给定了

支持三个平台的输出：CSS/Tailwind 走 Web，React 做前端框架，SwiftUI 写 iOS 原生。

安装和使用

安装就三步：

# 1. 克隆仓库
git clone https://github.com/dominikmartn/nothing-design-skill

# 2. 复制到 Claude Code 的 skills 目录
cp -r nothing-design-skill ~/.claude/skills/

# 3. 重启 Claude Code

重启之后 Skill 自动加载，不用额外配置。

用的时候直接在 Claude Code 里说就行：

/nothing-design 帮我做一个用户设置页面

或者：

用 Nothing 风格做一个数据监控仪表盘

Claude 会自动套用 Nothing 的颜色 Token、组件结构和对应平台的代码模板来生成。当然，生成的代码大概率还需要微调，毕竟 Skill 给的是规范和约束，最终代码质量还是看模型本身的能力。

适合什么场景用

说实话，Nothing 这种风格不是万能的——它不适合需要品牌色和活泼视觉的消费类产品。但在以下场景里是真的好用：

开发者工具和 Dashboard：等宽字体 + 精确对齐 + 分段进度条，这种工业风天然适合数据密集的界面。内部工具不用花时间做设计，套上 Nothing 风格就能用。

个人项目和 Side Project：不需要设计经验，单色调 + 工业感本身就带品位。比默认的 UI 框架好看太多。

快速原型：以前每次让 AI 出界面都要先描述风格偏好，现在一句话触发，风格一致性有保障。

学习设计系统：这个 Skill 的文件结构本身就是一个完整的设计系统示例——Token 层、组件层、平台映射层，拆开看看就能学到设计系统怎么组织。

如果想自己改

Skill 的文件都是标准 Markdown，改起来没什么门槛。比如想调整颜色，编辑 tokens.md 里的色值就行。想加新组件，在 components.md 里补上规格就行。

有一点值得注意：这个 Skill 目前是给 Claude Code 设计的，但文件内容是纯文本的 Markdown 规范，理论上你也可以把内容复制给其他 AI 工具用，只是少了自动注入的能力，得手动粘贴。

总得来说，nothing-design-skill 做了一件很简单但很有价值的事——把一套有辨识度的设计语言固化为可复用的规范。对于经常用 AI 辅助写前端界面的人来说，省去了每次重复描述风格的麻烦，而且出来的东西至少在视觉上是统一的。

如果你也在用 Claude Code 做前端开发，可以试试看。

GitHub 地址：https://github.com/dominikmartn/nothing-design-skill