Marquee Hero 首屏声明式布局：Hallmark H1 英雄区组件的完整实现指南

Marquee Hero 首屏声明式布局：Hallmark H1 英雄区组件的完整实现指南

【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark

导读

H1 · Marquee 是 Hallmark（面向 Claude Code / Cursor / Codex 的反 AI-slop 设计技能）组件配方库中九种英雄区（H1–H9）之首，对应 21 种页面宏结构中的 Marquee Hero。它的核心理念是：一句声明填满整个首屏，没有副标题、没有 CTA、没有图片，折叠区里只有排版。本指南将带你从组件级代码骨架出发，逐步掌握它的适用场景、与 Stat-Led 等相近原语的辨析、字号与行高的排版纪律、响应式硬性要求，以及如何通过仓库中的 token 体系与主题轴把它接入真实页面。读完你既能直接复刻这一范式，也能判断什么时候不该用它。

一、组件定义：一句话说清 H1 Marquee

h1-marquee.md对 H1 · Marquee 的定义非常克制，原文仅两句话加一段代码：

H1 · Marquee—— 一句声明填满首屏（a single statement fills the fold）。没有副标题，视野内没有 CTA。适用场景：品牌或个人本身就是信息（the brand or personisthe message）。不要混淆：H4 Stat-Led —— 那是"一个数字"作英雄，不是"一句声明"。

它给出的最小实现只有两段：

<section class="hero-marquee"> <h1 class="display-xxl">A statement.</h1> </section>

.hero-marquee { min-height: 80dvh; display: grid; align-content: end; padding: 0 var(--page-gutter) var(--space-2xl); } .display-xxl { font-size: clamp(4rem, 12vw, 12rem); line-height: 0.92; }

注意这段 CSS 中每一个值都不是随手写的——dvh、clamp()、var(--page-gutter)、var(--space-2xl)、0.92分别对应 Hallmark 在响应式、排版、空间与 token 四个维度上的强制纪律，下文逐一展开。

二、宏结构视角：Marquee Hero 在整页布局中的位置

在 macrostructures.md 的 21 个命名宏结构索引中，Marquee Hero 排第三（03），其专属文件 03-marquee-hero.md 给出了更完整的页面级定义——英雄区就是首屏之上的整个页面：

英雄区即首屏之上的一切（The hero IS the page above the fold）。一句大胆的声明或视觉填满视口。折叠区内无副标题、无 CTA。折叠区之下页面变成别的东西（列表、网格、散文）。

它还规定了六个结构轴上的默认值：

什么时候用：品牌或个人本身就是信息——设计师/导演作品集、单一宣言式声音的独立产品、任何"This is who we are"类型的页面。

什么时候避开：产品的价值需要在几秒内解释清楚的场景。Marquee 会让用户先滚动才能理解——需要解释的产品不适合让声明把首屏占满。

该文件同时给出页面级骨架（比组件版多了一个粗规则线与下方区块）：

<section class="marquee"> <h1 class="display-xxl">A statement.</h1> </section> <hr class="rule-thick" /> <section class="below-fold">…</section>

宏结构级别的规则是对组件级定义的"放大镜"：组件的min-height: 80dvh落实了"填满折叠区"，align-content: end落实了"紧贴视口边缘（底部）"，而"无 CTA / 无图片"则由组件骨架中根本不存在<a>与<img>来保证。

三、与相近原语的辨析：H4 Stat-Led 与 T4 数字条

Hallmark 组件配方刻意用"不要混淆"（Don't confuse with）来避免模型（和人类开发者）在相近范式之间选错。H1 Marquee 有两个直接邻居：

H4 · Stat-Led（h4-stat-led.md）—— 英雄区是一个巨大的数字或指标，下面跟一行小字限定语：

<section class="hero-stat"> <p class="figure tnum">99.97<span class="unit">%</span></p> <p class="qualifier">…</p> </section>

.figure { font-size: clamp(6rem, 18vw, 16rem); font-variant-numeric: tabular-nums; line-height: 0.85; }

注意两者的区别是语义而非视觉：H1 Marquee 用一句声明作英雄（"A statement."，声明的是身份与立场）；H4 Stat-Led 用一个可辩护、可外部验证的数字作英雄（99.97%，限定语解释它是什么）。数字不是声明，声明不是数字——这是两条原语的分界线。此外 H4 的数字必须使用font-variant-numeric: tabular-nums（等宽数字）以对齐数据列，而 H1 Marquee 的声明排版不需要。

T4 · Numbered stat strip（数字条）—— 横排多个统计数字，而不是单个焦点数字。T4 属于"横排多 stat"，H4 是"单焦点数字"，两者的区分写在 h4-stat-led.md 的"不要混淆"里；而 H1 Marquee 与它们都不同——它既不是数字也不是数字列表，而是完整的一句话。

