Hallmark Stat-Led 宏观结构指南用真实数据驱动整页叙事的数字英雄区设计【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark本篇技术指南围绕开源项目Hallmark一个面向 Claude Code、Cursor、Codex 的 anti-AI-slop 设计技能中的04 · Stat-Led宏观结构展开。Stat-Led 是一种「数据即叙事」的落地页骨架英雄区以超大数字开场正文每一节都由支撑性数据或图表锚定。读完本文你将掌握 Stat-Led 的六维结构规范标题、正文、分割线、按钮、图像、揭示动效、tabular-nums与数字滚动计数的实现细节以及如何用「诚实数据」原则避免 AI 生成页面最常见的翻车点——编造指标。什么是 Stat-Led数字就是叙事的骨架在 Hallmark 的 21 种命名宏观结构中04-stat-led.md 是唯一一种把「一个巨大的数字」当作整页叙事的形态。它的核心定义只有一句话英雄区是一个巨大的数字——一个指标、一个计数、一个百分比。之后的一切都在支撑它或限定它。数据即叙事Data is the narrative。这句话决定了 Stat-Led 与 Marquee Hero03、Quote-Led09 的本质区别前两者分别以「一句声明」或「一段引语」开场而 Stat-Led 以一个可核验的量开场。页面不是靠形容词说服读者而是靠数字本身的分量。这在 macrostructures.md 的索引中被概括为04 · Stat-Led— The hero is a giant number — a metric, a count, a percentage. Everything that follows supports or qualifies it. Data is the narrative.Hallmark 官网首页site/index.html本身就是 Stat-Led 的一个活体示例almanac、midnight、sport三个主题都把 hero 路由到了hero-stat-led模板见 site/js/main.js 中ARCHETYPES映射的hero: stat-led并各自填充了不同的统计数字——462主题×形态组合数、23主题数、100 PERCENT.。同一个模板三个数字三种完全不同的页面气质这正是 Stat-Led 的设计意图数字本身承担叙事而不是靠装饰。Stat-Led 的六维结构规范原文档给出了完整的结构指纹。这六个维度共同构成 Stat-Led 的「唯一命名选择」在写代码之前必须整体接受而非逐个自由发挥维度规范说明Heading标题数字式展示8–12 rem巨型数字排版使用 tabular figures表格数字数字下方紧跟一行小号限定语Body正文每一节由一个支撑性数据或图表锚定正文不再是无序的功能罗列而是围绕一个核心指标逐节展开证据Divider分割线统计块之间用 hairline 细线全页启用tabular-nums让成列数字纵向对齐Button按钮描边 chip对齐在限定语下方是「读报告 →」这类导出动作而非「立即购买」式主 CTAImage图像图表与小数据可视化严禁摄影图片——Stat-Led 页面里出现实拍照片即破坏数据叙事的一致性Reveal揭示英雄区数字滚动计数从 0 计数到目标值时长约 500 ms这六条不是装饰性建议。原文档的措辞是 bundled as a single named choice——宏结构一次打包了 heading 位置、正文构成、分割线语言、按钮语气、图像处理、揭示模式六个轴比从零分别挑选六个独立维度更快、更不容易出错也「在类别上更具多样性」。表格数字tabular-numsStat-Led 的排版底线Stat-Led 中「数字」是主角因此数字的排版质量直接决定页面的可信度。typography.md 明确要求Tabular numbers on any data display:font-variant-numeric: tabular-nums;原因在于多数字体的默认数字是比例数字proportional figures1、7、0的字宽各不相同。成列的数字价格、日期、指标对比若用比例数字渲染会纵向参差不齐让整页统计数据看起来像随手排的草稿。Stat-Led 要求所有数字展示都启用font-variant-numeric: tabular-nums使每个数字占据等宽字元成列数字天然对齐。这一规则在 Hallmark 项目自身得到了严格执行site/css/base.css 提供工具类.tnum { font-variant-numeric: tabular-nums; }并在code, kbd, samp, pre等元素上直接启用了font-feature-settings: tnum官方 stat-led hero 模板中的数字直接绑定该特性span classhero__stat tabular-nums{{stat}}/span见 site/index.htmlanti-patterns.md 将「表格数据没有使用 tabular-nums」列为 Major 级 AI 生成信号Tabular data without tabular-nums修复方式即对任何展示数字列容器的容器加上font-variant-numeric: tabular-nums;。值得留意的是 typography 文档的另一条配套规则正文中应使用旧式数字oldstyle-nums而数据展示使用表格数字——两者职责不同Stat-Led 的数字区属于后者。Reveal 揭示动效500 ms 数字滚动计数Stat-Led 唯一的标配动效是英雄区数字的number-tick计数器从 0 滚到目标值时长约500 ms。这个设计有双重目的制造「数据正在生成」的瞬时专注力——数字滚动是短暂、一次性的事件完成后页面立即归于平静不会像常驻动画那样分散注意力用动效强调数字是「活的证据」——它暗示这个数字背后存在一个真实的、正在发生的量而非静态装饰。Hallmark 的动效纪律同时为这条规则划了边界见 SKILL.md 与 slop-test.md只动画transform与opacity绝不动画布局属性使用三个具名缓动--ease-out/--ease-in/--ease-in-out禁止浏览器默认ease与 bounce/overshoot 缓动——后者是反模式清单中的Bounce and elastic easing必须支持prefers-reduced-motion: reduce空间动效折叠为 ≤150 ms 的 opacity 交叉淡化。实际上site/js/main.js 首页实现了一个更彻底的立场.reveal元素在加载时即被强制标记为最终状态document.querySelectorAll(.reveal).forEach((el) el.classList.add(is-in))滚动进场动画整体被禁用——Reveal/scroll-in animations are disabled by design目的是让滚动阅读保持干净。这意味着 Stat-Led 的数字滚动更应被理解为「一次性的开场仪式」而不是页面所有元素都要参与的入场表演。何时使用、何时回避诚实的取舍判断原文档给出了明确的选用判据这也是 Stat-Led 区别于其他 20 种宏观结构的决策边界选用时机当简报本质上是在说「we have proof in numbers」——企业/B2B 产品、募资平台、气候或影响力impact页面。这类页面的说服力来自可核验的量99.97% 可用性、847 家公司完成合规、434 篇技术文章。参考方向文档原文Ahrefs、Stripe Sessions 的统计块、气候影响看板、风投机构的投资组合页。回避时机当产品没有一个可捍卫的单一指标时。原文档的警告非常直接A fake big number is worse than no number.一个假的巨大数字比没有数字更糟。这是 Stat-Led 的道德底线也是 Hallmark 全局四大纪律之一Honest copy — no fabricated content在宏观结构层的落点anti-patterns.md 将Invented metrics编造指标10× faster、trusted by 50,000 teams、99.9 % uptime、47 % conversion列为 Major 级 AI 生成信号slop-test.md 的Gate 56将其设为硬性失败项Stat-led macrostructures are slop the moment their stats become decorative.Stat-Led 宏观结构一旦让统计数字变成装饰就是 slop。Gate 56 给出了三级修复方案按优先级排列用—加上带标签的灰色占位块metric to confirm / stat pending替代数字向用户索取真实数字并暂停本次运行去掉该证明位、重构该节——一个没有真实数据的 Stat-Led 就是错误选型。「数字形状的洞是诚实的编造的数字是 slop。」这句话是整个宏观结构对 AI 生成页面的核心态度宁可留白不可虚构。开场文案模仿「具体性」而不是措辞原文档提供了三条示例开场Sample opening lines并强调要模仿的是具体性specificity而不是字面措辞——因为在这类页面里真正干活的是数字本身47% · faster · decide late.— 斜体数字 三词限定语4 seconds. From the alert link to the slow span.— 把数字与它换来的结果配对434 total posts. New CSS you feel like you could use today.— Adam Argyle, nerdy.dev——用计数把页面锚定在真实体量上分析这三条的共同语法可以得到可复用的文案模式斜体数字 短语限定语数字用斜体突出限定语控制在三四个词以内用连字符或点号与数字衔接数字 它买到的东西不要只抛数字要让读者立刻知道「这个数字意味着什么」——4 秒是从告警链接到慢跨度的时间计数 体量感用真实的内容量434 篇文章为页面建立「这不是空壳而是有真实积累」的印象。注意第三条引自真实世界Adam Argyle / nerdy.devHallmark 将真实来源的引用作为示例同时强调模仿具体性而非照抄措辞。实战 HTML 骨架与仓库实现验证原文档给出的 Stat-Led 最小骨架如下section classstat-hero div classfigure tnum99.97span classunit%/span/div p classqualifieruptime across 2026, measured externally./p a classcta-outlineRead the report →/a /section section classsupporting-stats…/section这个骨架在 Hallmark 项目中有一套对应的、经过实际渲染验证的官方模板。在 site/index.html 中hero-stat-led模板被实现为template idhero-stat-led div classhero hero--stat div classhero__main p classhero__eyebrowspan classmark aria-hiddentrue/span{{eyebrow}}/p span classhero__stat tabular-nums{{stat}}/span p classhero__qualifier{{qualifier}}/p p classhero__lede{{lede}}/p a href#install classlink hero__link{{cta}} rarr;/a /div aside classhero__moment aria-hiddentrue/aside /div /template对照两条实现可以提炼出 Stat-Led 英雄区的五个必备 DOM 结构点.hero__eyebrow顶部小眉题原文档未强制但 Hallmark 模板用于承载主题语境.hero__stat.tabular-nums核心大数字必须带tabular-nums.hero__qualifier限定语小号行紧贴数字下方.hero__lede简短说明进一步限定数字的含义与测量方式对应原文档 measured externally 这类自证严谨的措辞.link.hero__link描边链接式 CTARead the report →对齐在限定语下方。其中{{...}}是 Hallmark 首页的主题文案插值占位符由 site/js/main.js 的interpolate()函数在切换主题时动态填充。这也揭示了一个工程细节Stat-Led 数字不是写死的而是作为「主题文案夹具」随主题轮换——sport主题的stat: 23、almanac主题的stat: 462、brutal主题的stat: 100分别配合各自的qualifier形成独立的叙事单元见 site/js/main.js 的COPY表。在完整落地页流程中的位置选型纪律与多样化Stat-Led 不是孤立的设计块它在 Hallmark 的完整 Design flow 中占据明确的位置第一步是选型声明。macrostructures.md 要求写任何代码之前先在纯文本中声明「Macrostructure: Stat-Led. Theme: X. Differs from the last on: .」这是防止模型滑回默认形态的问责线。同时遵守多样化规则——若目标代码库已有/* Hallmark · macrostructure: name · ... */印记则本次选择必须与上次不同连续两次 Hallmark 输出共享同一宏观结构即构成Default-attractor sameness默认吸引子同质化这是反模式清单中的 Critical 级信号。第二步是配套选择。Stat-Led 必须连同导航与页脚原型一起选择Hero → N# → Ft#并且导航/页脚同样受多样化规则约束见 SKILL.md Step 2。第三步是 SaaS 页面序列。当宏观结构是Bento Grid / Stat-Led / Workbench / Marquee Hero且简报是 B2B SaaS 营销页时macrostructures.md 给出了推荐区块顺序Hero → 客户 Logo 墙 → Features → Testimonials → Pricing → FAQ → 最终 CTA 条 → Footer。但 Stat-Led 的呈现方式与众不同——「一个 Bento 页面把证据交织在网格里一个 Stat-Led 页面把它们自上而下排成序列」。Stat-Led 的正文字节通常放在支撑统计网格section classsupporting-stats…/section之后每一节由一个支撑性数字或图表锚定。一个可对照的实战案例出现在 site/_tests/07-foundry-compliance/brief.md 中FoundrySOC2/ISO27001 合规自动化 SaaS的第一版落地页即采用 Stat-Led——以847已完成合规的公司数作为 22 rem 大小的锚定数字配 Plain 主题、深墨蓝强调色正文按 9 段线性 SaaS 结构展开。该测试记录同时展示了 Stat-Led 的多样化约束如何生效第二版改为 Bento Grid 时明确声明「Macro: Stat-Led → Bento Grid」并在 Stamp 中记录轴差异display style accent hue 双轴不同因为「同一数据、不同编舞Same data, different choreography」正是 Hallmark 结构多样性的考核标准。而 v1 中847这个锚定数字来自简报真实声明how many companies got compliant与 Gate 56 的诚实数据原则严格对应。与其他宏观结构的边界为什么它是「唯一命名选择」最后值得强调 Stat-Led 与近邻结构的边界这决定了何时该选它而不是别家vs. Marquee Hero03Marquee 用一句大胆声明占满首屏无副标题、无折叠内 CTAStat-Led 则必须有一个可核验的数字承担叙事。声明可以是观点数字必须是证据vs. Quote-Led09Quote-Led 借他人之口pull-quote 署名建立信用Stat-Led 用自身数据建立信用——前者是「被引用」后者是「可测量」vs. Bento Grid01Bento 可以把统计数字当作网格中与 Logo、价格、引用并列的一块磁贴如 Foundry v2 的847进入 bento tileStat-Led 则让数字独占英雄区正文只是它的展开与限定。原文档的收尾判断仍然是最简洁的决策依据「Reach for it when the brief is we have proof in numbers」——当简报的潜台词是「我们在数字上有证明」就选 Stat-Led当产品拿不出一个能站得住脚的单一指标就用别的宏观结构。这个「先有真数、后有版面」的次序正是 Hallmark 反 AI 套路的全部精髓不是让布局假装有数据而是让真实数据自己决定布局。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Hallmark Stat-Led 宏观结构指南：用真实数据驱动整页叙事的数字英雄区设计
Hallmark Stat-Led 宏观结构指南用真实数据驱动整页叙事的数字英雄区设计【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark本篇技术指南围绕开源项目Hallmark一个面向 Claude Code、Cursor、Codex 的 anti-AI-slop 设计技能中的04 · Stat-Led宏观结构展开。Stat-Led 是一种「数据即叙事」的落地页骨架英雄区以超大数字开场正文每一节都由支撑性数据或图表锚定。读完本文你将掌握 Stat-Led 的六维结构规范标题、正文、分割线、按钮、图像、揭示动效、tabular-nums与数字滚动计数的实现细节以及如何用「诚实数据」原则避免 AI 生成页面最常见的翻车点——编造指标。什么是 Stat-Led数字就是叙事的骨架在 Hallmark 的 21 种命名宏观结构中04-stat-led.md 是唯一一种把「一个巨大的数字」当作整页叙事的形态。它的核心定义只有一句话英雄区是一个巨大的数字——一个指标、一个计数、一个百分比。之后的一切都在支撑它或限定它。数据即叙事Data is the narrative。这句话决定了 Stat-Led 与 Marquee Hero03、Quote-Led09 的本质区别前两者分别以「一句声明」或「一段引语」开场而 Stat-Led 以一个可核验的量开场。页面不是靠形容词说服读者而是靠数字本身的分量。这在 macrostructures.md 的索引中被概括为04 · Stat-Led— The hero is a giant number — a metric, a count, a percentage. Everything that follows supports or qualifies it. Data is the narrative.Hallmark 官网首页site/index.html本身就是 Stat-Led 的一个活体示例almanac、midnight、sport三个主题都把 hero 路由到了hero-stat-led模板见 site/js/main.js 中ARCHETYPES映射的hero: stat-led并各自填充了不同的统计数字——462主题×形态组合数、23主题数、100 PERCENT.。同一个模板三个数字三种完全不同的页面气质这正是 Stat-Led 的设计意图数字本身承担叙事而不是靠装饰。Stat-Led 的六维结构规范原文档给出了完整的结构指纹。这六个维度共同构成 Stat-Led 的「唯一命名选择」在写代码之前必须整体接受而非逐个自由发挥维度规范说明Heading标题数字式展示8–12 rem巨型数字排版使用 tabular figures表格数字数字下方紧跟一行小号限定语Body正文每一节由一个支撑性数据或图表锚定正文不再是无序的功能罗列而是围绕一个核心指标逐节展开证据Divider分割线统计块之间用 hairline 细线全页启用tabular-nums让成列数字纵向对齐Button按钮描边 chip对齐在限定语下方是「读报告 →」这类导出动作而非「立即购买」式主 CTAImage图像图表与小数据可视化严禁摄影图片——Stat-Led 页面里出现实拍照片即破坏数据叙事的一致性Reveal揭示英雄区数字滚动计数从 0 计数到目标值时长约 500 ms这六条不是装饰性建议。原文档的措辞是 bundled as a single named choice——宏结构一次打包了 heading 位置、正文构成、分割线语言、按钮语气、图像处理、揭示模式六个轴比从零分别挑选六个独立维度更快、更不容易出错也「在类别上更具多样性」。表格数字tabular-numsStat-Led 的排版底线Stat-Led 中「数字」是主角因此数字的排版质量直接决定页面的可信度。typography.md 明确要求Tabular numbers on any data display:font-variant-numeric: tabular-nums;原因在于多数字体的默认数字是比例数字proportional figures1、7、0的字宽各不相同。成列的数字价格、日期、指标对比若用比例数字渲染会纵向参差不齐让整页统计数据看起来像随手排的草稿。Stat-Led 要求所有数字展示都启用font-variant-numeric: tabular-nums使每个数字占据等宽字元成列数字天然对齐。这一规则在 Hallmark 项目自身得到了严格执行site/css/base.css 提供工具类.tnum { font-variant-numeric: tabular-nums; }并在code, kbd, samp, pre等元素上直接启用了font-feature-settings: tnum官方 stat-led hero 模板中的数字直接绑定该特性span classhero__stat tabular-nums{{stat}}/span见 site/index.htmlanti-patterns.md 将「表格数据没有使用 tabular-nums」列为 Major 级 AI 生成信号Tabular data without tabular-nums修复方式即对任何展示数字列容器的容器加上font-variant-numeric: tabular-nums;。值得留意的是 typography 文档的另一条配套规则正文中应使用旧式数字oldstyle-nums而数据展示使用表格数字——两者职责不同Stat-Led 的数字区属于后者。Reveal 揭示动效500 ms 数字滚动计数Stat-Led 唯一的标配动效是英雄区数字的number-tick计数器从 0 滚到目标值时长约500 ms。这个设计有双重目的制造「数据正在生成」的瞬时专注力——数字滚动是短暂、一次性的事件完成后页面立即归于平静不会像常驻动画那样分散注意力用动效强调数字是「活的证据」——它暗示这个数字背后存在一个真实的、正在发生的量而非静态装饰。Hallmark 的动效纪律同时为这条规则划了边界见 SKILL.md 与 slop-test.md只动画transform与opacity绝不动画布局属性使用三个具名缓动--ease-out/--ease-in/--ease-in-out禁止浏览器默认ease与 bounce/overshoot 缓动——后者是反模式清单中的Bounce and elastic easing必须支持prefers-reduced-motion: reduce空间动效折叠为 ≤150 ms 的 opacity 交叉淡化。实际上site/js/main.js 首页实现了一个更彻底的立场.reveal元素在加载时即被强制标记为最终状态document.querySelectorAll(.reveal).forEach((el) el.classList.add(is-in))滚动进场动画整体被禁用——Reveal/scroll-in animations are disabled by design目的是让滚动阅读保持干净。这意味着 Stat-Led 的数字滚动更应被理解为「一次性的开场仪式」而不是页面所有元素都要参与的入场表演。何时使用、何时回避诚实的取舍判断原文档给出了明确的选用判据这也是 Stat-Led 区别于其他 20 种宏观结构的决策边界选用时机当简报本质上是在说「we have proof in numbers」——企业/B2B 产品、募资平台、气候或影响力impact页面。这类页面的说服力来自可核验的量99.97% 可用性、847 家公司完成合规、434 篇技术文章。参考方向文档原文Ahrefs、Stripe Sessions 的统计块、气候影响看板、风投机构的投资组合页。回避时机当产品没有一个可捍卫的单一指标时。原文档的警告非常直接A fake big number is worse than no number.一个假的巨大数字比没有数字更糟。这是 Stat-Led 的道德底线也是 Hallmark 全局四大纪律之一Honest copy — no fabricated content在宏观结构层的落点anti-patterns.md 将Invented metrics编造指标10× faster、trusted by 50,000 teams、99.9 % uptime、47 % conversion列为 Major 级 AI 生成信号slop-test.md 的Gate 56将其设为硬性失败项Stat-led macrostructures are slop the moment their stats become decorative.Stat-Led 宏观结构一旦让统计数字变成装饰就是 slop。Gate 56 给出了三级修复方案按优先级排列用—加上带标签的灰色占位块metric to confirm / stat pending替代数字向用户索取真实数字并暂停本次运行去掉该证明位、重构该节——一个没有真实数据的 Stat-Led 就是错误选型。「数字形状的洞是诚实的编造的数字是 slop。」这句话是整个宏观结构对 AI 生成页面的核心态度宁可留白不可虚构。开场文案模仿「具体性」而不是措辞原文档提供了三条示例开场Sample opening lines并强调要模仿的是具体性specificity而不是字面措辞——因为在这类页面里真正干活的是数字本身47% · faster · decide late.— 斜体数字 三词限定语4 seconds. From the alert link to the slow span.— 把数字与它换来的结果配对434 total posts. New CSS you feel like you could use today.— Adam Argyle, nerdy.dev——用计数把页面锚定在真实体量上分析这三条的共同语法可以得到可复用的文案模式斜体数字 短语限定语数字用斜体突出限定语控制在三四个词以内用连字符或点号与数字衔接数字 它买到的东西不要只抛数字要让读者立刻知道「这个数字意味着什么」——4 秒是从告警链接到慢跨度的时间计数 体量感用真实的内容量434 篇文章为页面建立「这不是空壳而是有真实积累」的印象。注意第三条引自真实世界Adam Argyle / nerdy.devHallmark 将真实来源的引用作为示例同时强调模仿具体性而非照抄措辞。实战 HTML 骨架与仓库实现验证原文档给出的 Stat-Led 最小骨架如下section classstat-hero div classfigure tnum99.97span classunit%/span/div p classqualifieruptime across 2026, measured externally./p a classcta-outlineRead the report →/a /section section classsupporting-stats…/section这个骨架在 Hallmark 项目中有一套对应的、经过实际渲染验证的官方模板。在 site/index.html 中hero-stat-led模板被实现为template idhero-stat-led div classhero hero--stat div classhero__main p classhero__eyebrowspan classmark aria-hiddentrue/span{{eyebrow}}/p span classhero__stat tabular-nums{{stat}}/span p classhero__qualifier{{qualifier}}/p p classhero__lede{{lede}}/p a href#install classlink hero__link{{cta}} rarr;/a /div aside classhero__moment aria-hiddentrue/aside /div /template对照两条实现可以提炼出 Stat-Led 英雄区的五个必备 DOM 结构点.hero__eyebrow顶部小眉题原文档未强制但 Hallmark 模板用于承载主题语境.hero__stat.tabular-nums核心大数字必须带tabular-nums.hero__qualifier限定语小号行紧贴数字下方.hero__lede简短说明进一步限定数字的含义与测量方式对应原文档 measured externally 这类自证严谨的措辞.link.hero__link描边链接式 CTARead the report →对齐在限定语下方。其中{{...}}是 Hallmark 首页的主题文案插值占位符由 site/js/main.js 的interpolate()函数在切换主题时动态填充。这也揭示了一个工程细节Stat-Led 数字不是写死的而是作为「主题文案夹具」随主题轮换——sport主题的stat: 23、almanac主题的stat: 462、brutal主题的stat: 100分别配合各自的qualifier形成独立的叙事单元见 site/js/main.js 的COPY表。在完整落地页流程中的位置选型纪律与多样化Stat-Led 不是孤立的设计块它在 Hallmark 的完整 Design flow 中占据明确的位置第一步是选型声明。macrostructures.md 要求写任何代码之前先在纯文本中声明「Macrostructure: Stat-Led. Theme: X. Differs from the last on: .」这是防止模型滑回默认形态的问责线。同时遵守多样化规则——若目标代码库已有/* Hallmark · macrostructure: name · ... */印记则本次选择必须与上次不同连续两次 Hallmark 输出共享同一宏观结构即构成Default-attractor sameness默认吸引子同质化这是反模式清单中的 Critical 级信号。第二步是配套选择。Stat-Led 必须连同导航与页脚原型一起选择Hero → N# → Ft#并且导航/页脚同样受多样化规则约束见 SKILL.md Step 2。第三步是 SaaS 页面序列。当宏观结构是Bento Grid / Stat-Led / Workbench / Marquee Hero且简报是 B2B SaaS 营销页时macrostructures.md 给出了推荐区块顺序Hero → 客户 Logo 墙 → Features → Testimonials → Pricing → FAQ → 最终 CTA 条 → Footer。但 Stat-Led 的呈现方式与众不同——「一个 Bento 页面把证据交织在网格里一个 Stat-Led 页面把它们自上而下排成序列」。Stat-Led 的正文字节通常放在支撑统计网格section classsupporting-stats…/section之后每一节由一个支撑性数字或图表锚定。一个可对照的实战案例出现在 site/_tests/07-foundry-compliance/brief.md 中FoundrySOC2/ISO27001 合规自动化 SaaS的第一版落地页即采用 Stat-Led——以847已完成合规的公司数作为 22 rem 大小的锚定数字配 Plain 主题、深墨蓝强调色正文按 9 段线性 SaaS 结构展开。该测试记录同时展示了 Stat-Led 的多样化约束如何生效第二版改为 Bento Grid 时明确声明「Macro: Stat-Led → Bento Grid」并在 Stamp 中记录轴差异display style accent hue 双轴不同因为「同一数据、不同编舞Same data, different choreography」正是 Hallmark 结构多样性的考核标准。而 v1 中847这个锚定数字来自简报真实声明how many companies got compliant与 Gate 56 的诚实数据原则严格对应。与其他宏观结构的边界为什么它是「唯一命名选择」最后值得强调 Stat-Led 与近邻结构的边界这决定了何时该选它而不是别家vs. Marquee Hero03Marquee 用一句大胆声明占满首屏无副标题、无折叠内 CTAStat-Led 则必须有一个可核验的数字承担叙事。声明可以是观点数字必须是证据vs. Quote-Led09Quote-Led 借他人之口pull-quote 署名建立信用Stat-Led 用自身数据建立信用——前者是「被引用」后者是「可测量」vs. Bento Grid01Bento 可以把统计数字当作网格中与 Logo、价格、引用并列的一块磁贴如 Foundry v2 的847进入 bento tileStat-Led 则让数字独占英雄区正文只是它的展开与限定。原文档的收尾判断仍然是最简洁的决策依据「Reach for it when the brief is we have proof in numbers」——当简报的潜台词是「我们在数字上有证明」就选 Stat-Led当产品拿不出一个能站得住脚的单一指标就用别的宏观结构。这个「先有真数、后有版面」的次序正是 Hallmark 反 AI 套路的全部精髓不是让布局假装有数据而是让真实数据自己决定布局。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考