企业官网建设流程全解析

Nothing Design Skill 开发者指南：自定义设计令牌与扩展组件的完整参考

【免费下载链接】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 设计语言的 UI 界面——单色、排印驱动、工业风。本文面向希望自定义设计令牌（Design Tokens）并扩展组件的开发者，带你完整读懂这个技能的设计体系：从字体栈、深/浅色颜色令牌、间距系统，到按钮、分段进度条等组件规范，最后讲解如何把令牌映射到 HTML/CSS、SwiftUI 和 React/Tailwind 三大平台输出。

一、这是什么？技能包结构与文件导航 📦

Nothing Design Skill 的作者是受够了反复向 Claude 描述同一套设计规则（瑞士排印、OLED 纯黑、分段进度条、点阵元素），于是把整套"Nothing 视觉语言"打包成了一个可复用的技能。触发方式是输入/nothing-design或直接说 "Nothing style"。

整个技能包只有 4 个核心文件，职责清晰：

快速安装

把nothing-design文件夹复制到 Claude Code 的技能目录即可：

git clone https://gitcode.com/gh_mirrors/no/nothing-design-skill cp -r nothing-design-skill/nothing-design ~/.claude/skills/

下次启动 Claude Code 时技能自动生效，无需其他配置。

二、理解设计哲学：先读懂三条"铁律" 🎯

自定义令牌之前，先理解令牌背后的设计决策，否则改出来的值会"跑味"。SKILL.md 中定义了核心理念：

• 做减法，不做加法——每个元素都必须"挣得"它的像素；
• 单色是画布——红色（#D71921）是"打断"，不是装饰；
• 排印承担层级——靠字号、字重、间距而非颜色建立层级；
• 三层视觉层级——每屏严格只有 Primary / Secondary / Tertiary 三层，见 SKILL.md 中的三层规则表。

一句话检验标准：眯眼看屏幕，仍要说得出什么最重要。

三、自定义设计令牌（Design Tokens）详解 ⚙️

所有可调整的设计值都集中在 references/tokens.md，这是自定义的首要入口。

3.1 字体令牌：三套字体栈

技能使用 tokens.md 中定义的字体系：

• Doto（点阵可变字体）——仅用于 Hero 级大数字，36px 以上；
• Space Grotesk——正文与 UI；
• Space Mono——数据、标签（永远大写 ALL CAPS）。

这三者与 Nothing 官方字体同出自 Colophon 字库，是"设计 DNA"的关键。若你想替换字体，务必同时更新字体栈表与 platform-mapping.md 中的 SwiftUI 字体注册代码。

3.2 颜色令牌：深色/浅色双模式

深色的 OLED 黑与浅色的暖白是一等公民，不存在"派生模式"。完整对照表见 tokens.md：

状态色（--success绿 /--warning琥珀 /--accent红）跨模式保持一致。⚠️ 自定义颜色时的硬约束：红色永远只作"打断"使用，一屏最多一个；数据状态色应涂在数值本身，而不是标签或行背景上。

3.3 间距令牌：以 8px 为基础单位

间距即语义（Spacing as Meaning），见 SKILL.md：

• --space-xs（4px）= "这些是一体的"（图标+标签）
• --space-md（16px）= "同组不同项"
• --space-2xl（48px）= "新分组开始"
• --space-4xl（96px）= "全新语境"

完整 9 级间距标尺在 tokens.md。经验法则：需要分割线时，多半是间距对比不够，先加距离再画线。

3.4 动效与图标令牌

• 动效：150–250ms 微交互，cubic-bezier(0.25, 0.1, 0.25, 1)轻微缓出，禁止弹簧回弹，优先用透明度而非位移（tokens.md）；
• 图标：单线 1.5px、无填充、24×24 基准，首选 Lucide 或 Phosphor 细体。

四、扩展组件：按规范新增你的组件 🧩

新增组件不是画一个好看的样式，而是复用令牌 + 遵守反模式清单。所有组件规范位于 references/components.md。

4.1 高频组件速查

4.2 扩展组件的三条军规

1. 禁止清单先行——无渐变、无阴影、无骨架屏、无斑马纹表格、无 toast（改用[SAVED]行内状态文本），完整清单见 SKILL.md；
2. 色彩预算——单屏最多 4 级灰阶：--text-display(100%) →--text-primary(90%) →--text-secondary(60%) →--text-disabled(40%)；
3. 一处破格原则——每屏只允许一个意外时刻：一个超大数字、一个红色点、一个圆环控件。破格即设计，破格两次即混乱（SKILL.md）。

4.3 让组件适配三大平台输出

新组件写完后，需要为每种输出方式建立令牌映射，模板在 references/platform-mapping.md：

• HTML/CSS：直接复制:root变量块作为起点（platform-mapping.md）；
• SwiftUI/iOS：字体注册进 Info.plist，颜色映射为ndXxx静态扩展（platform-mapping.md），模式切换用@Environment(\.colorScheme)；
• Paper（设计稿）：直接写十六进制值，深色为主画板、浅色为独立画板。

五、标准工作流：七步生成 Nothing 风 UI ✍️

技能内置了严格的工作流（SKILL.md），自定义令牌与组件后按此顺序执行即可：

1. 声明字体——告知需要加载哪些 Google Fonts；
2. 询问模式——深色还是浅色？两者都不是默认值；
3. 草拟层级——先定三层结构，再写代码；
4. 构图——应用 2.1–2.9 工艺规则；
5. 核对令牌——查 tokens.md 取精确值；
6. 构建组件——查 components.md 找模式；
7. 平台适配——查 platform-mapping.md 输出约定。

六、给新手的三个上手建议 💡

• 先跑再改：先让 Claude 生成一个完整页面，观察它如何选择令牌，再决定要覆盖哪些值；
• 改动集中化：所有自定义都落在references/两个文件里，避免散落在SKILL.md的叙述性规则中，保证单一事实来源；
• 守住单色纪律：扩展数据可视化时，先用透明度（100%/60%/30%）和图案（实线/条纹/点）区分类别，颜色是最后手段（SKILL.md）。

常见问题 FAQ

Q：技能会误触发吗？A：不会。SKILL.md 的元数据明确要求仅在用户说 "Nothing style" 或/nothing-design时触发，普通 UI 任务不会自动启用。

Q：可以只输出 Web 而不用 SwiftUI 吗？A：可以。references/platform-mapping.md按平台分节，按需引用即可，技能支持 HTML/CSS、SwiftUI、React/Tailwind 三种输出。

Q：许可证是什么？A：MIT，见 LICENSE，可自由商用与二次分发。

Nothing Design Skill 的价值在于把"品味"变成了可维护的令牌与组件规范：改一处令牌，全平台同步生效；按一份规范，新组件自动同频。掌握 tokens.md 与 components.md 这两个核心文件，你就拥有了这套工业风设计系统的完整自定义能力。

【免费下载链接】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