企业官网建设流程全解析

Hallmark 反模式清单（Anti-Patterns）：如何按名识别并修复 AI 生成界面的 43 个"指纹"

【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark

Hallmark 是一套面向 Claude Code、Cursor、Codex 等 AI 编码助手的"反 AI 味道"设计技能，其核心是让模型产出的界面"看起来是做的，而不是生成的"。hallmark audit动词会按名字逐一标记本文列出的每一个反模式——这些模式是 AI 生成 UI 的签名特征。本文完整继承 anti-patterns.md 的全部条目，并结合仓库中的 slop-test.md、verbs/audit.md、typography.md 等配套规范，讲清每一条"是什么、为什么被一眼识破、怎么修"。

判定逻辑：看到一个算问题，看到两个算实锤

反模式清单分为三个严重级别，hallmark audit输出时也按此分级：

• Critical（严重，直接以 slop 形态发布）——ships as slop
• Major（明显，一眼 AI 生成）——looks AI-generated
• Minor（轻微，品味小瑕疵）——small taste issues

判定规则只有一条：同一个视图中看到一条反模式是问题，看到两条就是确认。audit动词的完整执行契约见 verbs/audit.md：对每一条发现，报告命名反模式名、文件路径与行号区间、严重级别、一行修复建议，按严重级别分组，最后给出N critical · M major · K minor计数与三选一结论（ships as slop / reads as AI-generated / close, fix the minors）。

Critical：ships as slop

这些是训练数据中最常见的 AI 美学，模型几乎必然默认产出，属于第一优先级修复对象。

The purple-gradient hero（紫渐变 hero）

hero 区背景用紫色到蓝色、或紫色到粉色的渐变，配白色居中文字。这是单一最具辨识度的 AI 美学。

修复：只选一个锚定色相（anchor hue）、一个强调色，hero 上不使用渐变背景。想传达温暖，就为中性色染色（tint），而不是叠加渐变。参见 color.md § 原则："无纯色极端、无紫到青/紫到蓝/橙到粉渐变——每个 LLM 都会选这些"。

Inter-everywhere（Inter 打天下）

Inter（或 Roboto、Open Sans）同时充当 display 与 body 字体，没有任何搭配字体。单字体页面 = 模板页面。

修复：用一个有辨识度的 display 字体搭配一个精致的 body 字体。参见 typography.md § The 2+1 rule——页面最多三种字体族：display + body + 一个可选 outlier（仅限 wordmark、hero 数字、pull quote 等不超过两个位置）。该文件同时列出被禁止的默认字体（Inter、Roboto、Open Sans、Lato、Poppins 等均在禁令名单上）与替代目录（Fraunces、Geist、Bricolage Grotesque、Cabinet Grotesk 等）。

The 3-column feature grid（三等分特性网格）

三个等宽列，每列"图标在上、两行标题居中、三行正文在下"，通常全宽展开、24px 间距。"Every LLM emits this"——所有大模型都会吐这个。

修复：打破网格。变化列宽、混合卡片高度、删掉一张卡片改用负空间、把图标移到行内而非上方，或者干脆放弃卡片、改用排版节奏。该条与 macrostructures.md 中"结构性多样性"的诉求一脉相承——页面形状差异来自结构而非配色。

Card-in-card（卡片套卡片）

一个带边框的容器里面放卡片；或一张卡片里再套一张"微卡片"。视觉嵌套没有任何语义理由。

修复：只保留一层包含关系。通常该删的是外层那层。

The gradient headline（渐变标题）

标题用background-clip: text填充线性渐变（通常紫到粉、或蓝到青）。这是比几乎所有东西都更快的"AI 生成"信号。slop-test 门5直接自动失败该模式（"Universal — no genre allows gradient text"，见 slop-test.md）。

修复：纯色墨迹。想让标题有生命力，用字重、斜体或 display 字体——而不是渐变填充。typography.md § Bans 同样明确："No gradient text on headings"。

The side-stripe card（侧边条纹卡片）

