charles-unslop

Unslop

改编自 Damir Sokolovsky（@heydamir）的 unslop，采用 CC BY 4.0 许可，并融合了 Emil Kowalski 的 unslop-design 技能，以及 Charles Liu 的「Removing AI Slop」系列中的反馈。改动：重新排列各项检查的顺序，优先做减法；重写了关于背景、品牌图标和材质的规则。复制时请保留此致谢。

没人能指出究竟哪个元素让屏幕看起来像是生成的。模型会在每个决策上同时选出最常见的选项，五十个平庸的选择叠加起来，就会留下水印。所以只修复一个元素毫无作用：按顺序检查整个屏幕。

去掉这些痕迹只完成了一半。干净得像是属于任何产品的屏幕，就是下一个模板。平庸设计把丰富感铺在界面外壳上；精良设计让界面外壳保持克制，把丰富感留给一个关键时刻。

使用方法

1. 渲染。 按屏幕的实际尺寸截屏，评估截图，而不是代码。如果屏幕会以较小尺寸显示（例如手机、视频或缩略图），也要按该尺寸评估。
2. 审核。 按照 references/signs.md 检查。逐项列出所有迹象，每项单独一行，并标明所在位置。
3. 根据审核结果选择范围：
   • 颜色、字体、图标和文案都存在迹象 → 执行以下全部步骤。
   • 已设计好的屏幕只有少数迹象 → 只修复这些问题。保留原有配色、字体、布局和视觉风格。更大的想法写进报告。
   • 没有迹象 → 如实说明，最多提出三项带具体数值的优化建议，然后停止。绝不要为了标新立异而改动出色的屏幕。
4. 写明设计方向（见下文）。展示审核结果和设计方向，并等待答复，因为方向错了就得全部重做。只有在对方明确要求直接执行时才跳过等待。
5. 做减法。
6. **按顺序执行各项检查，**每次都要检查完整个屏幕。
7. 进行最终审核。 未通过的内容退回对应的检查步骤。

保留产品本身。功能、真实内容和章节顺序都要保留，产品名称也不变。绝不要虚构功能，或编造关于真实产品的说法和事实；换一种方式呈现产品已有的功能是设计，不是虚构功能。演示或模型中的占位内容可以替换为具体内容。像「Powered by AI」或「Follow us for deals」这样的填充文案不是功能，可以删掉。

方向

五条原则，源自产品的用途，而不是当下的潮流。

• **产品：**用一句话说明它的用途和目标用户。
• **特质：**用两三个具体的词描述，比如 沉静、精准、略带暖意。干净、现代、时髦、简约和高端都不能用，因为它们可以形容任何模板。
• **世界：**产品所属的地方或材质。潮汐表应用的世界靠近盐、海图和昏暗的光线；税务工具的世界则靠近带横线的账簿。这个世界决定中性色调和点缀色。不一定要把它画出来。
• **时刻：**屏幕呈现丰富感的一两个地方。参见第 8 轮：它可以是一种行为、真实内容、比例、字体或一个物件。
• **标志性细节：**一个只有这个产品才有、并且会始终如一地使用的小细节。

然后写下概念：用一句话概括，之后的每个选择都可以据此检验。例如：“每张发票都像一个人写给另一个人的信。”保留之前先通过两项检验：

• **它在下一个状态下依然成立吗？**依次设想空白、使用中和完成状态。如果一个概念只适用于初始画面，那它是海报，不是概念。
• **你写它是为了证明某个早就想做的设计合理吗？**如果是，那它就无法筛选任何东西。它至少必须排除一件你原本会做的事。

**如果屏幕没有说明产品是什么，**就询问。如果无法询问，或对方要求直接开始，就这样处理：

• 模拟稿或演示：假设一个具体、合理的产品，并据此写出完整的方向，标注 Product (assumed):，以便他人提出异议。不要把文案里偶然出现的一个词当作产品所属的世界，也不要默认做成 SaaS。假设一个具有特定世界的产品，因为这样才能为配色、字体和点缀色提供依据。它必须符合你保留的功能：有 GitHub 按钮，就排除面包店。这个世界不必成为屏幕上的物件。没有理由地使用白色、黑色和系统字体，同样是套用模板。
• 你不了解的真实产品：保持中立，不做任何断言，并列出你需要了解的信息。

