anti-ui-slop

反 UI 套路

目标

AI 生成的界面会因趋同而暴露出生成痕迹：常见字体、配色、卡片结构、文案节奏、间距和动效不断累积，最终让页面看起来像属于任何产品。单个流行选择只能提供微弱证据；反复出现、脱离上下文的选择则是强烈证据。

成品界面应体现其产品、受众、内容和约束。只有替换方案能强化这种独特性，去除生成痕迹才算有进展。

请将两类发现分开处理：

• 质量问题会降低无障碍性、可读性、稳健性或性能。评审中应针对确认的问题提出修正建议；获准编辑的任务中则应予以修复。
• 套路线索体现趋同。它们是否会成为可执行的发现，取决于上下文、重复情况、整体构成和产品契合度。

执行约定

• 按照用户授予的权限行事。评审和审计请求只输出发现；诊断请求只解释原因；构建、修复、优化和润色请求则授权编辑。
• 保留既有设计系统、品牌语言、组件规范、响应式行为、语义和交互行为。
• 先阅读变更过的 UI 文件，再阅读共享设计令牌、布局基础组件、排版设置和有代表性的页面。现有设计意图就是方向依据。
• 排除生成产物、依赖代码、锁文件、快照和有意展示反模式的示例。对于 Storybook、设计系统画廊和文档示例，必须结合页面上下文确认后，才能将其视为重复构成。
• 使用现有字体、软件包、图标和资源。未经用户授权，不得添加依赖、远程字体、生成图像或进行大范围设计系统变更。
• 保留产品事实。删除缺乏依据的指标和装饰性说法；绝不编造证据。
• 将修复限定在必要范围内。局部线索采用局部修复；反复出现的系统级线索则修复设计令牌或基础组件。

工作流程

1. 确定界面范围。 找出控制目标界面的路由、组件、样式和共享基础组件。在现有项目中，先检查近期或已变更的文件。
2. 明确设计方向。 编辑前用一句话说明： [产品/受众] 应给人 [特质] 的感觉；[内容] 优先；[约束] 决定 UI 的形态。
3. 分三轮扫描。 先检查质量问题，再整理套路线索，最后检查整页构成层面的重复。
4. 对证据分类。 标注层级、置信度和上下文，并记录有充分依据的例外。
5. 修复影响最大的原因。 优先修正共享设计令牌和重复结构，再处理孤立选择器。让内容层级决定布局、强调方式和节奏。
6. 验证。 检查差异，运行现有检查；如果有浏览器或预览，则检查渲染结果。
7. 报告结果。 评审请求应先报告发现；编辑请求应先报告已实施的更改，并列出仍待检查的渲染项目。

证据模型

层级	含义	报告规则
Source	标记、样式、令牌或文案提供直接证据	引用选择器、类、组件或文本及其源代码行
Render	计算后的布局、堆叠顺序、视口大小或合成颜色决定结果	在渲染后的页面中确认；否则标记为 Candidate - needs rendered verification
Judgment	产品情境和页面构成决定某种模式是否合理	引用至少两项具体观察，并说明与产品不匹配之处
Opt-in	来自参考目录、与提供方相关的弱信号	除非用户要求进行激进或针对特定提供方的全面检查，否则保持沉默

使用以下置信度级别：

• **Confirmed：**直接的质量缺陷、渲染缺陷，或已验证组件角色的明确源代码模式。
• **Probable：**一种主要的劣质设计特征，或同一区域内至少两个独立的劣质设计信号。
• **Candidate：**缺少渲染证据、变量尚未解析、组件上下文不完整，或全局信号较弱。
• **Exempted：**该模式传达了实际含义、遵循既有品牌风格，或服务于功能性交互。

严重程度和置信度回答的是不同问题。严重程度描述对用户的影响；置信度描述证据的强弱。

• **Critical：**阻碍访问或使用、发布损坏的资源、隐藏必要内容，或造成重大的无障碍缺陷。
• **High：**影响主要流程，或通过重复出现的劣质设计特征集主导页面。
• **Medium：**影响局部组件、次要流程，或单一的劣质设计特征。将未经验证的 Candidate 单独列出。
• **Low：**对用户影响有限的整理改进。

