Hallmark 设计系统实战Conversational FAQ 宏结构完整指南【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark导读本篇技术指南讲解 HallmarkAnti-AI-slop design skill中06 · Conversational FAQ 宏结构的完整设计与实现方案它把页面组织成大胆的问题 简短的回答让整页读起来像一次对产品的诚实采访。你将学到它的结构骨架问题标题、2–4 段短回答、细分隔线、页脚 CTA、极少量配图、手风琴折叠动画的底层实现grid-template-rows: 0fr → 1fr 200 ms--ease-out、问题文案的具体性写作方法以及它在定价页、教育/合规行业等场景中的适配原则。全篇以仓库内的权威引用文档为主体并结合 Bananastudio 示例 的完整源码给出可直接照搬的 HTML/CSS 实现。一、什么是 Conversational FAQ 宏结构Hallmark 共定义二十一种命名宏结构见 macrostructures 索引每个宏结构都是一套完整页面指纹——标题位置、正文组织、分隔线语言、按钮语气、图片处理和揭示方式打包成一个命名的整体选择。06 · Conversational FAQ是其中第 6 号也是 FAQ 类内容的标准形态。它的核心定义原文是Bold questions, brief answers. The page reads like an honest interview with the product. Often each Q/A is a collapsible accordion.翻译过来就是用加粗的大问题作标题用简短的答案作答整页读起来像一次对产品的诚实采访每对问答常常是可折叠的手风琴accordion。这条结构的本质不是放一堆问答而是用问答的形式重新定义整页的叙事方式页面不再自说自话地宣传而是让用户心里的怀疑直接发声再诚实作答。这种被采访的语气天然带有可信度——它默认读者是持怀疑态度的而不是默认读者会被说服。在 Hallmark 的 21 种宏结构中它的定位很明确适合作为页面的某个段落出现而不适合作为整页的唯一起点。文档明确指出 Avoid as theprimarypage. FAQ usually pairs with another macrostructure that opens the page.——FAQ 通常与另一个负责开门见山的宏结构搭配使用比如 Marquee Hero 或 Stat-Led 负责开场FAQ 负责收尾答疑。六个结构要素文档对 Conversational FAQ 的结构要素规定得十分精确要素规范要求说明Heading标题每个 section 本身就是一个问题短小、直接的短语以?结尾Body正文紧跟在问题下方2–4 个短段落回答要短不要长篇大论Divider分隔线Q/A 对之间用细线分隔或零分隔线改用纸色切换视觉节奏来源Button按钮回答内嵌排版型文字链接Read the full policy →页脚一个描边 CTA两个层级主次分明Image图片极少——可能每篇长回答配一张示意图其余全是文字以文字为主Reveal揭示加载时全部折叠手风琴展开用 200 ms--ease-out作用于grid-template-rows: 0fr → 1fr无进场动画这六要素构成了完整的行为契约加载时零揭示、点击展开带正确缓动、文字主导、问句作标题、页脚单一 CTA。二、适配场景与边界什么时候该用它文档给出的适配信号非常明确定价页附近pricing pages—— 用户决策前最后的疑虑在这里被清空面对怀疑主义的产品products that meet skepticism—— 用户天然带着质疑来FAQ 是正面回应质疑的舞台教育 / 受监管行业educational/regulated industries—— 需要大量解释性内容问答形态最利于消化。文档还点名了参考对象many SaaS pricing pages, Casper, Substack help pages——大量 SaaS 定价页、床垫品牌 Casper 和 Substack 的帮助页面都是这类结构的成熟样本。需要注意的是参考点是其具体性问题是真的问题回答短而具体而非照搬视觉。什么时候避开它不要作为首页的唯一主结构primary page。FAQ 本身缺乏开场宣告的叙事能力必须与其他宏结构配对——典型做法是页面以 Marquee Hero、Stat-Led 或 Bento Grid 开场把 Conversational FAQ 作为中后段的答疑章节这在 macrostructures.md 的 SaaS 页面顺序 中也有印证FAQ 排在 Pricing 之后、Final CTA 之前是第 6 个 section。与组件级 FAQ 的区别Hallmark 在 SKILL.md 中区分了页面级与组件级两种工作流。如果用户的需求是一个 FAQ 手风琴组件单元素、短 brief、命名单一文件则应走 Component-scope 流程继承既有 tokens、跳过宏结构选择、必须覆盖全部 8 种交互状态default · hover · focus-visible · active · disabled · loading · error · success并产出 8-state 预览包装页。而整页用 FAQ 组织才属于本宏结构的适用范围。判断不清时Hallmark 建议只问一句一张定价卡片还是整张定价页三、问题文案怎么写具体性至上文档给出了三条示例开场句sample opening lines并强调要模仿其具体性imitate the specificity——问题必须是真实的问题回答必须短而具体What is this for? — A single-binary CLI for parsing log streams from stdin.— 点明形态single-binary CLI点明输入stdin 日志流How is this different from X? — Its about time.— cron.com — 用一句有分量的话侧面作答Who built this? — Three of us, in Lisbon, since 2014.— 日期 地点 人数零营销话术这三条的共同点是拒绝营销动词、拒绝空泛修辞。注意第二条 Its about time. 是一个文字游戏既是是时候了也是关于时间——文档特别说明这类回答要obliquely迂回作答用有分量的短语。这不是鼓励堆砌俏皮话而是强调回答要有信息密度让人读完信服。这个要求与 Hallmark 的 copy.md 全局文案纪律完全一致——它明确禁止 Experience the power of ___ 这类承诺感受却不点名功能的空话也禁止 Seamless、Innovative 等无信息量词汇。同时SKILL.md 的诚实文案纪律Honest copy — no fabricated content同样适用于 FAQ如果 brief 没有给出某个指标就不能在回答里编一个 47% conversion 或 trusted by 50,000 teams。FAQ 的回答如果编造数据比营销页编造数据更容易被识破——因为问答语气本身就是以诚实为卖点的。实操建议写问题文案时逐条自检——① 问题是用户真会问的吗搜一下客服邮箱里的真实问题② 回答里有没有未经 brief 授权的数字③ 能否删掉回答里所有的形容词再看信息是否仍然完整四、完整 HTML 骨架可直接复制文档给出了最简 HTML 骨架这里先原样呈现section classfaq details summaryh2How long does setup take?/h2/summary div classanswer…/div /details details…/details /section这个骨架选用了原生details/summary元素而非自造的 JS 手风琴。这一点意义重大零 JavaScript、原生键盘可达、默认无障碍——summary天然支持 Enter 键与 Space 键切换屏幕阅读器也能正确朗读展开状态。Hallmark 的 anti-patterns 与 motion 纪律 都强调用平台原生能力不重画浏览器/交互装置。注意summary内部的标题语义一个常见的可访问性陷阱summary里可以直接放h2但若手风琴里嵌了标题展开状态会改变标题层级计数。推荐做法是把每个问题作为独立的 section 标题语义处理即每个details内的问题就是本区块的标题这正好符合本文档each sectionisa question的定义——每个问答对本身就是一个 section。更完整的生产级骨架BananaStudio 示例结构仓库 Bananastudio 示例 中有一段完整的 FAQ 实现其结构比最简骨架多了三段头部区标题 引导语、问答列表、以及答案包裹层用于折叠动画section classshell section idfaq aria-labelledbyfaq-title div classfaq header classfaq__head h2 idfaq-titleQuestions, emanswered honestly./em/h2 p…一句话引导语…/p /header div classfaq__list details classfaq__item summary classfaq__summary spanHow long does a session actually take?/span span classfaq__sign aria-hiddentrue/span /summary div classfaq__answer-wrap div classfaq__answer-inner p classfaq__answerThirty minutes from the moment your last selfie uploads. …/p /div /div /details !-- 更多 details.faq__item -- /div /div /section可以看到生产级实现补充了几个关键细节都来自文档六要素的落地aria-labelledbysection 通过aria-labelledby关联其标题辅助技术能正确识别区块名称aria-hiddentrue的展开指示符span classfaq__sign是纯装饰性的 /× 图标用aria-hidden告知屏幕阅读器忽略双层答案包裹answer-wrap控制折叠高度answer-inneroverflow 隐藏这是让grid-template-rows动画可用的关键见下一节列表容器.faq__list { display: grid }所有问答项以网格堆叠视觉上对齐。五、手风琴折叠动画grid-template-rows: 0fr → 1fr这是本宏结构技术含量最高的部分文档的 Reveal 要素原文是Reveal:none on load; accordion expand uses 200 ms--ease-outongrid-template-rows: 0fr → 1fr.展开手风琴时动画grid-template-rows而不是height这是 Hallmark 的硬性动效纪律。motion.md 将其列为唯一正确的折叠动画方案并明确反例Animatingwidth,height,padding,margin,top,lefttriggers reflow on every frame会触发每帧重排。microinteractions.md 同样要求 Never animate the tab contents height — animategrid-template-rows: 0fr → 1fr。为什么是0fr → 1fr而不是height: 0 → autoheight: 0 → auto无法过渡auto不是可插值的目标值必须用 JS 量高度grid-template-rows: 0fr → 1fr是纯 CSS 可插值的子元素answer-inner设overflow: hidden后0fr即表示该行高度为 0展开时浏览器原生计算内容高度不需要 JS、不需要 ResizeObserver天然响应内容变化如窄屏重排后的不同高度。完整 CSS 实现参照 Bananastudio styles.css/* 折叠容器0fr 收起1fr 展开带缓动过渡 */ .faq__answer-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-long) var(--ease-in-out); } details[open] .faq__answer-wrap { grid-template-rows: 1fr; } /* 内层必须 overflow:hidden0fr 才能把高度压到 0 */ .faq__answer-inner { overflow: hidden; }注意这里使用的--ease-in-out与--dur-long都是命名 token来自 tokens.css:root { --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* 元素进入 */ --ease-in: cubic-bezier(0.7, 0, 0.84, 0); /* 元素退出 */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* 进出对称 */ --dur-micro: 120ms; --dur-short: 240ms; --dur-mid: 520ms; --dur-long: 760ms; }值得注意的细节文档规定展开用 200 ms--ease-out而 BananaStudio 示例在展开上用--dur-long760 ms--ease-in-out。这是两种可接受的取舍——文档给出的是最简锚点200 ms ease-out快而利落示例则选择了更从容的展示型节奏。两者都满足核心纪律绝不用浏览器默认ease绝不弹跳/过冲Hallmark 三个命名缓动曲线都不含 overshoot。实际落地时建议普通列表型 FAQ 用 200–300 ms--dur-short保持快问快答的利落感偏展示性的内容型 FAQ 可用更长时间与--ease-in-out营造节奏。展开图标 → ×示例用一个两线十字的图标展开时旋转 90° 变成×同样只用 transform 动画.faq__sign::before { width: 14px; height: 1.5px; } .faq__sign::after { width: 1.5px; height: 14px; transition: transform var(--dur-short) var(--ease-out); } details[open] .faq__sign::after { transform: rotate(90deg); }只旋转::after竖线而::before横线不动就完成了→×的形态切换——这是一个典型的动画 transform 而非布局属性的微交互范例。无边框的summary处理原生summary在 WebKit/Blink 上会显示默认的三角形 marker需要显式移除.faq__summary { list-style: none; /* Firefox */ } .faq__summary::-webkit-details-marker { display: none; } /* WebKit/Blink */同时interaction-and-states.md 的 8 状态纪律要求交互元素具备完整的 hover / focus-visible 等状态示例中的实现是.faq__summary:hover { color: var(--color-accent); } .faq__summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: 4px; }--color-focus: oklch(82% 0.180 75)是 Hallmark 规范的高对比聚焦环颜色outline-offset保证环不与文本粘连并且聚焦环出现不得有动画必须即时显示。六、布局与分隔线两种节奏方案文档的 Divider 要素给了两种可选方案方案 A细分隔线— 每对 Q/A 之间使用 hairline--rule-hair: 1px细线方案 B零分隔线 纸色切换— 不用线改为不同问答块之间切换纸面背景色。BananaStudio 示例采用的是方案 A 的变体——用border-block-end在每项底部画 hairline第一项额外加border-block-start封顶.faq__item { border-block-end: var(--rule-hair) solid var(--color-rule); } .faq__item:first-child { border-block-start: var(--rule-hair) solid var(--color-rule); }这样问答列表看起来像一个上下都被细线框住、中间逐行分隔的清单视觉上干净且节奏均匀。在布局上示例采用两栏非对称网格左栏是 FAQ 头部大标题 引导语右栏是问答列表.faq { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-2xl); align-items: start; }左栏标题使用 display 字体、clamp()响应式字号、max-width: 14ch限制行长引导语用--text-sm、max-width: 32ch。右栏1fr 2fr的宽度比让问答获得更多阅读空间。移动端≤ 某断点降为单列.faq { grid-template-columns: 1fr; }这与 responsive.md 要求每个 section head 在移动端折叠为单列的硬规则一致Hallmark 输出必须验证 320 / 375 / 414 / 768 px 四档宽度。注意图片纪律文档明确规定图片要sparse极少——可能每篇长回答配一张示意图其余全是文字。因此本宏结构的实现默认不配图只有当某条回答确实需要图解如流程说明时才允许一张。七、按钮体系回答内文字链接 页脚单一 CTA文档的 Button 要素是两级结构回答内部的排版型文字链接——用于深链到完整内容例如 Read the full policy →。Hallmark 在 components 中为这类链接定义了专门的C3 · Typographic link模式。关键点链接文本必须独立成立View pricing plans 而不是 Click here这是 copy.md 的硬规则箭头→是排版级指示符不是图标库资产。页脚一个描边outlinedCTA——整页只有一个主行动按钮且是 outlined 样式而非实心。注意 macrostructures.md 的规则CTA strip: one button. Not two. The repetition is the call to action.——一个按钮不是两个重复的按钮本身就是行动号召。这个问题内文字链接 页脚一个描边 CTA的搭配把继续了解详情与最终行动两个动作清晰分层读者可以在任意问答处顺着文字链接深入细节读到最后的唯一行动点则是页脚那个按钮。八、与相关组件/宏结构的配套使用Conversational FAQ 不是孤立存在的它必须被喂进 Hallmark 的完整页面流程见 SKILL.md 的 Design flow选定宏结构后还要同时选定nav 与 footer 的 archetypeN1–N10 / Ft1–Ft8、主题22 个命名主题之一或 custom 分支、字体配对21 上限一个 display 一个 body可加一个 outlier、并遵守多样化规则连续两次输出不得使用相同宏结构。FAQ 宏结构的页面内常用配套组件C3 · Typographic linkcomponents/c3-typographic-link.md——回答内的文字链接Ft5 · Statement / Ft6 · Letter-close等页脚 archetype——承担页脚描边 CTA 的载体F5 · Annotated screenshotcomponents/f5-annotated-screenshot.md——当某条长回答需要配一张示意图时使用。在 macrostructures.md 的 SaaS 页面顺序中FAQ 位于第 6 位Hero → Logo 墙 → Features → Testimonials → Pricing →FAQ→ Final CTA strip → FooterFAQ 的回答语气也有专门纪律answer like a person, not a sales doc——像人一样回答而不是像销售文档。Yes — Stripe and Adyen are both supported out of the box 好过 Our platform integrates with leading payment providers。这正是 Conversational FAQ 六要素中 honest interview 语气的具体化。九、质量把关FAQ 的 slop-test 自查清单Hallmark 在交付前要过 69 道 slop-test 门禁见 slop-test.md。针对 Conversational FAQ 宏结构重点自查以下门禁与纪律检查项要求依据无编造数据回答中的指标必须是 brief 提供的真实数字否则用—占位或换一种结构表达anti-patterns · Invented metrics无占位人名不出现 Jane Doe / John Smith / Lorem Ipsumanti-patterns gate 20折叠动画合规只动grid-template-rows不动height/width/margin等布局属性motion.md · microinteractions.md命名 token颜色与字体只引用var(--color-*)/var(--font-*)不出现内联 OKLCH/hexSKILL.md · Locked tokens8 交互状态summary具备 hover / focus-visible / active 等状态样式interaction-and-states.md移动端验证320 / 375 / 414 / 768 px 无横向滚动、无两行点击文本、单列布局responsive.md不重画浏览器 chrome不为 FAQ 页面手绘浏览器栏、假代码窗口等anti-patterns · Re-drawn UI chrome问题文案具体问题是真的问题、回答短而具体无营销空话copy.md特别要注意 SKILL.md 的pre-emit self-critique纪律交付前按 Philosophy / Hierarchy / Execution / Specificity / Restraint / Variety 六轴各打 1–5 分任一轴 3 分则必须返工修订并在产物顶部加盖/* Hallmark · pre-emit critique: … */印记——FAQ 宏结构的特异性Specificity得分尤其取决于问题文案的具体性。十、一篇完整可运行的 FAQ 段落附完整样式下面把本文档的六要素 示例源码整合成一个可直接复制运行的 FAQ 段落HTML 配套 CSS覆盖问句标题、2 段式短回答、hairline 分隔、回答内文字链接、页脚描边 CTA、grid-template-rows折叠动画、8 状态 summary。section classfaq idfaq aria-labelledbyfaq-title header classfaq__head h2 idfaq-titleQuestions, emanswered honestly./em/h2 pIf we didn’t cover yours, write to us — a person reads that inbox./p /header div classfaq__list details classfaq__item summary classfaq__summary spanHow long does setup take?/span span classfaq__sign aria-hiddentrue/span /summary div classfaq__answer-wrap div classfaq__answer-inner p classfaq__answerTwo minutes from a blank terminal. You point it at your log stream and it starts parsing — no server, no agent./p p classfaq__answerIf you need to a classfaq__link href#pipelinehook it into your CI pipeline →/a, add one config file and re-run./p /div /div /details details classfaq__item summary classfaq__summary spanWho built this?/span span classfaq__sign aria-hiddentrue/span /summary div classfaq__answer-wrap div classfaq__answer-inner p classfaq__answerThree of us, in Lisbon, since 2014. We run the product ourselves — the same binary you download is the one we alert on at 3 am./p /div /div /details details classfaq__item summary classfaq__summary spanHow is this different from the other log tools?/span span classfaq__sign aria-hiddentrue/span /summary div classfaq__answer-wrap div classfaq__answer-inner p classfaq__answerIt’s about time. Everything else waits for the morning dashboard; this one answers the page that’s failing now./p /div /div /details /div p classfaq__ctaa classbtn btn--outline href#pricingRead the full feature policy →/a/p /section/* Hallmark · macrostructure: Conversational FAQ · tone: technical · anchor hue: ink */ .faq { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-2xl); align-items: start; } .faq__head h2 { font-family: var(--font-display); font-size: clamp(2rem, 4vw 0.5rem, 3.25rem); font-weight: 400; letter-spacing: -0.035em; line-height: 1.0; max-width: 14ch; } .faq__head p { margin-top: var(--space-md); color: var(--color-ink-2); font-size: var(--text-sm); max-width: 32ch; } .faq__list { display: grid; } .faq__item { border-block-end: var(--rule-hair) solid var(--color-rule); } .faq__item:first-child { border-block-start: var(--rule-hair) solid var(--color-rule); } .faq__summary { list-style: none; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-md); padding-block: var(--space-md); cursor: pointer; min-height: 48px; font-family: var(--font-display); font-size: var(--text-md); font-weight: 500; letter-spacing: -0.02em; color: var(--color-ink); line-height: 1.3; transition: color var(--dur-short) var(--ease-out); } .faq__summary::-webkit-details-marker { display: none; } .faq__summary:hover { color: var(--color-accent); } .faq__summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: 4px; } /* 展开图标 → ×只旋转竖线 */ .faq__sign { position: relative; width: 20px; height: 20px; color: var(--color-accent); } .faq__sign::before, .faq__sign::after { content: ; position: absolute; inset: 0; margin: auto; background: currentColor; } .faq__sign::before { width: 14px; height: 1.5px; } .faq__sign::after { width: 1.5px; height: 14px; transition: transform var(--dur-short) var(--ease-out); } details[open] .faq__sign::after { transform: rotate(90deg); } /* 折叠动画grid-template-rows 0fr → 1fr不动 height */ .faq__answer-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-short) var(--ease-in-out); } details[open] .faq__answer-wrap { grid-template-rows: 1fr; } .faq__answer-inner { overflow: hidden; } .faq__answer { padding-block: 0 var(--space-md); color: var(--color-ink-2); font-size: var(--text-sm); max-width: 60ch; line-height: 1.6; } .faq__link { color: var(--color-accent); text-decoration: underline; text-underline-offset: 0.2em; } /* 页脚描边 CTA */ .faq__cta { margin-top: var(--space-2xl); } .btn--outline { display: inline-block; border: 1px solid var(--color-accent); color: var(--color-accent); padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-sm); transition: background var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); } .btn--outline:hover { background: var(--color-accent); color: var(--color-paper); } .btn--outline:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; } media (max-width: 768px) { .faq { grid-template-columns: 1fr; } }其中--space-*、--text-*、--color-*、--rule-hair、--radius-*等命名 token 需在:root的 tokens.css 中按 Hallmark 规范定义页面 CSS 只允许按名引用、不允许内联裸值——这是 SKILL.md 的 Locked tokens 硬规则。结语把 FAQ 从填坑章节升级为信任机制Conversational FAQ 宏结构给 FAQ 类页面的最大启发是问答不是为了占满版面而是为了把产品的可信度具象化。它的六要素——问句标题、2–4 段短答、hairline 分隔、回答内文字链接、页脚单 CTA、零加载揭示——合起来构成一个诚实采访的阅读体验读者每点击一个问题页面就诚实回答一次回答的具体程度就是产品自信的程度。技术层面grid-template-rows: 0fr → 1fr的折叠动画是 Hallmark 动效纪律的绝佳范例——它同时满足了只用 transform/可插值属性动画、用命名缓动与时长 token、零 JS 依赖三条硬规则。当你下次在定价页、教育产品或受监管行业的落地页中需要消解用户疑虑时直接调用这套宏结构 示例源码即可产出一个读起来像人、不像销售文档的 FAQ 章节。延伸阅读宏结构总览见 macrostructures.md完整设计流程与多样化规则见 SKILL.md动效时长/缓动契约见 motion.md文案与按钮措辞纪律见 copy.md反模式与 slop 门禁见 anti-patterns.md 与 slop-test.md可运行的生产级 FAQ 段落见 Bananastudio 示例。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/9/11 17:57:28 · 阅读 1.2k Hallmark 设计系统实战：Conversational FAQ 宏结构完整指南
Hallmark 设计系统实战Conversational FAQ 宏结构完整指南【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark导读本篇技术指南讲解 HallmarkAnti-AI-slop design skill中06 · Conversational FAQ 宏结构的完整设计与实现方案它把页面组织成大胆的问题 简短的回答让整页读起来像一次对产品的诚实采访。你将学到它的结构骨架问题标题、2–4 段短回答、细分隔线、页脚 CTA、极少量配图、手风琴折叠动画的底层实现grid-template-rows: 0fr → 1fr 200 ms--ease-out、问题文案的具体性写作方法以及它在定价页、教育/合规行业等场景中的适配原则。全篇以仓库内的权威引用文档为主体并结合 Bananastudio 示例 的完整源码给出可直接照搬的 HTML/CSS 实现。一、什么是 Conversational FAQ 宏结构Hallmark 共定义二十一种命名宏结构见 macrostructures 索引每个宏结构都是一套完整页面指纹——标题位置、正文组织、分隔线语言、按钮语气、图片处理和揭示方式打包成一个命名的整体选择。06 · Conversational FAQ是其中第 6 号也是 FAQ 类内容的标准形态。它的核心定义原文是Bold questions, brief answers. The page reads like an honest interview with the product. Often each Q/A is a collapsible accordion.翻译过来就是用加粗的大问题作标题用简短的答案作答整页读起来像一次对产品的诚实采访每对问答常常是可折叠的手风琴accordion。这条结构的本质不是放一堆问答而是用问答的形式重新定义整页的叙事方式页面不再自说自话地宣传而是让用户心里的怀疑直接发声再诚实作答。这种被采访的语气天然带有可信度——它默认读者是持怀疑态度的而不是默认读者会被说服。在 Hallmark 的 21 种宏结构中它的定位很明确适合作为页面的某个段落出现而不适合作为整页的唯一起点。文档明确指出 Avoid as theprimarypage. FAQ usually pairs with another macrostructure that opens the page.——FAQ 通常与另一个负责开门见山的宏结构搭配使用比如 Marquee Hero 或 Stat-Led 负责开场FAQ 负责收尾答疑。六个结构要素文档对 Conversational FAQ 的结构要素规定得十分精确要素规范要求说明Heading标题每个 section 本身就是一个问题短小、直接的短语以?结尾Body正文紧跟在问题下方2–4 个短段落回答要短不要长篇大论Divider分隔线Q/A 对之间用细线分隔或零分隔线改用纸色切换视觉节奏来源Button按钮回答内嵌排版型文字链接Read the full policy →页脚一个描边 CTA两个层级主次分明Image图片极少——可能每篇长回答配一张示意图其余全是文字以文字为主Reveal揭示加载时全部折叠手风琴展开用 200 ms--ease-out作用于grid-template-rows: 0fr → 1fr无进场动画这六要素构成了完整的行为契约加载时零揭示、点击展开带正确缓动、文字主导、问句作标题、页脚单一 CTA。二、适配场景与边界什么时候该用它文档给出的适配信号非常明确定价页附近pricing pages—— 用户决策前最后的疑虑在这里被清空面对怀疑主义的产品products that meet skepticism—— 用户天然带着质疑来FAQ 是正面回应质疑的舞台教育 / 受监管行业educational/regulated industries—— 需要大量解释性内容问答形态最利于消化。文档还点名了参考对象many SaaS pricing pages, Casper, Substack help pages——大量 SaaS 定价页、床垫品牌 Casper 和 Substack 的帮助页面都是这类结构的成熟样本。需要注意的是参考点是其具体性问题是真的问题回答短而具体而非照搬视觉。什么时候避开它不要作为首页的唯一主结构primary page。FAQ 本身缺乏开场宣告的叙事能力必须与其他宏结构配对——典型做法是页面以 Marquee Hero、Stat-Led 或 Bento Grid 开场把 Conversational FAQ 作为中后段的答疑章节这在 macrostructures.md 的 SaaS 页面顺序 中也有印证FAQ 排在 Pricing 之后、Final CTA 之前是第 6 个 section。与组件级 FAQ 的区别Hallmark 在 SKILL.md 中区分了页面级与组件级两种工作流。如果用户的需求是一个 FAQ 手风琴组件单元素、短 brief、命名单一文件则应走 Component-scope 流程继承既有 tokens、跳过宏结构选择、必须覆盖全部 8 种交互状态default · hover · focus-visible · active · disabled · loading · error · success并产出 8-state 预览包装页。而整页用 FAQ 组织才属于本宏结构的适用范围。判断不清时Hallmark 建议只问一句一张定价卡片还是整张定价页三、问题文案怎么写具体性至上文档给出了三条示例开场句sample opening lines并强调要模仿其具体性imitate the specificity——问题必须是真实的问题回答必须短而具体What is this for? — A single-binary CLI for parsing log streams from stdin.— 点明形态single-binary CLI点明输入stdin 日志流How is this different from X? — Its about time.— cron.com — 用一句有分量的话侧面作答Who built this? — Three of us, in Lisbon, since 2014.— 日期 地点 人数零营销话术这三条的共同点是拒绝营销动词、拒绝空泛修辞。注意第二条 Its about time. 是一个文字游戏既是是时候了也是关于时间——文档特别说明这类回答要obliquely迂回作答用有分量的短语。这不是鼓励堆砌俏皮话而是强调回答要有信息密度让人读完信服。这个要求与 Hallmark 的 copy.md 全局文案纪律完全一致——它明确禁止 Experience the power of ___ 这类承诺感受却不点名功能的空话也禁止 Seamless、Innovative 等无信息量词汇。同时SKILL.md 的诚实文案纪律Honest copy — no fabricated content同样适用于 FAQ如果 brief 没有给出某个指标就不能在回答里编一个 47% conversion 或 trusted by 50,000 teams。FAQ 的回答如果编造数据比营销页编造数据更容易被识破——因为问答语气本身就是以诚实为卖点的。实操建议写问题文案时逐条自检——① 问题是用户真会问的吗搜一下客服邮箱里的真实问题② 回答里有没有未经 brief 授权的数字③ 能否删掉回答里所有的形容词再看信息是否仍然完整四、完整 HTML 骨架可直接复制文档给出了最简 HTML 骨架这里先原样呈现section classfaq details summaryh2How long does setup take?/h2/summary div classanswer…/div /details details…/details /section这个骨架选用了原生details/summary元素而非自造的 JS 手风琴。这一点意义重大零 JavaScript、原生键盘可达、默认无障碍——summary天然支持 Enter 键与 Space 键切换屏幕阅读器也能正确朗读展开状态。Hallmark 的 anti-patterns 与 motion 纪律 都强调用平台原生能力不重画浏览器/交互装置。注意summary内部的标题语义一个常见的可访问性陷阱summary里可以直接放h2但若手风琴里嵌了标题展开状态会改变标题层级计数。推荐做法是把每个问题作为独立的 section 标题语义处理即每个details内的问题就是本区块的标题这正好符合本文档each sectionisa question的定义——每个问答对本身就是一个 section。更完整的生产级骨架BananaStudio 示例结构仓库 Bananastudio 示例 中有一段完整的 FAQ 实现其结构比最简骨架多了三段头部区标题 引导语、问答列表、以及答案包裹层用于折叠动画section classshell section idfaq aria-labelledbyfaq-title div classfaq header classfaq__head h2 idfaq-titleQuestions, emanswered honestly./em/h2 p…一句话引导语…/p /header div classfaq__list details classfaq__item summary classfaq__summary spanHow long does a session actually take?/span span classfaq__sign aria-hiddentrue/span /summary div classfaq__answer-wrap div classfaq__answer-inner p classfaq__answerThirty minutes from the moment your last selfie uploads. …/p /div /div /details !-- 更多 details.faq__item -- /div /div /section可以看到生产级实现补充了几个关键细节都来自文档六要素的落地aria-labelledbysection 通过aria-labelledby关联其标题辅助技术能正确识别区块名称aria-hiddentrue的展开指示符span classfaq__sign是纯装饰性的 /× 图标用aria-hidden告知屏幕阅读器忽略双层答案包裹answer-wrap控制折叠高度answer-inneroverflow 隐藏这是让grid-template-rows动画可用的关键见下一节列表容器.faq__list { display: grid }所有问答项以网格堆叠视觉上对齐。五、手风琴折叠动画grid-template-rows: 0fr → 1fr这是本宏结构技术含量最高的部分文档的 Reveal 要素原文是Reveal:none on load; accordion expand uses 200 ms--ease-outongrid-template-rows: 0fr → 1fr.展开手风琴时动画grid-template-rows而不是height这是 Hallmark 的硬性动效纪律。motion.md 将其列为唯一正确的折叠动画方案并明确反例Animatingwidth,height,padding,margin,top,lefttriggers reflow on every frame会触发每帧重排。microinteractions.md 同样要求 Never animate the tab contents height — animategrid-template-rows: 0fr → 1fr。为什么是0fr → 1fr而不是height: 0 → autoheight: 0 → auto无法过渡auto不是可插值的目标值必须用 JS 量高度grid-template-rows: 0fr → 1fr是纯 CSS 可插值的子元素answer-inner设overflow: hidden后0fr即表示该行高度为 0展开时浏览器原生计算内容高度不需要 JS、不需要 ResizeObserver天然响应内容变化如窄屏重排后的不同高度。完整 CSS 实现参照 Bananastudio styles.css/* 折叠容器0fr 收起1fr 展开带缓动过渡 */ .faq__answer-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-long) var(--ease-in-out); } details[open] .faq__answer-wrap { grid-template-rows: 1fr; } /* 内层必须 overflow:hidden0fr 才能把高度压到 0 */ .faq__answer-inner { overflow: hidden; }注意这里使用的--ease-in-out与--dur-long都是命名 token来自 tokens.css:root { --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* 元素进入 */ --ease-in: cubic-bezier(0.7, 0, 0.84, 0); /* 元素退出 */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* 进出对称 */ --dur-micro: 120ms; --dur-short: 240ms; --dur-mid: 520ms; --dur-long: 760ms; }值得注意的细节文档规定展开用 200 ms--ease-out而 BananaStudio 示例在展开上用--dur-long760 ms--ease-in-out。这是两种可接受的取舍——文档给出的是最简锚点200 ms ease-out快而利落示例则选择了更从容的展示型节奏。两者都满足核心纪律绝不用浏览器默认ease绝不弹跳/过冲Hallmark 三个命名缓动曲线都不含 overshoot。实际落地时建议普通列表型 FAQ 用 200–300 ms--dur-short保持快问快答的利落感偏展示性的内容型 FAQ 可用更长时间与--ease-in-out营造节奏。展开图标 → ×示例用一个两线十字的图标展开时旋转 90° 变成×同样只用 transform 动画.faq__sign::before { width: 14px; height: 1.5px; } .faq__sign::after { width: 1.5px; height: 14px; transition: transform var(--dur-short) var(--ease-out); } details[open] .faq__sign::after { transform: rotate(90deg); }只旋转::after竖线而::before横线不动就完成了→×的形态切换——这是一个典型的动画 transform 而非布局属性的微交互范例。无边框的summary处理原生summary在 WebKit/Blink 上会显示默认的三角形 marker需要显式移除.faq__summary { list-style: none; /* Firefox */ } .faq__summary::-webkit-details-marker { display: none; } /* WebKit/Blink */同时interaction-and-states.md 的 8 状态纪律要求交互元素具备完整的 hover / focus-visible 等状态示例中的实现是.faq__summary:hover { color: var(--color-accent); } .faq__summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: 4px; }--color-focus: oklch(82% 0.180 75)是 Hallmark 规范的高对比聚焦环颜色outline-offset保证环不与文本粘连并且聚焦环出现不得有动画必须即时显示。六、布局与分隔线两种节奏方案文档的 Divider 要素给了两种可选方案方案 A细分隔线— 每对 Q/A 之间使用 hairline--rule-hair: 1px细线方案 B零分隔线 纸色切换— 不用线改为不同问答块之间切换纸面背景色。BananaStudio 示例采用的是方案 A 的变体——用border-block-end在每项底部画 hairline第一项额外加border-block-start封顶.faq__item { border-block-end: var(--rule-hair) solid var(--color-rule); } .faq__item:first-child { border-block-start: var(--rule-hair) solid var(--color-rule); }这样问答列表看起来像一个上下都被细线框住、中间逐行分隔的清单视觉上干净且节奏均匀。在布局上示例采用两栏非对称网格左栏是 FAQ 头部大标题 引导语右栏是问答列表.faq { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-2xl); align-items: start; }左栏标题使用 display 字体、clamp()响应式字号、max-width: 14ch限制行长引导语用--text-sm、max-width: 32ch。右栏1fr 2fr的宽度比让问答获得更多阅读空间。移动端≤ 某断点降为单列.faq { grid-template-columns: 1fr; }这与 responsive.md 要求每个 section head 在移动端折叠为单列的硬规则一致Hallmark 输出必须验证 320 / 375 / 414 / 768 px 四档宽度。注意图片纪律文档明确规定图片要sparse极少——可能每篇长回答配一张示意图其余全是文字。因此本宏结构的实现默认不配图只有当某条回答确实需要图解如流程说明时才允许一张。七、按钮体系回答内文字链接 页脚单一 CTA文档的 Button 要素是两级结构回答内部的排版型文字链接——用于深链到完整内容例如 Read the full policy →。Hallmark 在 components 中为这类链接定义了专门的C3 · Typographic link模式。关键点链接文本必须独立成立View pricing plans 而不是 Click here这是 copy.md 的硬规则箭头→是排版级指示符不是图标库资产。页脚一个描边outlinedCTA——整页只有一个主行动按钮且是 outlined 样式而非实心。注意 macrostructures.md 的规则CTA strip: one button. Not two. The repetition is the call to action.——一个按钮不是两个重复的按钮本身就是行动号召。这个问题内文字链接 页脚一个描边 CTA的搭配把继续了解详情与最终行动两个动作清晰分层读者可以在任意问答处顺着文字链接深入细节读到最后的唯一行动点则是页脚那个按钮。八、与相关组件/宏结构的配套使用Conversational FAQ 不是孤立存在的它必须被喂进 Hallmark 的完整页面流程见 SKILL.md 的 Design flow选定宏结构后还要同时选定nav 与 footer 的 archetypeN1–N10 / Ft1–Ft8、主题22 个命名主题之一或 custom 分支、字体配对21 上限一个 display 一个 body可加一个 outlier、并遵守多样化规则连续两次输出不得使用相同宏结构。FAQ 宏结构的页面内常用配套组件C3 · Typographic linkcomponents/c3-typographic-link.md——回答内的文字链接Ft5 · Statement / Ft6 · Letter-close等页脚 archetype——承担页脚描边 CTA 的载体F5 · Annotated screenshotcomponents/f5-annotated-screenshot.md——当某条长回答需要配一张示意图时使用。在 macrostructures.md 的 SaaS 页面顺序中FAQ 位于第 6 位Hero → Logo 墙 → Features → Testimonials → Pricing →FAQ→ Final CTA strip → FooterFAQ 的回答语气也有专门纪律answer like a person, not a sales doc——像人一样回答而不是像销售文档。Yes — Stripe and Adyen are both supported out of the box 好过 Our platform integrates with leading payment providers。这正是 Conversational FAQ 六要素中 honest interview 语气的具体化。九、质量把关FAQ 的 slop-test 自查清单Hallmark 在交付前要过 69 道 slop-test 门禁见 slop-test.md。针对 Conversational FAQ 宏结构重点自查以下门禁与纪律检查项要求依据无编造数据回答中的指标必须是 brief 提供的真实数字否则用—占位或换一种结构表达anti-patterns · Invented metrics无占位人名不出现 Jane Doe / John Smith / Lorem Ipsumanti-patterns gate 20折叠动画合规只动grid-template-rows不动height/width/margin等布局属性motion.md · microinteractions.md命名 token颜色与字体只引用var(--color-*)/var(--font-*)不出现内联 OKLCH/hexSKILL.md · Locked tokens8 交互状态summary具备 hover / focus-visible / active 等状态样式interaction-and-states.md移动端验证320 / 375 / 414 / 768 px 无横向滚动、无两行点击文本、单列布局responsive.md不重画浏览器 chrome不为 FAQ 页面手绘浏览器栏、假代码窗口等anti-patterns · Re-drawn UI chrome问题文案具体问题是真的问题、回答短而具体无营销空话copy.md特别要注意 SKILL.md 的pre-emit self-critique纪律交付前按 Philosophy / Hierarchy / Execution / Specificity / Restraint / Variety 六轴各打 1–5 分任一轴 3 分则必须返工修订并在产物顶部加盖/* Hallmark · pre-emit critique: … */印记——FAQ 宏结构的特异性Specificity得分尤其取决于问题文案的具体性。十、一篇完整可运行的 FAQ 段落附完整样式下面把本文档的六要素 示例源码整合成一个可直接复制运行的 FAQ 段落HTML 配套 CSS覆盖问句标题、2 段式短回答、hairline 分隔、回答内文字链接、页脚描边 CTA、grid-template-rows折叠动画、8 状态 summary。section classfaq idfaq aria-labelledbyfaq-title header classfaq__head h2 idfaq-titleQuestions, emanswered honestly./em/h2 pIf we didn’t cover yours, write to us — a person reads that inbox./p /header div classfaq__list details classfaq__item summary classfaq__summary spanHow long does setup take?/span span classfaq__sign aria-hiddentrue/span /summary div classfaq__answer-wrap div classfaq__answer-inner p classfaq__answerTwo minutes from a blank terminal. You point it at your log stream and it starts parsing — no server, no agent./p p classfaq__answerIf you need to a classfaq__link href#pipelinehook it into your CI pipeline →/a, add one config file and re-run./p /div /div /details details classfaq__item summary classfaq__summary spanWho built this?/span span classfaq__sign aria-hiddentrue/span /summary div classfaq__answer-wrap div classfaq__answer-inner p classfaq__answerThree of us, in Lisbon, since 2014. We run the product ourselves — the same binary you download is the one we alert on at 3 am./p /div /div /details details classfaq__item summary classfaq__summary spanHow is this different from the other log tools?/span span classfaq__sign aria-hiddentrue/span /summary div classfaq__answer-wrap div classfaq__answer-inner p classfaq__answerIt’s about time. Everything else waits for the morning dashboard; this one answers the page that’s failing now./p /div /div /details /div p classfaq__ctaa classbtn btn--outline href#pricingRead the full feature policy →/a/p /section/* Hallmark · macrostructure: Conversational FAQ · tone: technical · anchor hue: ink */ .faq { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-2xl); align-items: start; } .faq__head h2 { font-family: var(--font-display); font-size: clamp(2rem, 4vw 0.5rem, 3.25rem); font-weight: 400; letter-spacing: -0.035em; line-height: 1.0; max-width: 14ch; } .faq__head p { margin-top: var(--space-md); color: var(--color-ink-2); font-size: var(--text-sm); max-width: 32ch; } .faq__list { display: grid; } .faq__item { border-block-end: var(--rule-hair) solid var(--color-rule); } .faq__item:first-child { border-block-start: var(--rule-hair) solid var(--color-rule); } .faq__summary { list-style: none; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-md); padding-block: var(--space-md); cursor: pointer; min-height: 48px; font-family: var(--font-display); font-size: var(--text-md); font-weight: 500; letter-spacing: -0.02em; color: var(--color-ink); line-height: 1.3; transition: color var(--dur-short) var(--ease-out); } .faq__summary::-webkit-details-marker { display: none; } .faq__summary:hover { color: var(--color-accent); } .faq__summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: 4px; } /* 展开图标 → ×只旋转竖线 */ .faq__sign { position: relative; width: 20px; height: 20px; color: var(--color-accent); } .faq__sign::before, .faq__sign::after { content: ; position: absolute; inset: 0; margin: auto; background: currentColor; } .faq__sign::before { width: 14px; height: 1.5px; } .faq__sign::after { width: 1.5px; height: 14px; transition: transform var(--dur-short) var(--ease-out); } details[open] .faq__sign::after { transform: rotate(90deg); } /* 折叠动画grid-template-rows 0fr → 1fr不动 height */ .faq__answer-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-short) var(--ease-in-out); } details[open] .faq__answer-wrap { grid-template-rows: 1fr; } .faq__answer-inner { overflow: hidden; } .faq__answer { padding-block: 0 var(--space-md); color: var(--color-ink-2); font-size: var(--text-sm); max-width: 60ch; line-height: 1.6; } .faq__link { color: var(--color-accent); text-decoration: underline; text-underline-offset: 0.2em; } /* 页脚描边 CTA */ .faq__cta { margin-top: var(--space-2xl); } .btn--outline { display: inline-block; border: 1px solid var(--color-accent); color: var(--color-accent); padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-sm); transition: background var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); } .btn--outline:hover { background: var(--color-accent); color: var(--color-paper); } .btn--outline:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; } media (max-width: 768px) { .faq { grid-template-columns: 1fr; } }其中--space-*、--text-*、--color-*、--rule-hair、--radius-*等命名 token 需在:root的 tokens.css 中按 Hallmark 规范定义页面 CSS 只允许按名引用、不允许内联裸值——这是 SKILL.md 的 Locked tokens 硬规则。结语把 FAQ 从填坑章节升级为信任机制Conversational FAQ 宏结构给 FAQ 类页面的最大启发是问答不是为了占满版面而是为了把产品的可信度具象化。它的六要素——问句标题、2–4 段短答、hairline 分隔、回答内文字链接、页脚单 CTA、零加载揭示——合起来构成一个诚实采访的阅读体验读者每点击一个问题页面就诚实回答一次回答的具体程度就是产品自信的程度。技术层面grid-template-rows: 0fr → 1fr的折叠动画是 Hallmark 动效纪律的绝佳范例——它同时满足了只用 transform/可插值属性动画、用命名缓动与时长 token、零 JS 依赖三条硬规则。当你下次在定价页、教育产品或受监管行业的落地页中需要消解用户疑虑时直接调用这套宏结构 示例源码即可产出一个读起来像人、不像销售文档的 FAQ 章节。延伸阅读宏结构总览见 macrostructures.md完整设计流程与多样化规则见 SKILL.md动效时长/缓动契约见 motion.md文案与按钮措辞纪律见 copy.md反模式与 slop 门禁见 anti-patterns.md 与 slop-test.md可运行的生产级 FAQ 段落见 Bananastudio 示例。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考