Hallmark Bento Grid 宏观结构完全指南：用非对称网格承载多个并行卖点

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网格本身就是节奏按钮Buttonhero 上使用描边芯片按钮瓦片内部的 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 classhero-fixed…/header section classbento article classcell span-2x2…/article !-- hero feature -- article classcell span-1x1…/article article classcell span-2x1…/article !-- wide stat -- article classcell span-1x2…/article !-- tall image -- article classcell span-1x1…/article article classcell span-1x1…/article /section注意原文档的注释给出了四种跨度的典型职责2x2放 hero feature核心功能2x1放宽幅数字wide stat1x2放竖图tall image1x1放普通条目。网格轨道用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.comThe 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 · 9Spans跨度regular规则 · irregular不规则 · mosaic马赛克Border边框hairline all全发丝线 · accent corners强调角 · none无选择后必须将旋钮值写入 stamp 注释例如/* Hallmark · macrostructure: Bento Grid · F1 Bento knobs: tiles6, spansirregular, accentcorner-only · ... */且反模式明确警告两次输出采用相同旋钮值等于同一种模板化anti-patterns 中的 gate。因此上次用了tiles6, spansirregular, accentcorner-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: tiles6, spansirregular, accentcorner-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 个线性 sectionlogos · 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 个占位文字 wordmarkTier-A 纯 CSS 实现无真实客户 Logo、无 Lottie、无 Midjourneypricing 瓦片三档价格卡中间档tier-card--feature带popular角标accent 色 2px 边框 小标签testimonial 瓦片引文 署名含姓名、身份、公司规模遵循角色与公司都要出现的 voice 规则features 瓦片编号特性列表01–06faq 瓦片问题列表悬停变色并带 ↗ 箭头。每块瓦片内容被严格限制在自身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 中有一条明确的辨识规则Dont 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 → FeaturesBento 将其内联进网格→ 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），仅供参考