准确性规则：

• 质量问题可以单独成立。劣质设计问题则需要主要特征或局部聚集。
• 弱全局信号 T8、T9、C1 和 C5 永远不能单独成立。字体和颜色只有结合布局、排版层级、文案和装饰，才能成为证据。
• 相关症状只计一次。带图标卡片的相同特征网格属于一个构成集群，并引用两条规则 ID 作为支持证据。
• 追踪变量、组件变体、条件类和共享令牌，直到其实际生效位置。
• 当组件构成改变了源代码顺序时，使用渲染后的 DOM 确认标题顺序。
• 应用文案或重复规则前，先追踪本地化字符串和映射组件，确认其渲染后的角色。
• 将刻意展示糟糕 UI 的演示页面视为样本。保留其展示的缺陷。
• 将阈值视为筛查值。组件角色、实际尺寸、语言、密度和视口共同决定最终判断。

替换原则

• 结构应服从内容。 可比项目适合用表格或对齐的列表呈现。序列适合用步骤呈现。 叙述性内容适合采用编辑式行文。交互式选择适合用边界清晰的控件呈现。
• 层级应遵循体系。 明确区分展示文本、标题、正文、标签和数据的角色。 单一字体系列可通过字号、字重、字宽、光学尺寸和间距来构建清晰层级。第二种字体则应有明确用途。
• 颜色应各司其职。 为品牌、操作、状态、强调和表面指定颜色。反复使用装饰性渐变和光晕会削弱颜色的作用。
• 间距应传达关系。 相关项目彼此靠近。不同区块之间应留出更大的间隔。 即使重复使用的间距令牌语义角色不同，只要视觉上有明显区别，就仍然有用。
• 动效应传达状态、连续性或因果关系。 默认表面应保持静止。一个有意义的过渡胜过许多装饰效果。
• 装饰应承载意义。 领域元素、真实产品 UI、数据、摄影、图表和品牌图案都能体现特色。不承载信息的通用图标和色块则显得多余。
• 不对称应服从优先级。 为更重要的内容留出更多空间。避免仅为营造设计感而随意改变卡片尺寸。

46 条规则目录

该目录保留了参考内容的分类：41 条确定性候选规则、5 条判断规则，以及 4 条特定于提供商的 Opt-in 修饰规则。

视觉细节

ID	类型	层级	候选规则与确认方式	修正方法
V1 圆角元素上的边框强调	Slop	Source	同一个通用卡片同时具有彩色边框 >= 2px 和圆角半径 >= 12px。描边控件和成熟的图形风格可作为例外	选择一种边缘样式：中性色 1px 边框、更小的圆角，或不设边框
V2 到处使用玻璃拟态	Slop	Judgment	半透明卡片反复出现，并通过 backdrop-filter: blur 装饰静态内容。功能性浮层可以保留模糊效果	使用不透明表面，并通过对比度、间距和层次表达层级
V3 侧边标签强调边框	Slop	Source	卡片的一侧有 >= 3px 的彩色边框。确认它是否表达了状态或类别	有意义时，使用状态圆点、图标、标签或克制的色调；移除空洞的装饰
V4 细边框配宽阴影	Slop	Source + opt-in GPT	同一元素同时具有 1px 边框和 >= 20px 的阴影模糊半径	保留清晰边缘或柔和的悬浮层次，二选一
V5 重复渐变条纹	Slop	Source + opt-in GPT	repeating-linear-gradient 或 repeating-conic-gradient 用于装饰表面。进度指示器和图表可合理使用此图案	使用纯色表面或现有的品牌纹理
V6 极端圆角半径	Slop	Judgment	半径 >= 24px 会让小卡片、区块或输入框变成一团。胶囊、标签和大型异形面板属于基于角色的例外	按角色制定圆角半径规范；常见卡片的圆角通常为 8-16px
V7 稚拙的手绘 SVG	Slop	Judgment	复杂的内联 SVG 场景或吉祥物采用了粗糙的插画几何形状。图标、徽标、图表和数据可视化不在此列	使用真实素材，将插画简化为有明确用途的图表，或移除插画