保留真实的品牌标志或颜色。紫到蓝的渐变、闪光瓷砖或光泽球体都不能算品牌元素，除非用户这么说。

先做减法

Agent 会不断添加。重复标题内容的说明文字、每个标签上的图标、间距已经做到的分隔效果、有阴影的表面上再加边框、第二个 CTA、输入框下方的辅助说明。每一项单独看都有道理，放在一起却会互相争抢注意力。

逐一检查每个图标、线条、徽章、说明文字、容器和词语，并问：**去掉它会有什么问题？**如果答案是“没有”，就删掉。“它能增添趣味”和“它能填补空间”正是模型添加它的理由，因此不算理由。检查两遍，因为删掉一些元素后，其他多余元素才会显现。方向中唯一的标志性细节可以保留，而且只能保留这一个。如果某个元素承载着用户需要的信息（比如密码规则或价格），就移动它、缩小它，或让它成为那个关键时刻；不要丢掉信息。

生成的屏幕最需要删减的部分：

• **分隔线。**删掉所有可以用间距替代的分隔线；相邻布局已经能分组，线条只会增加杂乱。列表、设置行和建议标签几乎从不需要分隔线。账簿或表格中能帮助视线沿行追踪内容的线条可以保留。
• **标题下的副标题。**除非它提供了标题无法表达的信息，否则就删掉。
• **嵌套结构。**容器里套容器，容器里又套卡片，这就是个明显的问题。如果地图、图片或图表就是内容，就让它铺满父级容器。删掉多余的外层容器，直到每个表面都有明确用途。
• **用两种机制做同一件事。**比如同时使用进度条和步骤计数器、Toast 和可见变化、图标和含义相同的标签。留下更好的那个。这不是删减功能：该完成的事情依然会完成。
• **后加的控件。**浮在输入框旁边的按钮应该放进输入框，作为其空白或聚焦状态的一部分。
• **关键时刻不需要的界面元素，**比如尚无内容可分享时出现的分享按钮。

调整步骤

顺序很重要：节奏会改变其他所有内容的阅读方式，而文案长度决定字号和布局。视觉元素和动效最后再处理，这样它们才能适配一个即使没有它们也能正常运作的屏幕。精确的起始值见 references/tokens.md。

1. 间距

• 所有元素都按 4px 网格排列。替换 mt-[13px] 这类特例值。
• 相同的元素使用相同的尺寸：每组采用统一的行高、间距和卡片内边距。
• 组内间距小于组间间距，这样无需分隔线也能体现分组。
• 图标位于同一列，标签从同一条线开始，数字右对齐。所有元素都严格对齐，不偏离基准线。

2. 颜色

• 使用一组带有环境色调的中性色阶，并设置三种文本角色。五种薰衣草色意味着没人做过选择。
• 奶油色纸张搭配柔和的大地色调，是后 AI 时代的默认风格，就像靛蓝曾经那样。只有环境确有需要时才使用，绝不能仅仅因为它看起来有品味。只要符合产品个性，高饱和度颜色、纯白和近黑色都可以使用。
• 在界面框架中使用一种强调色，只占屏幕的百分之几。未经选择的紫色最容易暴露问题，因此要从环境中提取色相。
• 人们会长时间盯着看的工作界面（应用、仪表盘）应保持中性表面；颜色留给内容。
• 删除渐变文字、彩色光晕和彩色阴影、霓虹边框，以及内容背后的色块。
• 文本对比度始终保持 4.5:1，包括叠加在背景上的文本。

3. 图标

• 将表情符号换成来自同一套图标集的线性图标，尺寸和笔画粗细一致，并使用文本角色的颜色。表情符号无法融入调色板，而且看起来像占位符。
• 例外：第三方标志保留原有颜色。 Google 的多色标志和 Facebook 的蓝色标志，无需阅读便能识别（识别胜于回忆）。灰色标志会让人不得不阅读。
• ✨ 不代表 AI。如果 AI 很重要，文案就应说明它的作用。
• 图标在 20–24 px 时，静态状态必须能独立表达含义。如果必须依靠动画才能看懂，就重新绘制。

4. 文案

