让 AI 告别”AI 味”UI：Nothing Design Skill 把手机美学装进 Claude Code

你有没有这种感觉：让 AI 生成一个 UI，出来的东西总是差点意思——配色花哨、间距随意、圆角过大，一股”AI 味儿”扑面而来？问题不在模型，在于没有给它装上一套设计规范。现在有个 Skill，直接把 Nothing 手机的工业美学打包成一套可加载的设计系统，装进 Claude Code，说一句话就能输出专业级界面。

什么是 Nothing Design Skill

这个 Skill 把英国消费电子品牌 Nothing 的视觉语言编码为一套 Claude Code 可加载的设计规范。Nothing 的设计风格很鲜明：OLED 纯黑背景、等宽字体、分段式进度条、机械感开关、点阵装饰——有种瑞士工业设计的克制感，但又比传统极简主义多个性。

Skill 包含三个核心模块：tokens.md 定义精确的颜色、字体、间距、动效参数；components.md 给出按钮、卡片、列表、表格、浮层的具体规格；platform-mapping.md 则映射到 CSS、SwiftUI、React 三端的输出规则。装上之后，Claude Code 就能按 Nothing 的规范生成 UI，不用你每次重复描述。

三层视觉层级：Display → Body → Metadata

这个 Skill 最值得学习的地方是它的层级设计哲学：只保留三层，绝不添加冗余复杂度。

• Display 层：数字、关键指标，用 Doto / Space Mono，48–96px，重量极轻（100–300），负责视觉冲击。
• Body 层：正文内容，Space Grotesk，14–16px，正经的可读内容。
• Metadata 层：标签、时间戳、单位，Space Mono，10–12px，严格等宽对齐。

这个分层逻辑很简单，但大多数 AI 生成的 UI 做不到——因为没有规范约束，AI 倾向于把所有东西都做成同一层级的视觉重量，显得杂乱。

适合哪些场景

说实话，Nothing 风格不是万能的——它不适合需要活泼品牌色的消费类产品。但以下场景是真的好用：开发者工具和 Dashboard：等宽字体 + 精确对齐 + 分段进度条，工业风天然适配数据密集界面；个人项目和 Side Project：不需要设计经验，单色 + 工业感本身就带品位，比默认 UI 框架好看太多。

安装方式极简，三步搞定：

git clone https://github.com/dominikmartn/nothing-design-skill.git
cp -r nothing-design-skill/nothing-design ~/.claude/skills/
# 重启 Claude Code，Skill 自动加载

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

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