2026/9/15 14:30:35
FEATURED · 精选文章 
Hallmark 占位素材怎么换TODO 注释、统一 base 常量与目标 alt 写法【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmarkHallmark 在为需要真实照片的 brief电商、食品、摄影组合、团队、旅行等生成页面时如果你还没有提供真实图片它会按 assets.md § Placeholder strategy 填入占位素材并且明确拒绝把虚构的库存照片当作最终设计发布Never ship invented stock photos as if they were the final design。于是常见的交付状态是页面已经成形但若干图片槽位仍是占位图。这篇文章讲怎么把这些占位素材换成真实资产找到槽位、改来源、处理 alt、验证结果。整个过程依赖 Hallmark 强制的三条写法约定——TODO 注释、统一 base 常量、面向目标主体的 alt。先看懂它们替换就变成了机械操作。占位素材的三条约定assets.md 中Swappability一节被标注为non-negotiable共三条TODO 注释每个占位图片正上方都有一条 HTML 注释格式为!-- TODO: Replace with real thing, target size: WxH --其中thing是待替换进去的真实主体名称WxH是目标宽×高例如600×900。统一 base 常量所有占位 URL 都引用同一个常量——--placeholder-baseCSS 变量或PLACEHOLDER_BASE配置常量。改一处整站占位图一起换。目标 altalt 文本描述的是预期主体如 Hand-thrown ceramic mug, top-down on linen而不是占位图本身如 Picsum image。等真实照片换进来时alt 已经是对的。初始占位图来自一个五级来源顺序Hallmark imagery kit → 手工 SVG → Picsum → Unsplash Source → 本地public/placeholder-type.{jpg,svg}跳过层级会被视为 slop move不同层级的占位 URL 形态不同替换前先看清当前 URL 属于哪一层。第一步定位所有占位槽位由于技能强制每个占位图都带 TODO 注释最快的定位方式是在项目里全局搜索字符串TODO: Replace。每个命中都会直接告诉你替换目标的两件事真实资产是什么、尺寸该是多少。imagery-kit.md 的 Empty state 一节给出一个标准样例文档示例src为原文截断的 kit 路径!-- TODO: Replace with real product photo, target size: 600×900 -- picture classproduct-card__photo product-card__photo--empty img src…/imagery/silhouette/silhouette-bottle-01.png altHand-poured ceramic vessel, studio lighting / /picture注意这个样例里的对照src是一个抽象瓶形剪影空槽资产而 alt 已经是预期主体——工作室灯光下的手工浇铸陶器。这正是目标 alt规则的含义alt 写给最终照片不写给当前占位图。第二步替换来源主路径只改统一 base如果项目里所有占位 URL 都是基于--placeholder-base或PLACEHOLDER_BASE拼出来的这是 Hallmark 输出的要求只需编辑这一个常量——把它指向真实资产的基址——整站的占位图就完成替换。这就是文档所说的 User edits one place to swap the entire site。以 Hallmark 自带的 imagery kit 为例它的全部资产是https://www.usehallmark.com/imagery/category/file下的绝对 URLcategory是资产分类file按category-palette-family-variant.ext命名如watercolor-warm-01.webp。如果你的页面以 kit 为占位基址把 base 换成自有图片基址即可各标签内的文件名不必逐个动。备选路径逐个改 src如果现有页面没有做统一或你只换其中一张就替换该图的占位 URL。按来源层级原始 URL 的文档形态如下层级原始 URL 形态文档原样Imagery kithttps://www.usehallmark.com/imagery/category/filePicsumhttps://picsum.photos/seed/seed/w/hUnsplash Sourcehttps://source.unsplash.com/wxh/?keywords本地占位图public/placeholder-type.{jpg,svg}Picsum 的 seed 是品牌名 槽位名拼出的确定性值同一次渲染得到同一张图——替换时如果忘了某个槽位原本是什么seed 字符串本身就是线索。Unsplash Source 永远带 1–2 个关键词无关键词的调用是明确禁止的URL 里也能读出槽位的主体。本地层级是入库的中性灰块 SVG可以直接替换文件或把src指向新图片。替换完成后的标签只动srcalt 原样保留槽位完成后可删掉对应的 TODO 注释让下一步的验证搜索有意义!-- src 换成真实资产路径唯一需要你提供的值alt 保持预期主体不动 -- picture classproduct-card__photo img src真实图片的路径 altHand-poured ceramic vessel, studio lighting / /picture第三步验证再搜一遍TODO: Replace文档约定注释必须挂在每个占位图上所以干净结果意味着所有槽位都已处理。有意保留占位的槽位也要符合 hero-enrichment.md § Image-need detection 的要求——占位图必须看起来像占位图而不是一个自信的决定。在浏览器里看渲染结果不要只看代码imagery-kit.md 说明 kit 资产缺失404时会被静默兜底技能回退到手工 SVGwithout erroring死链未必报可见错误真实图片是否加载必须在页面上确认。核对 alt替换后 alt 应仍描述真实主体。如果发现有写成 Picsum image 一类的 alt说明该槽位不符合约定需要补写。边界与上线前限制assets.md 的Remote asset safety给出几条硬边界第三方图片、logo、视频、图标、字体 URL 都是原型默认值不是生产默认值。除非用户明确要第三方托管上线前优先用 vendored 或自托管资产。不要为了资产捷径引入第三方脚本、追踪像素、widget 或 API 依赖——资产源只提供文件不获得在页面里执行代码的资格。如果远程资产保留到生产必须在交接说明里写清隐私与可用性取舍访问者会请求第三方 host页面依赖其可用性和完整性。用户提供的品牌或客户 logo 优先用官方资产页或入库文件不要从无关站点热链。替换时同时避开文档列出的反模式内联 base64 占位图膨胀 CSS、无关键词的随机 Unsplash返回未策展的库存图、kittens / lorempixel / tiger.jpg 之类的可爱默认服务占位图必须读起来是明显的槽位以及把 kit 图当真实主体——抽象瓶子不是咖啡店 hero 的替身kit 负责氛围主体要靠照片。hero-enrichment.md 的 image-need 表还划了类电商、摄影、食品、团队、旅行、新闻类 brief 需要真实照片占位SaaS、manifesto、agency 类则是 kit-led用的是装饰性资产。换图时按 brief 的类别决定真实资产该是什么避免拿装饰素材去填主体位。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Hallmark 占位素材怎么换：TODO 注释、统一 base 常量与目标 alt 写法
Hallmark 占位素材怎么换TODO 注释、统一 base 常量与目标 alt 写法【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmarkHallmark 在为需要真实照片的 brief电商、食品、摄影组合、团队、旅行等生成页面时如果你还没有提供真实图片它会按 assets.md § Placeholder strategy 填入占位素材并且明确拒绝把虚构的库存照片当作最终设计发布Never ship invented stock photos as if they were the final design。于是常见的交付状态是页面已经成形但若干图片槽位仍是占位图。这篇文章讲怎么把这些占位素材换成真实资产找到槽位、改来源、处理 alt、验证结果。整个过程依赖 Hallmark 强制的三条写法约定——TODO 注释、统一 base 常量、面向目标主体的 alt。先看懂它们替换就变成了机械操作。占位素材的三条约定assets.md 中Swappability一节被标注为non-negotiable共三条TODO 注释每个占位图片正上方都有一条 HTML 注释格式为!-- TODO: Replace with real thing, target size: WxH --其中thing是待替换进去的真实主体名称WxH是目标宽×高例如600×900。统一 base 常量所有占位 URL 都引用同一个常量——--placeholder-baseCSS 变量或PLACEHOLDER_BASE配置常量。改一处整站占位图一起换。目标 altalt 文本描述的是预期主体如 Hand-thrown ceramic mug, top-down on linen而不是占位图本身如 Picsum image。等真实照片换进来时alt 已经是对的。初始占位图来自一个五级来源顺序Hallmark imagery kit → 手工 SVG → Picsum → Unsplash Source → 本地public/placeholder-type.{jpg,svg}跳过层级会被视为 slop move不同层级的占位 URL 形态不同替换前先看清当前 URL 属于哪一层。第一步定位所有占位槽位由于技能强制每个占位图都带 TODO 注释最快的定位方式是在项目里全局搜索字符串TODO: Replace。每个命中都会直接告诉你替换目标的两件事真实资产是什么、尺寸该是多少。imagery-kit.md 的 Empty state 一节给出一个标准样例文档示例src为原文截断的 kit 路径!-- TODO: Replace with real product photo, target size: 600×900 -- picture classproduct-card__photo product-card__photo--empty img src…/imagery/silhouette/silhouette-bottle-01.png altHand-poured ceramic vessel, studio lighting / /picture注意这个样例里的对照src是一个抽象瓶形剪影空槽资产而 alt 已经是预期主体——工作室灯光下的手工浇铸陶器。这正是目标 alt规则的含义alt 写给最终照片不写给当前占位图。第二步替换来源主路径只改统一 base如果项目里所有占位 URL 都是基于--placeholder-base或PLACEHOLDER_BASE拼出来的这是 Hallmark 输出的要求只需编辑这一个常量——把它指向真实资产的基址——整站的占位图就完成替换。这就是文档所说的 User edits one place to swap the entire site。以 Hallmark 自带的 imagery kit 为例它的全部资产是https://www.usehallmark.com/imagery/category/file下的绝对 URLcategory是资产分类file按category-palette-family-variant.ext命名如watercolor-warm-01.webp。如果你的页面以 kit 为占位基址把 base 换成自有图片基址即可各标签内的文件名不必逐个动。备选路径逐个改 src如果现有页面没有做统一或你只换其中一张就替换该图的占位 URL。按来源层级原始 URL 的文档形态如下层级原始 URL 形态文档原样Imagery kithttps://www.usehallmark.com/imagery/category/filePicsumhttps://picsum.photos/seed/seed/w/hUnsplash Sourcehttps://source.unsplash.com/wxh/?keywords本地占位图public/placeholder-type.{jpg,svg}Picsum 的 seed 是品牌名 槽位名拼出的确定性值同一次渲染得到同一张图——替换时如果忘了某个槽位原本是什么seed 字符串本身就是线索。Unsplash Source 永远带 1–2 个关键词无关键词的调用是明确禁止的URL 里也能读出槽位的主体。本地层级是入库的中性灰块 SVG可以直接替换文件或把src指向新图片。替换完成后的标签只动srcalt 原样保留槽位完成后可删掉对应的 TODO 注释让下一步的验证搜索有意义!-- src 换成真实资产路径唯一需要你提供的值alt 保持预期主体不动 -- picture classproduct-card__photo img src真实图片的路径 altHand-poured ceramic vessel, studio lighting / /picture第三步验证再搜一遍TODO: Replace文档约定注释必须挂在每个占位图上所以干净结果意味着所有槽位都已处理。有意保留占位的槽位也要符合 hero-enrichment.md § Image-need detection 的要求——占位图必须看起来像占位图而不是一个自信的决定。在浏览器里看渲染结果不要只看代码imagery-kit.md 说明 kit 资产缺失404时会被静默兜底技能回退到手工 SVGwithout erroring死链未必报可见错误真实图片是否加载必须在页面上确认。核对 alt替换后 alt 应仍描述真实主体。如果发现有写成 Picsum image 一类的 alt说明该槽位不符合约定需要补写。边界与上线前限制assets.md 的Remote asset safety给出几条硬边界第三方图片、logo、视频、图标、字体 URL 都是原型默认值不是生产默认值。除非用户明确要第三方托管上线前优先用 vendored 或自托管资产。不要为了资产捷径引入第三方脚本、追踪像素、widget 或 API 依赖——资产源只提供文件不获得在页面里执行代码的资格。如果远程资产保留到生产必须在交接说明里写清隐私与可用性取舍访问者会请求第三方 host页面依赖其可用性和完整性。用户提供的品牌或客户 logo 优先用官方资产页或入库文件不要从无关站点热链。替换时同时避开文档列出的反模式内联 base64 占位图膨胀 CSS、无关键词的随机 Unsplash返回未策展的库存图、kittens / lorempixel / tiger.jpg 之类的可爱默认服务占位图必须读起来是明显的槽位以及把 kit 图当真实主体——抽象瓶子不是咖啡店 hero 的替身kit 负责氛围主体要靠照片。hero-enrichment.md 的 image-need 表还划了类电商、摄影、食品、团队、旅行、新闻类 brief 需要真实照片占位SaaS、manifesto、agency 类则是 kit-led用的是装饰性资产。换图时按 brief 的类别决定真实资产该是什么避免拿装饰素材去填主体位。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
