尧图网页设计 
Hallmark H6 Photographic Fold 实战全出血摄影折叠页的构图、令牌与响应式实现【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmarkoutput_articleHallmark H6 Photographic Fold 组件实战全出血摄影英雄区的构图、令牌与响应式实现H6 Photographic Fold 是 Hallmark 设计技能中一个让照片自己说话的英雄区组件单张全出血图片铺满视口说明文字安静地落在角落。本文以 h6-photographic-fold.md 为核心骨架结合 Photographic 宏观结构、组件烹饪书、hero-enrichment.md 与 assets.md 等仓库参考讲清它的适用场景、最小可运行实现、变体旋钮、配图纪律与移动端折叠行为让读者拿到手就能在 Claude Code、Cursor 或 Codex 里让 Hallmark 输出合格的摄影主导型页面。H6 是什么先看再读H6 Photographic Fold 在 component-cookbook.md 的 Hero 类目中的定义只有一句话单张全出血图片填满视口说明文字caption坐在一个角落里。它的作用不是展示产品截图而是用一个画面建立氛围与情绪把页面首屏的全部叙事权交给照片。它与同属 Hero 类目的 H2 Split Diptych 最容易混淆文档给出了明确的区分H6 Photographic Fold单一图片全出血填满视口说明文字以绝对定位落在角落页面先看后读。H2 Split Diptych标题 导语占一侧、图片或产品截图占另一侧以 6/6 或 7/5 的网格配对排版文字与图片同时构成首屏信息。选型判断标准就一句话Use when: you have real photography that earns full-bleed——只有当手头有配得上全出血的真实摄影时才用 H6。反过来Photographic 宏观结构文档也给出了硬性红线Avoid without real photography. AI-generated stock undoes the macrostructure.AI 生成的库存图会直接毁掉整个宏观结构——这是 Hallmark反 AI 味立场在摄影主题上的具体落点。最小可运行实现结构与样式逐行拆解组件文档给出了完整的骨架两个文件各三行核心代码section classhero-photo img classbleed src alt / p classcaptionSpring, 2026./p /section.hero-photo { position: relative; height: 80dvh; } .hero-photo .bleed { width: 100%; height: 100%; object-fit: cover; } .hero-photo .caption { position: absolute; bottom: var(--space-md); right: var(--space-md); }逐行看这几行样式里的设计决策height: 80dvh——hero 空间纪律80dvh 落在 hero-enrichment.md 的 hero 空间纪律要求的 70%–90% 首屏高度区间内。同一份文档点名了反面写法min-height: 100vh / 100dvh是满视口居中英雄区这个 AI 指纹的典型特征slop-test gate 7。H6 用固定 80dvh 而非min-height说明该组件刻意不追求占满——照片取景 80% 视口高度给页面留出继续向下走的呼吸感。dvhdynamic viewport height比vh更适合移动端因为移动浏览器地址栏收起/展开时视口高度会变化dvh能跟随实际可见区域。object-fit: cover——图片的填满方式width: 100%; height: 100%加上object-fit: cover让图片在保持原始宽高比的前提下裁剪缩放以填满整个容器。这是全出血构图的技术基础无论src里的照片是横构图还是竖构图容器永远被铺满多余的部分被裁掉而不是被拉伸变形。相应地选图时就该考虑取景的裁剪余量——主体内容应集中在画面中心区域否则cover会在窄屏上把主体裁掉。position: absolute--space-md——说明文字定位与令牌纪律说明文字用绝对定位钉在右下角偏移量来自间距令牌var(--space-md)而不是魔法数字。这是 Hallmark 的锁定令牌纪律见 SKILL.md § Locked tokens 与 anti-patterns.md § Mid-render token improvisation成品里不允许出现绕过令牌块的裸rem/px/OKLCH 值。--space-md是 4pt 间距比例中的一个命名令牌——参考 site/css/tokens.css 中的令牌定义该文件里--space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem构成 4/8pt 语义化比例实际数值随主题不同而变例如 site/_tests/09-slow-pour/index.html 的 Atelier 主题下--space-md: 1.5rem。组件代码只写var(--space-md)具体间距交给 tokens.css 决定这正是让设计系统可移植的关键——换主题时说明文字会自动获得新的留白。HTML 侧要注意两个细节alt只是骨架占位真实项目中 alt 必须描述图片的预期主题见下文配图纪律而不是留空或写图片。说明文字是p classcaption不是figcaption套figure——组件以最小 DOM 为原则说明文字作为 section 的直接子元素配合position: relative的父容器做绝对定位。作为宏观结构图片带与文本带交替的页面节奏H6 是单组件而 Photographic 宏观结构是把 H6 的逻辑扩展成整页节奏的编排方案。该文档明确这套结构的每一拍Heading小号说明文字靠近图片角落从不居中显示——标题在这里降级为注释不是大标语。Body全出血图片带与窄文本带交替出现形成看 → 读 → 看的叙事节奏。Divider图片的边缘就是分割线不画任何规则线。Button说明文字下方挂一个排版链接typographic link不出现大按钮。Image整个重点——全出血、边缘到边缘每个折叠区通常只有一张照片。Reveal不做空间动效让照片自己完成叙事。它给出了基础结构骨架正是 H6 的序列化版本section classphoto-fold img classbleed srchero.jpg / p classcaptionSpring, 2026./p /section section classtext-fold p classlede…/p /section section classphoto-fold…/section适用对象时尚、酒店、摄影作品集、生活方式电商——任何产品本身就是一种感觉的品牌。文档给出的参考系是 Aimé Leon Dore、Mr Porter editorial、Stüssy lookbooks 这类以影像为核心的品牌叙事。说明文字的写作像档案不像广告Photographic 宏观结构文档对说明文字提出了明确的写作要求并给了三个示范句要求模仿的是它们的具体性——说明文字应当是日期、地点、编号而不是营销话术Plate 47 · scored before the proof.——一个编号、一个制作过程中的瞬间Maple Street Bread 测试 03 的写法Spring, 2026.——两个词句号结尾Atelier 风格也是 H6 文档骨架里默认示例的写法From the working archive.——给照片以来源感但不解释这套写作纪律与 SKILL.md § Honest copy 一脉相承不编造事实。说明文字不承载营销口号只标注时间、地点、版次、工序等真实信息。组件骨架示例中的Spring, 2026.正是这一风格的体现——刻意平淡让照片承担情绪。变体旋钮同一个组件三种拍法component-cookbook.md 的变体旋钮表为 H6 定义了三个维度每次输出至少更换一个旋钮避免每个摄影页长得都一样旋钮可选值图片区域Image area全出血 · 16/7 · 4/3 · 1/1 方形说明文字位置Caption position左下 · 右上 · 边距文字处理Text below or overlaid图片下方内联 · 叠加在图片上组件文档骨架示例取的是全出血 右下角 叠加这一组默认值。切换拍摄法的例子可以参考 hero-enrichment.md 的 E8 摄影丰富化E8 在文档中明确标注为对 H6 的交叉引用一座里斯本小咖啡馆用一张 4/3 比例、不全出血的晨光咖啡机照片说明文字放在左下边距、用等宽字体小型大写排成Plate 04 · 6:42 a.m.——与组件骨架的全出血 右下角形成完全不同的构图指纹。同一个组件通过旋钮组合就能避免模板感这正是 Hallmark结构性差异主张在组件层的体现。配图纪律什么照片才配得上全出血H6 的Use when条件真实摄影与 Photographic 宏观结构的红线无真实摄影就避开指向同一个核心纪律H6 是摄影的放大器不是图片占位符的遮羞布。落到实操层面assets.md 给了配套规则占位策略占位符必须像占位符当简报明确需要摄影内容电商、食品、旅行、团队、作品集而用户尚未提供真实素材时按层级取源不允许跳级Hallmark imagery kit仅限允许非摄影意象的简报手工构建 SVG 合成Picsumhttps://picsum.photos/seed/seed/w/h使用确定性种子保证同一渲染产出同一张图Unsplash Source带 1–2 个具体关键词绝不空关键词本地public/placeholder-type.{jpg,svg}灰色块。并配套两条不可谈判的规则每张占位图片上方必须有注释!-- TODO: Replace with real thing, target size: WxH --alt 文本描述预期主题Hand-thrown ceramic mug, top-down on linen而不是描述占位符Picsum image——这样用户换入真实照片时 alt 已经正确。摄影处理规则永远对源图做处理渐变叠加、裁剪、去饱和、模糊或品牌色调洗——原封不动的 Unsplash 图这周已经在上百个竞品站上出现过色调必须匹配简报企业/B2B 用中性调、自然光消费/生活方式用暖光与人物情绪科技/创业用极简背景hero 摄影通常要 16/9 桌面、4/3 或 9/16 移动端比例。E8 示例里的去饱和 8% 以与页面暖纸色调和谐正是永远调整源图 色调匹配两条规则的合体示范——摄影与排版必须是一个系统奢侈调性的照片落在 Brutal 页面上就是错配hero-enrichment.md 的 8 个质量前置问题之一。性能纪律别把首屏图片懒加载掉全出血摄影 hero 几乎必然是页面的 LCPLargest Contentful Paint元素。anti-patterns.md 的Lazy-loaded LCP条目把这个列为 Critical 级反模式给 hero 图片加loadinglazy页面会等到用户滚动到它才开始下载而用户正盯着它看——结果是一片空白。文档给出的现实数据对比懒加载的 LCP 图片 p75 为 720ms而预加载为 364ms接近 2 倍差距poor 体验比例高 4 倍。正确的姿势LCP 元素用fetchpriorityhigh只对首屏以下媒体使用loadinglazy首屏折叠线以下的图片一律懒加载component-cookbook.md 的移动端横切规则。同时注意 anti-patterns.md 的Re-drawn UI chrome条目对展示类图片的通用约束真实截图用figure包裹至多一条发丝边框不要手绘假的浏览器条、手机壳或代码窗口框架——H6 的全出血照片直接铺满容器本来就不需要任何伪造的 chrome。响应式折叠角落说明文字永不压住照片主体component-cookbook.md 的移动端折叠表为 H6 定义了清晰的两级断点行为两个断点全仓库统一60rem~960px——布局断点。多列网格折叠为单列倾斜与裁剪效果消失粘性面板取消粘性。40rem~640px——排版断点。显示字号降一级侧边标签移入行内。H6 在这两级断点下的行为是断点H6 行为60rem 以下图片保持全出血说明文字从绝对定位的角落改为图片下方内联40rem 以下说明文字字号降一级角落说明文字在手机上绝不覆盖文字/主体为什么必须把说明文字从position: absolute的角落移到行内流因为窄视口下全出血照片的构图重点位置不可预测——右下角的说明文字很可能恰好压在照片主体上。折叠表给出的原则是同一层级、同一色调、同一节奏但以堆叠的单列形式呈现。实现上这通常意味着在 60rem 媒体查询里给.hero-photo恢复相对定位、.caption改为position: static并补上间距让说明文字自然落在图片下方。另一个跨断点铁律所有可点击目标的命中区域 ≥ 44×44px40rem 以下WCAG AA页面容器padding-inline ≥ clamp(1rem, 4vw, 1.5rem)防止内容贴边——说明文字移入行内后同样适用。在 Hallmark 流程中的位置组件级调用最后回到流程层面。H6 是 component-cookbook.md 中 9 个 Hero 原型之一按 SKILL.md 的组件范围流程当简报只点名单一元素、或目标文件是单个组件时走组件流程不选宏观结构、不选导航与页脚原型、不做 hero 丰富化组件本身就是交付物。而当简报要的是整页比如一个酒店品牌站则 H6 会作为 Photographic 宏观结构的首屏组件被组装进完整页面配合同宏观结构的文本带交替出现。无论哪种调用方式输出的 CSS 首行都要打上 Hallmark 图章注释组件级格式见 SKILL.md § Stamp format for component output记录类型、流派、主题与状态清单让下一次 Hallmark 运行能读取并做出差异化选择——这是整个技能反默认吸引子机制在组件层的最小闭环。参考索引本文核心依据 h6-photographic-fold.md组件全貌见 component-cookbook.mdHero 类目与变体旋钮表整页编排见 08-photographic.md丰富化与交叉引用见 hero-enrichment.mdE8与 assets.md占位策略与摄影规则令牌与反模式依据 site/css/tokens.css、anti-patterns.md 与 SKILL.md。 /output_article【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Hallmark H6 Photographic Fold 实战：全出血摄影折叠页的构图、令牌与响应式实现
Hallmark H6 Photographic Fold 实战全出血摄影折叠页的构图、令牌与响应式实现【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmarkoutput_articleHallmark H6 Photographic Fold 组件实战全出血摄影英雄区的构图、令牌与响应式实现H6 Photographic Fold 是 Hallmark 设计技能中一个让照片自己说话的英雄区组件单张全出血图片铺满视口说明文字安静地落在角落。本文以 h6-photographic-fold.md 为核心骨架结合 Photographic 宏观结构、组件烹饪书、hero-enrichment.md 与 assets.md 等仓库参考讲清它的适用场景、最小可运行实现、变体旋钮、配图纪律与移动端折叠行为让读者拿到手就能在 Claude Code、Cursor 或 Codex 里让 Hallmark 输出合格的摄影主导型页面。H6 是什么先看再读H6 Photographic Fold 在 component-cookbook.md 的 Hero 类目中的定义只有一句话单张全出血图片填满视口说明文字caption坐在一个角落里。它的作用不是展示产品截图而是用一个画面建立氛围与情绪把页面首屏的全部叙事权交给照片。它与同属 Hero 类目的 H2 Split Diptych 最容易混淆文档给出了明确的区分H6 Photographic Fold单一图片全出血填满视口说明文字以绝对定位落在角落页面先看后读。H2 Split Diptych标题 导语占一侧、图片或产品截图占另一侧以 6/6 或 7/5 的网格配对排版文字与图片同时构成首屏信息。选型判断标准就一句话Use when: you have real photography that earns full-bleed——只有当手头有配得上全出血的真实摄影时才用 H6。反过来Photographic 宏观结构文档也给出了硬性红线Avoid without real photography. AI-generated stock undoes the macrostructure.AI 生成的库存图会直接毁掉整个宏观结构——这是 Hallmark反 AI 味立场在摄影主题上的具体落点。最小可运行实现结构与样式逐行拆解组件文档给出了完整的骨架两个文件各三行核心代码section classhero-photo img classbleed src alt / p classcaptionSpring, 2026./p /section.hero-photo { position: relative; height: 80dvh; } .hero-photo .bleed { width: 100%; height: 100%; object-fit: cover; } .hero-photo .caption { position: absolute; bottom: var(--space-md); right: var(--space-md); }逐行看这几行样式里的设计决策height: 80dvh——hero 空间纪律80dvh 落在 hero-enrichment.md 的 hero 空间纪律要求的 70%–90% 首屏高度区间内。同一份文档点名了反面写法min-height: 100vh / 100dvh是满视口居中英雄区这个 AI 指纹的典型特征slop-test gate 7。H6 用固定 80dvh 而非min-height说明该组件刻意不追求占满——照片取景 80% 视口高度给页面留出继续向下走的呼吸感。dvhdynamic viewport height比vh更适合移动端因为移动浏览器地址栏收起/展开时视口高度会变化dvh能跟随实际可见区域。object-fit: cover——图片的填满方式width: 100%; height: 100%加上object-fit: cover让图片在保持原始宽高比的前提下裁剪缩放以填满整个容器。这是全出血构图的技术基础无论src里的照片是横构图还是竖构图容器永远被铺满多余的部分被裁掉而不是被拉伸变形。相应地选图时就该考虑取景的裁剪余量——主体内容应集中在画面中心区域否则cover会在窄屏上把主体裁掉。position: absolute--space-md——说明文字定位与令牌纪律说明文字用绝对定位钉在右下角偏移量来自间距令牌var(--space-md)而不是魔法数字。这是 Hallmark 的锁定令牌纪律见 SKILL.md § Locked tokens 与 anti-patterns.md § Mid-render token improvisation成品里不允许出现绕过令牌块的裸rem/px/OKLCH 值。--space-md是 4pt 间距比例中的一个命名令牌——参考 site/css/tokens.css 中的令牌定义该文件里--space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem构成 4/8pt 语义化比例实际数值随主题不同而变例如 site/_tests/09-slow-pour/index.html 的 Atelier 主题下--space-md: 1.5rem。组件代码只写var(--space-md)具体间距交给 tokens.css 决定这正是让设计系统可移植的关键——换主题时说明文字会自动获得新的留白。HTML 侧要注意两个细节alt只是骨架占位真实项目中 alt 必须描述图片的预期主题见下文配图纪律而不是留空或写图片。说明文字是p classcaption不是figcaption套figure——组件以最小 DOM 为原则说明文字作为 section 的直接子元素配合position: relative的父容器做绝对定位。作为宏观结构图片带与文本带交替的页面节奏H6 是单组件而 Photographic 宏观结构是把 H6 的逻辑扩展成整页节奏的编排方案。该文档明确这套结构的每一拍Heading小号说明文字靠近图片角落从不居中显示——标题在这里降级为注释不是大标语。Body全出血图片带与窄文本带交替出现形成看 → 读 → 看的叙事节奏。Divider图片的边缘就是分割线不画任何规则线。Button说明文字下方挂一个排版链接typographic link不出现大按钮。Image整个重点——全出血、边缘到边缘每个折叠区通常只有一张照片。Reveal不做空间动效让照片自己完成叙事。它给出了基础结构骨架正是 H6 的序列化版本section classphoto-fold img classbleed srchero.jpg / p classcaptionSpring, 2026./p /section section classtext-fold p classlede…/p /section section classphoto-fold…/section适用对象时尚、酒店、摄影作品集、生活方式电商——任何产品本身就是一种感觉的品牌。文档给出的参考系是 Aimé Leon Dore、Mr Porter editorial、Stüssy lookbooks 这类以影像为核心的品牌叙事。说明文字的写作像档案不像广告Photographic 宏观结构文档对说明文字提出了明确的写作要求并给了三个示范句要求模仿的是它们的具体性——说明文字应当是日期、地点、编号而不是营销话术Plate 47 · scored before the proof.——一个编号、一个制作过程中的瞬间Maple Street Bread 测试 03 的写法Spring, 2026.——两个词句号结尾Atelier 风格也是 H6 文档骨架里默认示例的写法From the working archive.——给照片以来源感但不解释这套写作纪律与 SKILL.md § Honest copy 一脉相承不编造事实。说明文字不承载营销口号只标注时间、地点、版次、工序等真实信息。组件骨架示例中的Spring, 2026.正是这一风格的体现——刻意平淡让照片承担情绪。变体旋钮同一个组件三种拍法component-cookbook.md 的变体旋钮表为 H6 定义了三个维度每次输出至少更换一个旋钮避免每个摄影页长得都一样旋钮可选值图片区域Image area全出血 · 16/7 · 4/3 · 1/1 方形说明文字位置Caption position左下 · 右上 · 边距文字处理Text below or overlaid图片下方内联 · 叠加在图片上组件文档骨架示例取的是全出血 右下角 叠加这一组默认值。切换拍摄法的例子可以参考 hero-enrichment.md 的 E8 摄影丰富化E8 在文档中明确标注为对 H6 的交叉引用一座里斯本小咖啡馆用一张 4/3 比例、不全出血的晨光咖啡机照片说明文字放在左下边距、用等宽字体小型大写排成Plate 04 · 6:42 a.m.——与组件骨架的全出血 右下角形成完全不同的构图指纹。同一个组件通过旋钮组合就能避免模板感这正是 Hallmark结构性差异主张在组件层的体现。配图纪律什么照片才配得上全出血H6 的Use when条件真实摄影与 Photographic 宏观结构的红线无真实摄影就避开指向同一个核心纪律H6 是摄影的放大器不是图片占位符的遮羞布。落到实操层面assets.md 给了配套规则占位策略占位符必须像占位符当简报明确需要摄影内容电商、食品、旅行、团队、作品集而用户尚未提供真实素材时按层级取源不允许跳级Hallmark imagery kit仅限允许非摄影意象的简报手工构建 SVG 合成Picsumhttps://picsum.photos/seed/seed/w/h使用确定性种子保证同一渲染产出同一张图Unsplash Source带 1–2 个具体关键词绝不空关键词本地public/placeholder-type.{jpg,svg}灰色块。并配套两条不可谈判的规则每张占位图片上方必须有注释!-- TODO: Replace with real thing, target size: WxH --alt 文本描述预期主题Hand-thrown ceramic mug, top-down on linen而不是描述占位符Picsum image——这样用户换入真实照片时 alt 已经正确。摄影处理规则永远对源图做处理渐变叠加、裁剪、去饱和、模糊或品牌色调洗——原封不动的 Unsplash 图这周已经在上百个竞品站上出现过色调必须匹配简报企业/B2B 用中性调、自然光消费/生活方式用暖光与人物情绪科技/创业用极简背景hero 摄影通常要 16/9 桌面、4/3 或 9/16 移动端比例。E8 示例里的去饱和 8% 以与页面暖纸色调和谐正是永远调整源图 色调匹配两条规则的合体示范——摄影与排版必须是一个系统奢侈调性的照片落在 Brutal 页面上就是错配hero-enrichment.md 的 8 个质量前置问题之一。性能纪律别把首屏图片懒加载掉全出血摄影 hero 几乎必然是页面的 LCPLargest Contentful Paint元素。anti-patterns.md 的Lazy-loaded LCP条目把这个列为 Critical 级反模式给 hero 图片加loadinglazy页面会等到用户滚动到它才开始下载而用户正盯着它看——结果是一片空白。文档给出的现实数据对比懒加载的 LCP 图片 p75 为 720ms而预加载为 364ms接近 2 倍差距poor 体验比例高 4 倍。正确的姿势LCP 元素用fetchpriorityhigh只对首屏以下媒体使用loadinglazy首屏折叠线以下的图片一律懒加载component-cookbook.md 的移动端横切规则。同时注意 anti-patterns.md 的Re-drawn UI chrome条目对展示类图片的通用约束真实截图用figure包裹至多一条发丝边框不要手绘假的浏览器条、手机壳或代码窗口框架——H6 的全出血照片直接铺满容器本来就不需要任何伪造的 chrome。响应式折叠角落说明文字永不压住照片主体component-cookbook.md 的移动端折叠表为 H6 定义了清晰的两级断点行为两个断点全仓库统一60rem~960px——布局断点。多列网格折叠为单列倾斜与裁剪效果消失粘性面板取消粘性。40rem~640px——排版断点。显示字号降一级侧边标签移入行内。H6 在这两级断点下的行为是断点H6 行为60rem 以下图片保持全出血说明文字从绝对定位的角落改为图片下方内联40rem 以下说明文字字号降一级角落说明文字在手机上绝不覆盖文字/主体为什么必须把说明文字从position: absolute的角落移到行内流因为窄视口下全出血照片的构图重点位置不可预测——右下角的说明文字很可能恰好压在照片主体上。折叠表给出的原则是同一层级、同一色调、同一节奏但以堆叠的单列形式呈现。实现上这通常意味着在 60rem 媒体查询里给.hero-photo恢复相对定位、.caption改为position: static并补上间距让说明文字自然落在图片下方。另一个跨断点铁律所有可点击目标的命中区域 ≥ 44×44px40rem 以下WCAG AA页面容器padding-inline ≥ clamp(1rem, 4vw, 1.5rem)防止内容贴边——说明文字移入行内后同样适用。在 Hallmark 流程中的位置组件级调用最后回到流程层面。H6 是 component-cookbook.md 中 9 个 Hero 原型之一按 SKILL.md 的组件范围流程当简报只点名单一元素、或目标文件是单个组件时走组件流程不选宏观结构、不选导航与页脚原型、不做 hero 丰富化组件本身就是交付物。而当简报要的是整页比如一个酒店品牌站则 H6 会作为 Photographic 宏观结构的首屏组件被组装进完整页面配合同宏观结构的文本带交替出现。无论哪种调用方式输出的 CSS 首行都要打上 Hallmark 图章注释组件级格式见 SKILL.md § Stamp format for component output记录类型、流派、主题与状态清单让下一次 Hallmark 运行能读取并做出差异化选择——这是整个技能反默认吸引子机制在组件层的最小闭环。参考索引本文核心依据 h6-photographic-fold.md组件全貌见 component-cookbook.mdHero 类目与变体旋钮表整页编排见 08-photographic.md丰富化与交叉引用见 hero-enrichment.mdE8与 assets.md占位策略与摄影规则令牌与反模式依据 site/css/tokens.css、anti-patterns.md 与 SKILL.md。 /output_article【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考