Nothing Design Skill 前端实战：React + Tailwind 构建 Nothing 风格组件的最佳实践

Nothing Design Skill 前端实战React Tailwind 构建 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 打造的 Nothing 风格 UI 设计技能单色、排版驱动、工业质感。它能帮你把「瑞士排版 OLED 黑 点阵字体」这套难言明的设计规范变成 AI 可直接执行的标准输出 HTML/CSS、SwiftUI 或React Tailwind三种技术栈的组件代码。 快速安装把技能装进 Claude CodeNothing Design Skill 本质是一个「可复用的提示词工程包」。安装只需两步——克隆仓库然后把nothing-design文件夹复制到 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-design或直接说「Nothing 风格」即可触发。整个设计体系的灵魂文件是 nothing-design/SKILL.md里面定义了设计哲学、工艺规则与完整工作流。 核心原则三层视觉层级用 React Tailwind 构建 Nothing 风格组件前先理解最核心的一条规则每个屏幕只有三层重要性Primary / Secondary / Tertiary。层级角色实现方式主层级用户第一眼看到的唯一重点Doto 点阵字体48–96px 呼吸空间次层级支撑性上下文Space Grotesk 正文紧跟主层级第三层元数据、导航Space Mono 全大写小标签贴边放置检验方法很简单眯眼看屏幕还能分清主次吗如果有两件事在「抢戏」其中一个必须缩小、变淡或挪走。常见错误把所有元素都做成「次层级」。均等的字号 均等的间距 视觉扁平化。要大胆——让主层级大到夸张第三层小到几乎消失对比本身就是层级。 Tailwind 最佳实践用 CSS 变量映射设计 TokensNothing 风格的第一特征是「精确的灰阶」。官方在 nothing-design/references/tokens.md 中定义了完整的暗色/亮色 Token 系统。推荐做法先在:root声明 CSS 变量再通过 Tailwind 的theme.extend.colors映射让bg-[--surface]这类写法全局生效。:root { --black: #000000; --surface: #111111; --border: #222222; --text-disabled: #666666; --text-secondary: #999999; --text-primary: #E8E8E8; --text-display: #FFFFFF; --accent: #D71921; /* 每屏最多一次仅作中断 */ }几个关键 Token 约束来自 nothing-design/references/platform-mapping.md 的 Web 映射规范字号用 rem间距用 px--space-xs(4px) 到--space-4xl(96px)8px 基准间距即语义4–8px 表示「属于一起」16px 表示「同组不同项」32–48px 表示「新分组」64–96px 表示「全新上下文」需要分割线时多半是间距出了问题——优先加大间距对比而不是画线⚙️ React 组件实战三个高频模式组件级规范集中在 nothing-design/references/components.md以下三个模式在 React Tailwind 中最常用。1. 按钮Space Mono 全大写button classNameh-11 rounded-full bg-white px-6 font-mono text-[13px] uppercase tracking-wider text-black Save /buttonPrimary 按钮反色胶囊999px 圆角、12–24px 内边距、最小 44px 触控高度Ghost 按钮则无底色无边框仅用--text-secondary灰阶区分。2. 分段进度条标志性数据可视化这是 Nothing 风格的「签名元素」由离散矩形块 2px 间隙组成的机械仪表感进度条端部无圆角填充用状态色、空段用--border。用 React 生成时只需循环渲染w-3 h-2 bg-none的方块数组即可。3. 状态行与标签全大写仪表风数据行左标签右数值标签固定 Space Mono 全大写 灰阶数值用状态色成功#4A9E5C、警告#D4A843、超限红颜色只染数值本身不染标签和行背景。 暗色模式一等公民不是「反色」Nothing 的暗色模式是 OLED 纯黑#000000背景 发白数据像暗房里的仪表盘亮色模式是「技术手册纸感」#F5F5F5米白 黑墨卡片用#FFFFFF做出无阴影的微妙抬升。两套模式平等重要不存在默认值——动手前先问用户从哪种模式开始。在 React 中用class切换 prefers-color-scheme双保险Token 差异全部收敛在 CSS 变量层组件代码零改动。✅ 反模式清单这些一律别做Nothing 风格的力量来自克制。写组件时对照 nothing-design/SKILL.md 第三节的禁令快速自检❌ 无渐变、无阴影、无模糊——扁平表面 边框分隔❌ 无骨架屏改用[LOADING...]文本或分段 spinner❌ 无 Toast 弹窗改用行内状态文本[SAVED]、[ERROR: ...]❌ 无斑马纹表格图标仅 1.5px 单线描边无填充❌ 无弹性回弹动画只允许 150–250ms 的微妙 ease-out 上手建议先在 tokens.md 的字体表中声明要加载的 Google FontsDoto / Space Grotesk / Space Mono永远不要假设字体已存在每个屏幕的字体预算最多 2 个字体家族、3 个字号、2 个字重每屏允许恰好一处「破格」——一个超大数字、一个红色圆点、一片巨大留白。这一处破格就是设计本身把需求描述喂给 Claude Code 时明确说「Nothing style, dark mode, React Tailwind」技能会自动按工艺规则生成组件从「每次都要口头解释一遍设计规则」到「一条命令产出符合规范的 UI」Nothing Design Skill 把资深工业风产品设计师的直觉压缩成了可执行的 Token 表与组件清单。对前端同学来说它同时也是一份免费的单色 UI 规范教材——即使不用 AI光读这三份 references 就能把界面质感拉高一个档次。【免费下载链接】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），仅供参考