Hallmark 实战Newsletter-first 页脚组件Ft7的设计原理与实现指南【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark本篇指南围绕 hallmark 技能库中的 Ft7 · Newsletter-first 组件文档 展开讲解表单即页脚主角这一页脚原型的适用场景、完整 HTML/CSS 实现、设计令牌支撑与移动端折叠策略。读完你可以在 Claude Code、Cursor 或 Codex 中用 hallmark 技能生成或评审一个克制、诚实、不像 AI 模板的订阅型页脚并理解它为什么是AI Footer反模式的正解之一。一、组件定位Ft7 在 36 个组件原型中的角色hallmark 的组件手册将可复用的组件原型划分为 Heroes、Section heads、Feature blocks、CTAs/signups、Testimonials/proof、Footers、Navigation 七个类别共 36 个原型。Ft7 · Newsletter-first 属于 Footers 类别它的核心定义是表单label input submit是页脚的主要元素其他一切wordmark、链接、版权都以 12px 的 muted弱化小字排在表单下方。这一原型的典型参考对象是Stratechery、Substack 形态的站点、独立杂志——这些站点的业务本质是持续出版内容页脚因此承担了一个明确的收口动作邀请读者订阅。与相邻 Ft 原型的区分页脚类别内共有 8 个原型Ft7 最容易与 Ft1 · Mast-headed 混淆原文档明确给出了排除条件原型一句话定义与 Ft7 的区别Ft1 Mast-headed一个 wordmark 一句 tagline 锚定水平条带附两三个小链接不索取任何东西页脚是安静的署名Ft2 Inline single line一行版权/地址/署名上方加发丝线更极致地缩减只有一行文字Ft7 Newsletter-first表单是主角其他信息缩到 12px 弱化小字主动索取一次订阅是页面的收尾邀约选型时如果页面不想向读者索取任何东西应当落到 Ft1如果只想安静收尾落到 Ft2。Ft7 的独特之处在于它把索取作为设计意图本身来对待。二、使用场景判定什么情况下才允许使用 Ft7原文档给出了严格的适用条件Use when与反模式Anti-patternUse when可用场景品牌确实在持续出版内容newsletter、杂志、专栏、studio 通讯并且首屏above the fold已经提供过订阅入口。此时页脚是一个最终邀请final invitation而不是埋伏ambush。Anti-pattern反模式页面从头到尾没有在任何位置说过subscribe却在页脚突然放一个订阅表单。原文档的判断是页脚应当是页面诚实的结论conclusion如果你没有在上文提出过订阅就不要在结尾突袭用户。此时应降级使用 Ft2Inline-rule single line。这与 hallmark 整体反 AI 模板的哲学一致hallmark audit动词会按名字标记 AI 生成界面特征见反模式文档而无铺垫的突袭式表单本质上是一种不诚实的说服结构属于该技能明确要消灭的坏口味。三、完整结构拆解HTML 与 CSS 实现原文档提供了一个可直接落地的结构性草图以下完整保留并逐行注释footer classfoot-news form classfoot-news__form action/subscribe methodpost label forfoot-emailLetters from the studio · monthly/label div classfoot-news__row input idfoot-email nameemail typeemail required placeholderyoudomain button typesubmit classcta-fillSubscribe/button /div /form p classfoot-news__meta mutedStudio · © 2026 · a href/imprintImprint/a/p /footer.foot-news { padding: var(--space-2xl) var(--page-gutter); display: grid; gap: var(--space-lg); max-width: 56ch; } .foot-news__form label { display: block; font-size: var(--text-sm); margin-block-end: var(--space-2xs); } .foot-news__row { display: flex; gap: var(--space-2xs); } .foot-news__row input { flex: 1; min-height: 44px; padding-inline: var(--space-sm); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-input); background: var(--color-paper); } .foot-news__row input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; } .foot-news__meta { font-size: var(--text-xs); }结构要点语义优先使用真正的form、label for、input typeemail required而不是 div 拼装。for/id配对保证点击 label 即可聚焦输入框typeemailrequired让浏览器提供原生校验避免无谓的 JS 表单脚本。层级一目了然.foot-news是一个单列 grid.foot-news__form承担主视觉.foot-news__row把 input 与 button 并排放进一行.foot-news__meta是 12px--text-xs的弱化信息行。可访问性与命中区域input 设min-height: 44px——这是 hallmark 全库的硬性底线之一见下文移动端规则focus-visible使用 2px 焦点环 outline-offset: 1px且从不通过 transition 延迟焦点环的出现。宽度节制.foot-news限制max-width: 56ch表单不会拉满整行维持杂志式的阅读节奏。四、设计令牌支撑样式如何从主题令牌派生Ft7 的 CSS 全部通过var(--token)引用这是 hallmark 的令牌纪律token discipline在页脚组件上的直接体现——反模式文档明确把渲染中途出现内联颜色/字体值列为 AI 生成特征Slop-test gate 58。相关令牌的实际定义可以在 site/css/tokens.css 中确认令牌示例默认值Specimen 主题用途--space-2xl4remQuiet 主题为4.5rem页脚上下内边距--page-gutterclamp(1.25rem, 4vw, 3rem)页脚水平内边距随视口缩放--space-lg1.5rem表单与 meta 行之间的 grid 间隙--space-2xs0.25remlabel 与输入行之间的间距--space-sm0.75rem输入框内边距--text-sm0.875remlabel 字号--text-xs0.75remmeta 弱化行字号即12px muted type--rule-hair0.5pxBrutal/Manifesto/Sport 为1px输入框发丝边框--radius-input0默认方形Garden/Studio/Quiet/Plume 等主题可覆盖为圆角输入框圆角--color-rule/--color-paper/--color-focus随主题在 OKLCH 空间定义边框、背景、焦点环颜色tokens.css 头部注释说明了设计意图12 个主题各自占据 OKLCH 色彩空间的不同位置纸张色横跨深色/奶油/饱和/冷/暖五种倾向显示字体覆盖衬线/等宽/紧缩无衬线/斜体等类别级差异。Ft7 组件本身不携带任何颜色或字体值因此在任意主题下Specimen 的暖燕麦纸、Midnight 的深冷炭、Manifesto 的黑底红块都会自动与整站保持一致——这正是一个页面只有一个系统的关键。另外在 site/css/components.css 中可以看到 hallark 站自身对同类令牌的复用手法例如.code块同样使用var(--rule-hair) solid var(--color-rule)的发丝边框 var(--radius-input, 0)的回退圆角说明这套令牌不仅是文档规范也被站内真实代码反复验证。五、与 C2 Inline form-as-CTA 的关系Ft7 在概念上复用了 CTAs/signups 类别中 C2 · Inline form-as-CTA 的形态CTA 本身就是表单——一个 email 输入框旁边一个提交按钮不需要单独的落地页。C2 的实现提供了几个可供 Ft7 借鉴的细节form classcta-form label foremail classvisually-hiddenEmail/label input idemail typeemail placeholderyouexample.com / button typesubmitSend →/button /form.cta-form { display: grid; grid-template-columns: 1fr auto; border-bottom: 1px solid var(--color-ink); } .cta-form input { background: none; border: 0; padding: 0.7rem 0; min-height: 44px; }两处都体现了44px 命中区域与语义化 label的共同纪律。区别在于语境C2 出现在页面中部作为独立 CTA 区块Ft7 则专属于页脚收口并且比 C2 多了 meta 弱化行来承载署名与版权。把收集一个邮箱的动作组件化是 hallmark 组件可组合性的一个具体案例——同一个表单形态可以在不同的宏结构位置复用但选型时要保证同一页面内没有两个区块使用相同原型多样化规则见下文第七节。六、变体旋钮避免每个 Ft7 都长得一样组件手册要求每个原型在使用时至少声明一组变体旋钮variation knobsFt7 有三个旋钮可取值Layoutstackedlabel 在上 · inlinelabel 与输入同行 · split表单居左、meta 居右Submit stylefilled实心按钮 · outline描边按钮 · arrow link文字加箭头Privacy lineyes表单下方加一行隐私说明 · no反模式文档明确警告连续两次输出使用相同旋钮值和连续两次选择相同原型一样是模板化。如果你的上一个页脚是stacked filled no privacy下一个就必须至少改动一个旋钮并在宏结构戳记注释中写明选择例如/* Hallmark · macrostructure: 名称 · Ft7 knobs: layoutsplit, submitoutline, privacyyes · ... */这一机制保证同一个 Ft7 原型在多次生成中仍然呈现不同的观感避免每个 Bento 都像同一个 Bento式的 AI 指纹。七、路由规则与多样化原则页脚按流派路由组件手册的 Footer 路由表规定流派默认也可用editorialFt1 Mast-headedFt2, Ft4, Ft6,Ft7modern-minimalFt2 Inline single lineFt1, Ft5atmosphericFt5 StatementFt1, Ft2playfulFt8 Marquee scrollFt5, Ft3terminalFt4 Dense colophonFt2docs / referenceFt3 Index columnsFt1注意两点Ft7 的主场是 editorial编辑出版流派同时手册明确要求默认远离 Ft3——四列索引式页脚Product · Company · Resources · Legal 社交图标行 小版权是 AI 生成界面的标志性指纹只有页面真的是 hub 或文档根节点、存在真实站点地图时才允许使用。Ft7 正是替代 Ft3 的诚实选项之一它用一次真实的订阅邀请替代一份不存在的站点地图。多样化规则页面内同一页面不能有两个区块使用相同原型。一个页面若已有 C2 表单 CTA页脚就要避免再用纯表单结构可考虑 split 布局拉开差异或改用 Ft1/Ft2。跨输出同一会话中连续多次 hallmark 生成不能共享同一页脚原型上一轮用了 Ft7下一轮就换 Ft1/Ft2/Ft4/Ft5/Ft6/Ft8 之一。八、移动端折叠行为组件手册为每个原型定义了窄视口下的折叠行为Ft7 遵循两个断点60rem约 960px以下——布局断点Ft7 的 input button从横排堆叠为纵向全宽。40rem约 640px以下——排版断点label移到 input 上方button 变为全宽。与原文档给出的结构对应Ft7 在移动端应从.foot-news__row { display: flex }改为纵向排布输入框flex: 1失效、button 占满整行。以下是与 Ft7 直接相关的跨断点硬性规则原文档跨切面规则同样适用于本组件40rem 以下所有可点击目标 ≥ 44×44pxWCAG AA不能更小——这解释了为何 Ft7 输入框始终保持min-height: 44px。页面容器padding-inline ≥ clamp(1rem, 4vw, 1.5rem)内容不贴屏幕边缘。40rem 以下禁用一切滚动关联动画。折线以下图片一律loadinglazy但绝不对 LCP 元素使用 lazy自动播放视频需尊重data-savernavigator.connection.saveData。九、为什么 Ft7 是AI Footer反模式的正解反模式文档把标准 SaaS 页脚列为最知名的 AI 生成特征之一4 列链接Product · Company · Resources · Legal 社交图标行 底部版权 1px 顶部发丝线 中性灰背景。成千上万的页面一模一样。其失败原因在于形状无视流派面包店不需要 Resources 列编辑页也不需要四联 Legal。页脚的任务是收束页面而不是罗列一份并不存在的站点地图。修复方案正是从页脚路由表选型默认走向 Ft1、Ft2、Ft4、Ft5、Ft6、Ft7、Ft8——Ft7 之所以是其中的内容型正解是因为它把页脚的收束动作与品牌真实出版这一事实绑定一个持续发 newsletter 的独立杂志/工作室页脚放订阅表单不是推销而是服务的自然延伸。对使用 hallmark 的 Agent 而言这还意味着一个硬性纪律即使参考构建里出现了四列页脚新输出也必须默默修复——反模式规则优先于与既有结构保持一致的指令见反模式文档 These rules are NOT bypassable 段落。十、落地检查清单在 Claude Code / Cursor / Codex 中用 Ft7 收尾页面时逐条核对品牌是否确实在出版内容页面首屏是否已经出现过订阅入口若以上任一为否立即降级为 Ft2Inline single line不突袭用户。使用真表单语义formlabel forinput typeemail required。输入框min-height: 44pxfocus-visible焦点环即时出现。所有颜色/字号/间距来自主题令牌无内联十六进制或一次性font-family。从 Ft7 三个旋钮Layout / Submit style / Privacy line各选一个值并写入宏结构戳记注释。确认本页没有其他区块使用相同原型尤其不要与 C2 表单 CTA 同形重复。60rem 以下 inputbutton 纵向堆叠、全宽40rem 以下 label 上移、button 全宽。确认上一轮输出未使用过 Ft7 或相同旋钮组合跨输出多样化。参考路径本组件文档skills/hallmark/references/components/ft7-newsletter-first.md组件手册索引、旋钮、路由、移动端折叠skills/hallmark/references/component-cookbook.md相关表单组件 C2skills/hallmark/references/components/c2-inline-form-as-cta.md相邻页脚原型 Ft1 / Ft2ft1-mast-headed.md · ft2-inline-rule-single-line.mdAI 反模式与令牌纪律skills/hallmark/references/anti-patterns.md设计令牌定义site/css/tokens.css站内令牌实际运用示例site/css/components.css相关宏结构Letter / 独立杂志首页skills/hallmark/references/macrostructures/12-letter.md【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Hallmark 实战：Newsletter-first 页脚组件（Ft7）的设计原理与实现指南
Hallmark 实战Newsletter-first 页脚组件Ft7的设计原理与实现指南【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark本篇指南围绕 hallmark 技能库中的 Ft7 · Newsletter-first 组件文档 展开讲解表单即页脚主角这一页脚原型的适用场景、完整 HTML/CSS 实现、设计令牌支撑与移动端折叠策略。读完你可以在 Claude Code、Cursor 或 Codex 中用 hallmark 技能生成或评审一个克制、诚实、不像 AI 模板的订阅型页脚并理解它为什么是AI Footer反模式的正解之一。一、组件定位Ft7 在 36 个组件原型中的角色hallmark 的组件手册将可复用的组件原型划分为 Heroes、Section heads、Feature blocks、CTAs/signups、Testimonials/proof、Footers、Navigation 七个类别共 36 个原型。Ft7 · Newsletter-first 属于 Footers 类别它的核心定义是表单label input submit是页脚的主要元素其他一切wordmark、链接、版权都以 12px 的 muted弱化小字排在表单下方。这一原型的典型参考对象是Stratechery、Substack 形态的站点、独立杂志——这些站点的业务本质是持续出版内容页脚因此承担了一个明确的收口动作邀请读者订阅。与相邻 Ft 原型的区分页脚类别内共有 8 个原型Ft7 最容易与 Ft1 · Mast-headed 混淆原文档明确给出了排除条件原型一句话定义与 Ft7 的区别Ft1 Mast-headed一个 wordmark 一句 tagline 锚定水平条带附两三个小链接不索取任何东西页脚是安静的署名Ft2 Inline single line一行版权/地址/署名上方加发丝线更极致地缩减只有一行文字Ft7 Newsletter-first表单是主角其他信息缩到 12px 弱化小字主动索取一次订阅是页面的收尾邀约选型时如果页面不想向读者索取任何东西应当落到 Ft1如果只想安静收尾落到 Ft2。Ft7 的独特之处在于它把索取作为设计意图本身来对待。二、使用场景判定什么情况下才允许使用 Ft7原文档给出了严格的适用条件Use when与反模式Anti-patternUse when可用场景品牌确实在持续出版内容newsletter、杂志、专栏、studio 通讯并且首屏above the fold已经提供过订阅入口。此时页脚是一个最终邀请final invitation而不是埋伏ambush。Anti-pattern反模式页面从头到尾没有在任何位置说过subscribe却在页脚突然放一个订阅表单。原文档的判断是页脚应当是页面诚实的结论conclusion如果你没有在上文提出过订阅就不要在结尾突袭用户。此时应降级使用 Ft2Inline-rule single line。这与 hallmark 整体反 AI 模板的哲学一致hallmark audit动词会按名字标记 AI 生成界面特征见反模式文档而无铺垫的突袭式表单本质上是一种不诚实的说服结构属于该技能明确要消灭的坏口味。三、完整结构拆解HTML 与 CSS 实现原文档提供了一个可直接落地的结构性草图以下完整保留并逐行注释footer classfoot-news form classfoot-news__form action/subscribe methodpost label forfoot-emailLetters from the studio · monthly/label div classfoot-news__row input idfoot-email nameemail typeemail required placeholderyoudomain button typesubmit classcta-fillSubscribe/button /div /form p classfoot-news__meta mutedStudio · © 2026 · a href/imprintImprint/a/p /footer.foot-news { padding: var(--space-2xl) var(--page-gutter); display: grid; gap: var(--space-lg); max-width: 56ch; } .foot-news__form label { display: block; font-size: var(--text-sm); margin-block-end: var(--space-2xs); } .foot-news__row { display: flex; gap: var(--space-2xs); } .foot-news__row input { flex: 1; min-height: 44px; padding-inline: var(--space-sm); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-input); background: var(--color-paper); } .foot-news__row input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; } .foot-news__meta { font-size: var(--text-xs); }结构要点语义优先使用真正的form、label for、input typeemail required而不是 div 拼装。for/id配对保证点击 label 即可聚焦输入框typeemailrequired让浏览器提供原生校验避免无谓的 JS 表单脚本。层级一目了然.foot-news是一个单列 grid.foot-news__form承担主视觉.foot-news__row把 input 与 button 并排放进一行.foot-news__meta是 12px--text-xs的弱化信息行。可访问性与命中区域input 设min-height: 44px——这是 hallmark 全库的硬性底线之一见下文移动端规则focus-visible使用 2px 焦点环 outline-offset: 1px且从不通过 transition 延迟焦点环的出现。宽度节制.foot-news限制max-width: 56ch表单不会拉满整行维持杂志式的阅读节奏。四、设计令牌支撑样式如何从主题令牌派生Ft7 的 CSS 全部通过var(--token)引用这是 hallmark 的令牌纪律token discipline在页脚组件上的直接体现——反模式文档明确把渲染中途出现内联颜色/字体值列为 AI 生成特征Slop-test gate 58。相关令牌的实际定义可以在 site/css/tokens.css 中确认令牌示例默认值Specimen 主题用途--space-2xl4remQuiet 主题为4.5rem页脚上下内边距--page-gutterclamp(1.25rem, 4vw, 3rem)页脚水平内边距随视口缩放--space-lg1.5rem表单与 meta 行之间的 grid 间隙--space-2xs0.25remlabel 与输入行之间的间距--space-sm0.75rem输入框内边距--text-sm0.875remlabel 字号--text-xs0.75remmeta 弱化行字号即12px muted type--rule-hair0.5pxBrutal/Manifesto/Sport 为1px输入框发丝边框--radius-input0默认方形Garden/Studio/Quiet/Plume 等主题可覆盖为圆角输入框圆角--color-rule/--color-paper/--color-focus随主题在 OKLCH 空间定义边框、背景、焦点环颜色tokens.css 头部注释说明了设计意图12 个主题各自占据 OKLCH 色彩空间的不同位置纸张色横跨深色/奶油/饱和/冷/暖五种倾向显示字体覆盖衬线/等宽/紧缩无衬线/斜体等类别级差异。Ft7 组件本身不携带任何颜色或字体值因此在任意主题下Specimen 的暖燕麦纸、Midnight 的深冷炭、Manifesto 的黑底红块都会自动与整站保持一致——这正是一个页面只有一个系统的关键。另外在 site/css/components.css 中可以看到 hallark 站自身对同类令牌的复用手法例如.code块同样使用var(--rule-hair) solid var(--color-rule)的发丝边框 var(--radius-input, 0)的回退圆角说明这套令牌不仅是文档规范也被站内真实代码反复验证。五、与 C2 Inline form-as-CTA 的关系Ft7 在概念上复用了 CTAs/signups 类别中 C2 · Inline form-as-CTA 的形态CTA 本身就是表单——一个 email 输入框旁边一个提交按钮不需要单独的落地页。C2 的实现提供了几个可供 Ft7 借鉴的细节form classcta-form label foremail classvisually-hiddenEmail/label input idemail typeemail placeholderyouexample.com / button typesubmitSend →/button /form.cta-form { display: grid; grid-template-columns: 1fr auto; border-bottom: 1px solid var(--color-ink); } .cta-form input { background: none; border: 0; padding: 0.7rem 0; min-height: 44px; }两处都体现了44px 命中区域与语义化 label的共同纪律。区别在于语境C2 出现在页面中部作为独立 CTA 区块Ft7 则专属于页脚收口并且比 C2 多了 meta 弱化行来承载署名与版权。把收集一个邮箱的动作组件化是 hallmark 组件可组合性的一个具体案例——同一个表单形态可以在不同的宏结构位置复用但选型时要保证同一页面内没有两个区块使用相同原型多样化规则见下文第七节。六、变体旋钮避免每个 Ft7 都长得一样组件手册要求每个原型在使用时至少声明一组变体旋钮variation knobsFt7 有三个旋钮可取值Layoutstackedlabel 在上 · inlinelabel 与输入同行 · split表单居左、meta 居右Submit stylefilled实心按钮 · outline描边按钮 · arrow link文字加箭头Privacy lineyes表单下方加一行隐私说明 · no反模式文档明确警告连续两次输出使用相同旋钮值和连续两次选择相同原型一样是模板化。如果你的上一个页脚是stacked filled no privacy下一个就必须至少改动一个旋钮并在宏结构戳记注释中写明选择例如/* Hallmark · macrostructure: 名称 · Ft7 knobs: layoutsplit, submitoutline, privacyyes · ... */这一机制保证同一个 Ft7 原型在多次生成中仍然呈现不同的观感避免每个 Bento 都像同一个 Bento式的 AI 指纹。七、路由规则与多样化原则页脚按流派路由组件手册的 Footer 路由表规定流派默认也可用editorialFt1 Mast-headedFt2, Ft4, Ft6,Ft7modern-minimalFt2 Inline single lineFt1, Ft5atmosphericFt5 StatementFt1, Ft2playfulFt8 Marquee scrollFt5, Ft3terminalFt4 Dense colophonFt2docs / referenceFt3 Index columnsFt1注意两点Ft7 的主场是 editorial编辑出版流派同时手册明确要求默认远离 Ft3——四列索引式页脚Product · Company · Resources · Legal 社交图标行 小版权是 AI 生成界面的标志性指纹只有页面真的是 hub 或文档根节点、存在真实站点地图时才允许使用。Ft7 正是替代 Ft3 的诚实选项之一它用一次真实的订阅邀请替代一份不存在的站点地图。多样化规则页面内同一页面不能有两个区块使用相同原型。一个页面若已有 C2 表单 CTA页脚就要避免再用纯表单结构可考虑 split 布局拉开差异或改用 Ft1/Ft2。跨输出同一会话中连续多次 hallmark 生成不能共享同一页脚原型上一轮用了 Ft7下一轮就换 Ft1/Ft2/Ft4/Ft5/Ft6/Ft8 之一。八、移动端折叠行为组件手册为每个原型定义了窄视口下的折叠行为Ft7 遵循两个断点60rem约 960px以下——布局断点Ft7 的 input button从横排堆叠为纵向全宽。40rem约 640px以下——排版断点label移到 input 上方button 变为全宽。与原文档给出的结构对应Ft7 在移动端应从.foot-news__row { display: flex }改为纵向排布输入框flex: 1失效、button 占满整行。以下是与 Ft7 直接相关的跨断点硬性规则原文档跨切面规则同样适用于本组件40rem 以下所有可点击目标 ≥ 44×44pxWCAG AA不能更小——这解释了为何 Ft7 输入框始终保持min-height: 44px。页面容器padding-inline ≥ clamp(1rem, 4vw, 1.5rem)内容不贴屏幕边缘。40rem 以下禁用一切滚动关联动画。折线以下图片一律loadinglazy但绝不对 LCP 元素使用 lazy自动播放视频需尊重data-savernavigator.connection.saveData。九、为什么 Ft7 是AI Footer反模式的正解反模式文档把标准 SaaS 页脚列为最知名的 AI 生成特征之一4 列链接Product · Company · Resources · Legal 社交图标行 底部版权 1px 顶部发丝线 中性灰背景。成千上万的页面一模一样。其失败原因在于形状无视流派面包店不需要 Resources 列编辑页也不需要四联 Legal。页脚的任务是收束页面而不是罗列一份并不存在的站点地图。修复方案正是从页脚路由表选型默认走向 Ft1、Ft2、Ft4、Ft5、Ft6、Ft7、Ft8——Ft7 之所以是其中的内容型正解是因为它把页脚的收束动作与品牌真实出版这一事实绑定一个持续发 newsletter 的独立杂志/工作室页脚放订阅表单不是推销而是服务的自然延伸。对使用 hallmark 的 Agent 而言这还意味着一个硬性纪律即使参考构建里出现了四列页脚新输出也必须默默修复——反模式规则优先于与既有结构保持一致的指令见反模式文档 These rules are NOT bypassable 段落。十、落地检查清单在 Claude Code / Cursor / Codex 中用 Ft7 收尾页面时逐条核对品牌是否确实在出版内容页面首屏是否已经出现过订阅入口若以上任一为否立即降级为 Ft2Inline single line不突袭用户。使用真表单语义formlabel forinput typeemail required。输入框min-height: 44pxfocus-visible焦点环即时出现。所有颜色/字号/间距来自主题令牌无内联十六进制或一次性font-family。从 Ft7 三个旋钮Layout / Submit style / Privacy line各选一个值并写入宏结构戳记注释。确认本页没有其他区块使用相同原型尤其不要与 C2 表单 CTA 同形重复。60rem 以下 inputbutton 纵向堆叠、全宽40rem 以下 label 上移、button 全宽。确认上一轮输出未使用过 Ft7 或相同旋钮组合跨输出多样化。参考路径本组件文档skills/hallmark/references/components/ft7-newsletter-first.md组件手册索引、旋钮、路由、移动端折叠skills/hallmark/references/component-cookbook.md相关表单组件 C2skills/hallmark/references/components/c2-inline-form-as-cta.md相邻页脚原型 Ft1 / Ft2ft1-mast-headed.md · ft2-inline-rule-single-line.mdAI 反模式与令牌纪律skills/hallmark/references/anti-patterns.md设计令牌定义site/css/tokens.css站内令牌实际运用示例site/css/components.css相关宏结构Letter / 独立杂志首页skills/hallmark/references/macrostructures/12-letter.md【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
