Hallmark 资产选材规范：图标、Logo、插图、摄影与视频的 2026 来源清单与使用纪律

Hallmark 资产选材规范：图标、Logo、插图、摄影与视频的 2026 来源清单与使用纪律

【免费下载链接】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-slop 设计技能）的资产选材核心文档 assets.md。当页面的增强（enrichment）确实需要外部资产——图标、Logo、插图、摄影、视频——时，这份按需加载（load-on-demand）的"资产正典"会告诉你：每个类别应该从哪 3～5 个权威来源取、取来之后必须遵守哪些使用规则、以及哪些来源和用法是必须回避的 AI-slop 信号。读完你将掌握一套可直接执行的资产决策协议：何时用占位符、何时必须自建、图标/Logo 如何统一、生成插图如何提示词与后处理、视频如何压缩与嵌入，以及审计（audit）动词会按什么标准把这些错误抓出来。

一、这份文档在 Hallmark 中的位置：按需加载的资产正典

assets.md 不是一份常驻内存的参考，而是按需加载：只有当某个增强原型（enrichment archetype）确实需要外部资产时才被读取。它承担四个职责：

1. 为每个资产类别收录 3～5 个权威来源（canon）；
2. 明确各来源的许可证条款；
3. 规定**导入模式（import patterns）**与使用规则；
4. 列出必须回避的来源。

它在整个技能中的触发位置，可以从 SKILL.md 的 Step 4 看出：当 hero 增强决策确定"需要外部资产"时，加载 assets.md；当需要手工构建（CSS 艺术、SVG、声明式动画）时，加载 custom-craft.md；当 brief 允许非摄影类图像时，优先考虑 imagery-kit.md。

决策前置反射（the reflex）：在翻到这份资产清单之前，必须先回答两个问题——

1. brief 真的需要图像吗？对照 hero-enrichment.md 的"图像需求检测"（Image-need detection）。默认答案是"纯排版（typography-only）"。
2. 如果需要，能否手工构建？见 custom-craft.md。

只有当两个答案都指向"需要外部资产"时，才进入本文档。这条反射链是 Hallmark 反 slop 的核心：默认不图，能自建不自取，实在不行才选材。

二、占位符策略（Placeholder strategy）

当需要图像、而用户没有提供真实素材时，按以下顺序从正典中取用——跳级取用就是 slop 行为：

可交换性（Swappability）——不可谈判

• 每张占位图上方紧跟一条 HTML 注释：。
• 所有占位 URL 引用单一常量——一个--placeholder-baseCSS 变量或PLACEHOLDER_BASE配置常量。用户改一处即可换掉全站。
• alt 文本描述的是"预期主题"（如"手抛陶杯，亚麻布上的俯视图"），而不是占位符本身（如"Picsum 图片"）。这样用户换入真实照片时 alt 已经正确。

远程资产安全

• 把第三方图片/Logo/视频/图标/字体 URL 视为原型默认值，而非生产默认值。上生产前优先 vendor 化或自托管，除非用户明确要求第三方托管。
• 不得把第三方脚本、追踪像素、widget 或 API 依赖当作资产捷径——资产来源只提供文件，不允许在页面中执行代码。
• 若远程资产留在生产环境，必须在交接（handoff）中说明隐私与可用性权衡：访客会请求第三方主机，页面依赖其正常运行时间与完整性。
• 对用户提供的品牌/客户 Logo，优先官方资产页或检入的文件，不要从无关站点热链 Logo。

反模式

• 绝不内联 base64 占位图（撑爆 CSS）。
• 绝不无关键词随机调用 Unsplash（返回的是未策划的类图库结果）。
• 绝不用 kittens / lorempixel / "tiger.jpg" / cute-default 服务——占位符必须读起来是明显的槽位，而不是内容。
• 绝不在 brief 需要真实产品照片时发 kit 图（例如用抽象瓶子充当咖啡店 hero）——kit 负责氛围，照片负责主体。