字体排版

ID	类型	层级	候选特征与确认条件	修正方式
T1 扁平的字体层级	风格问题	源码	相邻角色的字号差异不到约 1.25 倍，且字重、字体、间距或颜色也缺乏对比	定义更少、综合对比更鲜明的角色；将比例用作筛查启发式
T2 图标卡片叠放在标题上方	风格问题	源码	重复出现的功能卡片在标题正上方放置圆角方形图标卡片	让图标与标题对齐，将图标融入内容流，或移除容器
T3 斜体衬线展示标题	风格问题	源码	通用创业公司主视觉中，以 >= 32px 的衬线斜体作为主标题。编辑类和时尚类场景可例外	使用正体，或采用源自品牌风格体系的展示样式
T4 主视觉眉题或胶囊标签	风格问题	源码	主视觉标题正上方紧邻小号字距加宽的大写文字或胶囊标签。面包屑、状态和版本元数据属于功能性例外	将信息融入标题、导航上下文或正文
T5 重复的分区眉题	风格问题	源码	三个或更多分区重复使用相同的大写字距加宽迷你标签	通过标题层级、内容元素和各分区特有的结构实现导航
T6 过大的主视觉标题	风格问题	源码	大约八个或更多单词的标题使用 >= 48px 或 text-5xl 样式	缩短主张，或调小响应式字号，让辅助内容保持可见
T7 字距过度压缩	风格问题	源码	展示文字的字距小于 -0.05em；正文使用负字距	恢复字符形态；使用适度的光学收紧，字距控制在 0 到 -0.02em 左右
T8 过度使用的字体	风格问题	源码，较弱	Inter、Geist、Space Grotesk 或 Instrument Serif 被用作默认视觉标识。品牌和系统限制属于合理情况	仅在存在其他趋同信号时报告；先用现有字体强化角色，再考虑引入新字体
T9 所有内容使用同一种字体	风格问题	源码，较弱	所有角色还都使用几乎相同的字重、宽度、间距和比例	在同一字体系列内建立对比，或增加第二种字体并定义其展示、正文或数据用途
T10 正文全大写	质量问题	源码	段落或约 20 个词以上的长文本使用大写	使用句式大小写；大写仅用于短标签

颜色与对比度

ID	类型	层级	候选特征与确认条件	修正方式
C1 AI 配色	风格问题	源码，较弱	在缺乏品牌依据时，紫色／紫罗兰渐变或深色背景上的青色占主导	仅作为一组信号报告；根据现有产品上下文确定操作、状态、表面和强调色
C2 带发光强调色的深色模式	风格问题	源码	深色表面反复使用彩色盒阴影或霓虹文字阴影。焦点环和有明确意义的状态光效除外	使用中性色调的层次效果和边界清晰的状态指示
C3 渐变文字	风格问题	源码	使用 background-clip: text 和透明填充装饰标题、指标或大量标签	使用纯色文字，通过层级体现强调
C4 彩色背景上的灰色文字	质量问题	源码／渲染	彩色表面上使用中性灰，导致对比度不足	使用与表面色相相关的浅色或深色色调，并验证对比度
C5 奶油色或米色惯性用法	风格问题	源码，较弱	在缺少配套调色板的情况下，将暖白色用作整页通用且看似雅致的表面色	仅作为一组信号报告；有意识地设定表面色、文字色、强调色和状态色

布局与空间

