Hallmark Ft2 内联细线单行页脚：用一条 hairline 规则收束整页的 Anti-Slop 设计范式

Hallmark Ft2 内联细线单行页脚：用一条 hairline 规则收束整页的 Anti-Slop 设计范式

【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark

本文是 Hallmark（skills/hallmark/SKILL.md）组件原型的深度解读，聚焦其八大页脚原型（Ft1–Ft8）中最克制的一支——Ft2 Inline-rule single line（内联细线单行页脚）。文中将拆解该原型的定义、适用场景、变体旋钮、Hallmark 令牌化实现、体裁路由规则，以及它在site/css/tokens.css与站点自身页脚中的真实落地方式，帮助你直接用这套手法终结千篇一律的"四列导航页脚"AI 指纹。

Ft2 是什么：一句话定义

在skills/hallmark/references/components/ft2-inline-rule-single-line.md中，Ft2 被定义为：

A single horizontal line of credits, address, copyright. Hairline rule above. No columns.

即：页脚只承载一行横向文本（版权、地址、许可声明），上方压一条 hairline（发丝级）分隔线，没有任何分栏。它不导航、不站内地图、不陈列链接——它只是安静地告诉读者"这页是谁、在哪一年、什么许可下做的"。

原型文档给出的规范结构只有一个<footer>加一个<p>：

<footer class="foot-line"> <p>© 2026 · 137 Marlow Street · MIT licensed</p> </footer>

注意其中的信息组织方式：版权符号 + 年份、地址、许可声明，三项内容用·（middot）间隔符串联，不需要列表、不需要 span 网格、不需要图标行。

何时使用：页面是编辑式的，页脚是"事后念头"

原型文档给出了一句使用判据：

Use when:the page is editorial and the footer is afterthought.

两个条件缺一不可：

1. 页面基调是编辑式的（editorial）——长文、杂志、期刊、studio 作品集、宣言页这类内容优先于导航的页面；
2. 页脚是"事后念头"（afterthought）——页脚不是站点的导航终点，而是正文结束后的一句收尾。页面越不把页脚当"功能"，越适合 Ft2。

反过来，如果页面需要页脚承担导航职责（文档站、索引页、多栏目站点），那就应该选择 Ft3 Index-style category list 或 Ft1 Mast-headed，而不是强行压成一行——这是路由表（见下文）的硬约束。

不要与 Ft4 混淆

原型文档专门标注了易混淆项：

Don't confuse with:Ft4 Dense typographic (which packs more in).

对比两者：

• Ft2 Inline single line：一行内联文本，规则之上，无分栏。典型形态是© 2026 · 地址 · 许可。
• Ft4 Dense typographic（见 components/ft4-dense-typographic.md）：一块大段小号等宽字体文本——版权、参考、许可、地址全部塞进一个 colophon 式段落，可两端对齐或右散排，是"出版社版权页"气质。其示例：

<footer class="foot-dense mono"> <p>Hallmark v0.2.0. Built with The Future, Fraunces, IBM Plex Mono. MIT licensed. Powered by Together AI. 137 Marlow Street, 2026.</p> </footer>

判断标准很简单：信息是一行还是多行/多段。Ft2 追求"一行说完"，Ft4 追求"colophon 密度"。

变体旋钮：同一个 Ft2 的三条可调轴

原型文档本身只给出一个最小结构，但组件总索引 component-cookbook.md 的"Within-archetype variation knobs"章节为 Ft2 定义了三条变体轴，用于防止"同一个原型造出同一个页脚"：

实战建议：

• Order决定页脚的"句法结构"：普通站点© 2026 · Studio Name · MIT更顺；若 wordmark 想最后收尾，则© 2026 · MIT · Studio。
• Separator是 Ft2 最容易被忽视的辨识点。默认·（middot）温和；|（pipe）偏技术/终端；—（em-dash）偏编辑式；/或竖线偏品牌化。
• Density由字号与letter-spacing决定，dense 用--text-xs配合--tracking-label类字距，spaced 则放大--space-*留白。

在输出时，应把旋钮取值写进 macrostructure 印戳注释，例如：

/* Hallmark · macrostructure: Long Document · Ft2 knobs: order=credit/wordmark/links, separator=middot, density=spaced · ... */

令牌化实现：让一行文本拥有系统级质感

Ft2 的全部视觉权重在于那条"hairline rule"与一行文字的排版。Hallmark 强制"locked tokens"纪律（见 anti-patterns.md § Mid-render token improvisation）：一切颜色与字体必须引用命名令牌，禁止内联值。因此 Ft2 的 CSS 应这样写：

.foot-line { padding-block: var(--space-md) var(--space-lg); border-block-start: var(--rule-hair) solid var(--color-rule); color: var(--color-muted); font-size: var(--text-sm); }

对应令牌在 site/css/tokens.css 中的定义（Specimen 主题示例）：

