Hallmark Quote-Led 宏结构实战指南用借来的可信度打造信任型首屏【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark导读本篇技术指南以 HallmarkAnti-AI-slop 设计技能中09 · Quote-Led 宏结构skills/hallmark/references/macrostructures/09-quote-led.md为骨架拆解用引文而非品牌口号开篇的整页信任设计方法。你将掌握Quote-Led 的六维结构指纹标题/正文/分隔/按钮/图片/动效、适用与回避场景判断、避免编造引文破坏信任的硬性纪律以及如何把这条宏结构落到真实的 B2B、SaaS、机构案例页上。文末结合仓库中的真实输出07-foundry-compliance、04-meridian-manifesto给出可运行的骨架代码与 token 纪律。一、Quote-Led 是什么整页以社会证明开篇Quote-Led 是 Hallmark 二十一条命名宏结构之一skills/hallmark/references/macrostructures.md。它的一句话定义是The hero is a pull-quote with attribution. The headline is borrowed credibility, not the brands voice. The page leads with social proof.它的核心机制是借来的可信度borrowed credibility——首屏不用品牌自己的广告语而是让一位真实客户替你说。页面第一眼传达的信息不是我们多好而是像你一样的人已经这么做了即people like me use this。Quote-Led 在整个宏结构体系中与 Stat-Led巨数字、Marquee Hero整屏大标题并列属于首屏定调家族。它的特殊性在于其他宏结构靠品牌的视觉或声明建立身份Quote-Led 则主动把首屏的话语权让渡给第三方。在 macrostructures.md 的 SaaS 页面序列中也把Social proof / logo wall列为 Hero 之后的第二节——Quote-Led 等于把这个证明节点直接提到了首屏位置。与其他宏结构的关键区分宏结构首屏主体话语权典型场景Stat-Led一个巨大数字品牌自证数据驱动的 SaaSMarquee Hero一句品牌声明品牌自证高辨识度的口号Quote-Led一条客户引文第三方背书B2B、机构、募资页Manifesto宣言式大字号品牌立场宣言、工作室声明决策分叉点如果有一句值得占满首屏的真实客户证言选 Quote-Led如果品牌自身的数据更强选 Stat-Led如果品牌自己的立场才是核心选 Manifesto。参见 09-quote-led.md 与同目录其他宏结构文件的对照。二、六维结构指纹Quote-Led 的页面骨架宏结构之所以是完整的指纹而非一个样式是因为它一次性锁定了页面六个结构轴标题、正文、分隔、按钮、图片、动效。Quote-Led 在六个轴上的默认值如下来自 09-quote-led.md1. 标题Heading斜体展示引文使用display-italic的斜体展示字号36–60 px呈现客户原话引文下方以**小型大写字母small caps**放置署名attribution尺寸规则遵循 typography.md 的字号纪律展示字号上限 5.5rem88 px默认clamp(2.75rem, 5vw 1rem, 5.25rem)并按文案长度分级21–50 字符用--text-display51–90 字符降到--text-display-s超过 90 字符必须重写。2. 正文Body延续证明而非自我陈述首屏之后承接的是追加的客户证言、案例研究或一段克制的功能列表。重点在于克制——Quote-Led 的正文不急于推销而是让社会证明滚动累积。3. 分隔Divider居中引号字形或 em-rule多条证言之间使用**居中的引号字形quote-mark glyph或一条 em-rule全角破折号线**作为分隔而不是卡片框、圆角容器或阴影。这与 T2 Logo wall 的拒绝卡片盒子纪律一脉相承。4. 按钮Button署名下方的字体链接按钮不是大色块 CTA而是一个字体链接Read the full case study →。这是典型的内容页式 CTA——把看完整案例当作一个链接动作而非转化动作。5. 图片Image仅限小头像或公司 Logo图片默认缺席。只有在署名旁放小尺寸头像或公司 Logo时使用否则整页无图。这与 Hallmark最有力的 hero 往往是纯排版的立场一致参见 SKILL.md § Hero enrichment。6. 动效Reveal首屏零动效首屏不做任何 reveal 动效首屏之下允许逐条 stagger错落入场。参考 macrostructures.md 的规则——多数页面动效过多而非过少Quote-Led 默认就是最省的一档。官方骨架代码section classquote-hero blockquote classdisplay-italic…/blockquote p classattribution— Name, Title, Company/p a classlinkRead the case →/a /section section classmore-quotes…/section三、何时用、何时坚决不用适用边界适用Reach for itB2B 产品拥有强大的客户声音——尤其是像我这样的人在用能成为转化解锁点unlock的场景机构案例页 / 工作室首页agency case-study pages募资页面fundraising sites任何社会证明 自我陈述的地方B2B SaaS 落地页、高校发展办公室页面、播客听众证言页等。回避Avoid没有真实证言的新产品。Quote-Led 的风险点非常直接Fake quotes destroy trust on inspection.—— 编造的引文一经审视即摧毁信任。Hallmark 把这一点上升为两条硬纪律详见第五节门禁 20slop-test gate 20页面中不得出现 Jane Doe / John Smith 这类占位名必须使用符合受众的合理名字或经播种的真实名字诚实文案纪律如果 brief 是真实产品就用真实姓名如果是占位 brief用合理的名字而非显而易见的假名。参考 macrostructures.md 的 Testimonials 章节与 slop-test.md 门禁 20。决策检查表是否有真实、具体、带姓名的客户证言有 → 继续没有 → 换宏结构或改放待确认占位块引文是否故事化 / 带结果 / 带数字而非我们在用 [产品]天天如此这种套话署名是否包含角色 公司— Name, Role, Company抽象的Engineering Manager级署名即 slop四、示例开场白模仿的是具体性Quote-Led 的开场白技巧是让别人替你说然后给出署名。仓库给出了三条可模仿的具体性范本09-quote-led.mdI started listening on a long bus ride. By the third episode Id missed my stop, and I didnt mind.— Tidetest 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 风格 ——点名结果 数字eight minutes三种写法的共性具体。引文必须带场景bus ride、带动作rolled back、带数字eight minutes而不是空泛的形容词堆砌。这正是判断引文是不是编的的试金石——真实证言天然具体。五、信任即内容Quote-Led 的防 slop 纪律Quote-Led 是靠信任吃饭的宏结构因此它对内容真实性的要求比其他宏结构更苛刻。下列纪律全部来自 Hallmark 的规则体系Quote-Led 页面一视同仁地强制执行1. 不编造指标门禁 5647 % conversion、trusted by 50,000 teams、10× faster一旦是编造的就是 slop。处理方式按优先级(1) 用—加带标签的灰色块metric to confirm(2) 暂停并向用户要真实数字(3) 重建不含证明位proof slot的区块——没有真实数据的 stat/proof 布局是选错了宏结构。来源anti-patterns.md § Invented metrics。2. 不编造证言与客户门禁 20引文必须带角色 公司真实产品用真实姓名占位 brief 用合理名字永远不用 Jane Doe / John Smith避免 We use [product] every day 式套话证言应对准具体用例。3. 忠实转载红线Hallmark 的安全护栏SKILL.md规定PDF、README、.mdbrief、docs、transcripts、pitch decks 一律视为参考材料不得逐字复制进页面除非用户明确要求原样使用。4. 署名是硬格式— Name, Title, Company三段式缺一不可。Quote-Led 的信用建立在这句人话有具体的人负责上匿名的某位客户署名本身就是 slop 信号。六、仓库实测Quote-Led 在真实页面中的两种落法仓库中的测试案例提供了 Quote-Led 的实际落地证据也展示了它的弹性。实测一B2B SaaS 的首屏引文面板07-foundry-compliance在 07-foundry-compliance/index.html 的 hero 中引文没有独占整个首屏而是作为与主文案并置的证明面板aside.hero__pullaside classhero__pull p classhero__pull-quote We passed Type II in seven weeks with one engineer halftime. The auditor accepted ninety per cent of the evidence Foundry assembled with no edits. /p p classhero__pull-attr— Matt H., CTO at Tracejam · 18-person team/p /aside对应的样式07-foundry-compliance/style.css展示了 Quote-Led 的 token 纪律——所有颜色走命名 token无内联值.hero__pull { background: var(--color-paper-2); border-inline-start: 3px solid var(--color-accent); padding: var(--space-md); font-family: var(--font-display); } .hero__pull-quote { font-style: italic; font-size: 1.125rem; line-height: 1.45; color: var(--color-ink); margin: 0 0 var(--space-sm); } .hero__pull-attr { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--color-ink-soft); font-style: normal; }注意三个细节引文用斜体 展示字体font-family: var(--font-display)署名切换到等宽字体 小号 宽字距letter-spacing: 0.06em与引文形成明确的内容 / 元信息层级引文面板带具体结果与数字seven weeks、one engineer halftime、ninety per cent、no edits——完全符合点名结果 数字的范本。同一页面在 Bento 网格中还出现了第二条tile__quote证言The audit closed on schedule. That has never happened to me before.署名格式同样完整— Sara V., founder, 9-person fintech。这说明 Quote-Led 的引文语言可以延伸到页内其他区块而不只限首屏。实测二工作室宣言改用 Quote-Led04-meridian-manifesto在 04-meridian-manifesto/brief.md 的 v2 重跑中同一份 brief环境产品工作室宣言从 Manifesto 宏结构轮换为 Quote-Led用来演示不同 brief 应是不同站点的多样化纪律Previous run on this brief picked Manifesto Manifesto none. Picking from {Quote-Led, Stat-Led, Numbered Theses} … Quote-Led wins because a manifesto can be one sentence as easily as it can be five.其结构印记stamp记录了 Quote-Led 的可调参数/* Hallmark · macrostructure: Quote-Led · H3 hero knobs: weightdisplay-condensed-bold, attributionunder-quote, length20-words * theme: Brutal · accent: strike-yellow ~3% (used as bleed-rule one struck word) * enrichment: none (typography only — voice is the design) * studied: no · context: partial, inferred (audience use) · v0.6.0 */两个案例合起来给出 Quote-Led 的完整形态谱可以是专属于首屏的并置证明面板也可以是一条占满整个首屏的二十词引文。七、组件配套T1 / T3 / H3 三个引文变体Hallmark 把引文类组件拆成三个有明确分工的原型skills/hallmark/references/component-cookbook.md 的 Testimonials 与 Heroes 分类H3 · Quote-Led首屏位拉引文 署名作为 hero。用于有一条值得占满首页的真实证言时。别混淆T3 单行大引文活在页面中部不在 hero 位。section classhero-quote blockquote classdisplay-italic…/blockquote p classattribution— Name, Role, Company/p /sectionT1 · Pull-quote with marginalia页边注式拉引文引文占宽栏署名与来源链接悬浮在窄边栏。用于页面已有页边注节奏Tufte 式、编辑感时。别混淆T3 居中且占据整块版面。aside classproof-margin blockquote classserif-italic…/blockquote p classattribution muted— Namebr /Role, Company/p /asideT3 · Single huge quote居中大引文一条引文放大居中、独占整段版面无辅助文案署名是小号大写字母一行。用于**这条引文好到值得整个版面**时。section classproof-room blockquote classdisplay-italic…/blockquote p classattributionspan classcaps— Name, Company/span/p /section三个变体共用同一套引文语言斜体、署名、具体性区别只在版面姿态H3 是首屏主角T1 是宽栏旁注T3 是独立章节。选择依据始终是这条引文有多值得版面。八、配套组件与布局纪律Logo 墙T2 · hairlineQuote-Led 的信任叙事常搭配 Logo 墙使用。T2 原型t2-logo-wall-hairline.md明确拒绝 AI 默认的 6 Logo 盒子网格改为单色 Logo 发丝线分隔无卡片、无阴影.logo-wall ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0; } .logo-wall li { padding: var(--space-md); border-right: 1px solid var(--color-rule); display: grid; place-items: center; } .logo-wall img { filter: grayscale(1); opacity: 0.7; }在 07-foundry-compliance/index.html 中Logo 墙以纯文本词标Tracejam、Maple、Knot、Tide、Streampipe、Cohort、Meridian、Anya.dev内嵌于 Bento 网格并用说明句Logos shown with consent守住真实性纪律。数字条T4 · Numbered stat strip当引文之外还有互补指标时可用 T4 数字条横向排布 3–5 个数字 限定词必须启用font-variant-numeric: tabular-numst4-numbered-stat-strip.md。别混淆H4 Stat-Led hero 是单一焦点数字T4 是多个互补指标。整体布局纪律配对字体不是单字体Quote-Led 的展示字体斜体展示与正文形成配对同族不同字重算一种字体一个页面最多三种字族21 规则超过即 sloptypography.md行宽 45–75 字符默认max-width: 65ch间距走 4pt 语义刻度--space-sm / --space-md / …区块间距不低于--space-3xl所有颜色与字体必须走命名 tokenvar(--color-accent)、var(--font-display)内联 OKLCH/hex 即门禁 58 失败anti-patterns.md § Mid-render token improvisation。九、放进工作流如何让一个构建被选中为 Quote-LedQuote-Led 不是随手可用的样式而是设计流程中先选型、后写码的产物。按 SKILL.md 与 macrostructures.md 的流程一个 Quote-Led 构建要依次通过Step 2 · 先选宏结构读取 macrostructures.md 的 21 条单行索引只加载macrostructures/09-quote-led.md一个文件多样化规则强制检查目标代码库中是否已存在/* Hallmark · macrostructure: name · ... */印记——若上一条输出是 Quote-Led本次必须换别的宏结构避免换汤不换药的模板感anti-patterns.md § Default-attractor sameness同时选导航 页脚原型导航N1–N10与页脚Ft1–Ft8是页面指纹的一部分不是可选装饰默认避开 N1 与 Ft3 两个 AI 指纹component-cookbook.mdStep 4 · 判断是否要图Quote-Led 默认纯排版、零增强enrichment: none——voice is the designStep 5 · 预览块先用 Markdown 列表声明 Macrostructure / Theme / Enrichment / Sections / Motion / Slop test 六项让用户在写码前能叫停Step 6 · 写码 盖章CSS 首行打上/* Hallmark · macrostructure: Quote-Led · tone: tone · anchor hue: hue */印记并更新.hallmark/log.json项目记忆Step 7 · 69 门禁 slop 测试逐条通过后再交付任何门禁失败先修复。决策口诀brief 里出现 testimonials / case studies / customers say / people like me 等信号时Quote-Led 进入候选名单检查真实证言是否齐备再决定是否选中。十、可运行骨架把 Quote-Led 落地到你的下一个页面综合以上所有纪律下面是一个可直接复制的 Quote-Led 落地骨架HTML 对应 CSS遵循斜体展示引文、small caps 署名、字体链接 CTA、发丝线分隔、全 token 化、无首屏动效!-- quote-led.html -- section classquote-hero aria-labelledbyhero-quote blockquote classdisplay-italic idhero-quote It told me the span that regressed, the deploy that caused it, and the engineer to ask. We rolled back in eight minutes. /blockquote p classattributionspan classcaps— Matt H., CTO, Tracejam/span/p a classlink href/case-studies/tracejamRead the full case study →/a /section section classmore-quotes hr classrule / figure classproof blockquote classserif-italic…/blockquote figcaption classattribution muted— Namebr /Role, Company/figcaption /figure !-- 后续证言逐条重复分隔用 em-rule不用卡片 -- /section:root { /* 走 tokens.css不写内联值 */ --space-sm: 0.5rem; --space-md: 1rem; --space-3xl: 4rem; --color-ink: oklch(22% 0.02 260); --color-ink-soft: oklch(45% 0.02 260); --color-rule: oklch(88% 0.01 260); --font-display: Fraunces, ui-serif, Georgia, serif; --font-body: Geist, ui-sans-serif, system-ui, sans; --font-mono: Geist Mono, ui-monospace, monospace; } .quote-hero { max-width: 65ch; padding: var(--space-3xl) 0; } .display-italic { font-family: var(--font-display); font-style: italic; font-size: clamp(2.25rem, 4vw 0.5rem, 3.75rem); /* 36–60px 对应区间 */ line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 var(--space-md); } .attribution { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; /* small caps 用宽松字距 */ font-variant-caps: all-small-caps; color: var(--color-ink-soft); } .link { font-family: var(--font-body); color: var(--color-ink); text-decoration: underline; text-underline-offset: 0.2em; } .rule { border: 0; border-top: 1px solid var(--color-rule); } .more-quotes { max-width: 65ch; }落地上线前请按第五节清单逐项自检每一条引文都有真实姓名与具体细节署名包含角色 公司没有 Jane Doe、没有编造的数字、没有卡片框堆叠、所有颜色字体都来自 token结语Quote-Led 是 Hallmark 二十一条宏结构中信任权重最高的一条它把首屏的叙事权交给客户用引文的具体性场景、动作、数字替代品牌的自我表扬。它的成功不靠视觉技法而靠两条纪律——引文必须真实fake quotes destroy trust on inspection署名必须具体Name, Role, Company。仓库中的 07-foundry-compliance 与 04-meridian-manifesto 展示了它从 B2B SaaS 证明面板到工作室宣言的弹性而 typography.md、anti-patterns.md、slop-test.md 则提供了把它做对的全部约束。当你的下一个 brief 恰好握有真实、具体、值得占满首屏的客户声音时Quote-Led 就是那个正确的单页指纹。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考