yonathan-boop/Claude

antislop-ui

反低俗：AI 编码代理规则。UI 与视觉技能

属于 antislop 系统的一部分。请与 antislop.md（核心）一起阅读。本技能深入探讨 UI/视觉方面：颜色、布局、组件、装饰、结构流程和动效。它通过编号引用核心规则，不会重复或重新编号。当任务涉及构建或编辑网站、Web 应用或任何界面时，请加载此技能。

如何使用此技能

• 只要任务涉及 UI 或视觉工作，就与 antislop.md 一起加载。核心文件提供机制（目的测试、三层分级、交付门）；本技能提供 UI 特定的深度检查。
• 每个条目都具有相同的结构：模式描述（模式是什么）、为什么（为什么它被认为是低俗）、修复方法（应该怎么做），并引用对应的核心规则，格式为 R-XX。
• 核心中的“交付门”仍然是最终的验收门。本文件末尾的“UI 技能检查清单”是需要同时进行的 UI 特定补充检查项。

视觉与颜色

通用蓝紫渐变

• 模式描述： 将蓝到紫、蓝到青或紫到粉的渐变用作主要颜色处理，或者全页彩色光晕。
• 为什么： 这是训练数据中最常见的颜色处理方式。它表明“没有品牌标识”，而非“我们的调色板”，并且一眼就能看出设计是 AI 生成的。
• 修复方法： 从 DESIGN.md 或产品自身的品牌标识中提取调色板。仅当渐变作为层次结构功能时保留，并写下其用途（R-01）。将一个层次与另一个层次区分开的渐变为工艺；在每个部分都使用相同的渐变为默认行为。
• 同属默认家族的还包括： 刺眼或彩虹渐变、紫黑搭配、霓虹或柔和调色板，以及英雄区域后面的模糊径向光晕。它们都穿着不同的外衣，但本质相同：使用模型的默认颜色，而非品牌色。在未明确用途的情况下，所有这些都禁止作为默认值（R-01）。

过度毛玻璃效果

• 模式描述： 同时在导航栏、卡片、模态框和侧边栏上使用模糊/backdrop-filter。
• 为什么： 模糊会去除纹理，并将所有表面置于同一磨砂层，从而扁平化层次结构。当每个表面都是玻璃时，就没有前景了。
• 修复方法： 将毛玻璃视为点缀，而非主要特征。剂量上限：最多 1-2 个元素（R-10）。需要吸引注意力的表面使用毛玻璃；其他表面保持实心。

过度的圆角

• 模式描述： 每个元素都是药丸形状：按钮、输入框、卡片、徽章、模态框。
• 为什么： 统一的药丸形状抹杀了“这是输入框，这是卡片”的视觉语言。圆角变成了装饰，而非层次结构工具。
• 修复方法： 在设计系统中设置一小套圆角值，并刻意应用（R-11）。主要 CTA 上的一个宽圆角看起来像是精心设计；所有元素上相同的圆角看起来像是默认值。

过于柔和的阴影

• 模式描述： 每个组件都带有巨大的阴影，导致整个页面看起来像漂浮着。
• 为什么： 当所有元素都被提升时，提升就失去了意义。页面失去了地面，变得千篇一律的柔和。
• 修复方法： 仅将阴影用作提升标记，并写下提升的原因（R-12）。大部分元素应该平铺；需要提升的一两个元素才使用阴影。

到处发光

• 模式描述： 同时让卡片、按钮、图标、徽章、背景和边框发光。
• 为什么： 发光是被用来吸引注意力的放大器。到处使用就等于没有放大任何东西，并且这是看起来“由 AI 制作”的最快方式之一。
• 修复方法： 将发光最多保留给 1-2 个重要元素，作为焦点点缀（R-13）。其他所有元素保持哑光。

背景网格

• 模式描述： 在内容后面使用网格方块、蓝图线条、网格纸、点阵网格或细重复线条。
• 为什么： 这是让平面页面显得“技术感”的默认方式，但不做任何实际工作。它看起来像是有纹理，却没有意图。
• 修复方法： 仅在纹理或图案真正支持产品标识时才使用，并写下原因（R-07）。一个真正的标识图案（核心第三部分）每次都胜过默认的网格。

无理由默认暗色模式

• 模式描述： 仅仅因为看起来“技术感”而让整个页面变成暗色，没有考虑品牌因素。
• 为什么： 暗色是一个决策，而不是默认值。强制使用暗色看起来是在追随潮流，而非服务产品。
• 修复方法： 根据品牌标识、产品类型和受众选择主题（R-21）。开发者工具和创意工具有合理的理由使用暗色；以内容为主的产品通常不需要。如果没有强烈理由选择固定主题，请构建一个可用的亮/暗切换。

调色板中颜色过多

• 模式描述： 一个页面上有 5-7 种不同颜色，且没有明确的设计系统。
• 为什么： 分散的调色板没有层次。当每个元素可以是任何颜色时，就没有什么能脱颖而出。
• 修复方法： 将活动调色板限制在 2-3 种核心颜色 + 1 种强调色（R-29），并让其中一种核心颜色作为中性底色。克制才能让强调色发挥作用。

过度使用强调色

• 模式描述： 同时将一种强调色用于按钮、图标、徽章、链接、线条、背景和发光效果。
• 为什么： 当强调色无处不在时，它就不再是强调色了。它只是变成了另一种颜色，设计失去了视觉焦点。
• 修复方法： 强调色只应在关键时刻使用（一个刻意的强调，核心第三部分）。没有强调色是单调的；到处是强调色则是低俗。选择它真正重要的一个或两个位置。

单调的默认值

• 模式描述： 纯白或接近白色、细灰色边框、小圆角、无纹理、通用字体、无标识。
• 为什么： 这是在无方向的情况下过度过滤的“安全”结果。这不算是低俗，但也不是设计：它是一个本应有设计的地方出现的空白。
• 修复方法： 这是一个方向问题，而非过滤问题。添加 DESIGN.md 或解决设计阅读问题（核心第三部分），然后提高活力旋钮。解决方法永远不是增加更多禁令，而是陈述用途并增加能量。

布局与组件

千篇一律的模板布局

• 模式描述： 英雄区、副标题、2 个 CTA、截图、功能网格、推荐、常见问题、CTA、页脚，每次都按此顺序。
• 为什么： 这个顺序是训练数据的默认值，而不是产品的叙事。部分之所以出现，是因为模板中有它们，而不是因为内容需要它们。
• 修复方法： 围绕实际内容需求构建结构（R-05， C-3）。如果产品没有推荐，就不应该有推荐部分。部分的顺序应遵循产品的故事。匹配 RHYTHM（节奏）旋钮：如果设置为 3，则各部分应明显变化。

复制的功能卡片

• 模式描述： 所有功能卡片的尺寸、高度、图标、布局和内边距完全相同。
• 为什么： 统一的卡片会扁平化内容。当每个功能都是一张带图标的卡片时，真正重要的功能和次要的功能看起来一样。
• 修复方法： 创建反映内容层次的差异，并写下原因（R-14）。并非每个功能都需要做成卡片。旗舰功能可能值得全宽处理，次要功能则用列表。

日式便当盒网格

• 模式描述： 一个由不同大小卡片组成的马赛克部分，有些跨越两列或两行，像仪表板一样填充空间。
• 为什么： 这是过去几年里默认的“像 App 一样”的落地页布局，因此它不能传达关于产品的任何信息。当每个部分都可以是便当盒网格时，布局就成了模板，而非决策。
• 修复方法： 仅当内容确实有不同大小的元素要展示时，才使用便当盒网格（R-05）。如果每个单元格大小大致相同，简单的网格或列表更诚实。RHYTHM（节奏）旋钮决定各部分是否变化。

统一间距

• 模式描述： 每个部分的内边距、外边距和间距完全相同。
• 为什么： 节奏是一个工具，单一的间距值消除了它。各部分之间不再相互关联，页面读起来像一条平坦的带子。
• 修复方法： 将空白作为结构使用（核心第三部分），并根据 RHYTHM（节奏）旋钮变化它。建立一个间距比例，然后使用不同的级别来分离和连接。只有当节奏旋钮如此设定时，统一的节奏才是一个刻意的选择（R-05）。

“工作原理”始终是 3 步

• 模式描述： 圆形图标 + 数字 1、2、3 + 简短文本，总是三步，总是相同的形状。
• 为什么： 产品的实际流程很少是一个整齐的三步列表。模板迫使流程适应其形状，而非相反。
• 修复方法： 按实际情况呈现流程（R-05）。如果流程确实是三步，使用圆形图标没问题；否则，使用实际工作流程需要的任何形状，包括两步或五步。

“受信赖”标志栏

• 模式描述： 在英雄区域正下方放置一行通用的公司标志。
• 为什么： 这是一个没有证据的信任声明：通用标志，没有命名真实客户，没有使用证明。
• 修复方法： 只展示真实、可验证的标志（R-18， R-36， C-5）。如果产品还没有这样的客户，就不要虚构一个标志栏。真实的社交证据每次都能胜过一个通用的。

“最受欢迎”定价卡

• 模式描述： 中间定价层级总是用胶囊徽章高亮显示。
• 为什么： 这是默认模式，这意味着它不是一个决策。当每个定价部分都这样做时，高亮层就失去了意义。
• 修复方法： 高亮真正服务于产品目标的层级，并写下原因（R-31）。如果没有层级值得强调，就不要高亮任何层级。
• 三列也是模式的一部分： 无论实际结构如何，定价总是显示为三个层级，中间那个被高亮。这种形状是默认值，因此不是决策（R-05）。使用产品实际具有的层级数，并高亮服务目标的那一层。

没有产品的演示

• 模式描述： 页面销售一个从未展示过工作的产品：没有真实演示，没有服务条款，没有隐私政策，只有承诺。
• 为什么： 这是一个穿着产品外衣的演示。每个声明都只是没有支撑的信任，而缺少的法律页面是无声的暗示，表明还没有真实存在的东西。
• 修复方法： 展示真实产品的工作情况，或者诚实地说明它尚未发布（R-38， C-5）。如果页面要求注册或付款，则必须存在服务条款和隐私政策。诚实的“即将推出”胜过令人信服的演示。

4 列模板页脚

• 模式描述： 产品 / 公司 / 资源 / 法律列，没有变化。
• 为什么： 这些列之所以存在，是因为模板有它们，而不是因为网站有那么多链接组。
• 修复方法： 围绕产品实际链接到的内容构建页脚结构（R-05）。一列链接有时比四列半空的链接更有用。

统一的部分节奏

• 模式描述： 每个部分都是居中标题 + 副标题 + 相同的卡片网格，没有变化。
• 为什么： 相同的构图使各部分模糊在一起，页面感觉重复且平淡。
• 修复方法： 根据 RHYTHM（节奏）旋钮变化构图（R-05）。交替使用文本密集和视觉密集的部分，非对称和对称布局。一个每个部分都遵循同一模板的页面，是由模板设计的页面。

装饰元素

通用 AI 图标

• 模式描述： 使用火花、星星、魔法、闪电、钻石、立方体、机器人或 AI 球体作为功能图标。
• 为什么： 这些符号是“AI 产品”的通用词汇。它们不能传达关于特定功能的任何信息。
• 修复方法： 使用与内容真正相关的图标，当符号比较通用时，写下相关性（R-04）。如果没有合适的图标，则不要使用图标。功能标签本身就能完成工作。

Lucide 图标

• 模式描述： 所有图标都来自同一个细描边、圆角的图标库（Lucide 或其视觉克隆），因此所有图标共享一个可识别的外观。
• 为什么： 一个单一的默认图标库使所有 AI 网站的图标变得相同，因此图标不再告诉你任何关于产品的信息。符号可能相关，但统一的库外观才是问题所在。
• 修复方法： 图标集是一个视觉选择，而非默认值（R-04）。首先根据相关性选择图标；然后决定库的粗细和描边风格是否适合产品的特性。两个看起来“相似”的图标仍然可以是你自己的，如果这个选择是经过决策的，而不是直接导入。

将 Emoji 用作装饰

• 模式描述： 在文案、标题、徽章和按钮中散布文字表情符号：标题中的 🚀，每个功能点旁的 ✅，CTA 上的 🔥，图表标题上的 📈。
• 为什么： Emoji 是“此内容为生成，并非撰写”最响亮的代名词。在 UI 中，它们与内容争夺注意力，并将产品的声音扁平化为与其他 AI 网站相同的欢快默认值。
• 修复方法： 从 UI 文本中移除 emoji。如果一个概念需要标记，请使用真实、相关的图标并写下原因（R-04），或者不使用任何标记。文案本身承载着意义；emoji 没有增加任何价值。

每个按钮上的小箭头

• 模式描述： 几乎在每个按钮上都放置 → 或 ↗ 纯属装饰。
• 为什么： 箭头变成了一个模式，而非一个信号。当每个 CTA 都有一个时，没有一个指向特定位置。
• 修复方法： 箭头不是按钮的默认标识（R-08）。仅保留给那些真正受益于方向提示的操作，按比例调整大小，并写下用途。

彩色左侧条纹

• 模式描述： 在卡片、列表行或部分标题的左边缘使用一条细彩色垂直条，作为装饰。
• 为什么： 条纹增加了颜色，却没有增加含义。这是让卡片“看起来经过设计”的最廉价方式，因此它无处不在，却什么也没说。
• 修复方法： 条纹是装饰，它必须承载信息，否则就移除（R-01， R-31）。标记真实状态（活跃、警告、新）的左边缘是一个信号。存在只是为了看起来是设计的条纹是默认值。

AI 胶囊徽章

• 模式描述： 药丸形状、细边框、发光、小圆点、大写字母，包含“AI 驱动”、“Beta”、“新”。
• 为什么： 胶囊加发光加圆点的组合是一个自我指涉的徽章，表明“由 AI 制作，关于被 AI 制作”。

… [为翻译而截断]