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 打造的技能包专门生成单色、排版驱动、工业风的 UI 界面。它把「OLED 纯黑背景、Space Mono 全大写标签、分段式进度条、点阵元素」等设计原则打包成一套可复用规范让 AI 不再需要你反复描述设计规则。本文带你通读官方组件清单 components.md一次性讲清按钮、卡片、列表、表格、覆盖层这 5 类核心组件的规格与使用细节新手也能快速上手这套设计规范。组件规范总览4 个核心文件怎么分工整个技能由 4 个文件组成各司其职文件职责SKILL.md设计哲学、排版纪律、7 步工作流references/tokens.md颜色、字体、间距、动效等 Token 取值references/components.md按钮、卡片、列表、表格、覆盖层等组件规格references/platform-mapping.mdHTML/CSS、SwiftUI、React/Tailwind 输出映射组件规格全部集中在components.md的 15 个小节里下面按「五大核心组件」逐一拆解 ⬇️按钮规范4 个变体 5 条通用规则按钮规格见 components.md#L11-L21只有 4 个变体靠背景与边框区分层级变体背景边框文字圆角Primary白底无黑字999px胶囊Secondary透明1px 可见边框主色文字999pxGhost透明无次级灰字0Destructive透明1px 红色边框红色文字999px所有按钮共用 5 条硬规则字体统一Space Mono13px全大写字距 0.06em内边距 12px 24px最小高度44px保证可点触没有阴影、没有渐变只有扁平色块Destructive 是唯一的「红色事件」——红色--accent: #D71921不是装饰色而是打断色详见 tokens.md#L54-L66卡片设计扁平表面 边框分隔禁用阴影卡片表面容器的完整规则见 components.md#L3-L7背景用--surface或--surface-raised无阴影靠边框与底色区分层次圆角标准卡片 12–16px、紧凑型 8px、技术型 4px内边距 16–24px边框用 1px--border或干脆不用 核心理念是「结构即装饰」层次靠表面色差和 1px 边框表达而不是靠投影。上方预览图中左侧 OLED 黑面板与右侧浅灰卡片的对比正是「明暗双模式一视同仁」的体现。列表设计用分隔线代替斑马纹列表与数据行规则见 components.md#L32-L42行与行之间用1px 全宽分隔线行内垂直留白 12–16px左侧标签Space Mono 全大写 次级灰右侧数值主色文字永远不要交替行背景色斑马纹——分隔线就是答案统计行数值颜色 状态色绿/琥珀/红/中性趋势箭头跟随数值同色层级行子项缩进 16–24px缩进本身就是层级不需要树形线或展开/收起表格设计数字右对齐、文本左对齐表格/数据网格规格见 components.md#L44-L51表头用 label 样式Space Mono 全大写底部 1px--border-visible实线单元格数字用 Space Mono、文本用 Space Grotesk内边距 12px 16px数字靠右、文本靠左无斑马纹、无单元格背景色选中行--surface-raised背景 左侧 2px 红色指示条这套表格规则与列表一脉相承——信息密度优先视觉装饰为零。覆盖层规范模态框、底部弹窗、下拉与内联状态覆盖层规则见 components.md#L137-L145总原则是「不用阴影用背景对比 边框表达层级」覆盖层关键规格模态框遮罩rgba(0,0,0,0.8)对话框居中、最大宽 480px、16px 圆角、1px 可见边框右上角[ X ]幽灵按钮关闭底部弹窗顶部 16px 圆角 居中 2px 拖拽把手支持下拉关闭下拉菜单--surface-raised背景、8px 圆角、44px 行高选中项左侧 2px 红色指示条Toast 提示❌ 禁用——改用内联状态文本[SAVED]、[ERROR: ...]四种状态模式同样克制components.md#L147-L153错误 边框变红 下方文字空状态 居中留白 96px 以上加载中 分段式 spinner 或[LOADING]文字禁用 40% 透明度。永远不要红色背景、加载骨架屏或弹窗提示。输入框与开关表单控件的两个细节输入框优先用底部下划线1px 可见边框聚焦时边框变主色、报错时变红标签一律放在输入框上方Space Mono 全大写components.md#L23-L30开关胶囊轨道 圆形滑块关闭时轨道灰、滑块暗灰开启时轨道白、滑块黑最低触控目标 44px——它看起来就该像一个物理开关components.md#L87-L92如何使用3 步生成 Nothing 风格 UI安装技能克隆仓库后把nothing-design文件夹复制进 Claude Code 的 skills 目录git clone https://gitcode.com/gh_mirrors/no/nothing-design-skill cp -r nothing-design ~/.claude/skills/触发技能下次启动 Claude Code 时输入/nothing-design或说一句「用 Nothing style 做」即可。跟随 7 步工作流技能会按 SKILL.md#L159-L168 的流程执行——声明字体 → 询问深色/浅色模式 → 先定 3 层视觉层级 → 套用排版纪律 → 查 Token → 按组件规格构建 → 最后通过 platform-mapping.md 输出 HTML/CSS、SwiftUI 或 React/Tailwind 代码。⚙️ 别忘了配套的招牌组件——分段式进度条components.md#L93-L113方头矩形块 2px 间隙填充色随状态变化永远与数字读数成对出现。「条形表示比例数字表示精度」这正是 Nothing 设计语言最机械、最诚实的一面。总结5 类组件背后的 3 个设计思想减法优先每屏只允许 3 层视觉层级元素必须「挣得」自己的像素SKILL.md#L16-L23结构即装饰分隔线、边框、缩进承担全部结构表达阴影与斑马纹被整体禁止SKILL.md#L143-L156机械的诚实开关像物理开关、仪表像真实仪表、数据本身就是视觉——36GB/s的等宽数字配一个红色信号点就是完整的设计掌握这份核心组件清单后你既能人工评审 AI 产出的 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考