企业官网建设流程全解析

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文件夹拷进 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 的容器策略是从轻到重排好序，优先用最轻的那一档：

1. 只用间距（靠"邻近"分组）
2. 一条分割线
3. 一圈淡淡的描边
4. 换背景色的表面卡片

🔑最关键的一条：永远不要把最重要的元素装进框里，让它"悬浮"在背景上。每一档往下走都在增加视觉重量。

雷区五：阴影、模糊、渐变 ❌

这是 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 的工作流 + 下面这张表自查一遍，基本就能避开绝大多数雷区：

记住 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