Nothing Design Skill

Nothing Design Skill 是一个专为 Claude Code 打造的设计系统技能包，它将英国科技品牌 Nothing 标志性的视觉语言——单色美学、瑞士排版、工业质感——封装成可复用的指令集。

从此，你无需再反复向 AI 描述“OLED 黑”、“点阵字体”或“机械开关”，只需一句 /nothing-design 或 “用 Nothing 风格”，Claude 即可生成符合该品牌严格设计规范的 UI 代码（HTML/CSS, SwiftUI, React/Tailwind）。

核心设计哲学：回归本质

Nothing 的设计语言以“去装饰化”和“功能主义”著称。该技能包将这一理念转化为具体的 AI 执行规则：

1. 三层视觉层次 (Visual Hierarchy)

严格限制信息层级，避免视觉噪音：

• Display Layer: 超大字号，用于核心数据或标题（通常使用 Space Grotesk）。
• Body Layer: 清晰易读的正文内容。
• Metadata Layer: 微弱的辅助信息（如单位、时间戳），通常使用 Space Mono 或 Doto。
• 规则：仅此三层，拒绝多余的装饰性元素。

2. 极致单色与材质

• OLED Black: 真正的纯黑背景 (#000000)，完美适配 OLED 屏幕，节省电量并提升对比度。
• 点阵与纹理: 标志性的点阵图案（Dot Matrix）作为背景纹理或装饰元素。
• 机械质感: 模拟物理世界的机械开关、仪表盘刻度、分段式进度条。

3. 专属字体栈

内置完整的字体映射逻辑：

• Space Grotesk: 用于标题和强调，带有独特的几何感。
• Space Mono: 用于代码、数据和元数据，体现技术感。
• Doto: 用于极小的标签或特殊装饰，增加复古数码味。

4. 双模式令牌系统

提供完整的 Dark Mode (默认) 和 Light Mode 设计令牌（Colors, Spacing, Typography, Animation），确保在任何环境下都保持品牌一致性。

安装指南

只需两步，即可将 Nothing 的设计基因注入你的 Claude Code。

1. 克隆仓库

git clone https://github.com/dominikmartn/nothing-design-skill.git

2. 复制到技能目录

cp -r nothing-design-skill/nothing-design ~/.claude/skills/

(注：如果 ~/.claude/skills/ 目录不存在，请手动创建)

3. 重启生效

重新启动 Claude Code 终端，技能即自动加载。

如何使用

安装后，你可以在对话中通过以下方式激活：

方式 A：直接指令

“帮我设计一个音乐播放器界面，使用 Nothing 风格。”

方式 B：调用技能命令

`/nothing-design 创建一个显示 CPU 温度的仪表盘组件”

方式 C：上下文预设

在 .claude/settings.json 或项目级的 CLAUDE.md 中添加：

“本项目的 UI 设计请始终遵循 Nothing Design Skill 的规范。”

输出示例:
Claude 将生成包含以下特征的代码：

• 纯黑背景上的白色高对比度文本。
• 使用 Space Grotesk 渲染的巨大数字。
• 带有圆点和虚线的装饰性边框。
• 类似物理旋钮或滑动开关的交互组件。
• 基于 Tailwind CSS 或 SwiftUI 的完整实现。

技能包结构解析

适用场景

• 独立开发者: 快速为你的 iOS 或 Web 应用赋予酷炫的“极客”外观，无需聘请设计师。
• 原型设计: 在 Hackathon 或头脑风暴中，迅速生成高保真、风格统一的 UI 原型。
• 仪表盘开发: 特别适合制作数据监控、服务器状态、智能家居控制面板等需要高可读性和科技感的界面。
• 设计学习: 通过分析生成的代码，学习 Nothing 品牌的设计规范和实现细节。