Hallmark H3 Quote-Led 组件实战用借来的可信度构建首屏引文英雄区【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark本篇技术指南围绕 HallmarkAnti-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 brands 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 全局纪律 2Honest 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 的定位区分易混淆项原文档用一句话划清边界Dont confuse with:T3 Single huge quote (which lives mid-page, not in the hero slot).对比两个组件的完整规格维度H3 · Quote-LedT3 · Single Huge Quote位置英雄区首屏折叠内页面中部独立占据整个 section作用代替标题承担首屏叙事在正文之后做一次整间屋子级别的收束结构blockquote 归属行可再跟文字链接一条大引文居中占满整节无衬托文字归属— Name, Role, Company小号大写字母一行— Name, Company参考文件skills/hallmark/references/components/h3-quote-led.mdskills/hallmark/references/components/t3-single-huge-quote.md判断口诀H3 是门面首屏的第一句话是别人说的T3 是房间页面走完一半后用一条足够好的引文独享整个版面T1Pull quote with marginalia则是夹在正文侧栏的边座。三类引文组件的存在本身就是 Hallmark 强调结构多样性的体现——同一个页面内不允许两个 section 使用同一原型skills/hallmark/references/component-cookbook.md。最小可用 HTML 骨架原文档给出的 H3 结构极其克制只有两个元素section classhero-quote blockquote classdisplay-italic…/blockquote p classattribution— Name, Role, Company/p /section在此基础上宏结构文件补充了第三个可选元素——文字链接 CTAButton 定位为typographic link beneath the attribution如 Read the full case study →section classquote-hero blockquote classdisplay-italic…/blockquote p classattribution— Name, Title, Company/p a classlinkRead the case →/a /section section classmore-quotes…/section落到 CSS遵循 Hallmark 的 token 纪律按照 SKILL.md 全局纪律 3Locked tokensskills/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 定义了三个调节旋钮每次输出必须选定取值并写入 stampKnob可选值Quote weight引文权重italic display默认· roman display · roman body largeAttribution position归属位置under quote默认· margin-aligned · right-flushLength引文长度≤ 80 chars · 80–160 chars反模式警告两次输出使用相同 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 Id missed my stop, and I didnt 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 用三层机制兜底SKILL.md 纪律 2skills/hallmark/SKILL.md用户没给数据就不要编数据。证言、logo、案例数量一律适用。SaaS 证言细则skills/hallmark/references/macrostructures.md署名必须包含被引者的角色 公司——抽象的 Engineering Manager 证言是 slop真实产品用真实姓名占位场景用可信的人名绝不允许 Jane Doe/John Smithslop-test gate 20。引文要具体到使用场景Foundry got us SOC2 in five weeks避免 We use [product] every day 这类空话。Slop-test产出后须过 66/69 道 gateskills/hallmark/references/slop-test.md涉及证言的 gate 一个都不能妥协。这与宏结构文件的警告形成闭环Fake quotes destroy trust on inspection.—— 引文是页面里最经不起查验的元素因为读者天然知道它可以被查证。移动端折叠行为组件手册的Mobile collapse表为 H3 规定了两个断点的行为skills/hallmark/references/component-cookbook.md60 rem~960 px以下引文保持全宽归属自动折到独立一行。40 rem~640 px以下引文字号降一档display clamp 下限抬升归属字号同步降档。横向不可滚动slop-test gate 36、点击目标 ≥ 44×44 pxWCAG AA等非协商项同样适用。仓库内的实证Tide 测试的 Quote-Led 版本site/_tests/01-tide-podcast/brief.md 记录了 Hallmark 对同一 promptbuild me a landing page for my indie podcast called Tide的两轮设计。其中 v1 正是Quote-Led Atelier组合——页面以一位听众的引文开场By the third episode Id missed my stop, and I didnt mind.。v2 在多样化规则驱动下切换为 Letter 宏结构brief 中如实记录了这次切换的设计推理恰好是理解 H3 定位的最佳对照宏结构Quote-Led → Letter。pull-quote 把播客框定为被他人收听第三方背书Letter 把它框定为主播致听众第一人称致意。两者都成立Letter 更私密。声部v1 以听众引文开场v2 以主播的称呼开场。同样的字数预算不同的修辞姿态。结论Quote-Led 适用于第三方证言值得首屏的场景当内容本身的私密性如音频、书信体强于背书时换用 Letter 更恰当。该案例同时演示了核心纪律同一 brief 的两次输出必须结构不同多样化规则H3 不是默认答案而是九种英雄区之一。引用组件全家谱与组合建议若 H3 不适合首屏仓库还提供其他引文承载组件可按下表在页面中部替换使用组件定位一句话规格T1 · Pull quote with marginalia正文侧栏的边座引文引文在宽栏署名与来源链接浮在窄边栏skills/hallmark/references/components/t1-pull-quote-with-marginalia.mdT2 · Logo wall hairline品牌墙客户 logo 单色排成一行发丝线分隔无卡片无阴影T3 · Single huge quote页面中部的整屋大引文一条引文居中独占整节无衬托文字skills/hallmark/references/components/t3-single-huge-quote.mdT4 · Numbered stat strip数据条3–5 个计数 限定词的横向条带tabular 数字组合时要遵守两条硬规则同一页面内两个 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考