卡片一条边有粗彩色边框（通常左侧、4–6px、紫色或绿色）。辨识度极高，"2018-SaaS-AI" 味十足。

修复：四周细发丝线（hairline）、或干脆无边框、或在标题旁放一个小色块。永远不要不对称粗条纹。

Full-viewport centred hero（满屏居中 hero）

min-height: 100vh（或100dvh），一切居中，一句短文案，一个大 CTA。这是 LLM 落地页的默认形态。slop-test 门7自动检查（"heromin-height: 100vhwith everything centred"，仅 atmospheric 与 playful 体裁在 canvas 本身即设计时豁免）。

修复：让 hero 高度等于内容高度；向左或向右偏置；放多于一句话的内容。与之配套，slop-test 门53（hero 居中之物不得超过两件）、门54（hero 下内边距应 ≥ 上内边距的 1.3 倍）进一步约束 hero 结构。

Pure black, pure white（纯黑纯白）

#000000背景或#ffffff表面，都显得扁平、合成感强。

修复：向锚定色相染色。color.md 给出具体配方：Paper 用oklch(96–98% 0.005–0.015 <hue>)（浅色）或oklch(12–16% 0.008–0.015 <hue>)（深色）；Bans 列出"无纯#000000、无纯#ffffff作基础表面、无零色度平面灰（至少 0.005 色度）"。slop-test 门8也将其列为视觉门（仅 modern-minimal 允许纯白纸面）。

Default-attractor sameness（默认吸引子同质化）

同一项目中连续两次 Hallmark 输出用了同一个 macrostructure：第一次产出"左边距编号标签 + 巨型衬线 + 不对称跨列"（Specimen），第二次原样照搬。页面看起来"重新设计"了，只是因为文案变了。

为什么失败：Hallmark 存在的全部意义，就是让两个不同 brief 的两个页面感觉像不同的网站，而不是同一个模板的换色。跨输出重复 macrostructure，是模板化的结构指纹——这正是 Hallmark 要消灭的 AI 特征。

修复：写代码前，先在项目 CSS 中查找/* Hallmark · macrostructure: <name> · ... */印记。若已存在，本次选择必须是不同的 macrostructure——在可能的情况下做到类别级不同（衬线引导的 editorial 结构搭配无衬线引导的网格结构，而不是两个 editorial 变体）。21 个命名结构见 macrostructures.md；SKILL.md 的"Diversification rule (mandatory)"还要求主题在 Paper band / Display style / Accent hue 三个轴向上至少与上次差一项。

Specimen fall-through（Specimen 级联跌落）

在 brief 并未明确要求 editorial / foundry / specimen 气质时，仍产出 Specimen 结构（左边距数字标签如01 — HELLO.+ 巨型衬线 + 不对称跨列 + 发丝线 + 纯排版 CTA + 偶发手绘 SVG 点缀）。这是被重复最多的 Hallmark 输出，也是"这个技能看起来只有一种形状"的原因。

为什么失败：Specimen 在 editorial brief 下是漂亮的模式；用在 SaaS 定价页、开发者工具、电商或个人应用上，看起来就是"AI 默认了"——因为它确实默认了。

修复：Specimen 只是 macrostructures.md 中 21 个结构之一，不再是默认值。brief 含糊时，从该文件前十个中选（Bento Grid、Long Document、Marquee Hero、Stat-Led、Workbench、Conversational FAQ、Manifesto、Photographic、Quote-Led，最后才是 Specimen）。只有当 brief 明确说 "editorial"、"specimen sheet"、"type foundry" 或点名 Specimen 主题时才用它。slop-test 门23自动检查此跌落。

The AI nav（AI 导航）

Logo 靠左、4–5 个行内文字链接（Features · Pricing · Docs · Blog · About）居中或靠右、CTA 按钮靠右、全宽、滚动吸顶、白底、1px 发丝线底边。这是辨识度最高的 AI 导航指纹——每个 LLM 都会产出，因为喂给训练数据的每个 SaaS 站都这么写。

为什么失败：这个形状对体裁无感（genre-blind）：用在婚礼摄影师作品集、面包店、B2B SaaS 和 manifesto 上都是一个样。导航无法告诉你这是哪种网站，页面就是模板。

修复：查 component-cookbook.md § Navigation 的路由表，按体裁选择 N5–N9：Floating pill（modern-minimal / atmospheric）、Newspaper masthead（editorial）、Brutal slab（playful）、Terminal command（CLI）、Edge-aligned minimal（luxury / quiet）。仅当页面确实只有 2 个目的地且路由表允许时，才用 N1，并在注释中写一行理由。slop-test 门51对 AI 默认导航自动失败（除非 brief 明确证明 N1 合理）。

The AI footer（AI 页脚）

4 列链接（Product · Company · Resources · Legal）+ 社交图标行 + 最底部版权行 + 1px 发丝线顶边 + 中性灰背景。数千个页面完全相同的标准 SaaS 页脚。

为什么失败：与 AI 导航同理，形状对体裁无感。面包店没有 "Resources" 栏；editorial 页面没有四链接 "Legal"。页脚应该收束页面，而不是罗列它不存在的站点地图。

修复：查 component-cookbook.md § Footers 路由表。默认选 Ft1 Mast-headed、Ft2 Inline single line、Ft4 Dense colophon、Ft5 Statement、Ft6 Letter close、Ft7 Newsletter-first 或 Ft8 Marquee scroll。只有在真正的 hub 或 docs 根页（确有站点地图）时才用 Ft3 Index columns，且即便如此也绝不配"社交图标行 + 微小版权尾巴"。slop-test 门52对 AI 默认页脚自动失败。

Aurora-blob background（极光斑点背景）

紫色到粉色到青色的流动有机网格斑点，叠在 hero 文字后面。看起来"高级"，直到你在 2022 年以来每一张 Dribbble 作品里都见过它。

为什么失败：这是 2022–2023 生成设计的默认值。观众毫秒级模式匹配：AI 模板。

修复：纯色表面；或"微妙两停 CSS 渐变 + SVG<feTurbulence>颗粒，透明度 < 0.1"。配方见 hero-enrichment.md E7——<filter id="grain"><feTurbulence baseFrequency="0.9" numOctaves="2"/></filter>，135° 两停渐变（双色相度均 < 0.04）、mix-blend-mode: multiply、颗粒 0.06 透明度、仅限 hero、无动画。"不是极光、不是紫到青网格、不是漂浮球体；要点是几乎看不见的纸感纹理"。slop-test 门31亦约束抽象背景：超过一个强调色、面积超过约 5%、或整页动画网格即失败。

Floating-orb decoration（漂浮球体装饰）

hero 背后漂浮的通用 3D 球体或模糊彩色圆，通常"为了增加深度"。它们没有任何语义角色。

为什么失败：通用 3D 氛围感是新的企业库存照片。它暗示"这里需要点东西，所以加了点东西"。

修复：删掉。hero 不需要深度，需要的是强排版锚点。

Sound-on autoplay（带声音自动播放）

自动播放且带音频的 hero 视频。浏览器反正会拦截，但意图重要：一个没有muted的视频元素，是一个想对用户大喊的视频。slop-test 门30与 LCP 门一并检查视频。

为什么失败：对观众有敌意；可访问性失败；SEO 惩罚；浏览器拦截。

修复：<video autoplay muted loop playsinline>——四个属性必须全有。若声音确实有用，另设独立音频开关按钮。

Lazy-loaded LCP（对 LCP 元素懒加载）

对 hero 图片或视频（即 LCP 元素）加loading="lazy"。页面要等用户滚动到它才开始下载，而用户正盯着它——于是页面空在那里。文档给出数据：懒加载的 LCP 图片 p75 为 720ms，预加载为 364ms——慢约 2 倍，糟糕体验多约 4 倍。

为什么失败：拖垮 Largest Contentful Paint。

修复：LCP 元素上加fetchpriority="high"与preload="metadata"；只有首屏之下的媒体才懒加载。slop-test 门30将此写死：demo 视频若"缺poster、缺fetchpriority="high"、或对 LCP 元素用loading="lazy""即失败。