三、图标（Icons）

正典（Canon）

使用规则

1. 每项目只选一个库。同一页面混用 Material + Heroicons + Lucide 就是图标套件泄露信号，audit 动词会抓住它（见 slop-test gate 32）。
2. 尺寸只允许 16 / 20 / 24 / 32，对齐网格。18px 图标在这套正典里不存在。
3. 描边默认 2px（多数库的 regular 字重）。仅在图标小于 20px 或作为强调时切到 bold（2.5px）。
4. 单色 +currentColor。图标继承文字颜色。品牌色只允许出现在唯一的主 CTA 上——不作为装饰。
5. 不用 emoji 当图标。Emoji 破坏对齐、可访问性和品牌一致性，用真正的图标库。

导入模式

// Lucide — React（最常见） import { ArrowRight, Check, X } from "lucide-react";  // Phosphor — React，带 weight 属性 import { ArrowRight } from "@phosphor-icons/react";  // Heroicons — React 或静态 HTML import { ArrowRightIcon } from "@heroicons/react/24/outline"; // Tabler — 通过 CDN 的 vanilla HTML 

避免

• Font Awesome free—— 臃肿、过时，2018-SaaS 观感；600+ 通用字形读起来都是"我先挑了图标再设计页面"。
• 非 Material 项目里的 Material Icons—— 带来与页面其余部分不匹配的 Google 观感。
• 描边宽度不一致的图标包—— 选字重统一的库，杂烩混搭读起来像随机。
• emoji 当语义图标—— 颜色、尺寸、字重、对齐全部失控。

四、品牌 / 公司 Logo（Brand / company logos）

正典

使用规则

1. Logo 墙只用单色。用 Simple Icons 默认色或官方单色变体。混色 Logo 墙读起来是 2018-SaaS。
2. 按高度对齐，不按宽度。定一个基线（通常 32–48px 高），宽度自由浮动。品牌比例很重要，拉伸是破绽。
3. 2～3 倍高度的留白。Logo 需要呼吸空间。32px 的 Logo 墙需要 64–96px 的间距。
4. 无发丝边框、无发光光晕。就是页面上的图形标记。

导入模式

  import { siGithub } from 'simple-icons/icons'; 

避免

• 全彩 Logo 网格—— 视觉混乱，读起来是 2018 年。
• 拉伸/压扁的图形—— 始终保持宽高比。
• 模板套件里的占位客户 Logo（"ACME"、"Initech"、"Hooli"）—— 用真实客户 Logo，或者干脆不要 Logo 墙。虚假的社会证明比没有更糟。
• 混用字标与图形标—— 任何单面墙要么全字母标、要么全图形标。

五、生成插图（Generated illustration，增强层级中的 Tier C）

当角色或特定场景无法经济地手工构建时使用。必须后处理（post-process），完整纪律见 custom-craft.md 的 Tier E。

正典

使用规则

1. 永远后处理。加颗粒、非对称裁切、手绘叠加、调色。裸模型输出 100% 读起来像 AI。
2. 用参考图维持品牌一致性。Nanobanana 2 的角色一致性能力正是它相对 Midjourney 的差异点；喂给它品牌资产，让生成结果保持在风格内。
3. 在宏结构注释中打上模型戳记（generated: nanobanana-2 · post-processed）。溯源很重要。
4. 验证 Google 生成图带有 SynthID 水印。
5. 不要动画。这些模型都不输出多帧；需要动效就用 custom-craft 组装。

避免

• 对称构图—— 算法感，AI 破绽。务必非对称裁切。
• 平滑网格流体脸（smooth-mesh-blob faces）—— 2024 年通用 AI 角色脸。
• 默认光照 + 蓝调背景—— 通用 AI 美学。在提示词中指定品牌锚定色与非常规光照。
• 六根手指 / 双倍家具 / 不可能的室内—— 2026 年少了但仍潜伏，检查。
• 直接发布未修改输出—— 见规则 1。

提示词配方（Nanobanana 2）

Subject: <一个具体主体> 处于 <一个具体姿势>。 Style: <有名字的风格 — "risograph print"、"1960s editorial illustration"、 "ink-on-paper line drawing"，而不是 "modern flat" 或 "clean illustration">。 Composition: asymmetric, <偏离中心的主体>, <非常规裁切>。 Lighting: <有名字的光照 — "side-lit, late afternoon"、"overcast diffuse">。 Reference: <附加品牌资产 / 情绪板以维持角色一致性>。 Constraints: no smooth mesh-gradient, no aurora background, no symmetric layout, no smiling people-on-laptops poses.

具体的提示词产生具体的图；泛泛的提示词产生 AI 破绽。

六、库插图（Library illustrations，Tier D——不是首选）

当预算和工期迫使走捷径、连 Tier C 都嫌重时使用。

正典

使用规则

1. 永远把颜色改成你的品牌锚定色。库默认色就是"库的样子"。换掉它。
2. 能裁切/重组就做。未修改的插图躺在上百个竞品站点上，一次裁切就能差异化。
3. 每项目一个库。混用 Storyset + Humaaans + unDraw = 视觉混乱。
4. 避开标志性姿势—— 笔记本前的家伙配浮动气泡、戴耳机的女士在云上、角色举着巨屏手机。你在 Dribbble 2021 上见过的，受众也都见过。
5. 使用超过 3 次就定制采购。如果插图出现在 hero、功能块和宣传物料里，单件委托（自由职业 $200–$600，无限量订阅 $399–$999/月）在品牌一致性上胜过库。

避免

• Open Doodles—— 过时，2019 手绘美学已被 2026 的"触觉反抗"取代。
• "现代扁平"通用姿势—— 整个美学就是 AI 训练分布默认值。
• 套了库滤镜的 AI 生成插图—— 两方缺点集于一身。
• 贴了人物剪影的图库照片—— 违背物理，看着像鬼魂。

七、App mockup / 设备框架（App mockups / device frames）

正典

使用规则

1. SaaS / Web 应用用浏览器框架。传达"这是真的、在网页上"。用 Browserframe 或手工构建（1px 发丝线 + 三个 macOS 圆点就够）。
2. 干净的分屏用无框浮动。截图美到能裸奔时。要求截图质量高。
3. 设备框架（iPhone/iPad）克制使用。一个 hero mockup 封顶——再多就变成通用模板感。
4. 倾斜 1～3°。增加生气。0° 太平，5°+ 太醉。
5. 只用编号图钉标注。编号圆点（1、2、3）配下方对应的图例说明。不要箭头+标签式标注（2018 UX，过时）。只标注新功能，不标注显而易见的。

避免

• 亮面塑料设备边框—— 2015 观感。用极简框架或不用。
• 标注混乱—— 图钉比像素还多。三个编号图钉已算多，五个就是太多。
• 拉伸宽高比—— 绝不把 mockup 缩放超出其自然比例。
• 截图里可见的 Figma 原型痕迹（ghost 框、"hover" 指示器）—— 导出前清理。

八、Hero / demo 视频（Hero / demo video）

正典（没有自己的素材时）

使用规则

1. 顺序遵循编码链：AV1 → WebM VP9 → MP4 H.264。浏览器选第一个支持的。同等质量下 AV1 比 H.264 小 30–50%；H.264 是通用兜底。
2. 永远是 autoplay-muted-loop-playsinline：

1. 永远带poster=""—— 防止布局位移，给 reduced-motion 用户静态兜底。
2. LCP 元素上fetchpriority="high"。绝不在 hero 上loading="lazy"——那会杀死 LCP（slop-test gate 对此有硬性检查，见 anti-patterns.md 的 "Lazy-loaded LCP"）。
3. VTT 字幕保证可访问性。即使静音演示循环也要有；用户可能会取消静音。
4. 自动播放无声音。浏览器本来就会拦截，但原则要立住。

