快速上手 Nothing Design Skill：5 分钟在 Claude Code 中安装并生成第一个 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 打造的设计系统技能包，让 AI 一键生成 Nothing 风格的界面：单色（Monochrome）、排版驱动、工业感强烈。你只需要在对话里说一声"Nothing style"，Claude 就会按 Nothing 的视觉语言输出 HTML/CSS、SwiftUI 或 React/Tailwind 代码——深色 OLED 黑、等宽仪表标签、分段进度条、点阵装饰，一个不落。
5 分钟安装 Nothing Design Skill 的步骤
整个过程只需要两条命令，无需任何依赖配置 🛠️
第 1 步：克隆仓库
git clone https://gitcode.com/gh_mirrors/no/nothing-design-skill第 2 步：把技能目录复制到 Claude Code 的 skills 目录
cp -r nothing-design-skill/nothing-design ~/.claude/skills/完成。下次启动 Claude Code 时，nothing-design技能就自动可用了。整个安装不到 5 分钟，甚至不到 1 分钟。
如何触发：生成你的第一个 Nothing 风格界面
Nothing Design Skill 采用显式触发机制——它不会在你做任何普通 UI 任务时自动介入，只有以下两种方式会激活它：
- 在 Claude Code 中输入斜杠命令：
/nothing-design - 或直接用自然语言说："用 Nothing style 做一个系统监控面板"
触发后，Claude 会按照 SKILL.md 中内置的工作流执行：
- 声明字体—— 告诉你要加载哪些 Google Fonts（Space Grotesk / Space Mono / Doto）
- 询问模式—— 深色还是浅色？两者都是一等公民，没有默认值
- 草拟层级—— 先确定三层视觉层级，再动手写代码
- 按工艺规则组合—— 间距、字体预算、灰阶层次
- 对照 token 与组件参考—— 确保每个数值都有据可依
- 按平台输出—— HTML/CSS、SwiftUI 或 React/Tailwind
💡 新手提示：第一次使用时，不妨在 prompt 里直接说清楚场景，比如"生成一个 Nothing 风格的电池状态卡片，深色模式"，效果最佳。
Nothing 风格到底是什么？核心设计规则速览
这套技能的精髓，是把一位资深产品设计师的审美经验"蒸馏"进了规则里。了解这几点，你就知道 Claude 为什么能生成如此统一风格的界面：
| 规则 | 说明 |
|---|---|
| 🖤 三层视觉层级 | 每个屏幕只有 Primary / Secondary / Tertiary 三层，靠字号和字重拉开对比，不靠颜色 |
| 🔤 字体纪律 | 每屏最多 2 个字体家族、3 种字号、2 个字重，Doto 点阵字体只用于"高光时刻" |
| 📐 间距即语义 | 4–8px 表示"属于一起"，32–48px 表示"新分组"，64–96px 表示"新上下文" |
| ⚪ 灰阶即层次 | 单色系统里最多 4 级灰阶；红色 #D71921 只作为"中断信号"出现，每屏最多一处 |
| ⚙️ 机械诚实 | 开关像实体拨杆，进度条是分段式仪表，控件看起来就是控件 |
完整的 token 数值（颜色、字阶、间距、动效曲线）都沉淀在参考文档中，Claude 生成时会逐一对照：
- 颜色与字体 token：nothing-design/references/tokens.md
- 按钮、卡片、列表、表格等组件规范：nothing-design/references/components.md
- HTML/CSS、SwiftUI、React 平台输出映射：nothing-design/references/platform-mapping.md
适合谁用？常见使用场景 🎯
- 独立开发者 / 前端：快速产出有设计质感的落地页、Dashboard，不用再给 AI 反复解释"我要黑底、等宽字体、别加阴影"
- iOS 开发者：直接要求输出 SwiftUI，token 和组件规范会自动映射到平台约定
- 设计学习者：读一遍 SKILL.md 中的"反模式"清单（无渐变、无阴影、无骨架屏、无斑马纹表格……），本身就是一堂免费的瑞士排版 + 工业设计课
常见问题 FAQ
Q：技能会在我写普通界面代码时自动触发吗？不会。根据 SKILL.md 的触发定义，只有明确说 "Nothing style"、"Nothing design" 或输入/nothing-design时才会启用，避免干扰日常开发。
Q：支持哪些输出平台？HTML/CSS（Web）、SwiftUI（iOS）、React + Tailwind，三套映射规则都内置在技能中。
Q：深色和浅色模式怎么选？技能会主动询问你。深色是"暗室里的仪表盘"（OLED 黑 + 发光白数据），浅色是"印刷技术手册"（米白纸面 + 黑墨），两套都有完整的设计规格。
总结
Nothing Design Skill 证明了 AI 生成 UI 的正确打开方式：把设计规则结构化，比写一堆 prompt 提示更可靠。5 分钟安装、一句话触发，你就能持续产出风格统一、细节克制的 Nothing 风格界面。克隆仓库、复制目录、输入/nothing-design——现在就可以开始你的第一个界面了 ✨
【免费下载链接】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），仅供参考