选型时可以用一个快速判断：把英雄区换成"99.97%"是否成立？成立则往 H4/T4 走；不成立则 H1 Marquee 更合适。反过来说，如果品牌本身就是信息，任何数字都会稀释它。

四、关键样式逐项解析：每个值背后的纪律

4.1min-height: 80dvh—— 视口单位与"折叠区占比"

组件用min-height: 80dvh而非100vh。这是刻意为之：layout-and-space.md 明确禁止"min-height: 100vh英雄区加一句居中文字"（这是 AI 指纹，对应 slop-test 门 7），hero-enrichment.md 的"英雄区空间纪律"进一步规定：

英雄区占首屏高度的 70–90%，不多不少。目标写法是min-height: clamp(60vh, 75dvh, 88dvh)，让内容在内部自然沉降。

dvh（dynamic viewport height）替代vh是 responsive.md 的硬性要求："移动端浏览器工具栏伸缩时vh会跳动，高度交互场景一律使用dvh/svh/lvh。"组件原型的80dvh正落在 70–90% 区间内，兼顾"填满"与"不冒充全屏"。

4.2display: grid; align-content: end—— 底部锚定而非居中

声明式英雄区最常见的错误是把标题垂直居中——这会让首屏显得像一张空海报。align-content: end把内容压向视口底部，配合不对称内边距（padding-bottom显著大于顶部，无顶部 padding），制造"文字落在页面脚底、上方是巨大留白"的视觉。这一不对称原则在 hero-enrichment.md 中被编码为硬规则："padding-block-end≥ 1.3×padding-block-start，英雄区要坐进页面里，对称内边距会显得漂浮"（slop-test 门 54）。

4.3padding: 0 var(--page-gutter) var(--space-2xl)—— token 化，禁止裸值

这一行全部使用 token 而非裸像素：

• --page-gutter：视口两侧留白，在 tokens.css 的 Specimen 主题中定义为clamp(1.25rem, 4vw, 3rem)，随视口流式变化；
• --space-2xl：4pt 间距刻度中的一步（4rem/ 64px，见 layout-and-space.md 的九级间距表），底部留白用它保证与页面其他区块的间距同源。

这也是 Hallmark 四条跨动词纪律之一——锁定 token，禁止渲染中途即兴发挥："一旦选定主题，产物中每个颜色与font-family声明都必须引用命名 token；如果需要一个不存在的值，先把它提升为 token 再引用。"（SKILL.md 纪律 3）

4.4clamp(4rem, 12vw, 12rem)—— 三参数流式缩放

clamp(MIN, PREFERRED, MAX)让标题字号随视口连续变化而不是断点跳变：responsive.md 规定"连续变化的大小用clamp()，离散变化的布局才用媒体查询"。三个参数的含义：

这与宏结构级"display 填满折叠区——8–14 vw"的要求一致（12vw落在区间中部），也呼应 HP2 Marquee-overflow 抛光模式（见第六节）中clamp(4rem, 14vw, 14rem)的写法——溢出模式上限更高、更激进。

4.5line-height: 0.92—— 展示字号的收紧行高

typography.md 规定行高随字号变化："展示字号收紧到 1.05–1.2，正文舒适区间 1.5–1.65。"0.92甚至低于 1.05 下限，因为这是巨型单行声明——字体设计上超大 display 尺寸自带呼吸感，行高趋近 1 是排版界惯例。但该文件同时给出全大写展示字号的硬下限警告：全大写 display 标题的行高下限是 1.0，推荐 1.02–1.08——低于 1.0 时下一行的 cap-top 会撞上一行的基线（全大写没有 descender 缓冲），换行的"PROMPT, / DIFFERENT"会把逗号与大写 D 熔成一个字形（slop-test 门 67）。Marquee 声明通常不是全大写，0.92可接受；若你打算用全大写声明（如 Manifesto 风格），请切换到 1.02。

4.6 两侧留白与字号上限的"红区"

tokens.css 中每个主题的--text-display都给出了自己的 clamp 值，例如：

H1 Marquee 的12vw曲线明显比这些页面级 token 激进——它属于"英雄区专用档"，而非页面通用 display 档。不过 typography.md 同时给出全局上限：display 最大值 ≤ 5.5rem（88px），仅 Manifesto / Brutal 等 aggressive-display 主题可放宽到 6rem（96px），唯一例外是"单行、单字、≤ 12 ch 的展示（如一个数字）"可到 7rem。这意味着组件原型的12rem上限只应在真正的短声明（≤ 20 字符的单行）中使用，超过 50 字符的长声明必须降档——这就是下一节的标题文案纪律。