压缩

• ffmpeg 提供控制力：
  • VP9：ffmpeg -i input.mp4 -c:v libvpx-vp9 -b:v 0 -crf 30 -c:a libopus -b:a 128k output.webm
  • AV1：ffmpeg -i input.mp4 -c:v libaom-av1 -crf 30 -c:a aac output.mp4
  • H.264：ffmpeg -i input.mp4 -c:v libx264 -preset slow -crf 23 -c:a aac output.mp4
• HandBrake 适合 GUI / 批处理：从 "Vimeo YouTube HQ 1080p" 预设起步，web 用途把码率压到 3–4 Mbps。

避免

• 带水印的图库素材—— 角落里的 "Pexels.com" 印记。
• 标 60fps 的 30fps—— 现代显示器上一眼穿帮。
• 音乐太重的演示却没有静音开关—— 疏远无障碍用户和嘈杂环境用户。
• hero 视频上loading="lazy"—— 杀死 LCP，拖垮 Core Web Vitals。

仓库里有真实的视频嵌入实证：site/_tests/_thumbs/ 目录保存了各测试站点的演示循环视频（如slow-pour-loop.mp4、anya-loop.mp4），hero 增强原型 E1/E2 的实现可参考 site/_tests/05-tracejam-saas/index.html。

九、摄影（Photography）

正典

使用规则

1. 永远调整来源。渐变叠加、裁切、去饱和、模糊或品牌色洗。未修改的 Unsplash 照片本周躺在一百个竞品站点上，一次裁切就能差异化。
2. 色调匹配 brief。企业/B2B：中性色板、自然光、真实办公空间。消费/生活方式：暖光、人类情感。科技/创业：极简背景、上手互动。
3. 代表性多样化。Nappy.co 是最好用的免费精选来源；Unsplash 和 Pexels 有多样性但要花搜索功夫。
4. 比例要合身。hero 摄影通常桌面 16/9，移动端 4/3 或 9/16。

避免

• 带可见 Logo/商标的照片—— 版权风险。
• 过度处理的 HDR—— 过时、不真实。
• 摆拍"团队合影"—— 通用，读起来像图库。
• 未修改的 Unsplash—— 一百个竞品站点这周用了同一张。

十、抽象背景（Abstract backgrounds）

正典

使用规则

1. CSS 渐变优先。零字节、无限缩放、@property平滑动画。CSS 渐变能解决的事，绝不伸手拿 SVG 或图片。
2. 两到三个色标。超过三个读起来像生成物。选择共享色相、明度递进的色标。
3. 颗粒用 SVG，透明度 < 0.1，mix-blend-mode: multiply。零成本、无资产、看起来像纸。
4. 只在 hero 或强调卡上用——绝不整页。100vh 渐变是破绽；40vh 的 hero 渐变加其余平面纸色是有意为之。
5. 整页渐变不做动画。hero 强调色 30 秒的细微漂移可以；整页缓慢旋转的 mesh 渐变就是新的极光流体反模式。

配方（CSS 渐变 + SVG 颗粒）

.hero { background: linear-gradient(135deg, color-mix(in oklch, var(--color-paper) 100%, var(--color-accent) 4%), color-mix(in oklch, var(--color-paper) 100%, var(--color-paper-2) 50%)); position: relative; } .hero::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml;utf8,"); opacity: 0.06; mix-blend-mode: multiply; pointer-events: none; }

避免

• 极光流体（aurora blobs）—— 2022 Dribbble 观感，关键反模式。
• 紫到青网格渐变—— 2023 默认值，关键反模式。
• 漂浮光球/球体—— 通用 3D 氛围。
• 粒子/星场—— 2010 年代怀旧，分散注意力。
• 整页动画 mesh 渐变—— 旋转渐变横幅的现代版。

十一、Lottie / Rive（Tier F——最后手段）

正典

使用规则

1. Lottie 是最后手段。只有复杂角色动画无法手工构建时才用（见 custom-craft.md 的 Tier F）。
2. 定制委托优于库抽取。一个符合你品牌的 LottieFiles 社区动画存在；一个符合品牌又不像其他社区动画的很少。hero 级工作建议委托（Upwork $100–$300；工作室 $1,000+）。
3. 文件 < 2 MB。更重的文件会被自己的加载状态打败。
4. 支持暂停/恢复。无障碍必需（动敏感用户需要控制权）。
5. reduced-motion 兜底到静态关键帧。必须。
6. 别用 Lottie 做 CSS 能做的事。旋转 Logo、勾选绘制、加载 spinner、hover 微交互——全是 CSS 领地。技能在 slop test 中会抓住 "Lottie 捷径" 反模式（anti-patterns.md 的 "Lottie shortcut"）。

避免

• 2019 时代过度顺滑的动画—— 过时、缺性格。
• 比页面本身还重的动画—— 200KB 页面配 5MB Lottie。
• 没有暂停/恢复的动画—— 无障碍失败。
• 未修改使用的 LottieFiles 社区素材—— 读起来就是"我从库里挑的"。

十二、速查表：什么活用什么源

拿不准就自己构建。在 2026 年，阻力最小的路径与 AI 破绽最少的路径是同一条路。

十三、仓库内的执行证据：规则如何被审计和测试

assets.md 不是孤立的清单——它在仓库里有完整的执行与检验闭环：

1. 按需加载协议：SKILL.md 的 Step 3/4 明确规定 assets.md "仅在增强原型需要外部资产时加载"（SKILL.md），并与 hero-enrichment.md 的 E1–E8 原型、imagery-kit.md 的 kit 清单协同工作。

2. slop-test 门禁：slop-test.md 的多道 gate 与本文档一一对应——gate 32 检查"是否混用两个以上图标库"、gate 57 检查"是否手绘伪造浏览器/手机/代码编辑器 chrome"（对应 anti-patterns.md 的 "Re-drawn UI chrome"）、gate 60 检查"是否用 emoji 当功能图标"。assets.md 的每条 "Avoid" 几乎都有一条 gate 或反模式条目在背后执法。

3. audit 动词执行：verbs/audit.md 规定审计按严重度分组报告，对"混用图标集"这类资产问题会标注文件路径与行号；测试目录 site/_tests/07-foundry-compliance/brief.md 中甚至有"纯 CSS 的 8 个单色字标占位、无真实客户 Logo、无 Lottie、无 Midjourney"的实战案例，演示了资产纪律在真实 brief 中的落地。

4. 真实产物佐证：仓库 site/examples/ 下的 bananastudio、hyperlane、najm、tally、wayfare 等示例站点，以及 site/_tests/ 的 01–13 号测试（含 05-tracejam-saas 的纯 CSS mockup 视频、09-slow-pour 等），都是"能自建不自取、必取则有据"原则的具体产物。

结语：资产纪律是反 slop 的地基

assets.md 给出的不是一份简单的"去哪下载"清单，而是一套完整的选择-使用-回避协议：占位符必须可交换且像占位符；图标每项目只许一个库、尺寸与描边统一；Logo 墙只许单色、按高对齐；生成插图必须后处理并打溯源戳记；视频必须遵循编码链与 LCP 纪律；抽象背景默认 CSS 渐变而非极光流体；Lottie 永远是最后手段。这套纪律与 anti-patterns.md、slop-test.md、verbs/audit.md 相互咬合，构成 Hallmark"让界面看起来是做的、而不是生成的"承诺中最可检验的一环。对你自己的项目，这份规范可以直接照搬为前端团队的资产使用守则——它会让你发布的每一个图标、Logo 和视频都经得起同行与用户的审视。

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