Hallmark Hero 增强五级阶梯：从纯排版到 Lottie 的最后手段原则-酒店常州论坛

Hallmark Hero 增强五级阶梯：从纯排版到 Lottie 的最后手段原则

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

Hallmark 是一个面向 Claude Code、Cursor 和 Codex 的「反 AI 味」设计技能（design skill），它让 AI 生成的页面看起来像人做的，而不是模型批量吐出来的。而 Hero 增强（Hero Enrichment）正是它最容易被误解的部分：不是加个动图就完事，而是一套从纯排版出发、逐级升级、Lottie 动画作为最后手段的五级阶梯。本文带你把这套原则一次看懂。

先搞懂：什么是 Hero 增强？

每个落地页的头部区域（Hero）通常只有一行大标题和一段引导文案。但很多页面会觉得"空的"，于是往标题旁边塞插图、视频、Mockup、动画……这就是Hero 增强：给标题搭一个视觉"搭档"。

Hallmark 的核心立场写在 hero-enrichment.md 开头，一句话就能概括：

增强是可选项，不是默认项。纯排版的 Hero 永远是一个合格答案；宁缺毋滥（Better nothing than bad something）。

它甚至给出一个残酷的检验标准：把增强元素删掉，页面还成立吗？如果成立，说明这个增强"挣到了自己的位置"；如果删掉页面就塌了，说明你只是用一个花哨的动图在给弱排版"拄拐"。

五级阶梯：每一级都要"够得着"才升级

Hallmark 规定：从最高（最克制）的一级开始尝试，只有当前一级做不到，才允许往下走。跳级本身就是"AI 模板味"的标志。

第 0 级（起点）：纯排版，永远合法

不加任何视觉元素，只有标题、导语和按钮。这是 Hallmark 的默认答案——在 recipes 示例里，Tide 播客、Cohort 课程、AnyA 个人站等大量成品都是"no enrichment"。

像上图这样的极简排版，是 Hallmark 鼓励的"最强失败兜底"（the strongest fail-state）：字体选对了、留白对了，页面本身就成立。

第 1 级（Tier A）：纯 CSS 艺术，零依赖

用纯 CSS 的几何形状、渐变、clip-path画出一个视觉主体——比如一张"看起来像真实发票"的卡片、一段火焰图、一个产品对比窗。没有任何图片资源，零字节依赖。

Tally 右侧那张"API 账单卡片"就是典型 Tier A 作品；Tracejam 案例更是用 CSS 矩形在百分比网格上模拟出火焰图瀑布。原则是：能用 CSS 画出来的，绝不用图片。

第 2 级（Tier B）：手工 SVG 插画

CSS 画不动了（比如一条面包、一个吉祥物、一张工作流图），就手写几十行 SVG。参考 custom-craft.md 里的完整配方：60 行 SVG 画一只法棍面包，三条路径，再用stroke-dasharray让割纹在首帧自己画出来。

第 3 级（Tier C）：AI 生成插画（必须后处理）

只有当画面需要角色一致性（比如吉祥物五种姿势）而手绘不划算时才动用 Nanobanana / Recraft V4 / Midjourney。铁律：必须后处理——加颗粒、非对称裁切、手工叠层，模型原始输出 100% 一眼"AI 味"。

第 4 级（Tier D）：图库插画（Storyset / Humaaans / unDraw）

当预算和工期逼你走捷径时的选择。但 Hallmark 要求：绝不允许原样使用，至少要换成品牌色、重新构图。原封不动的 Storyset 就是"模板感"的现场直播。

第 5 级（Tier E）：Lottie 动画——最后的最后

只有当复杂角色动作（多帧吉祥物挥手、多关节行走循环）无法手工实现时，才轮到 Lottie。assets.md 把它标为 "Tier F — last resort"，规则苛刻：

文件 < 2 MB，否则加载状态比动画本身还难看
必须支持暂停/继续（无障碍硬要求）
必须有prefers-reduced-motion静态回退
优先定制委托，而不是从 LottieFiles 直接拉一个通用件

而以下场景明令禁止用 Lottie：旋转的 logo（用 CSS rotate）、对勾描边动画（用 SVG stroke-dasharray）、加载转圈（用 CSS conic-gradient）、悬停微交互（用 CSS transition）。

为什么 Lottie 是"AI 模板味"的新标志？

因为绝大多数 AI 工具一见到"页面需要点动效"，就条件反射地从 Lottie 库拖一个通用动画过来——它跳过了前面所有自己动手的层级。SKILL.md 里把这称为"新的 tell（破绽）"："因为熟悉而伸手去拿 Lottie，是模板化页面的签名。"

更妙的是，Hallmark 自带一个audit命令（评分检查已有页面），它的 65 道 slop-test 关卡中专门有一条会抓这种行为："如果页面有插画，你是在纯 CSS 或手绘 SVG 就能搞定时，默认去用了 Lottie 库吗？"

上线前的 8 个自检问题

hero-enrichment.md 末尾附了一份"起飞前检查单"，8 个问题任何一条答"否"，就改回纯排版 Hero：

它是否传达了排版传达不了的信息？
总体积（海报帧 + 动画 JSON + 颗粒纹理）是否 < 2 MB？
有没有prefers-reduced-motion回退？
视频是否静音、循环、playsinline、带海报帧和字幕轨？
插画是有意图地构建/生成的，而不是从 Lottie 库里抄的？
背景装饰是否控制在单一强调色、<5% 面积（极光色块直接出局）？
删掉它页面还成立吗？
它的调性与页面调性一致吗（Riso 插画配 Brutal 页面 = 错）？

企业官网建设流程全解析