• 竞争对手能原封不动地套用这个标题吗？那就用这个产品自己的名词重写。
• 标签和按钮不要使用感叹号、问候式标题、夸张用词或末尾句号。
• 变化要说明比较对象：+12% vs last month。
• 将每一行放在屏幕上已有内容旁边阅读。如果附近重复出现了某个数字或词语，就删掉。刻意显得俏皮的短句读起来像 AI；直接说清楚就好。
• 模拟内容要具体。 绝不要使用 Maya、Sarah、Alex、Acme 或 John Doe；这些名字会让屏幕显得是生成的。改用听起来真实的人物和细节：“第一批烤焦了，所以给你寄的是第二批”胜过“感谢购买”。
• 删除虚假的证明。如果某个说法无法核实，就先询问，然后将其说具体或删掉。真实数字就是最有力的文案。

5. 字体

• 根据产品个性选择字体。一种界面字体，最多搭配一种辅助字体，只用于一个有辨识度的设计决策。展示字体只出现一次。
• 字重使用 400–500，600 仅用于少数强调。层级通过字号和颜色体现，绝不使用 800–900。
• 使用句首字母大写。宽字距的大写文本改为句首字母大写，除非所借鉴的真实物品本身就是大写形式，例如印章标签或登机牌。
• 使用 tabular-nums，并在整个屏幕上统一数字格式。仅在展示字号下使用负字距。

6. 布局

• 所有内容都纵向堆叠并居中、三个等大的卡片、便当盒式网格，以及图片面板并排放置表单栏，这些都是默认布局。要摆脱最后一种布局，就让表单融入内容，而不是放在内容旁边。按内容确定尺寸：给重要内容更多空间，让内容打破对称。
• 也要检查最大视口。空白带指既没有内容、也没有用途的空白区域。用场景填充它（表面、真实内容），或把表单融入其中；不要只放大文字。
• 一个主要操作，次要操作最多一个。
• 应用保持真实的应用比例。首屏英雄区域应整体构图，不留空白带。
• 最小观看尺寸也是一种布局。对于视频或缩略图，并且仅限此时，保留 24–32 px 的留白，除非设计本就需要出血，否则任何内容都不要贴到画面边缘；该尺寸下，人们需要看到的每个词都应不小于 16 px。

7. 细节

• 内侧圆角 = 外侧圆角 − 内边距，且不得小于 4。不是所有东西都要做成药丸形，rounded-2xl 也不是万能答案。
• 控件形状应由其个性决定，而不是由令牌表决定。精确、偏技术风格：2–6 px、细边框输入框。柔和、亲和的风格：更大的圆角或完整药丸形。编辑式风格：下划线输入框、文字按钮。用一句话说明形状如何体现个性；“因为这是标准做法”不足以说明 12 px 圆角的合理性。
• 每个表面只用一种层次提示。边框 + 阴影 + 环形边框 + 渐变，是一种拿不定主意的表现。
• 除非对象确实带有穿孔，否则不要使用点线或点状分隔线。它们最容易让图表或表单看起来像自动生成的。
• 统计卡片就是数字：不要用迷你折线图或图标填充空间。每个图表只用一个主图表元素、一个强调色。
• 悬停和焦点状态都要有，并保持在配色范围内。

8. 关键时刻

Agent 会直接套用两种模板之一：产品世界中的某个事物的扁平插画，或者普通表单上方的巨型文字。两者静止时看起来都像经过设计，却都毫无意义。不要选择第一个能渲染出来的方案。分别从以下每一类中构思一个点子，每个用一句话描述：

1. **行为：**只有这款产品才会呈现的界面行为。静止时看起来或许很朴素。
2. **真实内容：**精心绘制产品的数据，或产品的实际输出。
3. **比例：**重要内容占据屏幕的 70%，其他内容都退居其次。
4. **字体：**一种字号对比、一个巨大的数字，或一行铺满整个屏幕的文案。它必须承载意义：数字就是答案，或者句子会随状态变化而改变。一个巨大的“登录”不行，因为这个词没有表达任何东西。
5. **一种表面或物件，**参考下方的树形图。

留下同时通过这两项测试的点子：

