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的资产正典会告诉你每个类别应该从哪 35 个权威来源取、取来之后必须遵守哪些使用规则、以及哪些来源和用法是必须回避的 AI-slop 信号。读完你将掌握一套可直接执行的资产决策协议何时用占位符、何时必须自建、图标/Logo 如何统一、生成插图如何提示词与后处理、视频如何压缩与嵌入以及审计audit动词会按什么标准把这些错误抓出来。一、这份文档在 Hallmark 中的位置按需加载的资产正典assets.md 不是一份常驻内存的参考而是按需加载只有当某个增强原型enrichment archetype确实需要外部资产时才被读取。它承担四个职责为每个资产类别收录 35 个权威来源canon明确各来源的许可证条款规定**导入模式import patterns**与使用规则列出必须回避的来源。它在整个技能中的触发位置可以从 SKILL.md 的 Step 4 看出当 hero 增强决策确定需要外部资产时加载 assets.md当需要手工构建CSS 艺术、SVG、声明式动画时加载 custom-craft.md当 brief 允许非摄影类图像时优先考虑 imagery-kit.md。决策前置反射the reflex在翻到这份资产清单之前必须先回答两个问题——brief 真的需要图像吗对照 hero-enrichment.md 的图像需求检测Image-need detection。默认答案是纯排版typography-only。如果需要能否手工构建见 custom-craft.md。只有当两个答案都指向需要外部资产时才进入本文档。这条反射链是 Hallmark 反 slop 的核心默认不图能自建不自取实在不行才选材。二、占位符策略Placeholder strategy当需要图像、而用户没有提供真实素材时按以下顺序从正典中取用——跳级取用就是 slop 行为#来源何时使用1Hallmark imagery kitimagery-kit.mdbrief 允许非摄影类图像SaaS 落地页、宣言页、代理/工作室封面、字体主导的 portfolio、编辑导向营销。kit 的调性匹配时永远优先。2手工构建 SVG 合成custom-craft.md 的 Tier B编辑-排版类 brief图像可以是印章/字标/色块合成。kit 不承载该调性时使用。3Picsum—https://picsum.photos/seed/seed/w/h通用图片槽关键词锚定不重要。用确定性 seed品牌名槽名保证同一次渲染得到同一张图。4Unsplash Source—https://source.unsplash.com/wxh/?keywords关键词锚定的图片槽——食物、旅行、肖像、真实产品。传 12 个具体关键词绝不传零个。5本地public/placeholder-type.{jpg,svg}无第三方依赖的自包含项目。仓库内检入一张中性灰块 SVG。可交换性Swappability——不可谈判每张占位图上方紧跟一条 HTML 注释!-- TODO: Replace with real thing, target size: WxH --。所有占位 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库URL数量最佳用途Lucidelucide.dev1,600现代 SaaS / 开发工具默认。2026 基线。积极维护。Phosphor Iconsphosphoricons.com9,0006 档字重thin / light / regular / bold / fill / duotone需要同一图标的不同字重做强调不混套件。Heroiconsheroicons.com~300Tailwind / shadcn 项目。严格精选、有主见。Tabler Iconstabler-icons.io5,90024×24 网格广度——Lucide 和 Heroicons 都没覆盖的符号。Iconoiriconoir.com~1,500手绘气质免费层级慷慨。使用规则每项目只选一个库。同一页面混用 Material Heroicons Lucide 就是图标套件泄露信号audit 动词会抓住它见 slop-test gate 32。尺寸只允许 16 / 20 / 24 / 32对齐网格。18px 图标在这套正典里不存在。描边默认 2px多数库的 regular 字重。仅在图标小于 20px 或作为强调时切到 bold2.5px。单色 currentColor。图标继承文字颜色。品牌色只允许出现在唯一的主 CTA 上——不作为装饰。不用 emoji 当图标。Emoji 破坏对齐、可访问性和品牌一致性用真正的图标库。导入模式// Lucide — React最常见 import { ArrowRight, Check, X } from lucide-react; ArrowRight size{20} strokeWidth{2} / // Phosphor — React带 weight 属性 import { ArrowRight } from phosphor-icons/react; ArrowRight size{20} weightregular / // Heroicons — React 或静态 HTML import { ArrowRightIcon } from heroicons/react/24/outline; // Tabler — 通过 CDN 的 vanilla HTML svg width20 height20use hrefhttps://cdn.jsdelivr.net/npm/tabler/iconslatest/icons/arrow-right.svg //svg避免Font Awesome free—— 臃肿、过时2018-SaaS 观感600 通用字形读起来都是我先挑了图标再设计页面。非 Material 项目里的 Material Icons—— 带来与页面其余部分不匹配的 Google 观感。描边宽度不一致的图标包—— 选字重统一的库杂烩混搭读起来像随机。emoji 当语义图标—— 颜色、尺寸、字重、对齐全部失控。四、品牌 / 公司 LogoBrand / company logos正典来源URL数量最佳用途Simple Iconssimpleicons.org3,400行业标准。单色 SVG 官方 hexMIT 许可。Logo 墙的默认。SVGLsvgl.app600精选、无垃圾质量门槛高于 Simple Icons。theSVGthesvg.org4,000含 dark/light/mono/wordmark 变体提供 npm MCP server面向 AI你的栈支持时是 Simple Icons 的超集。Brandfetchbrandfetch.com2,200 万 品牌付费 API。Logo 配色 字体 品牌护栏。适合构建输入域名反填品牌的 CMS / 表单。官方品牌资产页各公司—需要准确度时永远先查。多数品牌有 media-kit 页。使用规则Logo 墙只用单色。用 Simple Icons 默认色或官方单色变体。混色 Logo 墙读起来是 2018-SaaS。按高度对齐不按宽度。定一个基线通常 32–48px 高宽度自由浮动。品牌比例很重要拉伸是破绽。23 倍高度的留白。Logo 需要呼吸空间。32px 的 Logo 墙需要 64–96px 的间距。无发丝边框、无发光光晕。就是页面上的图形标记。导入模式!-- Simple Icons via CDN — 最简单 -- img srchttps://cdn.simpleicons.org/github altGitHub height32 img srchttps://cdn.simpleicons.org/figma/aaaaaa altFigma height32 !-- 单色覆盖 -- !-- npm -- !-- npm install simple-icons -- import { siGithub } from simple-icons/icons; svg viewBox0 0 24 24path d{siGithub.path} fillcurrentColor //svg !-- SVGL via API -- img srchttps://api.svgl.app/?slugvercel altVercel避免全彩 Logo 网格—— 视觉混乱读起来是 2018 年。拉伸/压扁的图形—— 始终保持宽高比。模板套件里的占位客户 LogoACME、Initech、Hooli—— 用真实客户 Logo或者干脆不要 Logo 墙。虚假的社会证明比没有更糟。混用字标与图形标—— 任何单面墙要么全字母标、要么全图形标。五、生成插图Generated illustration增强层级中的 Tier C当角色或特定场景无法经济地手工构建时使用。必须后处理post-process完整纪律见 custom-craft.md 的 Tier E。正典模型URL成本最佳用途输出Nanobanana 2 / Gemini 2.5 Flash ImageGoogle AI$0.039/张跨面板角色一致性、快速迭代、通过参考图维持品牌风格、带文字的 infographicPNG支持透明Recraft V4recraft.ai~$0.04/张唯一能产出生产级 SVG 的主流模型。需要缩放的 Logo、图标、插图。SVG PNGMidjourney v8midjourney.com~$0.14/张美学美感、氛围静帧、艺术方向PNGFlux 2blackforestlabs.ai~$0.03/张照片级写实——皮肤、织物、产品细节、手PNG使用规则永远后处理。加颗粒、非对称裁切、手绘叠加、调色。裸模型输出 100% 读起来像 AI。用参考图维持品牌一致性。Nanobanana 2 的角色一致性能力正是它相对 Midjourney 的差异点喂给它品牌资产让生成结果保持在风格内。在宏结构注释中打上模型戳记generated: nanobanana-2 · post-processed。溯源很重要。验证 Google 生成图带有 SynthID 水印。不要动画。这些模型都不输出多帧需要动效就用 custom-craft 组装。避免对称构图—— 算法感AI 破绽。务必非对称裁切。平滑网格流体脸smooth-mesh-blob faces—— 2024 年通用 AI 角色脸。默认光照 蓝调背景—— 通用 AI 美学。在提示词中指定品牌锚定色与非常规光照。六根手指 / 双倍家具 / 不可能的室内—— 2026 年少了但仍潜伏检查。直接发布未修改输出—— 见规则 1。提示词配方Nanobanana 2Subject: 一个具体主体 处于 一个具体姿势。 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 illustrationsTier D——不是首选当预算和工期迫使走捷径、连 Tier C 都嫌重时使用。正典来源URL许可最佳用途Storysetstoryset.comFreepik免费需署名付费去除可开关元素动画的 SVG 插图站内换色。引导流程、功能讲解。Humaaanshumaaans.comPablo StanleyCC0可混搭的角色多样的姿势/服装/肤色。需要人又不想要图库照片的 hero。unDrawundraw.coMIT开源 SVG导出时换色。定制后仍值得尊重——不定制则饱和且一眼可辨。IRA Designiradesign.ioCreative Tim免费/付费面向 B2B / 企业客户的忧郁、精致等距场景。Open Peepsopenpeeps.comCC0手绘角色库质朴风格介于摄影与插画之间。使用规则永远把颜色改成你的品牌锚定色。库默认色就是库的样子。换掉它。能裁切/重组就做。未修改的插图躺在上百个竞品站点上一次裁切就能差异化。每项目一个库。混用 Storyset Humaaans unDraw 视觉混乱。避开标志性姿势—— 笔记本前的家伙配浮动气泡、戴耳机的女士在云上、角色举着巨屏手机。你在 Dribbble 2021 上见过的受众也都见过。使用超过 3 次就定制采购。如果插图出现在 hero、功能块和宣传物料里单件委托自由职业 $200–$600无限量订阅 $399–$999/月在品牌一致性上胜过库。避免Open Doodles—— 过时2019 手绘美学已被 2026 的触觉反抗取代。现代扁平通用姿势—— 整个美学就是 AI 训练分布默认值。套了库滤镜的 AI 生成插图—— 两方缺点集于一身。贴了人物剪影的图库照片—— 违背物理看着像鬼魂。七、App mockup / 设备框架App mockups / device frames正典来源URL最佳用途Browserframebrowserframe.com带标注的浏览器 移动设备框架为 SaaS 演示截图而生。Ray.soray.somacOS 窗口框架里的代码片段。开发者工具落地页完美匹配。Cleanmockcleanmock.com移动设备框架极简适合应用商店风格的 hero。Mockup.stylemockup.style通用设备 浏览器构建器Figma 友好导出。Device Shotsdeviceshots.com免费设备生成器多种框架样式出图快。使用规则SaaS / Web 应用用浏览器框架。传达这是真的、在网页上。用 Browserframe 或手工构建1px 发丝线 三个 macOS 圆点就够。干净的分屏用无框浮动。截图美到能裸奔时。要求截图质量高。设备框架iPhone/iPad克制使用。一个 hero mockup 封顶——再多就变成通用模板感。倾斜 13°。增加生气。0° 太平5° 太醉。只用编号图钉标注。编号圆点1、2、3配下方对应的图例说明。不要箭头标签式标注2018 UX过时。只标注新功能不标注显而易见的。避免亮面塑料设备边框—— 2015 观感。用极简框架或不用。标注混乱—— 图钉比像素还多。三个编号图钉已算多五个就是太多。拉伸宽高比—— 绝不把 mockup 缩放超出其自然比例。截图里可见的 Figma 原型痕迹ghost 框、hover 指示器—— 导出前清理。八、Hero / demo 视频Hero / demo video正典没有自己的素材时来源URL许可最佳用途Mixkitmixkit.coEnvato免注册、免署名、1080p HD质量-成本甜点区。Coverrcoverr.co免费商用专为 hero 背景与环境循环优化。Pexels Videospexels.com/videosCC0最大的免费库有 4K。走量。Videvovidevo.net分级免费 专业社区素材 动态图形。使用规则source顺序遵循编码链AV1 → WebM VP9 → MP4 H.264。浏览器选第一个支持的。同等质量下 AV1 比 H.264 小 30–50%H.264 是通用兜底。永远是 autoplay-muted-loop-playsinlinevideo autoplay muted loop playsinline preloadmetadata poster/hero-poster.webp fetchpriorityhigh source src/hero.av1.mp4 typevideo/mp4; codecsav01.0.05M.08 source src/hero.vp9.webm typevideo/webm source src/hero.h264.mp4 typevideo/mp4 /video永远带poster—— 防止布局位移给 reduced-motion 用户静态兜底。LCP 元素上fetchpriorityhigh。绝不在 hero 上loadinglazy——那会杀死 LCPslop-test gate 对此有硬性检查见 anti-patterns.md 的 Lazy-loaded LCP。VTT 字幕保证可访问性。即使静音演示循环也要有用户可能会取消静音。自动播放无声音。浏览器本来就会拦截但原则要立住。压缩ffmpeg 提供控制力VP9ffmpeg -i input.mp4 -c:v libvpx-vp9 -b:v 0 -crf 30 -c:a libopus -b:a 128k output.webmAV1ffmpeg -i input.mp4 -c:v libaom-av1 -crf 30 -c:a aac output.mp4H.264ffmpeg -i input.mp4 -c:v libx264 -preset slow -crf 23 -c:a aac output.mp4HandBrake 适合 GUI / 批处理从 Vimeo YouTube HQ 1080p 预设起步web 用途把码率压到 3–4 Mbps。避免带水印的图库素材—— 角落里的 Pexels.com 印记。标 60fps 的 30fps—— 现代显示器上一眼穿帮。音乐太重的演示却没有静音开关—— 疏远无障碍用户和嘈杂环境用户。hero 视频上loadinglazy—— 杀死 LCP拖垮 Core Web Vitals。仓库里有真实的视频嵌入实证site/_tests/_thumbs/ 目录保存了各测试站点的演示循环视频如slow-pour-loop.mp4、anya-loop.mp4hero 增强原型 E1/E2 的实现可参考 site/_tests/05-tracejam-saas/index.html。九、摄影Photography正典来源URL许可最佳用途Unsplashunsplash.comCC0最大的免费图库情绪化/电影感每周社区上传。起点。Pexelspexels.comCC0350 万 免费照片摄影师多元。Nappy.conappy.co免费 付费为多样性与代表性精选。高级视觉方向。Shotstashshotstash.com免费生活方式/极简美学。更小但精挑细选。Open Peepsopenpeeps.comCC0想要多样性又不想图库照片感的插画角色库。使用规则永远调整来源。渐变叠加、裁切、去饱和、模糊或品牌色洗。未修改的 Unsplash 照片本周躺在一百个竞品站点上一次裁切就能差异化。色调匹配 brief。企业/B2B中性色板、自然光、真实办公空间。消费/生活方式暖光、人类情感。科技/创业极简背景、上手互动。代表性多样化。Nappy.co 是最好用的免费精选来源Unsplash 和 Pexels 有多样性但要花搜索功夫。比例要合身。hero 摄影通常桌面 16/9移动端 4/3 或 9/16。避免带可见 Logo/商标的照片—— 版权风险。过度处理的 HDR—— 过时、不真实。摆拍团队合影—— 通用读起来像图库。未修改的 Unsplash—— 一百个竞品站点这周用了同一张。十、抽象背景Abstract backgrounds正典来源URL输出最佳用途CSS 渐变原生n/a —— 直接写零字节GPU 合成默认。线性或径向最多 23 个色标。Mesh Gradient Generatorlearnui.design 工具Figma / SVG 导出Apple 风网格渐变导出带有机噪点。fffuel.cofffuel.coSVGgggrain颗粒噪点、ffflux流体渐变、uuunion波浪网格。可组合。CSS Gradientcssgradient.ioCSS 字符串快速取色器复制即用。使用规则CSS 渐变优先。零字节、无限缩放、property平滑动画。CSS 渐变能解决的事绝不伸手拿 SVG 或图片。两到三个色标。超过三个读起来像生成物。选择共享色相、明度递进的色标。颗粒用 SVGfeTurbulence透明度 0.1mix-blend-mode: multiply。零成本、无资产、看起来像纸。只在 hero 或强调卡上用——绝不整页。100vh 渐变是破绽40vh 的 hero 渐变加其余平面纸色是有意为之。整页渐变不做动画。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/svgxml;utf8,svg xmlnshttp://www.w3.org/2000/svgfilter idnfeTurbulence baseFrequency0.9 numOctaves2//filterrect width100% height100% filterurl(%23n)//svg); opacity: 0.06; mix-blend-mode: multiply; pointer-events: none; }避免极光流体aurora blobs—— 2022 Dribbble 观感关键反模式。紫到青网格渐变—— 2023 默认值关键反模式。漂浮光球/球体—— 通用 3D 氛围。粒子/星场—— 2010 年代怀旧分散注意力。整页动画 mesh 渐变—— 旋转渐变横幅的现代版。十一、Lottie / RiveTier F——最后手段正典来源URL最佳用途LottieFileslottiefiles.comLottie 生态。免费 专业层npm CDNFigma 插件AI 创作器。Riverive.app带状态机的交互式实时动画。原生运行时比 Lottie 更适合 App UI 微交互。使用规则Lottie 是最后手段。只有复杂角色动画无法手工构建时才用见 custom-craft.md 的 Tier F。定制委托优于库抽取。一个符合你品牌的 LottieFiles 社区动画存在一个符合品牌又不像其他社区动画的很少。hero 级工作建议委托Upwork $100–$300工作室 $1,000。文件 2 MB。更重的文件会被自己的加载状态打败。支持暂停/恢复。无障碍必需动敏感用户需要控制权。reduced-motion 兜底到静态关键帧。必须。别用 Lottie 做 CSS 能做的事。旋转 Logo、勾选绘制、加载 spinner、hover 微交互——全是 CSS 领地。技能在 slop test 中会抓住 Lottie 捷径 反模式anti-patterns.md 的 Lottie shortcut。避免2019 时代过度顺滑的动画—— 过时、缺性格。比页面本身还重的动画—— 200KB 页面配 5MB Lottie。没有暂停/恢复的动画—— 无障碍失败。未修改使用的 LottieFiles 社区素材—— 读起来就是我从库里挑的。十二、速查表什么活用什么源需求第一选择第二选择UI 图标chevron、check、XLucidePhosphor / HeroiconsLogo 墙的品牌 LogoSimple IconsSVGL / theSVG品牌自有的 hero 插图手工构建Tier A 或 B定制委托角色驱动的 hero 插图Nanobanana 2Tier C委托然后库需要缩放的 SVG 插图Recraft V4Figma 手工 → SVG带多样性的照片Nappy.coUnsplash 手动调色产品演示视频自定义录屏跳过没有图库素材合适纹理背景CSS 渐变 SVG 颗粒Mesh Gradient Generator角色动画定制 Lottie 委托LottieFiles 社区 定制加载 spinnerCSS conic-gradient别碰 Lottie确认时的勾选绘制SVGstroke-dasharray别碰 Lottie拿不准就自己构建。在 2026 年阻力最小的路径与 AI 破绽最少的路径是同一条路。十三、仓库内的执行证据规则如何被审计和测试assets.md 不是孤立的清单——它在仓库里有完整的执行与检验闭环按需加载协议SKILL.md 的 Step 3/4 明确规定 assets.md 仅在增强原型需要外部资产时加载SKILL.md并与 hero-enrichment.md 的 E1–E8 原型、imagery-kit.md 的 kit 清单协同工作。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 或反模式条目在背后执法。audit 动词执行verbs/audit.md 规定审计按严重度分组报告对混用图标集这类资产问题会标注文件路径与行号测试目录 site/_tests/07-foundry-compliance/brief.md 中甚至有纯 CSS 的 8 个单色字标占位、无真实客户 Logo、无 Lottie、无 Midjourney的实战案例演示了资产纪律在真实 brief 中的落地。真实产物佐证仓库 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考