五、标题文案纪律：声明要短到配得上巨型字号

Marquee 的整个存在理由是"一句声明撑满首屏"，因此文案长度是决定成败的第一变量。typography.md 的"英雄区标题字号随文案长度分档"规则（同样约束 Marquee）：

配套的硬规则："当你自己撰写标题（而非用户提供文案）时，从一开始就瞄准 ≤ 7 个词、≤ 50 个字符——祈使句或名词短语，绝不用 -ing 开头。"

03-marquee-hero.md 还给出了三句可模仿的"开场声明"范例（模仿的是具体性而非措辞）：

"Type, set with care." —— 把字体当材料对待的宣言 "A studio for what's next." —— 斜体编辑体展示，命名实践而不解释它 "Design like print: warm, off-register, intentional." —— 三个修饰语 + 句号

共同点：具体、短、主谓完整、无需解释。声明不解释自己——解释是副标题的工作，而 Marquee 里没有副标题。

六、两个扩展方向：HP2 溢出抛光与 E8 全出血照片

英雄区宏结构（含 Marquee Hero）允许叠加一个"抛光模式"（HP1–HP4）和最多一个"富化原型"（E1–E8），但两个抛光模式互斥。与 Marquee 直接相关的有两个：

6.1 HP2 · Marquee-overflow（标题溢出视口）

hero-enrichment.md 的 HP2 让 H1故意大于视口——标题从右缘溢出去，读感是"这个声明大到页面装不下它"：

.hero--overflow { overflow-x: clip; padding: var(--space-2xl) var(--page-gutter); } .hero__display--xxl { font-family: var(--font-display); font-weight: 800; font-size: clamp(4rem, 14vw, 14rem); line-height: 0.92; letter-spacing: -0.04em; margin: 0; white-space: nowrap; } @media (max-width: 60rem) { .hero__display--xxl { white-space: normal; font-size: clamp(2.5rem, 10vw, 5rem); } }

适用：playful 流派（Brutal / Manifesto / Sport）且标题短（≤ 6 词）。规避：标题含必须完整可读的法定信息（隐私声明页）。关键实现细节是overflow-x: clip只作用在英雄区容器上，且绝不同时在html/body上用overflow-x: hidden（后者会破坏后代元素的 sticky/fixed 行为，layout-and-space.md 有完整说明）。移动端必须回到white-space: normal并降档字号——溢出在 375px 视口上读起来像 bug。

6.2 E8 · 全出血照片背景

宏结构级的 Image 轴允许"一张全出血照片作为折叠区背景"——这是 Marquee 唯一合法的图片形态，且图片是背景、排版仍是主角。与之相对，hero-enrichment.md 的"图片需求检测"表要求先判断 brief 是否真的需要影像：默认是纯排版（typography-only）。编辑、信函、字体工坊、宣言类 brief 明确"不需要影像——展示排版本身就是设计"。SaaS、API、文档、CLI、开发工具类 brief 同样"不需要影像——纯排版，必要时用代码块"。只有当 brief 命中 e-commerce / 摄影 / 餐饮 / 旅行等"需要照片"的行时，才走 E8 并必须使用用户提供的真实照片或明确占位，严禁把编造的库存图当最终设计交付。

七、响应式硬性要求：四个宽度 + 一个根级 clip

Marquee 声明式英雄区在移动端的头号风险是横向滚动（巨型字号溢出）和点击文本换行（如果折叠区内放了 CTA）。responsive.md 把移动端达标定为不可谈判的硬地板：

• 每个产出必须在320 / 375 / 414 / 768 px四个宽度完美渲染；
• 无横向滚动（slop-test 门 36）：根元素html与body都带overflow-x: clip，绝不使用hidden（门 62）；
• display 标题用overflow-wrap: anywhere; min-width: 0让长词在内部折行（门 63）；
• 点击文本（按钮、导航、CTA）永不换行（门 59）——Marquee 折叠区内本无 CTA，若你违反第六节规定在折叠区加了按钮，这条立即生效；
• 高度一律dvh，绝不用vh；width绝不写100vw（含滚动条导致溢出）；
• 断点以rem写（尊重用户字号），内容驱动的断点优先于设备断点：@media (min-width: 40rem)（~640px）、60rem（~960px）、90rem（~1440px）。

对于clamp(4rem, 12vw, 12rem)这类 vw 驱动字号，320px 视口下12vw ≈ 38px，低于4rem（64px）下限，所以实际生效值是 64px——移动端仍然偏大，这正是"声明必须 ≤ 50 字符"的原因：短声明在 64px 下可单行或双行承载，长声明会形成灾难性的多行巨型文本块。

八、与主题系统集成：三轴多样化规则

H1 Marquee 是组件原语，实际页面中它总是以某个 Hallmark 主题落地。每个主题在 tokens.css 顶部都有注释标注其三个多样化轴值（纸面色带 / 展示字体风格 / 强调色相），SKILL.md 要求连续两次产出的主题至少在一个轴上不同：

例如：Marquee 声明 + Studio 主题 = Fraunces 斜体衬线 + 森林绿强调 + 冷灰纸（oklch(96.5% 0.005 200)），这是 14islands 式现代工作室口吻；Marquee 声明 + Manifesto 主题 = Anton 全大写压缩无衬线 + 红强调 + 黑纸（oklch(10% 0.005 60)），这是政治海报式的宣言能量。同一个 H1 Marquee 骨架，靠主题轴差异就能产出完全不同气质的页面——这正是 SKILL.md 强调的"结构性多样，而非视觉换皮"。

集成时注意 token 归属：组件原型里的--page-gutter、--space-2xl是通用 token；字号档位则建议收敛到所选主题的--text-display/--text-display-s（各主题已按纸面色带调好），只有声明极短（≤ 20 字符）时才允许走组件级的clamp(4rem, 12vw, 12rem)英雄档。

九、仓库中的真实应用：site/index.html 与 tally 示例

Hallmark 仓库自身就实践了这一范式，是"文档描述"与"源码实现"互证的最佳样本：

• site/index.html 的#hero-marquee模板（L848–L862）实现了带 eyebrow、声明标题、lede、CTA 码块的 Marquee 变体——注意它在生产版中加入了折叠区 CTA（安装命令），说明该模板是"继承 Marquee 底对齐 + 大 display + 页脚留白"的混合变体，骨架元素（hero__main内容块、hero__moment装饰块）与组件原型一一对应；
• site/examples/tally/index.html L90–L92 使用.hero__marquee/.hero__marquee__track实现了真正的 marquee 滚动条带（aria-hidden="true"的纯装饰滚动文本），可作为"声明之下第二层 marquee 纹理"的参考；
• tokens.css 是全部 22 个主题的 token 源头，也是主题轴多样化规则的机器可读版本。

阅读这些文件时注意一个分层：组件配方（references/components/）是"原型"，示例站点（site/）是"实例"。实例可以为了真实内容扩展原型（加 lede、加 CTA），但扩展时必须回到第五、六、七节的纪律框架内自检，否则原型想防止的 AI-slop 特征会从扩展缝里漏回来。

十、完整可运行示例（组件 → 页面级）

将组件原型、宏结构骨架与 token 纪律拼合成一个可直接落地的 Marquee Hero 页面：

<header class="hero-marquee"> <h1 class="display-xxl">A studio for what&rsquo;s next.</h1> </header> <hr class="rule-thick" /> <main class="below-fold"> <!-- 作品列表 / 网格 / 散文 —— 英雄区不延续到这里 --> </main>

/* tokens.css 已在项目根引入 */ .hero-marquee { min-height: 80dvh; /* 折叠区占比，禁 100vh */ display: grid; align-content: end; /* 底部锚定，不居中 */ padding: 0 var(--page-gutter) var(--space-2xl); /* 全部 token 化 */ } .display-xxl { font-family: var(--font-display); /* 主题展示字体 */ font-size: clamp(4rem, 12vw, 12rem); /* ≤20 字符短声明专用 */ line-height: 0.92; letter-spacing: -0.025em; /* 收紧跟踪（theme 的 --tracking-display） */ margin: 0; } .rule-thick { border: 0; border-top: var(--rule-fine) solid var(--color-rule); margin: 0; } /* 根级防横向滚动（slop-test 门 36 / 62） */ html { overflow-x: clip; } body { overflow-x: clip; } /* 移动端：长标题降档 + 防内部折行溢出（门 63） */ @media (max-width: 40rem) { .display-xxl { font-size: var(--text-display-s); overflow-wrap: anywhere; min-width: 0; } }

落地后按走查清单过一遍：声明是否 ≤ 50 字符且无副标题也能自明？折叠区内是否真的没有 CTA/图片？四个宽度下是否无横向滚动、标题是否 ≤ 2 行？是否已用prefers-reduced-motion关闭一切入场动画（Marquee 默认静态，无需额外处理）？是否以/* Hallmark · macrostructure: Marquee Hero · ... */注释盖了章（SKILL.md 第 6 步）？

十一、一句话总结

H1 Marquee 的全部智慧可以压缩成一句反转的判断：声明越短，字号越敢大；品牌越自我，页面越敢空。它的代码只有五条 CSS 声明，但它要求的排版纪律（短文案、底部锚定、token 化、dvh、根级 clip）才是它区别于"AI 生成的大字居中页"的真正边界——前者是设计决策，后者是 slop 的另一种形态。

【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark