拓冰网站定制 
Nothing Design Skill 代码落地用 CSS 自定义属性在 Web 端还原 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-skillNothing Design Skill 是一款专为 Claude Code 打造的设计系统技能Skill它把 Nothing 标志性的黑白、排版驱动、工业感 UI 规范打包成 AI 可直接复用的技能包。本文介绍如何用 CSS 自定义属性Design Tokens在 Web 端落地这套设计系统从 Token 定义、双模式配色到标志性组件一步步还原 OLED 黑与点阵字体的质感。一、Nothing Design Skill 是什么让 AI 直接输出 Nothing 风格 UI作者反复向 Claude 描述同一套设计规则——瑞士排版、OLED 黑、分段进度条、点阵字体——干脆把这些经验固化成了一个技能。只要说出Nothing style或/nothing-designClaude 就会按以下原则生成界面三层视觉层级主层级display、正文body、元数据metadata仅此三层字体三件套Doto点阵展示字体 Space Grotesk正文 Space Mono数据标签完整的双模式 Token 系统深色 OLED 黑与浅色暖白纸感同等严谨标志性组件分段进度条、机械开关、仪表盘式小部件多端输出HTML/CSS、SwiftUI、React/Tailwind 任选技能包内部结构清晰核心文件都在 nothing-design/ 目录文件作用SKILL.md设计哲学、排版规则、工作流程tokens.md颜色、字体、间距、动效 Tokencomponents.md按钮、卡片、列表、表格等组件规范platform-mapping.mdWeb / SwiftUI / React 输出约定二、一键安装三步把设计技能接入 Claude Code安装只需复制一个文件夹官方推荐方式是 clone 仓库后把技能目录拷入 Claude Code 的 skills 目录git clone https://gitcode.com/gh_mirrors/no/nothing-design-skill cp -r nothing-design-skill/nothing-design ~/.claude/skills/完成。下次启动 Claude Code 时直接说帮我做一个 Nothing 风格的数据面板即可触发。三、核心落地用 CSS 自定义属性定义设计 TokenWeb 端还原这套系统的最佳实践就是把 platform-mapping.md 中给出的:root声明直接搬进全局样式——颜色、间距全部走 CSS 自定义属性组件样式只引用变量名不写死色值。:root { --black: #000000; --surface: #111111; --border: #222222; --text-secondary: #999999; --text-primary: #E8E8E8; --text-display: #FFFFFF; --accent: #D71921; --space-md: 16px; --space-xl: 32px; }3.1 双模式配色OLED 黑与暖白纸感深色模式是暗房间里的仪表盘——纯黑背景#000000白色数据像发光一样浮出浅色模式是印刷版技术手册——米白纸感#F5F5F5卡片用纯白#FFFFFF制造无阴影的微妙层级。完整色值对照见 tokens.md 深色/浅色 Token 表。几个关键角色--text-display100% 白/黑每屏只允许一个英雄数字--text-primary90%正文--text-secondary60%标签、元数据--accent#D71921红不是层级色是打断——紧急时才出现每屏最多一个切换模式用prefers-color-scheme媒体查询或 class 切换即可红色强调、状态色、全大写标签在两种模式下完全一致。3.2 字体与间距两套节奏刻度字体 Token 定义在 tokens.md 字体阶梯从 72px 的--display-xl英雄数字到 11px 的--label全大写等宽标签行高与字距全部固定。Web 端用rem写字号、px写间距。间距则基于 8px 网格--space-xs4px到--space-4xl96px共 9 档。设计哲学里间距就是语义——4–8px 表示属于一起64–96px 表示新上下文开始。如果你发现需要画分割线大概率是间距不够。四、快速搭建 3 个标志性组件Token 就位后Nothing 风格的三个招牌组件几乎可以零设计直接拼出来。4.1 分段进度条机械感的数据可视化这是整套系统的签名元素——不是圆滑的连续条而是一排带 2px 间隙的方形色块像仪表盘刻度。状态色按规则上色正常用--text-display超标用--accent红健康用--success绿。规范细节在 components.md 分段进度条一节。记住一条铁律条形表示比例数字表示精度二者永远成对出现。4.2 工业感按钮与标签按钮统一 Space Mono、13px、全大写、字距 0.06em主按钮是胶囊形999px 圆角反白底次按钮细边框危险按钮红边框——全部定义在 components.md 按钮表。4.3 点阵背景一行 CSS 还原 NDot 质感Nothing 的点阵动机dot-matrix motif用径向渐变就能实现完整代码见 tokens.md 点阵动机一节.dot-grid { background-image: radial-gradient(circle, var(--border-visible) 1px, transparent 1px); background-size: 16px 16px; }1–2px 的圆点、12–16px 均匀网格做背景时透明度压到 0.1–0.2就是演示图里那块时钟面板的呼吸感来源。五、实战流程从一句话提示到完整仪表板SKILL.md 工作流程 定义了固定的七步AI 会严格照做声明字体——先告诉你需要加载哪些 Google Fonts询问模式——深色还是浅色没有默认值草图层级——写代码前先锁定三层重要性构图——套用排版、间距、容器策略核对 Token——所有色值间距查 tokens.md搭建组件——按 components.md 的规格适配平台——Web 端按 platform-mapping.md 输出 HTML/CSS另外两个值得记住的反模式清单无阴影、无模糊、无骨架屏用[LOADING...]括号文本代替无 Toast 弹窗用行内状态文本[SAVED]、[ERROR: ...]。这些不做和要做一样构成了 Nothing 的克制感。六、小结Nothing Design Skill 的价值不在于多而在于把一套严苛的设计纪律固化成了可复用的 Token 与规则用CSS 自定义属性承载颜色与间距组件样式零硬编码双模式一等公民深色浅色各有完整色板三层层级 2 字体 3 字号的排版预算保证克制分段进度条、点阵背景等标志性元素几行 CSS 即可落地把它装进 Claude Code你对着 AI 说一句Nothing style得到的就是一套有完整设计系统的界面而不只是一堆拼起来的控件。【免费下载链接】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 代码落地：用 CSS 自定义属性在 Web 端还原 Nothing 设计系统
Nothing Design Skill 代码落地用 CSS 自定义属性在 Web 端还原 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-skillNothing Design Skill 是一款专为 Claude Code 打造的设计系统技能Skill它把 Nothing 标志性的黑白、排版驱动、工业感 UI 规范打包成 AI 可直接复用的技能包。本文介绍如何用 CSS 自定义属性Design Tokens在 Web 端落地这套设计系统从 Token 定义、双模式配色到标志性组件一步步还原 OLED 黑与点阵字体的质感。一、Nothing Design Skill 是什么让 AI 直接输出 Nothing 风格 UI作者反复向 Claude 描述同一套设计规则——瑞士排版、OLED 黑、分段进度条、点阵字体——干脆把这些经验固化成了一个技能。只要说出Nothing style或/nothing-designClaude 就会按以下原则生成界面三层视觉层级主层级display、正文body、元数据metadata仅此三层字体三件套Doto点阵展示字体 Space Grotesk正文 Space Mono数据标签完整的双模式 Token 系统深色 OLED 黑与浅色暖白纸感同等严谨标志性组件分段进度条、机械开关、仪表盘式小部件多端输出HTML/CSS、SwiftUI、React/Tailwind 任选技能包内部结构清晰核心文件都在 nothing-design/ 目录文件作用SKILL.md设计哲学、排版规则、工作流程tokens.md颜色、字体、间距、动效 Tokencomponents.md按钮、卡片、列表、表格等组件规范platform-mapping.mdWeb / SwiftUI / React 输出约定二、一键安装三步把设计技能接入 Claude Code安装只需复制一个文件夹官方推荐方式是 clone 仓库后把技能目录拷入 Claude Code 的 skills 目录git clone https://gitcode.com/gh_mirrors/no/nothing-design-skill cp -r nothing-design-skill/nothing-design ~/.claude/skills/完成。下次启动 Claude Code 时直接说帮我做一个 Nothing 风格的数据面板即可触发。三、核心落地用 CSS 自定义属性定义设计 TokenWeb 端还原这套系统的最佳实践就是把 platform-mapping.md 中给出的:root声明直接搬进全局样式——颜色、间距全部走 CSS 自定义属性组件样式只引用变量名不写死色值。:root { --black: #000000; --surface: #111111; --border: #222222; --text-secondary: #999999; --text-primary: #E8E8E8; --text-display: #FFFFFF; --accent: #D71921; --space-md: 16px; --space-xl: 32px; }3.1 双模式配色OLED 黑与暖白纸感深色模式是暗房间里的仪表盘——纯黑背景#000000白色数据像发光一样浮出浅色模式是印刷版技术手册——米白纸感#F5F5F5卡片用纯白#FFFFFF制造无阴影的微妙层级。完整色值对照见 tokens.md 深色/浅色 Token 表。几个关键角色--text-display100% 白/黑每屏只允许一个英雄数字--text-primary90%正文--text-secondary60%标签、元数据--accent#D71921红不是层级色是打断——紧急时才出现每屏最多一个切换模式用prefers-color-scheme媒体查询或 class 切换即可红色强调、状态色、全大写标签在两种模式下完全一致。3.2 字体与间距两套节奏刻度字体 Token 定义在 tokens.md 字体阶梯从 72px 的--display-xl英雄数字到 11px 的--label全大写等宽标签行高与字距全部固定。Web 端用rem写字号、px写间距。间距则基于 8px 网格--space-xs4px到--space-4xl96px共 9 档。设计哲学里间距就是语义——4–8px 表示属于一起64–96px 表示新上下文开始。如果你发现需要画分割线大概率是间距不够。四、快速搭建 3 个标志性组件Token 就位后Nothing 风格的三个招牌组件几乎可以零设计直接拼出来。4.1 分段进度条机械感的数据可视化这是整套系统的签名元素——不是圆滑的连续条而是一排带 2px 间隙的方形色块像仪表盘刻度。状态色按规则上色正常用--text-display超标用--accent红健康用--success绿。规范细节在 components.md 分段进度条一节。记住一条铁律条形表示比例数字表示精度二者永远成对出现。4.2 工业感按钮与标签按钮统一 Space Mono、13px、全大写、字距 0.06em主按钮是胶囊形999px 圆角反白底次按钮细边框危险按钮红边框——全部定义在 components.md 按钮表。4.3 点阵背景一行 CSS 还原 NDot 质感Nothing 的点阵动机dot-matrix motif用径向渐变就能实现完整代码见 tokens.md 点阵动机一节.dot-grid { background-image: radial-gradient(circle, var(--border-visible) 1px, transparent 1px); background-size: 16px 16px; }1–2px 的圆点、12–16px 均匀网格做背景时透明度压到 0.1–0.2就是演示图里那块时钟面板的呼吸感来源。五、实战流程从一句话提示到完整仪表板SKILL.md 工作流程 定义了固定的七步AI 会严格照做声明字体——先告诉你需要加载哪些 Google Fonts询问模式——深色还是浅色没有默认值草图层级——写代码前先锁定三层重要性构图——套用排版、间距、容器策略核对 Token——所有色值间距查 tokens.md搭建组件——按 components.md 的规格适配平台——Web 端按 platform-mapping.md 输出 HTML/CSS另外两个值得记住的反模式清单无阴影、无模糊、无骨架屏用[LOADING...]括号文本代替无 Toast 弹窗用行内状态文本[SAVED]、[ERROR: ...]。这些不做和要做一样构成了 Nothing 的克制感。六、小结Nothing Design Skill 的价值不在于多而在于把一套严苛的设计纪律固化成了可复用的 Token 与规则用CSS 自定义属性承载颜色与间距组件样式零硬编码双模式一等公民深色浅色各有完整色板三层层级 2 字体 3 字号的排版预算保证克制分段进度条、点阵背景等标志性元素几行 CSS 即可落地把它装进 Claude Code你对着 AI 说一句Nothing style得到的就是一套有完整设计系统的界面而不只是一堆拼起来的控件。【免费下载链接】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），仅供参考