Hallmark Hero 增强五级阶梯从纯排版到 Lottie 的最后手段原则【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmarkHallmark 是一个面向 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 CAI 生成插画必须后处理只有当画面需要角色一致性比如吉祥物五种姿势而手绘不划算时才动用 Nanobanana / Recraft V4 / Midjourney。铁律必须后处理——加颗粒、非对称裁切、手工叠层模型原始输出 100% 一眼AI 味。第 4 级Tier D图库插画Storyset / Humaaans / unDraw当预算和工期逼你走捷径时的选择。但 Hallmark 要求绝不允许原样使用至少要换成品牌色、重新构图。原封不动的 Storyset 就是模板感的现场直播。第 5 级Tier ELottie 动画——最后的最后只有当复杂角色动作多帧吉祥物挥手、多关节行走循环无法手工实现时才轮到 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 页面 错延伸阅读真实案例都放在哪docs/recipes.md8 个完整配方每个都标注了选用的增强层级Tide 纯排版 · Streampipe 纯 CSS 终端块 · Maple 面包手绘 SVG ……site/_tests/十几个可直接打开的成品页CSS 注释里盖着macrostructure enrichment的时间戳site/_tests/03-maple-bakery/Tier B 手绘面包 SVG 的现场教学skills/hallmark/references/hero-enrichment.md本文所有原则的原始出处一句话总结Hallmark 的 Hero 增强哲学 阶梯式升级 每级都要够得着才落地 Lottie 永远垫底。记住那个检验标准——删掉增强元素页面还成立才是好增强——你就抓住了 90% 的精髓。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Hallmark Hero 增强五级阶梯从纯排版到 Lottie 的最后手段原则【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmarkHallmark 是一个面向 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 CAI 生成插画必须后处理只有当画面需要角色一致性比如吉祥物五种姿势而手绘不划算时才动用 Nanobanana / Recraft V4 / Midjourney。铁律必须后处理——加颗粒、非对称裁切、手工叠层模型原始输出 100% 一眼AI 味。第 4 级Tier D图库插画Storyset / Humaaans / unDraw当预算和工期逼你走捷径时的选择。但 Hallmark 要求绝不允许原样使用至少要换成品牌色、重新构图。原封不动的 Storyset 就是模板感的现场直播。第 5 级Tier ELottie 动画——最后的最后只有当复杂角色动作多帧吉祥物挥手、多关节行走循环无法手工实现时才轮到 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 页面 错延伸阅读真实案例都放在哪docs/recipes.md8 个完整配方每个都标注了选用的增强层级Tide 纯排版 · Streampipe 纯 CSS 终端块 · Maple 面包手绘 SVG ……site/_tests/十几个可直接打开的成品页CSS 注释里盖着macrostructure enrichment的时间戳site/_tests/03-maple-bakery/Tier B 手绘面包 SVG 的现场教学skills/hallmark/references/hero-enrichment.md本文所有原则的原始出处一句话总结Hallmark 的 Hero 增强哲学 阶梯式升级 每级都要够得着才落地 Lottie 永远垫底。记住那个检验标准——删掉增强元素页面还成立才是好增强——你就抓住了 90% 的精髓。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考