ID	类型	层级	候选项与确认条件	修正建议
L1 主视觉指标布局	设计反模式	判断	主视觉区域以醒目的大数字、极小的标签和辅助统计数据为中心，并配以通用的强调效果或未经证实的声明	以产品、产物或经核实的证据为主；仅保留有意义的指标
L2 千篇一律的卡片网格	设计反模式	判断	四个或更多同级项目重复使用相同尺寸的图标、标题和段落。可比的交互项目有时适合保持一致	根据内容选择结构：排名布局、表格、列表、手风琴，或真正统一的控件
L3 间距单调	设计反模式	源码	项目、组、组件和区块边界都使用相同的间距或内边距令牌，缺乏明显的节奏感	根据语义关系分配间距令牌，并营造清晰的分组对比
L4 嵌套卡片	设计反模式	源码	三层或更多嵌套层级重复使用边框、填充、圆角或阴影。不重复使用装饰样式的语义包装层不在此列	移除多余的表面样式；使用间距、标题、分隔线或一个共享容器进行分组
L5 编号区块标记	设计反模式	源码	使用 01 / 02 / 03 标签装饰互不相关的区块	仅在表示真实的顺序、时间线、排名或引用时保留编号
L6 行长过长	质量问题	渲染	正文每行超过约 80 个字符。代码、表格和有意设计的数据区域不在此列	将正文限制在约 60ch-75ch
L7 内容溢出容器	质量问题	渲染	文本或媒体溢出、被裁切，或导致意外的水平滚动	换行、限制尺寸、使用无障碍的截断提示，或提供有意设计的滚动区域
L8 定位子元素被溢出容器裁切	质量问题	渲染	提示框、菜单或弹出层被使用 overflow: hidden 或 clip 的祖先元素裁切	将图层移出裁切上下文、使用 portal，或在安全的情况下更改溢出设置

动效

ID	类型	层级	候选项与确认条件	修正建议
M1 弹跳或弹性缓动	设计反模式	源码	对话框、卡片和常规控件使用过冲曲线或反复的弹簧效果。富有趣味或模拟物理效果的交互可酌情使用	使用克制的缓出曲线并缩短移动距离
M2 布局属性动画	质量问题	源码	大量或重复的过渡动画会改变宽度、高度、内边距、外边距、顶部或左侧位置，导致重新排版	优先使用 transform 和 opacity；必要时改变高度，可使用有界展开模式
M3 图像悬停变换	设计反模式	源码 + 自选 Gemini	通用卡片反复在悬停时缩放或旋转图像。产品缩放控件属于功能性例外	保持图像静止，或使用克制的叠层、说明文字或边框反馈

文案

ID	类型	层级	候选项与确认条件	修正建议
P1 过度使用破折号	设计反模式	源码	一个正文块包含三个或更多 — 字符，或重复使用等效 HTML 实体。应结合语言特点判断	改用句号、逗号、冒号或括号重写
P2 营销流行语	设计反模式	源码	supercharge、streamline、empower、world-class、enterprise-grade、seamlessly 或 unlock 等笼统说法，没有明确的对象或结果	明确说明具体操作、对象、用户和结果
P3 警句式节奏	设计反模式	源码	多个区块重复使用 不是 X，而是 Y。 或 减少 X，增加 Y。 等句式	用直接的产品事实和自然的句式节奏替换
P4 戏剧化框架文案	设计反模式	源码 + 自选 GPT	营销文案将某个类别贬称为 theater，却没有解释实际问题。诸如 security theater 的成熟领域术语需要结合上下文	直接说明行为、局限或后果

图像

ID	类型	层级	候选问题及确认方式	修正
I1 图像损坏或为占位图	质量	源代码	渲染后的图像标记缺少或包含空的 src、#、已知占位服务或占位 API 路径。确认条件分支	使用真实资源、经授权生成的资源、备用方案，或移除该元素

总体质量

ID	类型	层级	候选问题及确认方式	修正
Q1 内边距过小	质量	渲染	文本或控件距离有边框或着色的边缘约 8px 以内。密集表格和小徽标应根据用途设置间距	根据组件用途提供足够的内部留白；常见控件和卡片适合使用 12-16px
Q2 正文贴近视口边缘	质量	渲染	正文延伸至视口边缘，在移动设备上尤为明显。全宽媒体不受此限	添加响应式内容边距，在窄屏上通常至少为 16px
Q3 两端对齐文本	质量	源代码	屏幕正文使用 text-align: justify，但未启用有效的连字处理和语言支持	将正文左对齐，或在编辑类场景中启用经过测试的连字处理
Q4 文本对比度低	质量	源代码/渲染	文本未达到 WCAG AA 标准：普通文本为 4.5:1，大号文本为 3:1。变量、透明度、渐变和图像需要通过渲染结果验证	调整前景色、背景色、字重或字号，并验证计算后的结果
Q5 标题级别跳跃	质量	源代码/渲染	渲染后的大纲从 h1 跳至 h3 或类似级别	恢复语义级别的顺序，并通过类名控制视觉样式
Q6 行高过小	质量	源代码	多行正文的行高低于约 1.3。展示型标题可根据用途例外处理	根据字体和测量结果使用约 1.45-1.7 的行高
Q7 正文字号过小	质量	源代码	正文小于 12px；12-13px 的正文仍有可读性风险。说明文字和密集数据标签需结合上下文判断	正文至少使用 14px；16px 是更稳妥的默认值
Q8 正文字间距过宽	质量	源代码	段落使用的字距大于 0.05em	恢复正常字距；宽字距仅用于短标签

