尧图网页设计 
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-skillNothing Design Skill 是一款用于 Claude Code 的技能能一键生成 Nothing 设计语言的 UI 界面——单色、排印驱动、工业风。本文面向希望自定义设计令牌Design Tokens并扩展组件的开发者带你完整读懂这个技能的设计体系从字体栈、深/浅色颜色令牌、间距系统到按钮、分段进度条等组件规范最后讲解如何把令牌映射到 HTML/CSS、SwiftUI 和 React/Tailwind 三大平台输出。一、这是什么技能包结构与文件导航 Nothing Design Skill 的作者是受够了反复向 Claude 描述同一套设计规则瑞士排印、OLED 纯黑、分段进度条、点阵元素于是把整套Nothing 视觉语言打包成了一个可复用的技能。触发方式是输入/nothing-design或直接说 Nothing style。整个技能包只有 4 个核心文件职责清晰文件职责SKILL.md设计哲学、工艺规则、工作流references/tokens.md颜色、字体、间距、动效令牌references/components.md按钮、卡片、列表、表格、浮层规范references/platform-mapping.mdCSS、SwiftUI、React 输出映射快速安装把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——正文与 UISpace Mono——数据、标签永远大写 ALL CAPS。这三者与 Nothing 官方字体同出自 Colophon 字库是设计 DNA的关键。若你想替换字体务必同时更新字体栈表与 platform-mapping.md 中的 SwiftUI 字体注册代码。3.2 颜色令牌深色/浅色双模式深色的 OLED 黑与浅色的暖白是一等公民不存在派生模式。完整对照表见 tokens.md令牌深色浅色--black背景#000000#F5F5F5--surface卡片#111111#FFFFFF--text-display#FFFFFF#000000--interactive#5B9BF6#007AFF状态色--success绿 /--warning琥珀 /--accent红跨模式保持一致。⚠️ 自定义颜色时的硬约束红色永远只作打断使用一屏最多一个数据状态色应涂在数值本身而不是标签或行背景上。3.3 间距令牌以 8px 为基础单位间距即语义Spacing as Meaning见 SKILL.md--space-xs4px 这些是一体的图标标签--space-md16px 同组不同项--space-2xl48px 新分组开始--space-4xl96px 全新语境完整 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 高频组件速查组件关键规范规范位置按钮Space Mono 大写、药丸 999px 或技术 4–8pxcomponents.md卡片/表面无阴影靠 1px 边框分层圆角 12–16pxcomponents.md分段进度条签名组件离散方块2px 间隙必须配数字读数components.md开关药丸轨道圆形滑块最小触控 44pxcomponents.md浮层模态背景rgba(0,0,0,0.8)无阴影components.md4.2 扩展组件的三条军规禁止清单先行——无渐变、无阴影、无骨架屏、无斑马纹表格、无 toast改用[SAVED]行内状态文本完整清单见 SKILL.md色彩预算——单屏最多 4 级灰阶--text-display(100%) →--text-primary(90%) →--text-secondary(60%) →--text-disabled(40%)一处破格原则——每屏只允许一个意外时刻一个超大数字、一个红色点、一个圆环控件。破格即设计破格两次即混乱SKILL.md。4.3 让组件适配三大平台输出新组件写完后需要为每种输出方式建立令牌映射模板在 references/platform-mapping.mdHTML/CSS直接复制:root变量块作为起点platform-mapping.mdSwiftUI/iOS字体注册进 Info.plist颜色映射为ndXxx静态扩展platform-mapping.md模式切换用Environment(\.colorScheme)Paper设计稿直接写十六进制值深色为主画板、浅色为独立画板。五、标准工作流七步生成 Nothing 风 UI ✍️技能内置了严格的工作流SKILL.md自定义令牌与组件后按此顺序执行即可声明字体——告知需要加载哪些 Google Fonts询问模式——深色还是浅色两者都不是默认值草拟层级——先定三层结构再写代码构图——应用 2.1–2.9 工艺规则核对令牌——查 tokens.md 取精确值构建组件——查 components.md 找模式平台适配——查 platform-mapping.md 输出约定。六、给新手的三个上手建议 先跑再改先让 Claude 生成一个完整页面观察它如何选择令牌再决定要覆盖哪些值改动集中化所有自定义都落在references/两个文件里避免散落在SKILL.md的叙述性规则中保证单一事实来源守住单色纪律扩展数据可视化时先用透明度100%/60%/30%和图案实线/条纹/点区分类别颜色是最后手段SKILL.md。常见问题 FAQQ技能会误触发吗A不会。SKILL.md 的元数据明确要求仅在用户说 Nothing style 或/nothing-design时触发普通 UI 任务不会自动启用。Q可以只输出 Web 而不用 SwiftUI 吗A可以。references/platform-mapping.md按平台分节按需引用即可技能支持 HTML/CSS、SwiftUI、React/Tailwind 三种输出。Q许可证是什么AMIT见 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Nothing Design Skill 开发者指南：自定义设计令牌与扩展组件的完整参考
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-skillNothing Design Skill 是一款用于 Claude Code 的技能能一键生成 Nothing 设计语言的 UI 界面——单色、排印驱动、工业风。本文面向希望自定义设计令牌Design Tokens并扩展组件的开发者带你完整读懂这个技能的设计体系从字体栈、深/浅色颜色令牌、间距系统到按钮、分段进度条等组件规范最后讲解如何把令牌映射到 HTML/CSS、SwiftUI 和 React/Tailwind 三大平台输出。一、这是什么技能包结构与文件导航 Nothing Design Skill 的作者是受够了反复向 Claude 描述同一套设计规则瑞士排印、OLED 纯黑、分段进度条、点阵元素于是把整套Nothing 视觉语言打包成了一个可复用的技能。触发方式是输入/nothing-design或直接说 Nothing style。整个技能包只有 4 个核心文件职责清晰文件职责SKILL.md设计哲学、工艺规则、工作流references/tokens.md颜色、字体、间距、动效令牌references/components.md按钮、卡片、列表、表格、浮层规范references/platform-mapping.mdCSS、SwiftUI、React 输出映射快速安装把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——正文与 UISpace Mono——数据、标签永远大写 ALL CAPS。这三者与 Nothing 官方字体同出自 Colophon 字库是设计 DNA的关键。若你想替换字体务必同时更新字体栈表与 platform-mapping.md 中的 SwiftUI 字体注册代码。3.2 颜色令牌深色/浅色双模式深色的 OLED 黑与浅色的暖白是一等公民不存在派生模式。完整对照表见 tokens.md令牌深色浅色--black背景#000000#F5F5F5--surface卡片#111111#FFFFFF--text-display#FFFFFF#000000--interactive#5B9BF6#007AFF状态色--success绿 /--warning琥珀 /--accent红跨模式保持一致。⚠️ 自定义颜色时的硬约束红色永远只作打断使用一屏最多一个数据状态色应涂在数值本身而不是标签或行背景上。3.3 间距令牌以 8px 为基础单位间距即语义Spacing as Meaning见 SKILL.md--space-xs4px 这些是一体的图标标签--space-md16px 同组不同项--space-2xl48px 新分组开始--space-4xl96px 全新语境完整 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 高频组件速查组件关键规范规范位置按钮Space Mono 大写、药丸 999px 或技术 4–8pxcomponents.md卡片/表面无阴影靠 1px 边框分层圆角 12–16pxcomponents.md分段进度条签名组件离散方块2px 间隙必须配数字读数components.md开关药丸轨道圆形滑块最小触控 44pxcomponents.md浮层模态背景rgba(0,0,0,0.8)无阴影components.md4.2 扩展组件的三条军规禁止清单先行——无渐变、无阴影、无骨架屏、无斑马纹表格、无 toast改用[SAVED]行内状态文本完整清单见 SKILL.md色彩预算——单屏最多 4 级灰阶--text-display(100%) →--text-primary(90%) →--text-secondary(60%) →--text-disabled(40%)一处破格原则——每屏只允许一个意外时刻一个超大数字、一个红色点、一个圆环控件。破格即设计破格两次即混乱SKILL.md。4.3 让组件适配三大平台输出新组件写完后需要为每种输出方式建立令牌映射模板在 references/platform-mapping.mdHTML/CSS直接复制:root变量块作为起点platform-mapping.mdSwiftUI/iOS字体注册进 Info.plist颜色映射为ndXxx静态扩展platform-mapping.md模式切换用Environment(\.colorScheme)Paper设计稿直接写十六进制值深色为主画板、浅色为独立画板。五、标准工作流七步生成 Nothing 风 UI ✍️技能内置了严格的工作流SKILL.md自定义令牌与组件后按此顺序执行即可声明字体——告知需要加载哪些 Google Fonts询问模式——深色还是浅色两者都不是默认值草拟层级——先定三层结构再写代码构图——应用 2.1–2.9 工艺规则核对令牌——查 tokens.md 取精确值构建组件——查 components.md 找模式平台适配——查 platform-mapping.md 输出约定。六、给新手的三个上手建议 先跑再改先让 Claude 生成一个完整页面观察它如何选择令牌再决定要覆盖哪些值改动集中化所有自定义都落在references/两个文件里避免散落在SKILL.md的叙述性规则中保证单一事实来源守住单色纪律扩展数据可视化时先用透明度100%/60%/30%和图案实线/条纹/点区分类别颜色是最后手段SKILL.md。常见问题 FAQQ技能会误触发吗A不会。SKILL.md 的元数据明确要求仅在用户说 Nothing style 或/nothing-design时触发普通 UI 任务不会自动启用。Q可以只输出 Web 而不用 SwiftUI 吗A可以。references/platform-mapping.md按平台分节按需引用即可技能支持 HTML/CSS、SwiftUI、React/Tailwind 三种输出。Q许可证是什么AMIT见 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考