企业官网建设流程全解析

Hallmark H3 Quote-Led 组件实战：用"借来的可信度"构建首屏引文英雄区

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

本篇技术指南围绕 Hallmark（Anti-AI-slop 设计技能）组件库中的H3 · Quote-Led（引文引导型首屏）展开，说明如何用一条带归属信息的 pull-quote（摘引）替代品牌自说自话的标题，让页面首屏直接承载社会证明。你将掌握 H3 与 T3 两类引文组件的定位差异、完整的 HTML/CSS 落地骨架、变体调节旋钮、排版与文案纪律，以及它在 Quote-Led 宏结构（skills/hallmark/references/macrostructures/09-quote-led.md）中的页面级编排方式，并对照仓库内 Tide 测试案例（site/_tests/01-tide-podcast/brief.md）理解其真实用法。

H3 Quote-Led 是什么：首屏即证言

在 Hallmark 的组件体系里，H3 是九个英雄区（H1–H9）原型的第三个。它的核心定义只有一句话：

A pull-quote with attribution is the hero. Your headline is borrowed credibility. （一条带署名的摘引就是英雄区。你的标题是借来的可信度。）

与绝大多数"品牌自己喊口号"的首屏不同，H3 把发言权让渡给用户——首屏第一眼看到的是别人对产品的评价，而不是产品对自己的描述。页面的叙事姿态从"我有多好"变成"别人说我好"，这一姿态转换正是 Quote-Led 宏结构（skills/hallmark/references/macrostructures/09-quote-led.md）与 H3 组件共享的基因："The hero is a pull-quote with attribution. The headline is borrowed credibility, not the brand's voice."

使用时机

原文档明确给出适用条件：

• Use when:你拥有一条真实的、值得登上首页的客户证言（a real testimonial that earns the front page）。
• 适合 B2B 产品（客户声音强）、agency 案例页、募资网站——凡是"people like me use this"（和我一样的人在用）能成为转化撬点的地方都适用，见宏结构文件的Reach for it说明。
• 避免：新产品没有真实证言时不要使用。宏结构文件对此有硬性警告："Avoid for new products without real testimonials. Fake quotes destroy trust on inspection."（没有真实证言的新产品避免此结构，虚构引文一经审视即摧毁信任。）

这一条与 SKILL.md 全局纪律 2"Honest copy — no fabricated content"完全一致："+47 % conversion"、"trusted by 50,000+ teams"这类虚构指标、虚构证言一旦被编造，就是 slop，详见 skills/hallmark/references/anti-patterns.md 与 skills/hallmark/SKILL.md。

与 T3 Single Huge Quote 的定位区分（易混淆项）

原文档用一句话划清边界：

Don't confuse with:T3 Single huge quote (which lives mid-page, not in the hero slot).

对比两个组件的完整规格：

判断口诀：H3 是"门面"（首屏的第一句话是别人说的），T3 是"房间"（页面走完一半后，用一条足够好的引文独享整个版面）；T1（Pull quote with marginalia）则是夹在正文侧栏的"边座"。三类引文组件的存在本身就是 Hallmark 强调"结构多样性"的体现——同一个页面内不允许两个 section 使用同一原型（skills/hallmark/references/component-cookbook.md）。

最小可用 HTML 骨架

原文档给出的 H3 结构极其克制，只有两个元素：

<section class="hero-quote"> <blockquote class="display-italic">"…"</blockquote> <p class="attribution">— Name, Role, Company</p> </section>

在此基础上，宏结构文件补充了第三个可选元素——文字链接 CTA（Button 定位为"typographic link beneath the attribution"，如 "Read the full case study →"）：

<section class="quote-hero"> <blockquote class="display-italic">"…"</blockquote> <p class="attribution">— Name, Title, Company</p> <a class="link">Read the case →</a> </section> <section class="more-quotes">…</section>

落到 CSS：遵循 Hallmark 的 token 纪律

按照 SKILL.md 全局纪律 3"Locked tokens"（skills/hallmark/SKILL.md），所有颜色与字体必须引用命名 token，禁止内联 OKLCH/hex/rgb 值。结合 skills/hallmark/references/typography.md 的排版规则，一个符合规范的样式骨架如下：

.hero-quote { /* 引文使用 display 字体槽位，斜体家族（italic serif 是 Quote-Led 的默认声部） */ display: grid; gap: var(--space-md); padding-block: var(--space-3xl); } .hero-quote .display-italic { font-family: var(--font-display); /* 斜体 serif display，如 Fraunces */ font-style: italic; font-size: var(--text-display); /* clamp(2.75rem, 5vw + 1rem, 5.25rem) 起步 */ line-height: 1.05; letter-spacing: -0.02em; max-width: 24ch; /* 引文宜短，控制 measure */ } .hero-quote .attribution { font-family: var(--font-body); font-size: var(--text-sm); letter-spacing: 0.08em; /* 小号大写字母风格的松散字距 */ text-transform: uppercase; /* 若字体支持，优先 font-variant-caps: all-small-caps */ }

关键排版约束（来自 typography.md）：

• 字号：宏结构规定首屏引文为 36–60 px（--text-display区间），归属行小号大写字母（small caps）。
• 行高：display 级 1.05–1.2，正文级 1.5–1.65。
• 标点：必须使用弯引号"…"，禁止直引号、禁止--或...（copy.md 与 anti-patterns 的Straight quotes条目都将其列为修复项；正文请用"…"这类实体或字符）。
• 字体上限：整页最多三种家族（display + body + 一个可选 outlier），引文正是 outlier 的典型单点使用场景之一——"pull quote + masthead"是官方认可的两个 outlier 槽位。

变体旋钮（Within-archetype variation knobs）

组件手册（skills/hallmark/references/component-cookbook.md）为 H3 定义了三个调节旋钮，每次输出必须选定取值并写入 stamp：

反模式警告：两次输出使用相同 knob 取值，与两次使用同一原型一样属于模板化；上次选了italic display + under quote + ≤80 chars，下次至少改动一个 knob。

页面级编排：09 · Quote-Led 宏结构

H3 是英雄区组件，而决定整页形状的是09 · Quote-Led宏结构（skills/hallmark/references/macrostructures/09-quote-led.md）。宏结构为六个结构轴定了默认值：

• Heading：斜体 display 排客户引文（36–60 px），下方小号大写字母归属。
• Body：继续铺陈更多证言、案例研究，或一条安静的功能清单。
• Divider：居中的引号字形（quote-mark glyph）或证言之间的 em-rule。
• Button：归属下方的文字链接（"Read the full case study →"）。
• Image：归属旁可放小头像或公司 logo；否则无图。
• Reveal：折叠内无 reveal；折叠以下可做 stagger（交错出现）。

配套的导航与页脚也由路由表决定（见 skills/hallmark/references/component-cookbook.md 底部路由表），引文英雄区不孤立存在。

引文文案的写作范例

宏结构文件给出了三条"具体性"样板，供生成时模仿其具体性（quote-led 页面让第三方发言再署名）：

"I started listening on a long bus ride. By the third episode I'd missed my stop, and I didn't mind."— Tide（测试 01），故事化、署名给一位听众

"Restraint, repeated, becomes a signature."— Hallmark Atelier，短句、哲思式、由工作室署名

"It told me the span that regressed, the deploy that caused it, and the engineer to ask. We rolled back in eight minutes."— Tracejam 风格，用数字点名结果

注意第二条来自 Hallmark 自身站点的 Atelier 主题——它证明了 Quote-Led 不限于 SaaS，也能为工作室/机构页面服务。

诚实文案纪律：Quote-Led 的生死线

由于 H3 的本质是"借来的可信度"，它对文案真实性的依赖高于任何其他英雄区。Hallmark 用三层机制兜底：

1. SKILL.md 纪律 2（skills/hallmark/SKILL.md）：用户没给数据就不要编数据。证言、logo、案例数量一律适用。
2. SaaS 证言细则（skills/hallmark/references/macrostructures.md）：署名必须包含被引者的角色 + 公司——抽象的 "Engineering Manager" 证言是 slop；真实产品用真实姓名；占位场景用可信的人名，绝不允许 "Jane Doe"/"John Smith"（slop-test gate 20）。引文要具体到使用场景（"Foundry got us SOC2 in five weeks"），避免 "We use [product] every day" 这类空话。
3. Slop-test：产出后须过 66/69 道 gate（skills/hallmark/references/slop-test.md），涉及证言的 gate 一个都不能妥协。

这与宏结构文件的警告形成闭环："Fake quotes destroy trust on inspection."—— 引文是页面里最经不起查验的元素，因为读者天然知道它可以被查证。

移动端折叠行为

组件手册的Mobile collapse表为 H3 规定了两个断点的行为（skills/hallmark/references/component-cookbook.md）：

• 60 rem（~960 px）以下：引文保持全宽，归属自动折到独立一行。
• 40 rem（~640 px）以下：引文字号降一档（display clamp 下限抬升），归属字号同步降档。

横向不可滚动（slop-test gate 36）、点击目标 ≥ 44×44 px（WCAG AA）等非协商项同样适用。

仓库内的实证：Tide 测试的 Quote-Led 版本

site/_tests/01-tide-podcast/brief.md 记录了 Hallmark 对同一 prompt（"build me a landing page for my indie podcast called Tide"）的两轮设计。其中 v1 正是Quote-Led + Atelier组合——页面以一位听众的引文开场（"By the third episode I'd missed my stop, and I didn't mind."）。v2 在多样化规则驱动下切换为 Letter 宏结构，brief 中如实记录了这次切换的设计推理，恰好是理解 H3 定位的最佳对照：

• 宏结构：Quote-Led → Letter。pull-quote 把播客框定为"被他人收听"（第三方背书）；Letter 把它框定为"主播致听众"（第一人称致意）。两者都成立，Letter 更私密。
• 声部：v1 以听众引文开场；v2 以主播的称呼开场。同样的字数预算，不同的修辞姿态。
• 结论：Quote-Led 适用于"第三方证言值得首屏"的场景；当内容本身的私密性（如音频、书信体）强于背书时，换用 Letter 更恰当。

该案例同时演示了核心纪律：同一 brief 的两次输出必须结构不同（多样化规则），H3 不是默认答案，而是九种英雄区之一。

引用组件全家谱与组合建议

若 H3 不适合首屏，仓库还提供其他引文承载组件，可按下表在页面中部替换使用：

组合时要遵守两条硬规则：同一页面内两个 section 不得使用同一原型；连续两次输出不得复用同一原型与相同 knob 取值。H3 与 T3 的组合（首屏一条 + 中部一条）是 Quote-Led 页面最常见的配置，中间用居中引号字形或 em-rule 分隔。

小结

H3 Quote-Led 把"首屏标题"这个默认由品牌声部占据的位置，转交给一条真实、具体、署名完整的客户引文——这是它对抗 AI-slop 的关键：模板化页面总是以品牌口号开头，而借来的可信度天然带有人证细节。落地时守住四条底线即可复用：真实证言才用（否则换宏结构）、署名必须含角色与公司、引文走 display 斜体且 ≤ 60px、归属行小号大写字母 + 弯引号。更完整的上下文可继续阅读 skills/hallmark/SKILL.md 的设计流程（Step 2 宏结构选择、Step 7 slop test）与 skills/hallmark/references/component-cookbook.md 的全组件索引。

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