Hallmark F6 Product Card Grid用「商品陈列」语言构建反 AI 模板化的商城、目录与 Lookbook 页面【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmarkF6Product Card Grid是 Hallmark 设计技能库中 46 个组件原型archetype之一专门用于电商、目录catalogue、Lookbook 与 Marketplace 类页面每一张卡片是一个商品而非一个功能点以「图片 · 名称 · 价格 · 一个微操作」四要素构成统一节奏的陈列网格。读完本文你将掌握 F6 的适用场景判定、四个变体旋钮卡片比例、密度、价格处理、微操作、可直接运行的 HTML/CSS 实现、三档响应式折叠规则以及一份来自仓库内真实落地案例site/examples/najm的源码级对照——足以在生成商品类页面时准确调用该原型并避开 AI 模板化陷阱。一、F6 在 Hallmark 组件体系中的位置Hallmark 把页面拆分为「宏结构macrostructure」与「组件原型component archetype」两层component-cookbook.md 是全库 46 个组件原型的索引按角色分为 Heroes、Section heads、Feature blocks、CTAs、Testimonials、Footers、Navigation 七类。F6 属于Feature blocks功能区块类紧跟在 F1 Bento Grid、F2 Sticky Scroll Stack、F3 Tabular Spec Sheet、F4 Step Sequence、F5 Annotated Screenshot 之后是六个 feature 类原型中的最后一个。其完整定位见原文档 f6-product-card-grid.mdEach card is a product, not a feature. Image · name · price · one micro-action. Reads like a shop floor, not a marketing site.一句话概括网格的节奏来自商品本身而不是布局技巧。在 Hallmark 的标准构建流程中组件原型不是被整本 cookbook 加载的而是「索引优先、按需加载」先在 component-cookbook.md 的索引里挑出F6代码再只加载references/components/f6-product-card-grid.md这一个文件。典型的单页构建总共加载 57 个原型文件1 个 hero 1 个 section head 12 个 feature 1 个 CTA 1 个 footer 1 个 navF6 通常是其中的 feature 位。二、何时使用适用场景与「不要与 F1 混淆」原文档给出了明确的判定边界Use when适用场景brief 是 commerce电商、catalogue目录、lookbook型录、marketplace市场——任何「页面卖的是thing实物商品而不是feature功能特性」的场景。典型形态包括服装品牌、家具店、精品杂货、印刷品/字库商店、胶囊系列。Dont confuse with不要混淆F1 Bento Grid 卖的是features其瓦片tile尺寸和跨列span是有意错落的而F6 的商品卡片是刻意统一的——3/4 竖版、1/1 方版或4/3 横版中取一个比例整页保持一致节奏全部由商品之间的差异图片、名称、价格提供而不是由布局的错落提供。这条边界还可以与宏结构层相互印证macrostructures/11-catalogue.md 描述的 Catalogue 宏结构正是「同一事物的变体typeface、色板、商品 SKU构成的统一网格」每行 35 张等尺寸卡片卡片内链接到详情页、无全局 CTA——F6 是该宏结构最自然的 feature 实现。反过来文档也提醒Catalogue/F6 对有层级叙事需求的品牌并不合适因为「每个商品都平等」的陈列方式会抹平商品间的主次关系。三、四个变体旋钮让每个 F6 都不一样原文档定义 F6 有四个 variation knobs。在 component-cookbook.md 的旋钮总表中可以找到 F6 的完整一行旋钮可选值Card ratio卡片比例3/4竖版portrait·1/1方版square·4/3横版landscapeDensity密度3-up·4-up·5-up每行 3 / 4 / 5 张Price treatment价格处理名称下方under name· 叠在图片上over image· hover 时揭示hover-revealMicro-action微操作Add加入购物车·Save收藏·View →查看详情·none无选择后必须在宏结构 stamp 注释中显式记录旋钮值例如/* Hallmark · macrostructure: Catalogue · F6 Product card grid knobs: ratio3/4, density4-up, priceunder name, micro-actionAdd · ... */cookbook 总表还特别强调了一条反模板纪律两次输出不能选择完全相同的旋钮组合——如果上一次 F6 是ratio3/4, density3-up下一次至少要改动其中一个旋钮。这就是「同一原型、不同指纹」的机制。四、可直接运行的实现HTML 结构与 CSS 逐行解读原文档给出了 F6 的完整骨架代码。以下完整继承并补充注释说明所有 token 均可对照 site/css/tokens.css 中的--space-*、--color-*、--text-*、--font-*、--dur-*、--ease-*、--rule-*语义变量4.1 HTML 结构section classproduct-grid article classproduct a classproduct__media hrefimg src alt loadinglazy //a div classproduct__meta h3 classproduct__nameLinen Apron · Indigo/h3 p classproduct__price tabular-nums¥ 6,400/p /div button classproduct__add aria-labelAdd Linen Apron to bag/button /article !-- ... more products, uniform shape ... -- /section要点每张卡片三要素媒体图片、名称、价格外加一个微操作按钮——严格对应「Image · name · price · one micro-action」。图片走loadinglazy符合 responsive.md 的跨切规则——首屏以下的图片一律懒加载但LCP首屏最大内容元素永不懒加载。a包裹整张媒体图点击区域即图片本身商品链接语义清晰。按钮带aria-label微操作按钮只有视觉符号时必须用无障碍标签说明动作与对象Add Linen Apron to bag这也符合 Hallmark 全库对可访问性的硬要求。tabular-nums类价格使用等宽数字tabular figures让多张卡片的价格在竖直方向上对齐——这是商品网格的细节气质所在。4.2 CSS 实现/* 网格容器3 列起步行距大、列距小 */ .product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl) var(--space-lg); } /* 60rem约 960px布局断点3 列 → 2 列 */ media (max-width: 60rem) { .product-grid { grid-template-columns: repeat(2, 1fr); } } /* 单张卡片纵向堆叠relative 定位为微操作按钮提供锚点 */ .product { display: grid; gap: var(--space-sm); position: relative; } /* 媒体区固定 3/4 比例纸色底托底裁切溢出内容 */ .product__media { display: block; aspect-ratio: 3 / 4; background: var(--color-paper-2); overflow: hidden; } /* 图片填满媒体区cover 裁切hover 时轻微放大 */ .product__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-long) var(--ease-out); } .product__media:hover img { transform: scale(1.02); } /* 名称正文家族、中号字号价格等宽字体小号 次级墨色 */ .product__name { font-family: var(--font-body); font-size: var(--text-md); margin: 0; } .product__price { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-ink-2); } /* 微操作悬浮在卡片右上角默认隐藏hover/focus 时淡入 */ .product__add { position: absolute; top: var(--space-sm); right: var(--space-sm); width: 32px; height: 32px; background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule-2); cursor: pointer; opacity: 0; transition: opacity var(--dur-short) var(--ease-out); } .product:hover .product__add, .product:focus-within .product__add { opacity: 1; } /* 触屏pointer: coarse设备微操作默认常显 */ media (pointer: coarse) { .product__add { opacity: 1; } }关键设计决策aspect-ratio保证卡片统一所有媒体区锁定同一比例这是「统一节奏」的结构基础——商品图片即使宽高不一也通过object-fit: cover裁切进同一个比例框。仅 hover 时缩放 1.02×这是原文档反模式清单中明确写死的数值上限详见下文第六节。微操作的显隐逻辑是「渐进增强」桌面端 hover/focus 才出现避免干扰浏览pointer: coarse的触屏设备上默认常显因为触屏没有 hover 态。focus-within保证键盘用户也能触发。容器信号只选一个这里微操作按钮用了细边框hairline border而卡片主体不叠加圆角、阴影、粗边框——呼应反模式清单第 4 条「容器信号只选一个」。从 token 层面看这段 CSS 完全遵守 Hallmark 的「锁定 token」纪律所有颜色、字体、间距、时长、缓动全部引用命名变量var(--color-paper-2)、var(--dur-long)、var(--ease-out)不出现任何内联十六进制或裸字号。若某个所需值不在 token 表中正确做法是把它提升进 token 块新增命名变量再引用见 SKILL.md 纪律 3。五、响应式三档折叠规则与跨切硬地板component-cookbook.md 的「Mobile collapse — per archetype」表给出了 F6 的明确断点行为断点F6 行为 60rem约 960px网格3-up → 2-up本例 CSS 中media (max-width: 60rem)正是这一档 40rem约 640px网格2-up → 1-up卡片高度变为弹性flexible同时responsive.md 与 cookbook 末尾的跨切规则对商品网格提出了几条必须遵守的硬地板图片网格轨道使用minmax(0, 1fr)而非裸1frslop-test gate 61——商品网格的列轨道是图片承载者裸1fr在长文件名/长内容下会溢出造成横向滚动所有点击目标在 40rem 以下≥ 44 × 44 pxWCAG AA微操作按钮尺寸不足时必须放大页面容器padding-inline ≥ clamp(1rem, 4vw, 1.5rem)内容不贴屏幕边缘折叠后的单列网格依然要「保持自我」——同样的层级、同样的语气、同样的节奏只是变成纵向堆叠40rem 以下禁用一切滚动关联动画。六、必须规避的反模式四条红线原文档给出的商品网格反模式清单是 F6 的核心纪律逐条展开不要借用 Bento 的不规则跨列irregular spans商品想要的是统一节奏。F1 的错落瓦片卖的是功能每个功能的重要级不同而商品网格里每个商品地位平等——一旦某张卡片「跨两列」读者立刻会把那张卡片误读为推广位陈列的「商场感」就碎了。不要在产品名下面放两行的功能式描述价格本身就是描述。在商品网格里名称 价格已经完成了「这是什么、值多少钱」的全部叙事再补一段功能文案会让卡片从「货架上的商品」退化成「营销位上的特性」。如果确实需要补充信息优先考虑把变体信息如颜色/尺码做成名称的附属小字而不是堆进描述段落。空闲时不要自动缩放图片只在 hover 时缩放且上限 1.02×自动缩放idle 时的缓慢放大动画是典型的装饰性运动违背「只动画 transform/opacity、砍掉不传递信息的动画」原则。hover 时的 1.02× 是一个有意的克制数值——放大是给用户「这张图可交互」的提示而不是炫技。不要堆叠容器信号shadow radius border tile瓦片底色 ribbon丝带标签五件套同时上阵是 AI 生成 UI 最典型的气息。只选一个容器信号——本例用 hairline 细边框najm 案例用圆角 极轻的悬浮位移二者都保持「一个信号」的纪律。七、仓库内的真实落地案例site/examples/najm仓库的 najm 示例摩洛哥时装品牌落地页是 F6 原型的一次完整实战演绎其 CSS 位于 styles.css 的.collection/.product区块几乎逐条对应原文档规则统一比例.product__media { aspect-ratio: 4 / 5; }竖版接近文档的 3/4 档密度自适应.collection移动端repeat(2, 1fr)≥760px 升为repeat(4, 1fr)完全符合「3-up → 2-up → 1-up」的折叠逻辑该案例选择了 4-up 档价格用等宽数字.product__price { font-variant-numeric: tabular-nums; }与文档tabular-nums一致微操作 触屏常显.product__quick按钮Add to bag桌面端opacity: 0、hover/focus 时浮现并上滑media (max-width: 759px)下强制opacity: 1常显——正是文档pointer: coarse规则的移动端等价物克制运动hover 时媒体区translateY(-3px)轻微上浮 内部表面scale(1.04)用transform实现、配--ease-out缓动符合「只动 transform/opacity」的纪律真实价格叙事p classproduct__prices820/s 640 MAD/p用删除线表示原价呼应「价格本身就是描述」——折扣价不需要任何额外文案。从 DOM 结构看该案例还示范了 F6 的扩展姿态在.product__media内叠加了角标New/Low stock与变量信息Heavy linen · Bone小字但没有引入第二个容器信号或两行功能描述——所有扩展都服从原文档的边界。八、在 Hallmark 流程中的正确调用方式F6 不是独立产物它必须被放进 Hallmark 的完整纪律闭环里使用按需加载在 component-cookbook.md 索引里选定F6只加载 f6-product-card-grid.md 单个文件不要整本加载 cookbook那是全库最大的 token 浪费源之一。同页去重同一页面内没有任何两个 section 使用同一原型——F6 所在的 feature 区不能和第二处 feature 区共用原型。跨页多样化连续两次 Hallmark 输出的 F6 至少改动一个旋钮同时参考 macrostructures/11-catalogue.md 确认宏结构级的选择Catalogue 宏结构天然配 F6。stamp 记录把旋钮值写进 CSS 文件首行的/* Hallmark · macrostructure: name · F6 knobs: ... */注释并追加到.hallmark/log.json供下一次运行做多样化判定。过 slop-test输出后运行 slop-test.md 的 66 项门禁其中 gate 61minmax(0, 1fr)与门禁 36/59/62/63横向滚动、两行可点文本、overflow-x: clip、长单词换行对商品网格这类图片密集区块尤其关键。结语F6 Product Card Grid 的哲学可以浓缩为一句话让商品当主角让布局闭嘴。它通过「统一卡片比例 等宽数字价格 单一微操作 单一容器信号」这组克制约束把页面从「营销站点」拉回「商场货架」从而在结构层面天然避开 AI 生成物最常见的模板气息。无论是从零构建一个电商落地页还是在 component-cookbook.md 中挑选 feature 原型F6 都是「卖东西的页面」的正确默认答案——前提是严格守住它的四条反模式红线。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考