Hallmark Bento Grid 宏观结构完全指南：用非对称网格承载多个并行卖点
【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark
导读
本文围绕 Hallmark 设计技能（为 Claude Code、Cursor、Codex 设计的反 AI 模板化设计技能）中的01 · Bento Grid 宏观结构展开，说明它适用于何种简报、其标题/主体/分隔/按钮/图片/动效六项指纹如何落定，以及如何在代码中以网格跨度实现"尺寸节奏"而非"卡片统一"。读完你可以直接复刻一个 8–15 个瓦片、混合 1×1 / 2×1 / 1×2 / 2×2 跨度的 Bento 特征区块，并知道在 4 列、2 列、1 列断点下如何降级。
Bento Grid 是什么：以尺寸而非卡片制造视觉节奏
Bento Grid（便当网格）是 Hallmark 预置的21 种页面宏观结构（Macrostructure）之一，在 macrostructures.md 中的官方定义为：
Modular blocks of varying sizes laid out as an irregular grid. Each block is a feature, a quote, an image, a stat. Visual rhythm comes from size variation, not card uniformity.
即：不规则网格上的大小各异的模块块，每一块可以是一个功能、一句引文、一张图片或一个数字。其视觉节奏来自尺寸的差异，而非统一卡片造成的重复。Hallmark 的配套组件配方 f1-bento-grid.md 将其浓缩为一句话：
Asymmetric grid of 8–15 tiles in mixed spans (1×1, 2×1, 1×2, 2×2). Visual rhythm via size.
"尺寸即节奏"这一句是理解整个宏观结构的钥匙：用户目光落在网格上时，先被最大的 2×2 瓦片抓住，然后沿 2×1、1×2 的次大瓦片流动，最后由 1×1 瓦片完成扫读。这与均匀卡片栅格的"货架感"截然不同。
适用场景与明确回避场景
原文档给出了极其清晰的选用边界：
- 什么时候选它（Reach for it）：简报是"many small things to show"（有很多小而多的东西要展示）、功能页（feature page）、SaaS 落地页，以及任何需要多个同等有效入口的场景。
- 什么时候回避（Avoid）：当信息只有一个单一的 hero 观点时。Bento 会分散注意力（spreads attention），单一观点页面应当选用 Marquee 或 Stat-Led 宏观结构（分别见 03-marquee-hero.md 与 04-stat-led.md）。
这一判断在仓库的测试案例中得到了印证。Foundry 合规落地页测试简报 中的原始需求是"show how many companies got compliant, what it costs, who uses it"——三个不同信号同时出现，构建记录原文如此选择：
Bento Grid wins because the brief says 'show how many · what it costs · who uses it' (three different signals; Bento is the macro built to carry multiple parallel proofs).
这正是"多个同等有效入口"的典型场景。
六项指纹：Bento Grid 的页面解剖
原文档用六行浓缩了 Bento Grid 作为完整页面指纹的每一处设计决策：
| 指纹维度 | Bento Grid 的规定 |
|---|---|
| 标题（Heading） | 固定高度 hero（不是整屏 viewport）内的居中展示字 |
| 主体（Body） | 非对称网格，8–15 个块，混合跨度（1×1、2×1、1×2、2×2） |
| 分隔（Divider） | 统一 12–24 px 间距；无分隔线（no rules），网格本身就是节奏 |
| 按钮（Button） | hero 上使用描边芯片按钮；瓦片内部的 CTA 使用排版式链接 |
| 图片（Image） | 在单个瓦片内部紧裁（tightly cropped），绝不整幅出血（never full-bleed） |
| 动效（Reveal） | 无，或瓦片入场时一次微妙的单次淡入（one-shot fade） |
这六项决策共同构成"Bento Grid"这个名字的完整指纹，缺一不可。例如"无分隔线"意味着不要给瓦片画边框或加阴影堆叠层次——网格的留白间隙（gap）才是节奏本身。
对照组件配方：F1 Bento 的核心 CSS
组件配方 给出了可直接运行的最小实现：
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 12rem; gap: var(--space-md); } .span-2x2 { grid-column: span 2; grid-row: span 2; } .span-2x1 { grid-column: span 2; } .span-1x2 { grid-row: span 2; } @media (max-width: 56rem) { .bento { grid-template-columns: repeat(2, 1fr); } }配合原文档的结构骨架：
<header class="hero-fixed">…</header> <section class="bento"> <article class="cell span-2x2">…</article> <!-- hero feature --> <article class="cell span-1x1">…</article> <article class="cell span-2x1">…</article> <!-- wide stat --> <article class="cell span-1x2">…</article> <!-- tall image --> <article class="cell span-1x1">…</article> <article class="cell span-1x1">…</article> </section>注意原文档的注释给出了四种跨度的典型职责：2x2放 hero feature（核心功能），2x1放宽幅数字（wide stat），1x2放竖图（tall image），1x1放普通条目。网格轨道用repeat(4, 1fr)建立 4 列，行高用grid-auto-rows: 12rem固定，因此 2×2 瓦片天然成为视觉锚点。
措辞示范：模仿"具体性"而非"措辞"
原文档特别强调，写作 opening lines 时要模仿**具体性（specificity）**而非措辞，并给出三条示范：
"Tracejam · v0.4 · for SREs. Distributed tracing that explains itself."— 改编自真实可观测性工具
"Resend is the email API for developers. Send transactional and marketing emails at scale."— resend.com
"The product development system for teams and agents."— linear.app
这三条共同点是：主语（产品名）+ 受众限定（for SREs / for developers / for teams and agents）+ 一个不可争辩的能力陈述。它们用名词短语直接宣告"我是谁、给谁、做什么"，而不是用夸张的营销形容词。
在 Hallmark 决策流程中的位置
Bento Grid 不是孤立的一张卡片，它在 Hallmark 的技能系统中承担明确的角色。
宏观结构选择规则
macrostructures.md 规定了强制性的多样化规则（Diversification rule）：在动手写码前，先检查目标代码库中是否已有/* Hallmark · macrostructure: <name> · ... */注释；若存在，本次选择必须是另一种宏观结构，同一项目中不允许连续两次输出共享同一宏观结构。选择顺序为：宏观结构 → 是否增加 Enrichment 增强 → 是否叠加 Polish 打磨 → 间距纪律。
从源码结构看，宏结构选择遵循五步：macrostructures.md 中" How to pick"一节列出——读简报并捕捉信号词（如 "many small features" 直接指向 Bento）、检查既有 stamp、用 "Reach for it" 行匹配简报能量、在写码前用纯文本声明 "Macrostructure: Bento Grid." 并以 stamp 注释开头写 CSS、若犹豫则给出跨类别的三个候选（如 Bento + Long Document + Manifesto）。
Bento Grid 与组件旋钮（variation knobs）
宏观结构决定页面形状，组件配方决定页面内部的构件。component-cookbook.md 明确指出同一宏观结构可由不同构件组合而成，例如一个 Bento Grid 页面可以搭配 Bento feature block + Inline form CTA + Logo wall (hairline)。同时，每个构件都有 2–3 个变体旋钮，F1 Bento 的三个旋钮为：
| 旋钮 | 可选值 |
|---|---|
| Tiles（瓦片数） | 4 · 6 · 7 · 9 |
| Spans（跨度） | regular（规则） · irregular（不规则） · mosaic（马赛克） |
| Border（边框） | hairline all（全发丝线） · accent corners（强调角） · none（无） |
选择后必须将旋钮值写入 stamp 注释，例如：
/* Hallmark · macrostructure: Bento Grid · F1 Bento knobs: tiles=6, spans=irregular, accent=corner-only · ... */且反模式明确警告：两次输出采用相同旋钮值等于同一种模板化（anti-patterns 中的 gate）。因此上次用了tiles=6, spans=irregular, accent=corner-only，下次至少更改一个旋钮。
响应式降级
Bento 的响应式策略在原文档及组件配方中均有依据。component-cookbook.md 的响应式表规定：平板下网格从 6/4 列降至 2 列，大瓦片跨 2 列、小瓦片跨 1 列；手机下降至 1 列，且瓦片顺序需按信息优先级排列。组件配方中的@media (max-width: 56rem)即是 4 列 → 2 列的落地。
仓库实战：Foundry 落地页的 6 瓦片 Bento
仓库中 site/_tests/07-foundry-compliance/ 是一个完整的、可通过 slop-test 的 Bento Grid 实战案例（38 / 38 ✓）。其 CSS 头部 stamp 如实记录了决策：
/* Hallmark · macrostructure: Bento Grid · F1 bento knobs: tiles=6, spans=irregular, accent=corner-only * theme: Newsprint · accent: warm-deep-red ~3% · enrichment: tier-A CSS logo grid (8 mono wordmarks) * studied: no · context: explicit · v0.6.0 */网格布局：6 列 × 混合跨度
其 Bento 段落的实现 与配方一脉相承但更细——用 6 列网格配合不同瓦片的grid-column / grid-rowspan：
.bento { padding: var(--space-2xl) 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-md); border-block-end: 1px solid var(--color-rule); } .tile--stat { grid-column: span 3; grid-row: span 2; } .tile--logos { grid-column: span 3; } .tile--pricing { grid-column: span 3; } .tile--testimonial { grid-column: span 3; } .tile--features { grid-column: span 3; } .tile--faq { grid-column: span 3; }6 列网格中，最大的统计瓦片tile--stat占span 3 × span 2（即半宽双倍高），成为视觉锚点；其余 5 个瓦片各占span 3（半宽），以 2 列为一排构成交错节奏。整个 Bento 把原本 9 个线性 section（logos · stats · features · testimonials · pricing · FAQ · CTA · footer）压缩成了6 个瓦片 + CTA strip + colophon——这正是原文档所述"多个并行证明由网格本身承担"的实证。
瓦片内部：六种内容形态
HTML 结构 展示了"每个块可以是 feature / quote / image / stat"的完整兑现：
- stat 瓦片：
847.大数字 + 说明性 caption，数字用clamp(5rem, 14vw, 11rem)排版； - logos 瓦片：8 个占位文字 wordmark（Tier-A 纯 CSS 实现，无真实客户 Logo、无 Lottie、无 Midjourney）；
- pricing 瓦片：三档价格卡，中间档
tier-card--feature带"popular"角标（accent 色 2px 边框 + 小标签）； - testimonial 瓦片：引文 + 署名（含姓名、身份、公司规模），遵循"角色与公司都要出现"的 voice 规则；
- features 瓦片：编号特性列表（01–06）；
- faq 瓦片：问题列表，悬停变色并带 ↗ 箭头。
每块瓦片内容被严格限制在自身tile内部（display: flex; flex-direction: column），没有任何内容溢出到跨瓦片——对应原文档"图片在单个块内部紧裁、绝不整幅出血"的纪律。
响应式与动效
响应式规则 展示了两级降级：
@media (max-width: 64rem) { .bento { grid-template-columns: 1fr 1fr; } .tile--stat, .tile--logos, .tile--pricing, .tile--testimonial, .tile--features, .tile--faq { grid-column: span 2; grid-row: auto; } } @media (max-width: 48rem) { .bento { grid-template-columns: 1fr; } .tile--stat, .tile--logos, .tile--pricing, .tile--testimonial, .tile--features, .tile--faq { grid-column: span 1; } }平板（64rem）降至 2 列、手机（48rem）降至 1 列，且所有 span 规则归位为auto。动效方面该案例选择"counter on hero stat + pulse-once on featured tier"两个基础原语，符合原文档"无或一次微妙淡入"的克制取向，也与 microinteractions.md 的 SaaS 默认开启策略一致（counter on stat tile、focus-visible on CTAs、hover-rule on tier card）。
与旧版 Stat-Led 的对比：同一数据的不同编排
测试简报 的 v1 → v2 对比最能说明 Bento 的本质：
v1 led with "847" sized at 22 rem and structured the rest as a 9-section linear SaaS page; v2 places the 847 inside a bento tile alongside five other parallel proofs (logos, pricing, testimonial, features, FAQ). Same data, different choreography.
同样的数据（847 公司数、三档定价、客户证言、特性清单），不同的编排方式：Stat-Led 把数字放大为叙事主角然后线性铺陈；Bento 把数字降级为网格中的一块，与其他五个同等权重的证明并行呈现。这就是"多个同等有效入口"与"单一观点"两种宏观结构的本质区别。
配套构件与推荐顺序
Bento Grid 的典型构件搭配
Bento 作为一个特征区块构件（F1），在 component-cookbook.md 中有一条明确的辨识规则：
Don't confuse with: F2 Sticky-scroll (which stacks vertically with sticky pacing).
即 Bento 与 f2-sticky-scroll-stack.md 容易混淆——F2 是左侧固定面板 + 右侧滚动同步的纵向编排，节奏来自 sticky 定位而非网格跨度。选型时需按"想要横向网格节奏还是纵向滚动节奏"来区分。
SaaS 页面序列中的位置
在 macrostructures.md 的 SaaS 页面序列中，Bento Grid（与 Stat-Led、Workbench、Marquee Hero）适用如下推荐顺序：Hero（含主 CTA + 次级 "Talk to sales"）→ Logo wall → Features（Bento 将其内联进网格）→ Testimonials → Pricing → FAQ → 最终 CTA strip → Footer。但该文件同时强调：这不是一套模板，宏观结构决定每个 section 的呈现方式——Bento 页面把 features 与证明内联在网格中，而 Stat-Led 页面则按从上到下顺序排列。对于非 SaaS 内容（编辑类、宣言类、信函类），该序列不适用——"面包店不需要价格档对比表"。
组合时的防混淆与节奏纪律
Bento 网格内部不同内容块应使用不同构件原型（同一页面内两个 section 不得使用同一原型）；hero 宏观结构必须搭配 nav 与 footer 原型（Bento 常用的如 N1 Wordmark 2 links + Ft2 Inline rule 等，可查 component-cookbook.md § Navigation 与 § Footers）。section 之间使用主题对应的垂直间距，--space-3xl为最小档；不要把 section 细分成带子规则的"行"——section 断点本身就是视觉节奏。
总结
Bento Grid 是 Hallmark 21 种宏观结构中最适合"多信号并行"页面的形态：固定高度 hero + 8–15 个混合跨度瓦片 + 统一 12–24 px 间隙无分隔线 + hero 描边按钮与瓦片内排版链接 + 瓦片内紧裁图片 + 克制的一次淡入动效。它通过 CSS Grid 的grid-column / grid-rowspan 制造尺寸节奏，在 4 列桌面、2 列平板、1 列手机三个断点依次降级。仓库的 Foundry 测试案例从 stamp 注释、6 瓦片 HTML、6 列 CSS 到两级响应式规则，完整展示了这一宏观结构从决策到落地的全过程——记住它的选用判据："many small things to show" 选 Bento，单一 hero 观点选 Marquee 或 Stat-Led。
如需继续深入，可阅读：宏观结构总览 macrostructures.md、组件配方 f1-bento-grid.md、完整落地案例 Foundry 测试页面 及其 CSS，以及构件总目录 component-cookbook.md。
【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
