尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

Quote-Led 与 Letter 拆解:Hallmark 教你用 2 种页面结构快速建立用户信任

Quote-Led 与 Letter 拆解:Hallmark 教你用 2 种页面结构快速建立用户信任 Quote-Led 与 Letter 拆解Hallmark 教你用 2 种页面结构快速建立用户信任【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmarkHallmark 是一个面向 Claude Code、Cursor 和 Codex 的反 AI 味设计技能Anti-AI-slop design skill它能帮新手让 AI 生成的落地页摆脱千篇一律的模板感。这篇文章拆解 Hallmark 21 种宏观结构macrostructure中两种主打借信任构建的页面**Quote-Led引用先行**与Letter书信式——它们不靠品牌自夸而是靠客户原话和创始人第一人称让访客更快产生信任。为什么借来的声音比自夸更可信大多数 AI 生成的落地页都遵循同一个节奏大标题自夸 → 三个功能卡片 → CTA 按钮。访客刷多了就会产生这又是套模板的疲劳感。Hallmark 的思路相反在SKILL.md中它明确要求结构性多样——两页为不同需求生成的页面应该像两个不同的网站而不是同一模板换色。Quote-Led 和 Letter 正是其中两种把话语权交给别人的结构结构信任来源一句话概括Quote-Led客户/听众的原话让别人替你说好话Letter创始人/作者本人像私人信件一样坦诚两种结构的完整定义分别在 09-quote-led.md 和 12-letter.md 中每个文件都列出了标题、正文、分隔符、按钮形态等具体规范。Quote-Led用一句真实引语做主标题核心形态Quote-Led 的首屏不写品牌口号而是一句带署名的客户引语斜体大字呈现引文下方用小字标注—— 姓名职位公司配一个文字链接如阅读完整案例 →收尾。这种结构的关键在于主标题是借来的可信度而不是品牌自己的声音。页面往下继续堆叠更多用户评价、案例研究分隔符通常是居中的引号符号或一条细线。什么时候该用 Quote-Led参考 09-quote-led.md 的官方建议适合的场景有真实客户声音的 B2B 产品——和我一样的人都在用本身就是解锁点 代理机构的案例研究页、大学/机构发展页 需要社会证明social proof的融资或众筹页面明确的红线如果你的产品还没有真实用户评价不要使用 Quote-Led。文档直言伪造引语会在被检验时摧毁信任。这与 Hallmark 的全局纪律一致——SKILL.md中的Honest copy规则禁止编造任何指标和评价47% 转化率这类数字一旦是编的立刻算作 AI 味slop。对应组件规范见 h3-quote-led.md。仓库中的两个完整示例site/_tests/04-meridian-manifesto/style.css——CSS 顶部标注macrostructure: Quote-Led引语使用压缩粗体展示字重site/_tests/13-alma/index.html——Quote-Led Halo 主题配 Tier-A 纯 SVG 装饰Letter一封写给读者的信核心形态Letter 是另一种信任路径第一人称、书面化、私密感。页面以问候语开篇亲爱的读者正文是单栏散文宽度约 50ch像手打字稿分隔符只是段落间距、偶尔加一个* * *页首没有任何按钮。收尾也不像普通页脚而是像信件落款Yours, the team. 2026.还可以加一行附言P.S.——组件定义见 ft6-letter-close.md。组件级规范在 h5-letter-hero.md开篇就是第一人称问候创始人的声音就是品牌时启用。什么时候该用 Letter✍️个人品牌与作品集——访客要的是你这个人不是产品清单 独立创始人的公告、休假/转型说明、捐赠倡议☕ 有人味的订阅制小店——强调写信式、手作感同样有红线别用在交易型电商。Letter 是亲密的而下单是功能性的语气错位会显得做作。仓库里有一个很好的对照案例site/_tests/01-tide-podcast/brief.md 记录了同一个播客需求跑两次、两次选中不同结构的完整过程——第一次选了 Quote-Led第三方听众背书第二次按多样化规则改选 Letter主播对听众直接开口两次都零装饰、纯排版。这份 brief 几乎就是一份新手怎么读结构决策的示范文档。编辑感editorial两种结构共享的气质无论 Quote-Led 还是 Letter在 Hallmark 里都归属于editorial编辑风气质——克制的配色、衬线字体、大留白。下面这页咖啡订阅站展示了这种气质的典型面貌奶油色纸感底色 斜体展示字 细线分隔像一张印刷刊物。值得注意的是这两种结构都拒绝首屏加按钮、拒绝动画堆料。Hallmark 的纪律是运动motion宁可少放、装饰能不用就不用——对信任型页面来说克制本身就是可信度信号。新手上手3 步跑通这两种结构先读结构索引macrostructures.md 是 21 种结构的一行式索引找到09 · Quote-Led或12 · Letter再加载对应的单文件09 / 12 号无需通读整本目录。对照官方示例仓库site/_tests/下每个测试页都带需求文档brief.md和最终 HTML/CSSCSS 首行会盖章写明所用结构例如/* Hallmark · macrostructure: Letter · ... */照着读就能学会结构长什么样。看人读文档docs/recipes.md 收录了 8 个完整需求演练docs/study-examples.md 收录 3 个 DNA 提取示例都是面向人类读者的讲解不用啃代码。小结信任构建的两条路维度Quote-LedLetter信任来源客户原话第三方创始人本人第一人称首屏元素斜体引语 署名 文字链接问候语 单栏散文首屏按钮文字链接克制完全没有最佳场景B2B、案例页、众筹个人品牌、创始人公告绝对避免没有真实引语时交易型电商两种结构共享同一条原则把说话权让出去信任就来了。这正是 Hallmark 与模板生成器的根本差异——它先问你这页的信任应该从哪里来再决定页面长什么样。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表