目录以外的版面检查

这些页面级检查可发现参考图库中展示的合成示例：

• X1 动效过多： 许多元素进入、浮动、脉动、摆动或弹跳。动效应仅用于说明需要解释的单一状态变化或空间关系。
• X2 装饰元素喧宾夺主： 图标容器、徽标或装饰元素的视觉权重超过其引出的信息。请弱化或移除这些元素。
• X3 UX 文案重复： 标签、副标签、辅助说明、占位符和提示重复表达同一信息。保留最简洁且完整的说明，并留下能补充新信息的辅助文本。
• X4 滥用模态框： 将包含滚动、多列和多个部分的工作流放在模态框中。持续性的工作应移至页面或面板，模态框仅用于有明确范围的决策。

修复顺序

按以下顺序修复，避免反复进行外观调整：

1. 修复功能故障、无障碍问题、溢出和可读性问题。
2. 调整信息架构，移除不受支持的内容。
3. 统一重复的页面模板、卡片结构和容器层级。
4. 调整字体层级、间距节奏和颜色用途。
5. 最后处理装饰性边框、渐变、辉光、圆角、图标和动效。
6. 调整文案节奏，删除重复标签。

每次进行系统级更改后，都要重新扫描页面。修改一个基础组件，就可能同时解决许多局部问题。

验证

• 检查最终差异，确认没有默认值互换、新增依赖、虚构说法或无关改动。
• 根据改动范围，运行项目现有的格式化工具、类型检查、测试和构建。
• 如果可以渲染，检查桌面和移动端宽度、水平滚动、行宽、对比度、弹出层裁切、键盘焦点、减少动态效果设置以及内容展开情况。
• 如果无法渲染，将 Render 层的每一项都列为未验证。不要将其描述为已确认的缺陷。
• 进行以下四项最终测试：
  • **替换测试：**换成另一个产品后，是否需要对视觉和内容做出实质性改动？
  • **层级测试：**最重要的内容能否在没有装饰辅助的情况下吸引注意？
  • **系统测试：**重复出现的值是否体现一致的作用和有意设置的例外？
  • **克制测试：**每种强烈的视觉效果是否都有明确用途？

报告

对于评审，先按严重程度列出发现，并附上文件和行号。对于编辑，先说明实施结果，再列出重要改动。需要详细说明时，使用以下结构：

DIRECTION
Internal logistics dashboard: dense, calm, utilitarian; operational data carries priority.

FINDINGS OR CHANGES
Location              | Rule    | Confidence | Evidence                    | Action
src/Form.tsx:31       | C4      | Confirmed  | gray text on blue surface   | use blue-tinted light text
src/Card.tsx:12       | V3      | Probable   | border-l-4 on status card   | replace with status dot
src/page.tsx:44       | L2/T2   | Probable   | six identical feature cards | use ranked comparison list

NEEDS RENDERED VERIFICATION
src/Popover.tsx:18    | L8      | Candidate  | clipped ancestor found      | verify open state at mobile width

EXEMPTIONS
src/Steps.tsx:9       | L5      | Exempted   | markers label a real sequence

VALIDATION
typecheck passed; mobile render checked; no horizontal overflow

报告应简洁。解释改动为何适用于该产品。相比说明最终形成的设计逻辑，列出被移除的类名价值较低。