• **这是个点子吗？**去掉样式，向别人描述它。“巨大的衬线标题”不算。“发票总额就是整个页面，而每一条已付款的明细都会从页面上划掉”才算。
• **默认状态本身够好吗？**大多数人只会看到第一个状态，所以如果一个点子只有在输入之后才出现，那么它的默认状态就必须已经经过精心编排，并且已经属于这款产品的世界。小控件上方放着大字、屏幕其余部分一片空白，不管下一个状态多巧妙，都不行。

接着也构建它的下一个状态。只画出概念还不足以验证它。

设计令牌中的展示字号是默认值，由字体主导的关键时刻可以覆盖这些默认值。

How long do people stay on this screen?
├── Minutes or daily (app, dashboard, settings, chat in use)
│   → neutral surface. The moment is content.
└── Seconds, as a doorway (login, empty state, confirmation, hero)
    → a field or object is allowed if it passes all five:
      1. Reason: someone who hasn't seen your concept can guess why it's here.
      2. Palette of at most three hues, taken from the world.
      3. Real structure: light, depth, focus. A two-stop wash is not a field.
      4. The UI on top stays quiet and legible.
      5. Stock check: at the viewing size, could this come from an illustration pack or a template gallery? Layered flat hills, gradient suns and a dashed trail fail. If it does and two attempts don't fix it, go back to 1–4.

渐变作为装饰时是粗制滥造，作为材质时则是匠心之作。关键在于它是否有充分的理由、经过挑选的配色，以及上方是否叠加了简洁的 UI。

**纹理是可选的。**最多添加一层，而且只能用于解决明确的问题，例如渐变出现色带：

纹理	适用场景	不适用场景
颗粒或点描	渐变出现色带或显得数码感太强；营造温暖、真实的质感	把它当作潮流纹理层，均匀地铺在纯色上
半调网点	柔和的摄影色彩上方，用于增加结构感	网点与文字争抢注意力
等高线	具有地形、路线或数据的世界	亮度或密度过高，读起来像图案
同心圆	有一个中心物件向外辐射	没有中心物件
压花玻璃	后方有高对比度的内容	没有可供折射的内容：最后只会变成条纹印花
像素或反应扩散	编辑风格、复古风格或高对比度品牌	用在朴素的现代界面上，会显得像滤镜

**材质必须有存在的理由。**磨砂玻璃后方必须有有意义的内容。折射需要一个可供弯曲的主体，文字穿过折射区域时也应保持完整。抽象场景中的液态金属、铬和光泽 3D 都是 AI 的默认套路；只有当物件在这款产品中有意义时才可以使用。能发挥作用的标志胜过只会发光的标志：备份运行时光束会扫过的灯塔标记，就比一个铬制球体更好。

**尊重物件。**如果借用真实物件，它就必须表现得像真实物件：纸张不会褪色，锁的锁销会朝正确的方向移动，而且你不会把回复写在收到的信上。

角色和插画必须看起来像是专为这个页面绘制的：颜色取自页面的配色，线条使用页面的墨色，线条粗细统一，不要有纯黑色的大块区域，也不要有手套状的手。如果看起来像贴纸或表情符号，就重新绘制或删除。

如何选择并生成场景和物件，请参阅 references/visuals.md；代码效果处理请参阅 references/effects.md。

9. 动效

• 默认删除动效：对非实时内容添加循环脉冲、标题闪烁、呼吸光晕、视差、transition-all、卡片上的 hover:scale，以及每个区块滚动时淡入。
• 保留能说明问题的动效。调整剩余动效是润色环节要做的事。

最终审核

1. 换成另一个产品的名称。如果画面仍然合适，就进一步强化文案、视觉效果和标志性设计。（假定产品：使用其名称。真正中性的画面：跳过此项。）
2. 这里有什么会让设计师怀疑这是模型做的？修好后再问一次。如果给了参考图，就把你的设计和其中一张按相同尺寸并排放置，指出差距并修好。
3. 说出一个竞争对手无法照搬的选择。答不上来就说明这一步还没完成。（真正中性的画面：说出源自画面用途、而非样式的选择。）
4. 再删掉一项内容。如果有东西因此出问题，就恢复它并停止。
5. 对照审核清单，报告设计方向、每轮有哪些变化，以及你写过的任何提示词。