Nothing Design Skill 反模式避坑指南这些 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-skill在 Claude Code 里做界面最容易翻车的往往不是画不出东西而是用错了设计语言。Nothing Design Skill 把 Nothing 那套单色、排版驱动、工业感的视觉体系打包成一个可复用的 Claude Code 技能你只需说一句 Nothing style它就能生成带三层视觉层级、分段进度条、仪表级控件的 HTML/CSS、SwiftUI 或 React/Tailwind 界面。但再强的工具也会踩坑。本文整理出这套设计里最容易被 AI 和新手误用的反模式anti-patterns帮你避开那些看起来没毛病、实际很糟的 UI 设计雷区 ️。一句话认识它是什么怎么装一句话它是给 Claude Code 装上的Nothing 设计大脑。整套设计规则拆成了四个文件各司其职文件负责什么nothing-design/SKILL.md设计哲学、构图规则、反模式清单nothing-design/references/tokens.md颜色、字体、间距、动效令牌nothing-design/references/components.md按钮、卡片、列表、表格、弹层等组件规范nothing-design/references/platform-mapping.mdCSS / SwiftUI / React 三端输出映射安装只需把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/装好之后真正的考验才开始——下面这些雷区AI 默认就会往里踩。雷区一视觉层级全员平权 ⚠️Nothing 的铁律是一屏只有三层重要度主一眼看到的那个数/标题、次辅助说明、辅元数据。而最常见的错误是——把一切都做成次级。元素大小一样、间距一样 视觉上的平板一块。正解要敢做对比。主级大到离谱辅级小到几乎看不见对比本身就是层级。自检方法眯起眼看屏幕还能不能一眼分清主次如果两样东西在打架就让其中一个缩小、变灰或挪走。详见 nothing-design/SKILL.md。雷区二字体通货膨胀 新手和 AI 最容易犯的错一个页面塞进 5 种字号、4 种字重、3 套字体。Nothing 把它当成预算来管——每加一个字号都要付出视觉一致性的代价。每屏最多2 套字体Space Grotesk Space Mono、3 个字号、2 个字重。正解口诀当你想再加一个字号时八成是间距问题——用拉开距离或换灰阶去区分而不是加字号。完整字体令牌表见 nothing-design/references/tokens.md。雷区三靠分割线硬撑空间感Nothing 认为间距是表达关系的第一工具紧4–8px 属于一组中16px 同组不同项宽32–48px 新分组巨大64–96px 新语境。判断标准如果你需要画一条分割线多半说明间距用错了。分割线是间距对比不足的并发症只有在结构完全相同的数据密集列表里才允许出现。详见 nothing-design/SKILL.md。雷区四容器层层套娃 想要分组时AI 喜欢直接套一张带背景色、带阴影的卡片。Nothing 的容器策略是从轻到重排好序优先用最轻的那一档只用间距靠邻近分组一条分割线一圈淡淡的描边换背景色的表面卡片最关键的一条永远不要把最重要的元素装进框里让它悬浮在背景上。每一档往下走都在增加视觉重量。雷区五阴影、模糊、渐变 ❌这是 Nothing 与主流圆角卡片风最大的分界线。核心反模式清单直接写死在 SKILL.md❌不要渐变UI 容器里❌不要阴影、不要模糊——用平面 描边来分层❌圆角失控卡片圆角 16px 就过按钮要么全圆999px 胶囊要么技术感4–8px正解分层靠背景明暗差 描边而不是投影。深色模式下这是黑暗房间里发光的仪表板浅色模式下是印在米白纸上、黑墨线的手册完整配色见 tokens.md。雷区六骨架屏 Toast 弹窗 两个现代 UI 标配在 Nothing 里都是反模式❌不要骨架屏用[LOADING...]方括号文字或分段式 spinner❌不要 Toast 弹框用行内状态文字如[SAVED]、[ERROR: ...]放在触发点旁边底层逻辑Nothing 追求机械诚实——控件就该像控件提示就该出现在它发生的地方。空状态同理不要哭脸插画、不要萌宠吉祥物、不要一大段空状态文案。完整状态模式见 nothing-design/references/components.md。雷区七图标、斑马纹与可爱化 一条规则串起几个雷区❌不要实心图标、多彩图标、emoji 当 UI 用——只允许单线描边1.5px 线宽、24×24、圆角端点❌表格不要斑马纹隔行变色用分割线分层数据可视化的正确顺序先用不透明度100% / 60% / 30%或图案实心 / 条纹 / 点阵去区分类别颜色是最后手段且要标在数值本身上而不是标签或行背景上。详见 tokens.md。雷区八弹性动效与惊喜泛滥 Nothing 的动效哲学是percussive, not fluid——想象 UI 会响是咔哒的点击声不是咻的滑移声。❌ 不要视差滚动、不要劫持滚动、不要 gratuitous 动画❌不要 spring / bounce弹性/回弹缓动——只用微妙的 ease-out⚠️ 每个页面只允许一处惊喜一个超大数字、一个圆形小部件、一抹红、一处巨大留白。少于一处 死板网格多于一处 视觉混乱。动效令牌150–250ms 微交互、300–400ms 过渡缓动曲线固定见 tokens.md。自检清单动手前过一遍 ✅在让 Claude 生成代码前用 SKILL.md 的工作流 下面这张表自查一遍基本就能避开绝大多数雷区#问自己一句达标标准1眯眼还能分清主次吗一屏严格三层2字号字重超预算了吗≤3 字号、≤2 字重3有没有用分割线偷懒间距优先4主元素被框住了吗让它悬浮5用了阴影/渐变/模糊吗平面 描边6有骨架屏或 Toast 吗行内状态文字7图标实心/多彩/emoji 了吗单线描边8动效弹跳、圆角超标了吗微妙 ease-out、圆角 ≤16px记住 Nothing 的气质用留白体现自信、用微决策堆出手感、把数据本身当美、每屏留一个克制的惊喜 。把这套反模式内化之后你生成的界面才会真正像 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），仅供参考