Hallmark Ft1 Mast-Headed 页脚组件用“报头式”单行锚点写出安静克制的页面收尾【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark导读Ft1 Mast-Headed 是 Hallmark 设计技能页脚组件族Ft1–Ft8中结构最简洁、语义最明确的一个一个横向单条带上由 wordmark字标与 tagline标语共同锚定页面收尾旁边只挂两三个小链接地址或许可信息沉在最下方。本篇文章以 ft1-mast-headed.md 为核心骨架结合 component-cookbook.md 的组件路由规则、SKILL.md 的页面工作流与 tokens.css 的令牌体系完整还原该组件的设计意图、DOM/CSS 实现、变化旋钮与响应式折叠行为并对照仓库中真实落地案例。读完你既能直接写出可复制的 Ft1 页脚代码也能理解 Hallmark 为什么把“默认远离 Ft3”写进规则。一、组件定位Ft1 在 Hallmark 页脚族中的坐标Hallmark 的 component-cookbook.md 将页脚抽象为 8 个可组合的原型Ft1–Ft8每个原型都遵循同一套写作模板一个“形态”shape、一句“何时使用”Use when、一句“不要混淆”Dont confuse with、以及一段极简的结构草图DOM 最小 CSS。Ft1 在索引中的原始定义只有三行Ft1 · Mast headed— A wordmark and tagline anchor a single horizontal band. Two or three small links beside, address or licence below.Use when:the page has heavy content; the footer should be quiet and singular.Dont confuse with:Ft2 Inline-rule (which is even more reduced).关键信息全部浓缩在这三行里形态单一横向条带single horizontal bandwordmark 与 tagline 共同充当锚点旁边是两三个小链接地址或许可信息在更下方。适用场景页面内容沉重heavy content时页脚应当“安静且单一”quiet and singular——它不是第二个导航也不是站点地图而是整页视觉节奏的终止符。区分边界比 Ft2 Inline-rule 更“满”一点——Ft2 只剩一行小字加一条发丝线Ft1 保留了 wordmark 与 tagline 的品牌锚点。在页脚路由表component-cookbook.md中Ft1 是 editorial编辑风格的默认页脚同时被列为 modern-minimal 与 atmospheric 的“也可用”备选GenreDefaultAlso OKeditorialFt1 Mast-headedFt2, Ft4, Ft6, Ft7modern-minimalFt2 Inline single lineFt1, Ft5atmosphericFt5 StatementFt1, Ft2playfulFt8 Marquee scrollFt5, Ft3terminalFt4 Dense colophonFt2docs / referenceFt3 Index columnsFt1注意一个容易忽略的约束Ft1 是页面级page-scope原型。SKILL.md 的 Component-scope 一节明确写道“Nav and footer archetype picks. N1–N9 and Ft1–Ft8 are page-scope only. A component is one element; it has no nav, no footer. Skip both.”——也就是说当你只做一个 Button 或 Card 时不要套用任何 Ft 原型Ft1 只在整页构建时被选择。二、原理解析一个“报头”如何锚定整页收尾“Mast-headed”这个名字借自报纸的报头masthead。设计意图是当页面正文信息密度很高时页脚不需要再承担任何导航或推销职能它应该像一篇文章末尾的出版者签名一样安静、单一、一次成型。原文档给出的最小结构草图是footer classfoot-mast p classwordmarkStudio Name/p p classtagline mutedDesigns that dont look generated./p p classlinks mutedImprint · Privacy · Contact/p /footer这个三行 DOM 可以拆出三个明确的语义层.wordmark—— 品牌锚点是整个页脚唯一“响亮”的元素.tagline.muted—— 一句标语用 muted弱化视觉权重压住不跟 wordmark 抢注意力.links.muted—— 两三个小链接Imprint · Privacy · Contact同样 muted是整页最后的信息出口。对比同为编辑风格默认候选的 Ft2ft2-inline-rule-single-line.md差异一目了然Ft2 只有一行© 2026 · 137 Marlow Street · MIT licensed上方一条发丝线没有任何品牌锚点而 Ft1 保留了 wordmark tagline因此更适合“内容沉重、需要明确收尾”的页面。判断口诀可以记成Ft1 是“出版者签名”Ft2 是“页脚后的余响”。三、实战实现把草图补全为可运行代码原文档的草图只有标签骨架。要落地需要补上 Hallmark 的令牌体系tokens.css与完整的 CSS 样式。下面是一个完整的 Ft1 实现所有颜色、字体、间距都通过具名令牌引用不出现任何内联色值或硬编码字体——这是 SKILL.md 第四条纪律“Locked tokens — no mid-render improvisation”的硬性要求SKILL.md。footer classfoot-mast rolecontentinfo aria-labelColophon p classfoot-mast__wordmarkStudio Name/p p classfoot-mast__tagline mutedDesigns that dont look generated./p ul classfoot-mast__links muted lia href/imprintImprint/a/li lia href/privacyPrivacy/a/li lia href/contactContact/a/li /ul /footer.foot-mast { padding: var(--space-2xl) var(--page-gutter) var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); display: grid; gap: var(--space-sm); max-width: var(--page-max); margin-inline: auto; } .foot-mast__wordmark { font-family: var(--font-display); font-size: var(--text-2xl); /* 2.25rem */ font-weight: var(--display-weight); letter-spacing: var(--tracking-tight); margin: 0; } .foot-mast__tagline { font-family: var(--font-body); font-size: var(--text-base); /* 1rem */ margin: 0; } .foot-mast__links { display: flex; flex-wrap: wrap; gap: var(--space-md); list-style: none; margin: 0; padding: 0; } .foot-mast__links a { font-size: var(--text-sm); /* 0.875rem */ color: inherit; } .foot-mast__links a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }几个实现要点间距令牌--space-2xl4rem做上下内边距、--space-sm0.75rem做行距、--space-md1rem做链接间距全部来自 tokens.css 的 4pt 间距阶梯--space-3xs: 0.125rem到--space-5xl: 13rem。发丝线--rule-hair: 0.5px与--color-rule是 Hallmark 常用的“轻分隔”语言比 1px 实线更克制。弱化层级.muted对应--color-muted如 Specimen 主题中为oklch(52% 0.012 65)tagline 与 links 都比 wordmark 轻一到两档。可达性:focus-visible必须立即可见SKILL.md 规定 focus ring 不得有动画焦点环用--color-focus令牌移动端链接命中区域保持 44×44px 下限。四、变化旋钮同一个 Ft1三种不同面貌component-cookbook.md 的“Within-archetype variation knobs”表格为 Ft1 定义了三个旋钮选中原型后必须显式声明取值防止连续两个页面产出“一模一样的 Mast-headed”旋钮可选值Wordmark size字标字号display 3xl · display 2xl · xlTagline标语处理italic serif · roman body · noneLinks row链接行布局inline · 2-line stack使用方式是在 macrostructure 印章注释中记录取值例如/* Hallmark · macrostructure: Long Document · tone: editorial · anchor hue: warm * Ft1 Mast knobs: wordmarkdisplay-2xl, taglineitalic-serif, linksinline */反模式提醒连续两个输出使用相同的旋钮取值与重复使用同一原型一样属于模板化anti-pattern。上一次 Ft1 用了wordmark3xl, taglinenone下一次至少要改一个旋钮。这也与 SKILL.md 的“页脚去重”规则呼应——同一会话中连续两次 Hallmark 运行不得共享同一页脚原型site演示站点中 hyperlane 示例采用 Ft5 Statement见 site/examples/hyperlane/index.html正是为了让相邻输出拉开结构指纹。五、响应式折叠窄屏下如何“仍然是它自己”component-cookbook.md 的“Mobile collapse — per archetype”表为 Ft1 定义了明确的两级断点行为断点Ft1 Mast-headed 的行为60rem约 960px布局断点链接换行成两行links wrap to two linestagline 移到 wordmark 下方40rem约 640px排版断点wordmark 字号降一档若 tagline 尚未使用斜体则斜体化与其余跨原型规则叠加后的完整要求是所有命中目标 ≥ 44×44pxWCAG AA40rem 以下绝不缩水页面容器padding-inline ≥ clamp(1rem, 4vw, 1.5rem)内容不贴屏边40rem 以下禁用任何滚动联动动画。换句话说Ft1 的响应式原则是“同一层级、同一语气、同一节奏但叠成单列”——窄屏下它依然是 wordmark → tagline → links 的竖向堆叠而不是变成一个汉堡菜单或横排图标。六、Ft1 与其余七个页脚原型的取舍为了避免误用把 Ft1 与最容易混淆的相邻原型放在一起对比原型一句话形态与 Ft1 的关键差异Ft2 Inline-rule一行小字 上方发丝线无 wordmark/tagline比 Ft1 更极简Ft3 Index-style3–4 列小栏目每列小号大写标题 4–6 个链接是导航/站点地图Ft1 不导航Ft4 Dense typographic一大块等宽小字的 colophon 文单块文本 vs 单条带结构Ft5 Statement一句大号展示句主导页脚以句子领衔Ft1 以 wordmark 领衔Ft6 Letter close像信件落款“Yours, the team.”是签名不是锚点偏 warm 语气Ft7 Newsletter-first表单是主角其余 12px 弱化会“索要”订阅Ft1 什么都不求Ft8 Marquee scroll横向无限滚动标语带强调运动与响亮与 Ft1 相反两个从原文档与 cookbook 明确继承的“不要”Ft1 不要用于 docs/hub 页面——站点地图需求应选 Ft3Ft1 在文档根上会显得信息不足Ft3 是默认回避项——cookbook 原文点名“The 4-column index footer is the AI fingerprint when used reflexively”无脑四列Product · Company · Resources · Legal 社交行 小版权是 AI 生成痕迹最重的页脚形态默认应选 Ft1/Ft2/Ft4/Ft5/Ft6/Ft7/Ft8。七、仓库中的落地案例从原型到真实页面Ft1 的形态在仓库中有直接对应物。site/index.html的页脚模板#footer-colophon见 site/index.html正是“wordmark 锚点 元信息 底部一行小字”的 mast-headed 结构div classfoot foot--colophon div classfoot__masthead span classfoot__wordmark aria-labelHallmark…/hallmark/span span classfoot__version tnumv1.0 · MMXXVI/span /div div classfoot__grid section classfoot__block p classfoot__labelCurrently in/p p classfoot__valuestrong contenteditable="false">【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Hallmark Ft1 Mast-Headed 页脚组件：用“报头式”单行锚点写出安静克制的页面收尾
Hallmark Ft1 Mast-Headed 页脚组件用“报头式”单行锚点写出安静克制的页面收尾【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark导读Ft1 Mast-Headed 是 Hallmark 设计技能页脚组件族Ft1–Ft8中结构最简洁、语义最明确的一个一个横向单条带上由 wordmark字标与 tagline标语共同锚定页面收尾旁边只挂两三个小链接地址或许可信息沉在最下方。本篇文章以 ft1-mast-headed.md 为核心骨架结合 component-cookbook.md 的组件路由规则、SKILL.md 的页面工作流与 tokens.css 的令牌体系完整还原该组件的设计意图、DOM/CSS 实现、变化旋钮与响应式折叠行为并对照仓库中真实落地案例。读完你既能直接写出可复制的 Ft1 页脚代码也能理解 Hallmark 为什么把“默认远离 Ft3”写进规则。一、组件定位Ft1 在 Hallmark 页脚族中的坐标Hallmark 的 component-cookbook.md 将页脚抽象为 8 个可组合的原型Ft1–Ft8每个原型都遵循同一套写作模板一个“形态”shape、一句“何时使用”Use when、一句“不要混淆”Dont confuse with、以及一段极简的结构草图DOM 最小 CSS。Ft1 在索引中的原始定义只有三行Ft1 · Mast headed— A wordmark and tagline anchor a single horizontal band. Two or three small links beside, address or licence below.Use when:the page has heavy content; the footer should be quiet and singular.Dont confuse with:Ft2 Inline-rule (which is even more reduced).关键信息全部浓缩在这三行里形态单一横向条带single horizontal bandwordmark 与 tagline 共同充当锚点旁边是两三个小链接地址或许可信息在更下方。适用场景页面内容沉重heavy content时页脚应当“安静且单一”quiet and singular——它不是第二个导航也不是站点地图而是整页视觉节奏的终止符。区分边界比 Ft2 Inline-rule 更“满”一点——Ft2 只剩一行小字加一条发丝线Ft1 保留了 wordmark 与 tagline 的品牌锚点。在页脚路由表component-cookbook.md中Ft1 是 editorial编辑风格的默认页脚同时被列为 modern-minimal 与 atmospheric 的“也可用”备选GenreDefaultAlso OKeditorialFt1 Mast-headedFt2, Ft4, Ft6, Ft7modern-minimalFt2 Inline single lineFt1, Ft5atmosphericFt5 StatementFt1, Ft2playfulFt8 Marquee scrollFt5, Ft3terminalFt4 Dense colophonFt2docs / referenceFt3 Index columnsFt1注意一个容易忽略的约束Ft1 是页面级page-scope原型。SKILL.md 的 Component-scope 一节明确写道“Nav and footer archetype picks. N1–N9 and Ft1–Ft8 are page-scope only. A component is one element; it has no nav, no footer. Skip both.”——也就是说当你只做一个 Button 或 Card 时不要套用任何 Ft 原型Ft1 只在整页构建时被选择。二、原理解析一个“报头”如何锚定整页收尾“Mast-headed”这个名字借自报纸的报头masthead。设计意图是当页面正文信息密度很高时页脚不需要再承担任何导航或推销职能它应该像一篇文章末尾的出版者签名一样安静、单一、一次成型。原文档给出的最小结构草图是footer classfoot-mast p classwordmarkStudio Name/p p classtagline mutedDesigns that dont look generated./p p classlinks mutedImprint · Privacy · Contact/p /footer这个三行 DOM 可以拆出三个明确的语义层.wordmark—— 品牌锚点是整个页脚唯一“响亮”的元素.tagline.muted—— 一句标语用 muted弱化视觉权重压住不跟 wordmark 抢注意力.links.muted—— 两三个小链接Imprint · Privacy · Contact同样 muted是整页最后的信息出口。对比同为编辑风格默认候选的 Ft2ft2-inline-rule-single-line.md差异一目了然Ft2 只有一行© 2026 · 137 Marlow Street · MIT licensed上方一条发丝线没有任何品牌锚点而 Ft1 保留了 wordmark tagline因此更适合“内容沉重、需要明确收尾”的页面。判断口诀可以记成Ft1 是“出版者签名”Ft2 是“页脚后的余响”。三、实战实现把草图补全为可运行代码原文档的草图只有标签骨架。要落地需要补上 Hallmark 的令牌体系tokens.css与完整的 CSS 样式。下面是一个完整的 Ft1 实现所有颜色、字体、间距都通过具名令牌引用不出现任何内联色值或硬编码字体——这是 SKILL.md 第四条纪律“Locked tokens — no mid-render improvisation”的硬性要求SKILL.md。footer classfoot-mast rolecontentinfo aria-labelColophon p classfoot-mast__wordmarkStudio Name/p p classfoot-mast__tagline mutedDesigns that dont look generated./p ul classfoot-mast__links muted lia href/imprintImprint/a/li lia href/privacyPrivacy/a/li lia href/contactContact/a/li /ul /footer.foot-mast { padding: var(--space-2xl) var(--page-gutter) var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); display: grid; gap: var(--space-sm); max-width: var(--page-max); margin-inline: auto; } .foot-mast__wordmark { font-family: var(--font-display); font-size: var(--text-2xl); /* 2.25rem */ font-weight: var(--display-weight); letter-spacing: var(--tracking-tight); margin: 0; } .foot-mast__tagline { font-family: var(--font-body); font-size: var(--text-base); /* 1rem */ margin: 0; } .foot-mast__links { display: flex; flex-wrap: wrap; gap: var(--space-md); list-style: none; margin: 0; padding: 0; } .foot-mast__links a { font-size: var(--text-sm); /* 0.875rem */ color: inherit; } .foot-mast__links a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }几个实现要点间距令牌--space-2xl4rem做上下内边距、--space-sm0.75rem做行距、--space-md1rem做链接间距全部来自 tokens.css 的 4pt 间距阶梯--space-3xs: 0.125rem到--space-5xl: 13rem。发丝线--rule-hair: 0.5px与--color-rule是 Hallmark 常用的“轻分隔”语言比 1px 实线更克制。弱化层级.muted对应--color-muted如 Specimen 主题中为oklch(52% 0.012 65)tagline 与 links 都比 wordmark 轻一到两档。可达性:focus-visible必须立即可见SKILL.md 规定 focus ring 不得有动画焦点环用--color-focus令牌移动端链接命中区域保持 44×44px 下限。四、变化旋钮同一个 Ft1三种不同面貌component-cookbook.md 的“Within-archetype variation knobs”表格为 Ft1 定义了三个旋钮选中原型后必须显式声明取值防止连续两个页面产出“一模一样的 Mast-headed”旋钮可选值Wordmark size字标字号display 3xl · display 2xl · xlTagline标语处理italic serif · roman body · noneLinks row链接行布局inline · 2-line stack使用方式是在 macrostructure 印章注释中记录取值例如/* Hallmark · macrostructure: Long Document · tone: editorial · anchor hue: warm * Ft1 Mast knobs: wordmarkdisplay-2xl, taglineitalic-serif, linksinline */反模式提醒连续两个输出使用相同的旋钮取值与重复使用同一原型一样属于模板化anti-pattern。上一次 Ft1 用了wordmark3xl, taglinenone下一次至少要改一个旋钮。这也与 SKILL.md 的“页脚去重”规则呼应——同一会话中连续两次 Hallmark 运行不得共享同一页脚原型site演示站点中 hyperlane 示例采用 Ft5 Statement见 site/examples/hyperlane/index.html正是为了让相邻输出拉开结构指纹。五、响应式折叠窄屏下如何“仍然是它自己”component-cookbook.md 的“Mobile collapse — per archetype”表为 Ft1 定义了明确的两级断点行为断点Ft1 Mast-headed 的行为60rem约 960px布局断点链接换行成两行links wrap to two linestagline 移到 wordmark 下方40rem约 640px排版断点wordmark 字号降一档若 tagline 尚未使用斜体则斜体化与其余跨原型规则叠加后的完整要求是所有命中目标 ≥ 44×44pxWCAG AA40rem 以下绝不缩水页面容器padding-inline ≥ clamp(1rem, 4vw, 1.5rem)内容不贴屏边40rem 以下禁用任何滚动联动动画。换句话说Ft1 的响应式原则是“同一层级、同一语气、同一节奏但叠成单列”——窄屏下它依然是 wordmark → tagline → links 的竖向堆叠而不是变成一个汉堡菜单或横排图标。六、Ft1 与其余七个页脚原型的取舍为了避免误用把 Ft1 与最容易混淆的相邻原型放在一起对比原型一句话形态与 Ft1 的关键差异Ft2 Inline-rule一行小字 上方发丝线无 wordmark/tagline比 Ft1 更极简Ft3 Index-style3–4 列小栏目每列小号大写标题 4–6 个链接是导航/站点地图Ft1 不导航Ft4 Dense typographic一大块等宽小字的 colophon 文单块文本 vs 单条带结构Ft5 Statement一句大号展示句主导页脚以句子领衔Ft1 以 wordmark 领衔Ft6 Letter close像信件落款“Yours, the team.”是签名不是锚点偏 warm 语气Ft7 Newsletter-first表单是主角其余 12px 弱化会“索要”订阅Ft1 什么都不求Ft8 Marquee scroll横向无限滚动标语带强调运动与响亮与 Ft1 相反两个从原文档与 cookbook 明确继承的“不要”Ft1 不要用于 docs/hub 页面——站点地图需求应选 Ft3Ft1 在文档根上会显得信息不足Ft3 是默认回避项——cookbook 原文点名“The 4-column index footer is the AI fingerprint when used reflexively”无脑四列Product · Company · Resources · Legal 社交行 小版权是 AI 生成痕迹最重的页脚形态默认应选 Ft1/Ft2/Ft4/Ft5/Ft6/Ft7/Ft8。七、仓库中的落地案例从原型到真实页面Ft1 的形态在仓库中有直接对应物。site/index.html的页脚模板#footer-colophon见 site/index.html正是“wordmark 锚点 元信息 底部一行小字”的 mast-headed 结构div classfoot foot--colophon div classfoot__masthead span classfoot__wordmark aria-labelHallmark…/hallmark/span span classfoot__version tnumv1.0 · MMXXVI/span /div div classfoot__grid section classfoot__block p classfoot__labelCurrently in/p p classfoot__valuestrong contenteditable="false">【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
核心功能与应用场景解析)
` 评估与优化终端前景/背景可读性)
