Nothing Design Skill 完全指南让 Claude Code 一键生成 Nothing 风格的单色 UI【免费下载链接】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 styleAI 就能一键生成单色、排版驱动、工业风的 UI 界面——纯黑 OLED 背景、点阵字体、分段进度条全部按 Nothing 官方视觉语言还原。本指南带你快速安装上手。↑ Claude Code 调用该技能后生成的 Nothing 风格仪表盘点阵时钟、分段进度条与仪表风格小组件什么是 Nothing Design Skill为什么需要它如果你用 Claude Code 写过前端多半遇到过这样的烦恼反复描述我要黑白灰、工业感、像 Nothing 手机那样的 UIAI 生成的界面要么花哨、要么平庸没有统一的设计语言字体、间距、颜色 token 每次都要手动纠正Nothing Design Skill 把这些规则打包成了一个可复用的技能。它内置了一位训练有素的高级设计师——精通瑞士排版、Braun/Teenage Engineering 工业设计风格遵循六大核心原则设计原则说明 单色即画布颜色是事件而非默认值红色 #D71921 只用于紧急状态✒️ 排版扛大梁用字号、字重、间距建立层级而不是颜色和图标 三层视觉层级每个屏幕严格只有Primary / Secondary / Tertiary 三层 明暗双模式深色是 OLED 黑浅色是暖白纸质两者同样严谨⚙️ 机械诚实开关就是物理拨杆仪表就是仪表盘控件看起来像控件 一个惊喜点每屏恰好一处打破常规点阵标题、红点、超大数字3 步快速安装最快配置方法整个安装过程不超过 30 秒第 1 步克隆仓库git clone https://gitcode.com/gh_mirrors/no/nothing-design-skill第 2 步复制技能文件夹到 Claude Code 技能目录cp -r nothing-design-skill/nothing-design ~/.claude/skills/第 3 步重启 Claude Code下次启动时技能自动可用无需任何额外配置。安装细节见 README.md。 提示技能不会自动触发——只有当你明确说出 Nothing style、/nothing-design 时才启用不会干扰普通 UI 开发任务触发规则见 SKILL.md 的 frontmatter 配置。如何使用一句话生成单色 UI安装完成后直接在 Claude Code 对话中说/nothing-design 帮我做一个天气存储的仪表盘或自然语言用Nothing style做一个系统状态面板。技能会按固定的 7 步工作流执行见 SKILL.md声明字体—— 告诉你需要加载哪些 Google Fonts询问模式—— 深色还是浅色没有默认值勾勒层级—— 先定三层视觉结构再写代码应用工艺规则—— 间距即语义、灰阶即层级核对 token—— 精确到每个 hex 值构建组件—— 按钮、卡片、分段进度条适配平台—— 输出你需要的技术栈输出格式三选一HTML/CSS、SwiftUI、React/Tailwind平台映射规则在 platform-mapping.md 中定义。技能内部拆解4 个文件各管什么仓库结构非常精简核心都在nothing-design/目录下文件职责SKILL.md设计哲学、工艺规则、反模式清单、工作流references/tokens.md颜色、字体、间距、动效 token深色 浅色references/components.md按钮、卡片、列表、表格、分段进度条等组件规范references/platform-mapping.mdCSS / SwiftUI / React 三种输出映射几个值得一看的细节字体三件套Doto点阵显示字体Space Grotesk正文Space Mono数据标签与 Nothing 实际使用的字体同出一家字体厂设计 DNA 一致tokens.md分段进度条标志性数据可视化——离散矩形块、机械仪表感条形 比例数字 精度components.md反模式清单明确禁止渐变、阴影、骨架屏、toast 弹窗、斑马纹表格——保证输出风格纯粹SKILL.md常见问题 FAQ问这个技能适合什么项目任何追求极简、单色、科技感的界面仪表盘、设置页、天气 App、音乐播放器、开发者工具 UI。上方预览图就是典型效果。问会影响我原来的 Claude Code 使用吗不会。技能只在明确提及 Nothing 风格时触发且项目为 MIT 协议LICENSE可自由使用。问深色和浅色模式怎么选技能会主动询问你。深色像暗室里的仪表盘浅色像印刷的技术手册——两种都是完整的一等公民不是从属关系。写在最后Nothing Design Skill 证明了 AI 生成 UI 的下一个关键不是更花哨而是更克制。把它装进 Claude Code从此告别反复描述设计规则的日子——一句话得到一个有灵魂的单色工业风界面。【免费下载链接】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），仅供参考