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 Hero（03）、Quote-Led（09） 的本质区别：前两者分别以「一句声明」或「一段引语」开场，而 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，对齐在限定语下方 | 是「读报告 →」这类导出动作，而非「立即购买」式主 CTA |
| Image（图像） | 图表与小数据可视化 | 严禁摄影图片——Stat-Led 页面里出现实拍照片即破坏数据叙事的一致性 |
| Reveal（揭示） | 英雄区数字滚动计数 | 从 0 计数到目标值，时长约 500 ms |
这六条不是装饰性建议。原文档的措辞是 "bundled as a single named choice"——宏结构一次打包了 heading 位置、正文构成、分割线语言、按钮语气、图像处理、揭示模式六个轴，比从零分别挑选六个独立维度更快、更不容易出错，也「在类别上更具多样性」。
表格数字（tabular-nums）：Stat-Led 的排版底线
Stat-Led 中「数字」是主角，因此数字的排版质量直接决定页面的可信度。typography.md 明确要求：
Tabular numbers on any data display:
font-variant-numeric: tabular-nums;
原因在于，多数字体的默认数字是比例数字（proportional figures），1、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 class="hero__stat tabular-nums">{{stat}}</span>（见 site/index.html）； - anti-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.dev），Hallmark 将真实来源的引用作为示例，同时强调模仿具体性而非照抄措辞。
实战 HTML 骨架与仓库实现验证
原文档给出的 Stat-Led 最小骨架如下：
<section class="stat-hero"> <div class="figure tnum">99.97<span class="unit">%</span></div> <p class="qualifier">uptime across 2026, measured externally.</p> <a class="cta-outline">Read the report →</a> </section> <section class="supporting-stats">…</section>这个骨架在 Hallmark 项目中有一套对应的、经过实际渲染验证的官方模板。在 site/index.html 中，hero-stat-led模板被实现为：
<template id="hero-stat-led"> <div class="hero hero--stat"> <div class="hero__main"> <p class="hero__eyebrow"><span class="mark" aria-hidden="true"></span>{{eyebrow}}</p> <span class="hero__stat tabular-nums">{{stat}}</span> <p class="hero__qualifier">{{qualifier}}</p> <p class="hero__lede">{{lede}}</p> <a href="#install" class="link hero__link">{{cta}} →</a> </div> <aside class="hero__moment" aria-hidden="true"></aside> </div> </template>对照两条实现，可以提炼出 Stat-Led 英雄区的五个必备 DOM 结构点：
.hero__eyebrow：顶部小眉题（原文档未强制，但 Hallmark 模板用于承载主题语境）；.hero__stat.tabular-nums：核心大数字，必须带tabular-nums；.hero__qualifier：限定语，小号行，紧贴数字下方；.hero__lede：简短说明，进一步限定数字的含义与测量方式（对应原文档 "measured externally" 这类自证严谨的措辞）；.link.hero__link：描边链接式 CTA（Read 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 class="supporting-stats">…</section>）之后，每一节由一个支撑性数字或图表锚定。
一个可对照的实战案例出现在 site/_tests/07-foundry-compliance/brief.md 中：Foundry（SOC2/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 Hero（03）：Marquee 用一句大胆声明占满首屏，无副标题、无折叠内 CTA；Stat-Led 则必须有一个可核验的数字承担叙事。声明可以是观点，数字必须是证据；
- vs. Quote-Led（09）：Quote-Led 借他人之口（pull-quote + 署名）建立信用；Stat-Led 用自身数据建立信用——前者是「被引用」，后者是「可测量」；
- vs. Bento Grid（01）：Bento 可以把统计数字当作网格中与 Logo、价格、引用并列的一块磁贴（如 Foundry v2 的
847进入 bento tile）；Stat-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），仅供参考