• --rule-hair: 0.5px;——发丝线宽度令牌。注意它不是固定1px，多数主题为0.5px，而 Brutal、Manifesto、Sport 这类重边框主题会覆盖为1px（--rule-fine甚至到2px/3px）；
• --color-rule: oklch(82% 0.014 75);——分隔线颜色，随主题的纸张色（paper）变化，保证"线比纸深一点"而不是突兀的黑边；
• --color-muted: oklch(52% 0.012 65);——次要文字色，用于版权行比正文弱一档；
• --space-md: 1rem;、--space-lg: 1.5rem;——4pt 语义化间距刻度（见 layout-and-space.md），页脚上下留白应取自刻度而非手写 px。

这种写法的两个收益：换主题时页脚自动跟随新的线宽/线色/字号；换项目时令牌体系可整体移植（Hallmark 的 Build 步骤要求每个构建都产出tokens.css）。

体裁路由：Ft2 在八种页脚中处于什么位置

component-cookbook.md § Routing 给出了页脚与体裁的映射表：

关键结论：

• Ft2 是 modern-minimal 体裁的默认页脚（Stripe/Linear 那一派），也是 editorial、atmospheric、terminal 三个体裁的合法备选——覆盖面非常广；
• 默认逃离 Ft3（anti-patterns.md § The AI footer）：四列链接（Product · Company · Resources · Legal）+ 社交图标行 + 小版权行是"AI 页脚指纹"，只有在真正的 hub/docs 根页且有真实站点地图时才允许 Ft3；
• 多样化规则：同一会话内连续两次输出不得复用同一页脚原型——上一次用了 Ft2，这一次必须在路由表"也可用"列中挑别的。

响应式折叠：Ft2 在窄屏的行为契约

component-cookbook.md § Mobile collapse 为每个原型定义了双断点行为，Ft2 的行：

• 60 rem（~960px）以下：链接换行成多行，分隔符退化为软换行（soft return）；
• 40 rem（~640px）以下：整行折叠为纵向列表（vertical list）。

实现上对应：

@media (max-width: 40rem) { .foot-line p { display: flex; flex-direction: column; gap: var(--space-2xs); } }

同时注意两条跨原型硬规则：40rem 以下所有可点击目标 ≥ 44×44px（WCAG AA）；页内边距 ≥clamp(1rem, 4vw, 1.5rem)，让单行版权文本在手机上不与屏幕边缘相切。

仓库中的真实落地：Hallmark 自己就是这么收尾的

Ft2 并非纸上谈兵——Hallmark 自己的展示站点 site/index.html 的页脚实现与 Ft2 共享同一套视觉语言。其模板#footer-colophon（第 999–1034 行）使用foot--colophon结构，而对应样式在 site/css/components.css 中：

.foot.foot--colophon { border-block-start: var(--rule-hair) solid var(--color-rule); /* components.css L3114 */ border-top-width: var(--rule-hair); } .foot__base { ... } /* L3301：版权/许可行的底部区块 */

站点页脚同样以border-block-start: var(--rule-hair) solid var(--color-rule)作为页脚的唯一顶部收束，版权行为Made by Together AI. MIT licensed.——这正是 Ft2"hairline rule above + 单行版权信息"结构的一种站级实例化，证明了该令牌组合（--rule-hair+--color-rule+ muted 文字）在真实主题切换系统（22 个主题、[data-theme="..."]切换）下的稳定性：无论纸张是 Specimen 的暖燕麦色还是 Midnight 的深冷炭色，发丝线与版权行都能跟随令牌自动适配。

完整可运行示例

综合原型结构、变体旋钮、令牌纪律与响应式行为，一份符合 Hallmark 规范的 Ft2 最小实现如下：

<footer class="foot-line" role="contentinfo"> <p>© 2026 · 137 Marlow Street · MIT licensed</p> </footer>

/* 依赖 tokens.css：--rule-hair / --color-rule / --color-muted / --text-sm / --space-* 均来自当前主题令牌块 */ .foot-line { padding-block: var(--space-md) var(--space-lg); border-block-start: var(--rule-hair) solid var(--color-rule); color: var(--color-muted); font-size: var(--text-sm); letter-spacing: var(--tracking-label); /* spaced 旋钮可移除此行 */ } @media (max-width: 40rem) { .foot-line p { display: flex; flex-direction: column; gap: var(--space-2xs); } }

对照 slop-test 门禁（skills/hallmark/references/slop-test.md）：没有社交图标行、没有四列导航、没有浅灰背景块、没有多余包裹层——这就是 Ft2 之所以被视为"反 AI 指纹"页脚的原因：它把页脚从"复制来的导航冗余"还原成了"正文的最后一行排版"。

结语

Ft2 Inline-rule single line 是 Hallmark 组件库中最"少即是多"的一页。掌握它的三个要点即可上手：结构上坚持单行 + hairline rule + 无分栏；选型上依托体裁路由表（modern-minimal 默认、editorial/atmospheric/terminal 备选）并在连续输出间轮换原型；实现上全部引用--rule-hair、--color-rule、--color-muted与--space-*令牌，让页脚跟随主题系统自动呼吸。当你下一次生成站点时，把反射性的四列页脚替换成一行版权文字，页面的"人工感"会立刻提升一个档次。

【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark