又一个去 AI Slop 工具?Hallmark 原理解析与实测

声明：本文由 AI 辅助创作，经作者核实与修订。

平时写前端或者做产品落地页的时候，经常会遇到一种情况，就是页面有一股“AI 潲水味”（AI slop）。代码跑起来看起来没错，控制台也没有报错，但网页一打开，扑面而来就是一股廉价的塑料感：暗色底板、紫蓝渐变、悬浮发光球、大写英文小标签，外加三等分的卡片。

这个问题不限于某一家模型。哪怕用现在能力很强的 Claude Opus 5.5 或者 Codex 里的模型，只要不加干预地让它写页面，照样会掉进这些固定套路。每次主流模型改版迭代，社区里都会冒出一批关于界面同质化的吐槽；大家被折腾久了，也就陆续做出了一些反制工具。

体验设计里常提“峰终定律”（Peak-End Rule）：人对一段体验的整体评价，主要取决于过程中的峰值体验和收尾那一下的感受。做产品落地页也是这个理。访客点进来的第一眼，如果看到的是一张千篇一律的 AI 模板脸，对产品的信任感就很难建立起来。

开源项目 Hallmark 就是众多反制措施里的一个。它做成了一套挂载在编程助手里的技能插件（Skill），思路是：既然模型改不掉默认手癖，那就先立规矩、给模板；规矩立好了，才不烧心。

一、典型破绽与 70 余条拦截规则

模型在没有具体约束时，交出来的往往是训练语料里最四平八稳的平均样式。先看一张实测生成的反面样本，里面集中了四处高频破绽：

对照图里的标注，能看到这四类典型毛病：

1. 大写英文眉标（Eyebrow）：中文大标题正上方，总要顶一行字号很小、字间距拉得很开的大写英文标签。这类小标签除了增加视觉杂音，没有提供新信息。
2. 伪流程与深色色块：在页面中间铺一大块深暗色背景，上面排一行“步骤 1 → 步骤 2 → 步骤 3”这样带箭头的词，用来凑版面。
3. 卡片套卡片：首屏往下习惯性排三列等宽卡片，外层边框里再套内层边框，页面上全是框线。
4. 按钮粘附箭头与假交互：主按钮文字后面随手加个 → 箭头；底部的输入框点完只弹一个静态成功提示，背后根本没有发网络请求。

而 Hallmark 整理的破绽远不止上面这四样。整个规则表一共列了 70 多条具体禁令（编号从 Gate 1 到 Gate 85），外加 26 项细节检查（F1 到 F26），按五个维度把大模型的常见 AI 味列了张清单：

二、Hallmark 的运行逻辑与内置模版

如果只是给模型塞一张几十条的禁止清单，模型写着写着还是容易忘。Hallmark 管住模型靠的是三块设计：先抽签定方向、分层设卡，再加一道独立的审查工序。

1. 先抽设计模板，再动手写代码

大模型每次生成都长一样，很大一部分原因是没有具体的视觉参照。Hallmark 在技能包里直接塞了一套现成的设计底座，要求写代码前先走完准备流程：

• 起手检查与单次追问：先读项目根目录有没有 DESIGN.md 或已有样式变量；接着只发一条消息问清四件事：有什么真材料（截图、真实数据）、给谁看、页面要促成哪一个动作、选什么极端语气（明确规定“干净现代”不算语气，因为说了等于没说）。
• 48 套主题材料（Theme Materials）：在 references/themes/ 目录下内置了数十套主题定义。它们给定了纸张底色、字体搭配、表面层次和组件气质。每次生成时，脚本 theme.mjs deal 会从库里随机抽出 3 套候选，挑中后再生成对应的 tokens.css 和 base.css，防止模型每次都滑向那套已经被用烂的“奶油底色 + 衬线大字 + 陶土橙色”。
• 21 种页面宏观结构（Macrostructures）：在 references/macrostructures/ 里定义了工作台（Workbench）、长文档（Long Document）、画廊、信件等 21 种骨架，配合 anatomy.md 按访客的实际意图（订阅、购买、预约、试用）决定页面怎么排，避开千篇一律的三段式落地页。
• 750 多张开放许可图库：用户没给配图时，通过脚本从内置的 Wikimedia 开放图库索引里调取真实摄影照片占位，并在页脚自动加上署名，不让模型用空相框或渐变色块敷衍。

2. 三层分级（Floor / Reflex / Finish）

准备好模版后，70 多条规则按严厉程度分成三档执行：

3. 本地渲染检查与独立子代理复审

自己写完的代码自己审，模型往往会放水。Hallmark 在收尾阶段加了两道外部检验：

1. 脚本静态与渲染双查（sloplint.mjs）：Node 脚本先扫一遍 HTML 和 CSS 源码，接着调起无头浏览器（Puppeteer）在本地把页面按不同宽度渲染出来，检查有没有横向滚动条、文字重叠、对比度不够或者首屏高度超标。
2. 无历史记忆的独立审查（Fresh Context Reviewer）：首屏（Hero）写完和整页收尾时，流程要求单独拉起一个没有之前对话上下文的子代理（Subagent），只把渲染截图和规则表喂给它。新助手按 recapture、rebuild、fix、ship 四档给出判定，有问题就打回去重改。

三、业务落地页的前后改版对比

顺着这套工作流，我拿手头一个日语复习工具的落地页做了次对照实验。先让 Codex 在没有任何额外规则的情况下按需求自由发挥，再调用 Hallmark 走一遍重构。

左边是模型自由发挥生成的初稿，右边是套用规则收敛后的页面：

对照左边红框标出的位置，能看到模型自由发挥时的几个老毛病：

• 大写英文眉标：中文标题上方硬塞了一行 A LITTLE EVERY DAY。
• 伪流程与深色大块：中间铺了一大块深墨绿色背景，上面顶着 RECALL → CHECK → REFLECT，打断了页面的阅读节奏。
• 按钮粘附箭头：主按钮文字后面习惯性缀了个箭头，写成 开始复习 →。
• 卡片套卡片：下方练习区在浅色大框里又套了一层白底小框，框线叠框线。

右边是按纸张主题收敛后的版本：删掉了英文眉标和按钮箭头；拆掉多余的外层嵌套，左侧留极简导航，右侧直接摆出“今日复习 5 个考点”的卡片；视觉重心回到了复习内容本身。虽然细看还是有规整的模板痕迹，但比起左边的初稿，顺眼和好用程度提升了不少。

四、社区负面反馈与实测中的不足

不过实际用下来，结合社区里的讨论，也能看到这类规则插件管不到的地方。

在 Hacker News 的评论区里，有几条典型反馈：

“试过好几个类似的品味约束插件，做出来的页面最后还是会收敛到同一张规矩但干瘪的脸。”“哪怕 README 里放出来的那些示范截图，一眼看过去依然写满了 AI 生成的味道。”

工具跑出 0 FAIL，说明页面避开了明文列出来的那几十种低级破绽，离好看、有辨识度还有一段距离。规则能把下限兜住，审美上限始终在人身上。

在我把 Hallmark 用到自己另一个数据研究站点的落地页时，就遇到了三处工具查不出来、得靠人眼审美去改的细节：

1. 中英文混排的生硬断行：Hallmark 的工艺检查里鼓励给标题加自动平衡（text-wrap: balance）。但在中英文和连字符混排的标题里，这个属性经常把一个完整的英文专有名词从连字符处生生切成两行。最后还是得靠人看出来，手动把自动平衡关掉。
2. 左右对半切导致的首屏割裂：模型很喜欢把首屏做成左右对半平分的双栏网格，把封面和标题塞右边，文章摘要和主按钮甩到好几屏下面，中间还横着一张大图。这种结构并不违规，但读起来非常割裂。后来我按自己的阅读习惯，动手改成了单栏纵向排布，把封面、标题、摘要和入口收拢成一个整体。
3. 空壳化的交互状态：模型写的表单哪怕样式过关、也留了未连接提示，到了真实业务里怎么接状态、怎么给报错反馈，依然得人来一条条核对网络请求。

五、落地页去 AI 味的建议做法

回到开头说的峰终定律，访客对一个页面的印象，主要就看第一眼干不干净，以及最后点按钮、填表单顺不顺畅。

如果不擅长视觉设计，平时也没工夫在对话框里跟模型反复拉扯“再改得现代一点”，有三条省事的做法可以参考：

1. 直接找一个 80 分的成熟模板当底子：在同类产品里挑一个公认排版干净的现成网页或开源模板，把截图和结构喂给 AI，让它照着现成骨架改，比让它自己抽签发挥稳得多。
2. 用一份短清单排除高频 AI 味：不用每次都跑一整套复杂的渲染流水线。把最明显的几条禁令（禁紫蓝渐变与发光球、禁大写英文眉标、禁三列卡套卡、禁假表单）直接写进项目的 DESIGN.md 里，让 AI 只在模板框架内替换品牌色和真实业务数据。
3. 守住首屏和收尾就停手：如果浓重的 AI 塑料感确实拉低了转化，花半小时用 /hallmark audit 扫一遍、清掉明显的破绽很划算。但如果产品本身的需求还没跑通，就没必要在界面修饰上花太多时间。

改几行 CSS、删两个小标签，肉眼马上能看到变化，这种即时反馈很容易让人产生“项目在往前推进”的错觉。只要首屏看着干净克制，能真实跑通业务，及格线就到了，剩下的精力留给产品功能本身更重要。后者，我认为需要更多精力才对。

这次就聊到这里。如果觉得这篇文章有用，欢迎点个赞、在看，或者转发给身边也关心 AI 编程与前端设计的朋友。想及时看到后续更新，也可以把公众号设为星标。感谢阅读，我们下次见。

作者：谷粒 · KUHUNG

个人网站：kuhung.me