尧图网站建设 
Hallmark H5 Letter Hero 组件实战把落地页写成第一人称信件【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark导读本文以 Hallmark 设计技能库中的 H5 Letter Hero 组件规范 为核心拆解如何用「第一人称信件」的视觉语言构建首屏hero以 Dear reader, 式称呼开场、第一折页不放任何按钮、整页读起来像创始人亲笔写下的个人通讯。你将掌握 H5 的最小 DOM/CSS 骨架、与 H1 Marquee 的判别方法、在 Letter 宏结构中的完整落位含页脚 Ft6 Letter close 的配套写法、排版与响应式细节以及仓库中 Tide、Coffeebox 等实测案例的印证。一、组件定位什么时候用 Letter Hero什么时候别用H5 在 component-cookbook.md 的 9 个 Hero 原型中独占一格H5 · Letter hero— First-person opening — Dear reader,. No buttons in fold. Reads as personal correspondence.它的核心判据只有一条Use when: the founders voice is the brand创始人的声音就是品牌本身。Dont confuse with: H1 Marquee那是无人称的宣言式陈述。这与 Letter 宏结构macrostructures/12-letter.md是一一对应的Letter 宏结构整体上就是「第一人称、书面、亲密」——以问候语Dear friend,开场第一折页没有按钮读起来像创始人写的一封私人便条。H5 就是这套宏结构在首屏位置的具体化身。适用场景个人品牌站、独立创始人发布公告、休假/转型声明、捐赠诉求页。明确回避交易型电商——Letter is intimate; commerce is functional信件式语气与购物流程在气质上互斥。与之对照的 H1 Marqueeh1-marquee.md是「一句陈述填满整个首屏无副标题、无 CTA」气场是宣言式、品牌即信息而 H5 的起点是「一个具体的人在开口说话」。二、最小结构规范骨架与语义分析H5 的规范骨架极其精简只有两个元素section classhero-letter p classsalutationemDear reader,/em/p p classlede…/p /section拆开看三个要点容器语义用section classhero-letter包裹而非div。它是一段有主题的内容区section 语义正确。称呼即标题p classsalutationemDear reader,/em/p用斜体em承担视觉重心。在 Letter 宏结构里称呼就是页面事实上的 heading规范要求它做到1.5–2 倍正文大小serif italic。第一折页只有两件事一句称呼 一段引导语lede。没有按钮、没有表单、没有媒体。这本身就是设计意图的表达——No buttons in fold 是规范明文规定的硬约束。称呼的三个变体方向从 component-cookbook.md 的「Within-archetype variation knobs」表看H5 Letter 有三个旋钮其中第一个就是称呼形态旋钮可选值Salutationgreeting如 Hey there.· Dear X, · time-stamp如 Saturday, 6:14 a.m.Body length1 段 · 2 段 · 3 段Signoff打字姓名 · 手绘签名 SVG · 姓名首字母三个称呼方向在 macrostructures/12-letter.md 的示范开场句里都能找到对应Hello, Im Anya.— 单行、姓名、句号收尾Saturday, 6:14 a.m. The dough went in at midnight.— 从一个时刻切入再解释它Hey there. This page is soft because the surface should be soft.— 口语化开场 一条原则三、为什么第一折页不放按钮信件语气的三大约束H5 与常见 SaaS Hero 的最大区别是把「行动召唤」从首屏整体挪走。这不是偷懒而是三层约束共同作用的结果信息层级信件的开场动作是「建立关系」不是「促成转化」。称呼 lede 的任务是让访客先读完一句话、认可写信人的口吻然后才轮到行动。按钮语言Button voicestructure.md 的按钮四象限中信件式页面天然对应Unstyled link无边框下划线词或Typographic-only纯文字排版而不是 Oversized solid大色块按钮。信件语气里塞一个巨大的实心按钮等于在情书里夹一张促销传单。CTA 的位置后移Letter 宏结构把行动召唤放在信尾——sign-off link如 p.s. join us if youd like →。正文是信落款处才是行动点这与下文要讲的 Ft6 Letter close 页脚形成首尾呼应。四、版式与排版把「信件」真正排出来H5 的视觉呈现由 Letter 宏结构macrostructures/12-letter.md接管它把整页当成一封信来排版Heading斜体衬线称呼Dear reader,1.5–2× 正文大小。Body散文式正文单栏窄栏宽50ch像打字机敲出来的。Divider只用段落间距偶尔用* * *作为分隔符。Button信尾链接p.s. join us if youd like →。Image最多一张签名扫描件或一张安静的文内小图。Reveal无首屏不做入场动画。排版层面要遵守 typography.md 的全局规则21 字体上限一页最多三种字体族——display标题/首屏 body正文 可选 outlier仅限 1–2 个特定位置。Letter 页面通常两种就够衬线做 display、无衬线或衬线做 body。衬线 斜体是信件语气的默认配方称呼用font-style: italic的衬线是刻意的排版决策不是随手加个em。Hallmark 的字体目录里Fraunces、Instrument Serif、Cormorant Garamond 都是这类「手写信气质」的免费 display 候选。正文细节行高 1.5–1.65measure 45–75 字符50ch 在区间内正文最小 16px正文绝不全文大写、绝不无断词的 justify。数字任何日期、年份用font-variant-numeric: tabular-nums;等宽数字。五、响应式表现两档回退component-cookbook.md 的「Mobile collapse」表对 H5 有明确规定两档断点分别处理断点H5 Letter 行为60rem~960px保持单栏不变旁注如有移到正文下方分隔线变成上边框。40rem~640px称呼字号降一档信尾落款收紧。跨原型通用规则同样适用40rem 以下所有点击目标 ≥ 44×44px页面容器padding-inline ≥ clamp(1rem, 4vw, 1.5rem)40rem 以下禁用一切滚动联动动画。Letter 是少数在移动端几乎「无需变形」的原型——因为它天生单栏手机屏幕反而更接近信纸的阅读形态。六、配套组件Letter 宏结构、导航与页脚H5 不能孤立存在。SKILL.md 的 Design flow 明确要求选定宏结构后必须同时选定 navN1–N10和 footerFt1–Ft8原型它们是一页结构指纹的一部分不是可选装饰。页脚Ft6 Letter close信件页面最配套的页脚是 Ft6 Letter close——「像信件一样收尾」footer classfoot-letter p classfoot-letter__closeYours,brspan classfoot-letter__sign— Studio/span/p p classfoot-letter__ps mutedP.S. — letters back welcome at a hrefmailto:hellostudiohellostudio/a./p /footer.foot-letter { padding: var(--space-2xl) var(--page-gutter); max-width: 60ch; } .foot-letter__close { font-family: var(--font-display); font-style: italic; font-size: var(--text-lg); line-height: 1.4; } .foot-letter__sign { font-style: normal; font-weight: 600; } .foot-letter__ps { font-size: var(--text-sm); margin-top: var(--space-md); }Ft6 规范里同时给了反模式把 Ft6 用在 Stat-Led / B2B 产品页上属于语气错配读起来像矫揉造作只留给真正信件形状的页面。导航与主题指纹从 structure.md 的主题指纹表可以看到Letter 页面系的导航/页脚默认值主题NavFooterAtelierN9 Edge-minFt6 Letter closeGardenN9 Edge-minFt6 Letter closeLinenN6 MastheadFt1 Mast-headed而 component-cookbook.md 的路由表规定 editorial 类的默认页脚是 Ft1 Mast-headedFt6 是「also OK」的备选——这正说明 Ft6 只该在页面整体是信件语气时启用。导航侧N9 Edge-aligned minimal字标贴左、单个 CTA 贴右、中间大量留白与信纸的留白美学最合拍。首屏富化与打磨模式hero-enrichment.md 的 image-need 检测表把editorial, essay, letter明确归入「No imagery」行——display 排版本身就是设计信件 Hero 默认不加任何富化enrichment也不建议叠 HP1–HP4 打磨模式它们更适合居中/宣言式首屏。若必须有一张图Letter 宏结构的 Image 行给的选项是「一张签名扫描件或安静的文内小图」而不是整幅营销大图。七、仓库实测Tide 与 Coffeebox 怎么用 Letter 语气仓库的测试站点是这套规范最直观的注脚。Tide 播客标准 Dear X, 形态site/_tests/01-tide-podcast/index.html 是教科书级的 H5 Letter 组合p classsalutation Dear listener,span classsalutation__caret aria-hiddentrue/span /p article classletter p Tide is a podcast about emhow small studios actually work/em. … /p p classsignoff — span classsignoff__nameA. Reis/span, host /p /article它完整兑现了规范的每个要点称呼 Dear listener, 用斜体衬线、正文单栏窄栏宽、信尾用signoff落款「— A. Reis, host」对应旋钮 Signoff: typed name、首屏无按钮行动入口是后面的 Listen where you listen 列表。字体组合用的是 Cormorant Garamonddisplay IBM Plex Monooutlier/元信息符合 21 上限。Coffeeboxtime-stamp 称呼变体site/_tests/custom/01-coffeebox/index.html 展示了称呼旋钮的另一种取值——时间戳开场h2 classsalutation span classsalutation__timeSunday — 6:14 a.m./span The first roast of the week leaves the drum. /h2用具体时刻建立「此刻正在发生」的真实感The dough went in at midnight. 同款手法整篇正文都是第一人称散文收尾是「§ Three things, then well go」的编号短注——信件语气可以一直延续到页面中部而不是只在首屏出现一次。Maple Street Bakery同一家族的时间线变体site/_tests/03-maple-bakery/index.html 的日期行 Saturday — 6:14 a.m. — eight breads, gone by noon 用的是同款「时刻 事实」的句子结构并把首屏让位给手工 SVG 面包插画对应 Letter 宏结构的「maybe one quiet inline photograph」。它印证了 Letter 家族内部依然可以靠旋钮称呼形态、富化方式做出不同指纹。八、防呆清单Letter Hero 的常见反模式与 H1 Marquee 混淆H1 是无主语宣言A statement.H5 是第一人称开口。品牌即信息 vs 创始人在说话气质完全不同。首屏塞按钮hero-letter里出现 pill CTA 即破坏信件语气。行动必须后移到信尾链接或 Ft6 的 P.S. 行。Ft6 用在 B2B 页Stat-Led / SaaS 产品页用 Yours, the team. 收尾是语气错配。信封式排版被破坏measure 放宽到 65ch 以上、正文两端对齐、称呼不加斜体——都会让「信」退化成「文章」。加入场动画Letter 宏结构的 Reveal 是 none首屏动效与「一封写好的信」的静态诚实感冲突。违反 tokens 纪律按 SKILL.md 的跨 verb 纪律所有颜色与字族必须走命名 tokenvar(--font-display)等不许在组件内联写字体名或色值。九、落成产物印章与自检按 SKILL.md 的 Build 阶段要求Letter 页面交付时CSS 印章产物 CSS 首行写/* Hallmark · macrostructure: Letter · H5 hero knobs: salutationdear-x, body2p, signofftyped-name · nav: N9 · footer: Ft6 · … */这是下次 Hallmark 运行读取多样化的记录。预审批评输出前按六轴Philosophy/Hierarchy/Execution/Specificity/Restraint/Variety1–5 打分任一轴 3 必须重做印章注释随 CSS 文件交付。Slop 门禁Letter 页面同样过 69 道 slop-test 门禁slop-test.md 在 SKILL.md 中定义为 Step 7 加载其中「英雄 footprint 70–90% 首屏而非 100dvh」「不全居中」「只做一次入场动画」等空间纪律直接约束 H5 的实现质量。总结H5 Letter Hero 的本质是把首屏从「展示台」改写成「一封信的第一行」。它的全部技术要点可以压缩成三句话——称呼用斜体衬线1.5–2× 正文、第一折页不出现任何按钮、整页用窄栏散文的排版纪律维持「亲笔所写」的可信度。搭配 Letter 宏结构、Ft6 信件收尾页脚与 N9 极简导航它就能完整承担个人品牌、创始人公告、捐赠诉求这类「声音即品牌」的页面而 Tide、Coffeebox 等实测站点证明这套结构从播客到咖啡订阅都经得起落地。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Hallmark H5 Letter Hero 组件实战：把落地页写成第一人称信件
Hallmark H5 Letter Hero 组件实战把落地页写成第一人称信件【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark导读本文以 Hallmark 设计技能库中的 H5 Letter Hero 组件规范 为核心拆解如何用「第一人称信件」的视觉语言构建首屏hero以 Dear reader, 式称呼开场、第一折页不放任何按钮、整页读起来像创始人亲笔写下的个人通讯。你将掌握 H5 的最小 DOM/CSS 骨架、与 H1 Marquee 的判别方法、在 Letter 宏结构中的完整落位含页脚 Ft6 Letter close 的配套写法、排版与响应式细节以及仓库中 Tide、Coffeebox 等实测案例的印证。一、组件定位什么时候用 Letter Hero什么时候别用H5 在 component-cookbook.md 的 9 个 Hero 原型中独占一格H5 · Letter hero— First-person opening — Dear reader,. No buttons in fold. Reads as personal correspondence.它的核心判据只有一条Use when: the founders voice is the brand创始人的声音就是品牌本身。Dont confuse with: H1 Marquee那是无人称的宣言式陈述。这与 Letter 宏结构macrostructures/12-letter.md是一一对应的Letter 宏结构整体上就是「第一人称、书面、亲密」——以问候语Dear friend,开场第一折页没有按钮读起来像创始人写的一封私人便条。H5 就是这套宏结构在首屏位置的具体化身。适用场景个人品牌站、独立创始人发布公告、休假/转型声明、捐赠诉求页。明确回避交易型电商——Letter is intimate; commerce is functional信件式语气与购物流程在气质上互斥。与之对照的 H1 Marqueeh1-marquee.md是「一句陈述填满整个首屏无副标题、无 CTA」气场是宣言式、品牌即信息而 H5 的起点是「一个具体的人在开口说话」。二、最小结构规范骨架与语义分析H5 的规范骨架极其精简只有两个元素section classhero-letter p classsalutationemDear reader,/em/p p classlede…/p /section拆开看三个要点容器语义用section classhero-letter包裹而非div。它是一段有主题的内容区section 语义正确。称呼即标题p classsalutationemDear reader,/em/p用斜体em承担视觉重心。在 Letter 宏结构里称呼就是页面事实上的 heading规范要求它做到1.5–2 倍正文大小serif italic。第一折页只有两件事一句称呼 一段引导语lede。没有按钮、没有表单、没有媒体。这本身就是设计意图的表达——No buttons in fold 是规范明文规定的硬约束。称呼的三个变体方向从 component-cookbook.md 的「Within-archetype variation knobs」表看H5 Letter 有三个旋钮其中第一个就是称呼形态旋钮可选值Salutationgreeting如 Hey there.· Dear X, · time-stamp如 Saturday, 6:14 a.m.Body length1 段 · 2 段 · 3 段Signoff打字姓名 · 手绘签名 SVG · 姓名首字母三个称呼方向在 macrostructures/12-letter.md 的示范开场句里都能找到对应Hello, Im Anya.— 单行、姓名、句号收尾Saturday, 6:14 a.m. The dough went in at midnight.— 从一个时刻切入再解释它Hey there. This page is soft because the surface should be soft.— 口语化开场 一条原则三、为什么第一折页不放按钮信件语气的三大约束H5 与常见 SaaS Hero 的最大区别是把「行动召唤」从首屏整体挪走。这不是偷懒而是三层约束共同作用的结果信息层级信件的开场动作是「建立关系」不是「促成转化」。称呼 lede 的任务是让访客先读完一句话、认可写信人的口吻然后才轮到行动。按钮语言Button voicestructure.md 的按钮四象限中信件式页面天然对应Unstyled link无边框下划线词或Typographic-only纯文字排版而不是 Oversized solid大色块按钮。信件语气里塞一个巨大的实心按钮等于在情书里夹一张促销传单。CTA 的位置后移Letter 宏结构把行动召唤放在信尾——sign-off link如 p.s. join us if youd like →。正文是信落款处才是行动点这与下文要讲的 Ft6 Letter close 页脚形成首尾呼应。四、版式与排版把「信件」真正排出来H5 的视觉呈现由 Letter 宏结构macrostructures/12-letter.md接管它把整页当成一封信来排版Heading斜体衬线称呼Dear reader,1.5–2× 正文大小。Body散文式正文单栏窄栏宽50ch像打字机敲出来的。Divider只用段落间距偶尔用* * *作为分隔符。Button信尾链接p.s. join us if youd like →。Image最多一张签名扫描件或一张安静的文内小图。Reveal无首屏不做入场动画。排版层面要遵守 typography.md 的全局规则21 字体上限一页最多三种字体族——display标题/首屏 body正文 可选 outlier仅限 1–2 个特定位置。Letter 页面通常两种就够衬线做 display、无衬线或衬线做 body。衬线 斜体是信件语气的默认配方称呼用font-style: italic的衬线是刻意的排版决策不是随手加个em。Hallmark 的字体目录里Fraunces、Instrument Serif、Cormorant Garamond 都是这类「手写信气质」的免费 display 候选。正文细节行高 1.5–1.65measure 45–75 字符50ch 在区间内正文最小 16px正文绝不全文大写、绝不无断词的 justify。数字任何日期、年份用font-variant-numeric: tabular-nums;等宽数字。五、响应式表现两档回退component-cookbook.md 的「Mobile collapse」表对 H5 有明确规定两档断点分别处理断点H5 Letter 行为60rem~960px保持单栏不变旁注如有移到正文下方分隔线变成上边框。40rem~640px称呼字号降一档信尾落款收紧。跨原型通用规则同样适用40rem 以下所有点击目标 ≥ 44×44px页面容器padding-inline ≥ clamp(1rem, 4vw, 1.5rem)40rem 以下禁用一切滚动联动动画。Letter 是少数在移动端几乎「无需变形」的原型——因为它天生单栏手机屏幕反而更接近信纸的阅读形态。六、配套组件Letter 宏结构、导航与页脚H5 不能孤立存在。SKILL.md 的 Design flow 明确要求选定宏结构后必须同时选定 navN1–N10和 footerFt1–Ft8原型它们是一页结构指纹的一部分不是可选装饰。页脚Ft6 Letter close信件页面最配套的页脚是 Ft6 Letter close——「像信件一样收尾」footer classfoot-letter p classfoot-letter__closeYours,brspan classfoot-letter__sign— Studio/span/p p classfoot-letter__ps mutedP.S. — letters back welcome at a hrefmailto:hellostudiohellostudio/a./p /footer.foot-letter { padding: var(--space-2xl) var(--page-gutter); max-width: 60ch; } .foot-letter__close { font-family: var(--font-display); font-style: italic; font-size: var(--text-lg); line-height: 1.4; } .foot-letter__sign { font-style: normal; font-weight: 600; } .foot-letter__ps { font-size: var(--text-sm); margin-top: var(--space-md); }Ft6 规范里同时给了反模式把 Ft6 用在 Stat-Led / B2B 产品页上属于语气错配读起来像矫揉造作只留给真正信件形状的页面。导航与主题指纹从 structure.md 的主题指纹表可以看到Letter 页面系的导航/页脚默认值主题NavFooterAtelierN9 Edge-minFt6 Letter closeGardenN9 Edge-minFt6 Letter closeLinenN6 MastheadFt1 Mast-headed而 component-cookbook.md 的路由表规定 editorial 类的默认页脚是 Ft1 Mast-headedFt6 是「also OK」的备选——这正说明 Ft6 只该在页面整体是信件语气时启用。导航侧N9 Edge-aligned minimal字标贴左、单个 CTA 贴右、中间大量留白与信纸的留白美学最合拍。首屏富化与打磨模式hero-enrichment.md 的 image-need 检测表把editorial, essay, letter明确归入「No imagery」行——display 排版本身就是设计信件 Hero 默认不加任何富化enrichment也不建议叠 HP1–HP4 打磨模式它们更适合居中/宣言式首屏。若必须有一张图Letter 宏结构的 Image 行给的选项是「一张签名扫描件或安静的文内小图」而不是整幅营销大图。七、仓库实测Tide 与 Coffeebox 怎么用 Letter 语气仓库的测试站点是这套规范最直观的注脚。Tide 播客标准 Dear X, 形态site/_tests/01-tide-podcast/index.html 是教科书级的 H5 Letter 组合p classsalutation Dear listener,span classsalutation__caret aria-hiddentrue/span /p article classletter p Tide is a podcast about emhow small studios actually work/em. … /p p classsignoff — span classsignoff__nameA. Reis/span, host /p /article它完整兑现了规范的每个要点称呼 Dear listener, 用斜体衬线、正文单栏窄栏宽、信尾用signoff落款「— A. Reis, host」对应旋钮 Signoff: typed name、首屏无按钮行动入口是后面的 Listen where you listen 列表。字体组合用的是 Cormorant Garamonddisplay IBM Plex Monooutlier/元信息符合 21 上限。Coffeeboxtime-stamp 称呼变体site/_tests/custom/01-coffeebox/index.html 展示了称呼旋钮的另一种取值——时间戳开场h2 classsalutation span classsalutation__timeSunday — 6:14 a.m./span The first roast of the week leaves the drum. /h2用具体时刻建立「此刻正在发生」的真实感The dough went in at midnight. 同款手法整篇正文都是第一人称散文收尾是「§ Three things, then well go」的编号短注——信件语气可以一直延续到页面中部而不是只在首屏出现一次。Maple Street Bakery同一家族的时间线变体site/_tests/03-maple-bakery/index.html 的日期行 Saturday — 6:14 a.m. — eight breads, gone by noon 用的是同款「时刻 事实」的句子结构并把首屏让位给手工 SVG 面包插画对应 Letter 宏结构的「maybe one quiet inline photograph」。它印证了 Letter 家族内部依然可以靠旋钮称呼形态、富化方式做出不同指纹。八、防呆清单Letter Hero 的常见反模式与 H1 Marquee 混淆H1 是无主语宣言A statement.H5 是第一人称开口。品牌即信息 vs 创始人在说话气质完全不同。首屏塞按钮hero-letter里出现 pill CTA 即破坏信件语气。行动必须后移到信尾链接或 Ft6 的 P.S. 行。Ft6 用在 B2B 页Stat-Led / SaaS 产品页用 Yours, the team. 收尾是语气错配。信封式排版被破坏measure 放宽到 65ch 以上、正文两端对齐、称呼不加斜体——都会让「信」退化成「文章」。加入场动画Letter 宏结构的 Reveal 是 none首屏动效与「一封写好的信」的静态诚实感冲突。违反 tokens 纪律按 SKILL.md 的跨 verb 纪律所有颜色与字族必须走命名 tokenvar(--font-display)等不许在组件内联写字体名或色值。九、落成产物印章与自检按 SKILL.md 的 Build 阶段要求Letter 页面交付时CSS 印章产物 CSS 首行写/* Hallmark · macrostructure: Letter · H5 hero knobs: salutationdear-x, body2p, signofftyped-name · nav: N9 · footer: Ft6 · … */这是下次 Hallmark 运行读取多样化的记录。预审批评输出前按六轴Philosophy/Hierarchy/Execution/Specificity/Restraint/Variety1–5 打分任一轴 3 必须重做印章注释随 CSS 文件交付。Slop 门禁Letter 页面同样过 69 道 slop-test 门禁slop-test.md 在 SKILL.md 中定义为 Step 7 加载其中「英雄 footprint 70–90% 首屏而非 100dvh」「不全居中」「只做一次入场动画」等空间纪律直接约束 H5 的实现质量。总结H5 Letter Hero 的本质是把首屏从「展示台」改写成「一封信的第一行」。它的全部技术要点可以压缩成三句话——称呼用斜体衬线1.5–2× 正文、第一折页不出现任何按钮、整页用窄栏散文的排版纪律维持「亲笔所写」的可信度。搭配 Letter 宏结构、Ft6 信件收尾页脚与 N9 极简导航它就能完整承担个人品牌、创始人公告、捐赠诉求这类「声音即品牌」的页面而 Tide、Coffeebox 等实测站点证明这套结构从播客到咖啡订阅都经得起落地。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考