Major：looks AI-generated

这一级是"看起来像 AI 生成的"——不至于直接判死刑，但强烈破坏可信度。

Bounce and elastic easing（弹跳与弹性缓动）

按钮弹跳进入、图标悬停晃动。这些缓动十年前流行过。

修复：指数级 ease-out。motion.md 定义了三个命名缓动 token：--ease-out: cubic-bezier(0.16, 1, 0.3, 1)（进入）、--ease-in: cubic-bezier(0.7, 0, 0.84, 0)（离开）、--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1)（状态切换），并明令 Bans："Bounce / elastic / overshoot on UI elements. Dated; signals 'template'." 浏览器默认ease也被列为"未精心打磨"。

Centred everything（一切居中）

标题居中、正文居中、按钮居中、一段接一段的居中列。

修复：偏置布局。宽左边距、窄右边距，或反之。打破一次对称就够了。slop-test 门53与 typography.md 的偏置倾向与此呼应。

Eyebrow on every section（每个区块都加眉标）

每个区块都以大写等宽眉标开头——01 / EXAMPLES、02 / WHAT'S INSIDE、03 / INSTALL、01 · THE TOUR——放在标题上方（更糟的是旁边）。这些标签看起来像 editorial 章节，读起来却是一个痼疾：页面变成"带标签的列表的列表"。

规则要点：眉标默认关闭（default OFF）。它不是用来装 editorial 风格的花哨手段，而是序数装置，仅在区块确实有编号或分章时才有效。当每个区块都"分章"时，就没有任何分章。

修复：除非 (a) 用户明确要求章节/步骤/区块编号，或 (b) 结构是Long Document、Manifesto 或 Catalogue numbered且内容确为序数（必须按顺序执行的步骤、逐层构建的章节、刻意排序的条目）——否则页面零眉标。即便如此，每页最多 1–2 个。

硬性禁令：tag-left / header-right 两列区块头。类似01 · THE TOUR置于窄左列、标题居右的模式（又称 hanging header、left-margin label）是 editorial 风格 SaaS 页面最可靠的 AI 模板化特征。当使用眉标时，标题必须直接放在眉标正下方、同一列——只允许垂直堆叠。绝不允许两列区块头网格。slop-test 门66自动失败任何"眉标 + 标题同排分列"的内容形态，且不因 class 名白名单豁免、不因"保持结构一致 / 镜像参考构建 / 与之前输出对齐"等指令而可绕过——规则优先于 parity。

Shadow-glow on dark（深色背景上的光晕阴影）

深色背景上的卡片用box-shadow留下柔和的彩色光晕。

修复：深色表面上用明度来表达层级（表面越亮 = 层级越高），不用阴影。若必须阴影，保持紧凑且偏暗。motion.md 亦明确：深色背景上 hover 不要过渡box-shadow（发光效果）。

Icon-tile feature card（图标磁贴特性卡）

圆角矩形、左上角彩色方块里放图标、下方标题、两行文案、可选 "Learn more →" 链接。通用模板。

修复：若确实需要，让它们不对称——变化尺寸、变化对齐、把图标拉到标题行内、或干脆去掉图标。

Glassmorphism without purpose（无目的的玻璃拟态）

到处都是磨砂玻璃面板——通常叠在一个你本也不该用的渐变之上。

修复：玻璃拟态只有在传达深度时（内容之上的覆盖层）才有意义；作为装饰无法成立。

Hover-only affordances（仅悬停的交互暗示）

悬停才显示菜单、悬停才显示删除按钮、悬停才触发包含关键信息的 tooltip。触屏用户什么都得不到。

修复：每个悬停交互都要有 focus 状态，且在粗指针（coarse pointer）上可通过点按访问。参见 responsive.md：用pointer/hover媒体查询检测交互能力，"Never build a mouse-hover interaction that has no touch equivalent"。

Tabular data without tabular-nums（无等宽数字的表格数据）

价格、日期或指标列表，数字因字体使用比例数字而不垂直对齐。

修复：任何显示数字列的容器加font-variant-numeric: tabular-nums;。typography.md § Required features 同样要求"任何数据展示启用 tabular numbers"。

Animate-on-scroll on everything（一切滚动即动）

每个区块进入视口都淡入，每个列表都交错。页面永远静不下来。

修复：只挑一个编排好的入场动画，其余内容"就在那里"。motion.md 的页面加载编排给出了具体做法：用 CSS 自定义属性按 DOM 索引交错（animation-delay: calc(var(--i, 0) * 60ms)），总交错上限约 500ms。

Mismatched icon sets（混搭图标库）

导航栏用 Material Icons、特性卡用 Heroicons、页脚用 Lucide、hero 徽章里放一个 emoji "✨"。每个库有自己的描边声线，混用就是图标集特征。

为什么失败：图标就是排版。你不会让一个页面用三种正文字体，就不要让它用三种图标描边。

修复：每项目只选一个图标库。SaaS 默认 Lucide、需要字重变体用 Phosphor、Tailwind/shadcn 项目用 Heroicons。canon 见 assets.md。slop-test 门32自动检查混用两个以上图标库。

AI-illustration look（AI 插画感）

无关节铰接的光滑网格斑点角色、2010 年代中期"现代扁平"库存姿势、对称默认布光的 Midjourney 式构图。手绘 SVG 小人（"一只眼睛比另一只大的涂鸦人"）也归此类——corporate-doodle 是 2010 年代末 Slack/Figma 营销模板。

为什么失败：毫秒级读出 AI。2026 年的观众比任何其他特征都更快地匹配它。

修复：用纯 CSS 或 SVG 手搭插画（hero-enrichment.md 的 Tier A 或 Tier B）。若必须生成，用 Nanobanana 2 或 Recraft V4 配合参考图、非对称裁剪与颗粒后处理——绝不使用裸输出。参见 custom-craft.md Tier E。

Invented metrics（编造指标）

Stat-led 布局、对比行或 proof bar 携带用户从未提供的数字——"10× faster"、"saves 5 hours per week"、"trusted by 50,000+ teams"、"99.9 % uptime"、"+47 % conversion"。模型为了填统计位而编了一个数。

为什么失败：观众识别编造的统计，与识别编造的推荐一样快。在 proof bar 上撒谎的页面，其主张同样不可信；每个编造数字都读作"这是生成的，不是写的"。

修复：按优先级三种方案：(1) 用—加标注灰色块替换数字（"metric to confirm" / "stat pending"）；(2) 向用户索要真实数字并暂停本次运行；(3) 重建区块、去掉 proof 位——没有真实统计的 stat-led 结构就是选错了结构。"数字形状的空位是诚实的，编造的数字是 slop。"该条对应 slop-test 门56（honest copy），并与 SKILL.md 的"Honest copy — no fabricated content"纪律直接挂钩。

Generic emoji as feature icon（通用 emoji 作功能图标）

特性卡、价值主张、步骤号或定价层级用✨🚀⚡🔥🎯✅作为主图标。"sparkle hero" 徽章在眉标旁放✨。用 emoji 顶替图标库，因为模型没选一个。

为什么失败：emoji 由操作系统渲染、各设备不同；它破坏了图标描边声线（你把 Phosphor 风格线图标和 Twemoji 团子混在一起）；而且这选择本身可辨识为 AI 默认。Sparkle-emoji-as-AI-shortcut 是 2024–2025 时代的陈词滥调。

修复：选一个图标库并落地（assets.md 列出 canon），或手搭自定义 SVG 标记，或干脆省略图标、以排版领衔——大多数功能列表根本不需要图标。对应 slop-test 门60。

Re-drawn UI chrome（重绘 UI 铬件）

用假浏览器栏（URL 胶囊 + 红黄绿圆点）包截图；用假手机框（圆角矩形 + 刘海 + 听筒缝）包移动端 mockup；用假代码窗口（假标题栏 + 最小化/关闭圆点）包<pre>；用假 IDE 铬件（文件标签页 + 活动栏）包编辑器截图——全部用 HTML/CSS/SVG 手搭。

为什么失败：用户已经有铬件了——他们的浏览器、手机、IDE 本身就是铬件。在页面里重绘它，等于在一幅真实画框里放一张画框照片。而且造假也拙劣：URL 是错的、圆点不是 macOS 圆点、刘海形状不对。观众一眼就模式匹配"AI 发明了一个已存在的 UI"。

修复：用真实截图包在<figure>里（最多加发丝线边框）。手机 mockup 用厂商透明 PNG 设备框或真实产品照片——绝不用 CSS 画框。代码块用系统<pre>加排版式边框（顶线 + 标签 + 底线），不用伪造窗口铬件。页面的工作是展示内容，不是模仿操作系统。对应 slop-test 门57，也是 SKILL.md 四项跨动词纪律之一（"Re-drawn chrome forbidden"）。

Mid-render token improvisation（渲染中途令牌即兴发挥）

主题在运行开始时选定，但产物里出现不在令牌块中的内联颜色值（#5b6cff、oklch(74% 0.18 245)、rgb(...)）或font-family声明。或者：产物带主题令牌集外加一个塞进 hover 态、focus ring 或单条边框的额外 hex。模型选了主题，然后跑偏了。

为什么失败：令牌纪律是"系统"与"自由发挥"的分界线。主题一旦锁定，文件里每个颜色、每种字体都必须引用命名令牌（var(--color-accent)、font-family: var(--font-display)）。内联值是凝聚力流失的方式——编辑三轮后，页面从三色变成八色，支撑主题的克制感荡然无存。观众看不见内联值，但能感到那种松散。

修复：产物中每个颜色、每种字体都必须经var(--token-name)输出。需要令牌不存在的值时，先把新令牌加进令牌块（--color-accent-warm: oklch(...)）再引用。渲染中途不允许内联 OKLCH 或一次性 hex。对应 slop-test 门58，并与 SKILL.md § Locked tokens 纪律一致（SKILL.md）。

Wrap-to-two-lines clickable text（可点击文本折成两行）

按钮标签、导航链接、页脚链接、面包屑或 CTA 因视口变窄、标签过长而折行。视觉上交互部件像坏了——读者分不清换行是否有意。最糟的情况：第二行只有一个词（"free"、"more"、"started"），读起来像样式错误。

为什么失败：可点击交互部件是一行对象。两行标签拖慢扫读、破坏行的垂直节奏（按钮变高而兄弟按钮不变），并暴露"这个页面没在这个宽度下测试过"。这是响应式纪律的特征。

修复，按优先级：(1) 缩短标签——"Get started free" → "Start free"；"Read the documentation" → "Read docs"，大多数 CTA 标签太长；(2) 对交互部件设white-space: nowrap，让父 flex 容器重排；(3) 窄宽度下用hidden=until-found或display: none丢弃非核心导航项；(4) 阈值以下把导航折叠进 sheet/菜单。绝不让主 CTA 或导航链接折行。对应 slop-test 门59，完整修复序列见 responsive.md § Clickable text — never wraps。

Lottie shortcut（Lottie 走捷径）

纯 CSS 或手搭 SVG 明明能做得更强更轻，却去取 LottieFiles 社区动画——旋转 logo、对勾绘制、加载 spinner、"loading dots" 循环。

为什么失败：Lottie 拉取是 2023–2024 的 AI 工具捷径，观众现在已如此解读。50–500KB 的 JSON 文件加运行时开销，是对一个 CSS 零字节就能完成的活的征税。

修复：自建。旋转 logo → CSS@keyframes rotate；对勾 → SVGstroke-dasharray动画；loading dots → CSS@property+animation-delay。Lottie 在增强层级中是 Tier F——最后手段，仅用于真正需要关节动作的角色动画（层级见 hero-enrichment.md）。

Three.js for a still object（为静止物体上 Three.js）

WebGL hero 里的 3D 不靠可交互性证明自己。一个用户不能碰、不能转向、不能定制的静止旋转模型——只因有人想要 "3D"。

为什么失败：100–300KB 的 Three.js 包、模型、纹理、GPU 计算——全为一个静态照片或 SVG 就能搞定的事物。

修复：用户不能操控它，它就不配 Three.js。用静态照片或手搭 SVG。

Microinteraction tells：AI 生成动效的命名特征

这些是 AI 生成动效的特征。完整目录与配方见 microinteractions.md。

• transition-all：所有属性都在动画，包括应瞬时的（visibility、focus ring）。修复：明确列出属性，如transition: background-color var(--dur-short) var(--ease-out), transform 100ms var(--ease-out)。（slop-test 门11自动检查。）
• Universalhover:scale-105：每张卡片悬停都抬起，没有阴影变化、没有缓动、没有目的。修复：每元素只给一个信号——1px 位移、或颜色变化、或下划线加粗，绝不四样全上。（门12、门14。）
• Bouncy overshoot easings on UI：cubic-bezier(0.34, 1.56, 0.64, 1)用于按钮、模态、tooltip。修复：overshoot 只留给真实物理交互（拖放释放）；UI 状态用 motion.md 的--ease-out。（门13。）
• Animated hover gradients：背景渐变悬停时在色彩空间中滑动。修复：删掉；或选一种颜色变化，瞬时。
• Cursor follower dots：落后于指针的拖尾圆点。修复：删掉。
• Auto-rotating carousels with no pause：WCAG 2.2.2 失败。修复：仅手动前进，或悬停/聚焦暂停，或默认禁用自动播放。（门19。）
• Celebratory success toasts：用户刚保存了一个看得见已保存的东西，弹"Done!"。修复：静默成功。toast 只用于失败、效果不可见的异步动作、以及用户确实需要的明确确认。（门17。）
• Confirmation dialogs for reversible actions：删除单行数据前问"确定删除？"。修复：乐观删除 + 5–10 秒 Undo toast。模态只留给不可逆的破坏性操作，且用"输入名称确认"，不是点 OK。
• Tooltips with the same delay on hover and focus：两者都延迟 800ms。修复：hover 延迟 800–1000ms，focus 延迟 0ms——意图不同，时机不同。（门18。）
• Focus rings that animate in：focus ring 200ms 淡入——过渡开始阶段键盘用户没有任何指示。修复：focus ring 必须瞬时出现，永远如此；获得焦点时不过渡outline或box-shadow。（门16。）
• Toasts that shift layout：新 toast 把内容推下去，消失又弹回来。修复：固定定位、堆在视口角落；新 toast 到来时旧 toast 不动。
• Universal scroll-triggered fade-up：每个区块都在交叉观察时淡入，页面从不安静。修复：首次加载只做一次编排好的入场，此后内容"就在那里"。
• Spinners that flash：快速动作完成时 spinner 只出现 50ms。修复：延迟显示（150ms 后才显示），或强制最小可见时长（显示后至少 300ms）；布局已知时用骨架屏而非 spinner。

动效的总体纪律见 motion.md：只动画transform与opacity、三档时长（Micro 100–150ms / Minor 200–300ms / Major 300–500ms）、退出约为进入的 75%、prefers-reduced-motion下所有空间运动塌缩为 ≤150ms 透明度交叉淡入。

Minor：small taste issues

这一级是小的品味问题，单个无害，积累起来却很显眼。

• Straight quotes（直引号）：正文里的"Hello"与'word'。说明没人校对过。修复：弯引号"Hello"、'word'。（typography.md § Required features 同样要求规范标点。）
• Double-hyphen dashes（双连字符）：正文中该用 em-dash 的地方用了--。修复：—（U+2014）。
• Three periods instead of ellipsis（三个句点冒充省略号）：正文中的...。修复：…（U+2026）。
• Placeholder names（占位人名）："Jane Doe"、"John Smith"、"Example User"。修复：用贴近受众的可信占位名，或从种子 faker 生成："Maya Okonkwo"、"Sam Tan"、"Elena Ruiz"。（slop-test 门20直接失败 Jane Doe / John Smith / Acme 等。）
• Startup-cliché product names（创业公司陈词滥调产品名）："Acme"、"Nexus"、"Pulse"、"Unleash"、"Seamless"、"Supercharge"。修复：具体命名。演示项目用领域内占位名——"Maple Weekly"、"Ridgeline Inventory"——不要玩创业公司名字宾果。
• z-index: 9999：随意的巨大 z 值。修复：用六级命名刻度。参见 layout-and-space.md（--z-base: 1·--z-raised: 10·--z-dropdown: 100·--z-sticky: 200·--z-modal: 400·--z-toast: 500·--z-tooltip: 600）。
• Every section padded the same（每段内边距相同）：所有区块的上下左右内边距全相等。修复：变化——收一个、放一个。
• 100vw widths（width: 100vw）：用在任何东西上都会在可见滚动条的桌面上溢出。修复：width: 100%加容器内边距。responsive.md § Viewport units 明确：100vw在桌面包含滚动条导致溢出；高度交互用dvh/svh/lvh。

hallmark audit如何报告：从清单到可执行结论

清单最后定义了审计动词的标准输出契约（同时见 verbs/audit.md 的完整协议）。对每条发现：

[severity] Tell name — file:line why it's a tell (one line) → fix (one line)

然后是汇总：

Summary — N critical · M major · K minor Verdict — [ships as slop | reads as AI-generated | close, fix the minors]

audit还执行三项扩展检查：

1. 结构指纹检查：即使视觉处理没问题，只要页面使用 AI 模板（居中 hero、3 张等分特性卡、CTA、页脚，无不对称无意外），就标记为 critical 结构发现。
2. 印记 vs 页面一致性检查（stamp-vs-page）：若被审计文件含/* Hallmark · macrostructure: <name> · ... */印记，需验证页面确实匹配。印记写 Bento Grid 实际却是居中单列 hero + CTA，标记为 critical 结构发现stamp lies——这能捕获"上次印记了某结构、后续编辑把页面拉回 AI 模板"的漂移。
3. 体裁感知与design.md审计：印记带体裁（如genre: atmospheric）时按 slop-test.md 的体裁覆盖规则评级——editorial 里径向渐变是 critical，atmospheric 里被允许；纯白纸面在 editorial 是特征、在 modern-minimal 被允许。项目根有design.md时先读它再评级：令牌/字体/强调色不符标记为critical: design-system drift，越出design.md结构族标记为major: outside design.md family，印记撒谎标记为critical: stamp lies，系统管理项目缺印记标记为major: missing system reference。

与 69 道 slop-test 门禁的对应关系

anti-patterns.md 是生成前的检查表（"这些是你绝不能产出的命名特征"），而 slop-test.md 是交付后的 69 道门禁（"每个答案都必须是 no"），两者一一咬合：渐变标题 ↔ 门 5、满屏居中 hero ↔ 门 7、纯黑纯白 ↔ 门 8、AI 导航 ↔ 门 51、AI 页脚 ↔ 门 52、transition-all↔ 门 11、悬停放大 ↔ 门 12/14、focus ring 动画 ↔ 门 16、编造指标 ↔ 门 56、重绘铬件 ↔ 门 57、令牌即兴 ↔ 门 58、折行可点击文本 ↔ 门 59、emoji 图标 ↔ 门 60、眉标分列 ↔ 门 66。SKILL.md 将"Honest copy"、"Locked tokens"、"Re-drawn chrome forbidden"、"Mobile responsiveness"四项纪律列为跨动词硬规则，audit、redesign、study与默认设计流程一视同仁。

实操建议：把本文当作生成前的自查单与审计时的评分卡。每产出或接手一个页面，先按 Critical → Major → Minor 扫一遍，再看audit的N critical · M major · K minor汇总；任何 critical 都意味着页面"以 slop 形态发布"，应当场修复而非辩解——因为清单里的每一条，都是观众在毫秒级完成模式匹配的 AI 指纹。

【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark