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

发布时间:2026/9/12 14:30:43

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本文是 Hallmarkskills/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加一个pfooter classfoot-line p© 2026 · 137 Marlow Street · MIT licensed/p /footer注意其中的信息组织方式版权符号 年份、地址、许可声明三项内容用·middot间隔符串联不需要列表、不需要 span 网格、不需要图标行。何时使用页面是编辑式的页脚是事后念头原型文档给出了一句使用判据Use when:the page is editorial and the footer is afterthought.两个条件缺一不可页面基调是编辑式的editorial——长文、杂志、期刊、studio 作品集、宣言页这类内容优先于导航的页面页脚是事后念头afterthought——页脚不是站点的导航终点而是正文结束后的一句收尾。页面越不把页脚当功能越适合 Ft2。反过来如果页面需要页脚承担导航职责文档站、索引页、多栏目站点那就应该选择 Ft3 Index-style category list 或 Ft1 Mast-headed而不是强行压成一行——这是路由表见下文的硬约束。不要与 Ft4 混淆原型文档专门标注了易混淆项Dont confuse with:Ft4 Dense typographic (which packs more in).对比两者Ft2 Inline single line一行内联文本规则之上无分栏。典型形态是© 2026 · 地址 · 许可。Ft4 Dense typographic见 components/ft4-dense-typographic.md一块大段小号等宽字体文本——版权、参考、许可、地址全部塞进一个 colophon 式段落可两端对齐或右散排是出版社版权页气质。其示例footer classfoot-dense mono pHallmark 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顺序wordmark/links/credit · credit/wordmark/linksSeparator分隔符middot·· pipe|· em-dash—· vertical rule竖线Density密度dense紧凑· spaced宽松实战建议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: ordercredit/wordmark/links, separatormiddot, densityspaced · ... */令牌化实现让一行文本拥有系统级质感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 给出了页脚与体裁的映射表体裁默认页脚也可用editorialFt1 Mast-headedFt2、Ft4、Ft6、Ft7modern-minimalFt2 Inline single lineFt1、Ft5atmosphericFt5 StatementFt1、Ft2playfulFt8 Marquee scrollFt5、Ft3terminalFt4 Dense colophonFt2docs / referenceFt3 Index columnsFt1关键结论Ft2 是 modern-minimal 体裁的默认页脚Stripe/Linear 那一派也是 editorial、atmospheric、terminal 三个体裁的合法备选——覆盖面非常广默认逃离 Ft3anti-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 return40 rem~640px以下整行折叠为纵向列表vertical list。实现上对应media (max-width: 40rem) { .foot-line p { display: flex; flex-direction: column; gap: var(--space-2xs); } }同时注意两条跨原型硬规则40rem 以下所有可点击目标 ≥ 44×44pxWCAG 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.——这正是 Ft2hairline rule above 单行版权信息结构的一种站级实例化证明了该令牌组合--rule-hair--color-rule muted 文字在真实主题切换系统22 个主题、[data-theme...]切换下的稳定性无论纸张是 Specimen 的暖燕麦色还是 Midnight 的深冷炭色发丝线与版权行都能跟随令牌自动适配。完整可运行示例综合原型结构、变体旋钮、令牌纪律与响应式行为一份符合 Hallmark 规范的 Ft2 最小实现如下footer classfoot-line rolecontentinfo 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创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
延伸阅读

更多相关文章

2026/9/12 14:30:43

在线购书系统JavaWeb实战:MVC三层架构与事务并发解析

简介:javaweb期末大作业在线购书系统,基于JSPServletMySQL,采用MVC三层架构,面向期末大作业、课程设计及需要完整项目参考的Java学习者。代码注释拉满,覆盖图书展示、购物车、订单管理等核心功能,新手也能看…

2026/9/12 14:25:42

零代码平台加速全栈开发:数据库、运维与AI集成实战

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/9/12 14:25:42

移动端GPU带宽优化:纹理压缩与后处理降载实战

上周优化一个植物园场景的Demo,真机跑了两分钟机身就开始烫手。截帧一看,顶点数不算夸张,DrawCall也压得住,GPU频率却稳稳顶在最高档。真正把我的带宽预算掏空的,是纹理采样和后处理这两个环节。我习惯把这两个家伙称为…

2026/9/12 15:50:50

适时性智能 AI:AI 建站的协作式共创新模式

概述适时性智能 AI是一种以动态引导、即时响应、渐进优化为核心的 AI 交互理念,尤其适用于网站建设等创意类工作,它摒弃传统 AI"一次性完美交付" 的僵化逻辑,转而扮演 "协作伙伴" 角色,在用户需求从模糊到清晰…

2026/9/12 15:50:50

从ImageFolder到ResNet:小麦种子图像分类数据集实践指南

简介:小麦种子图像分类数据集面向计算机视觉学习者、研究者以及农业智能化项目开发者,提供约2000张已标注图片,覆盖4个品种类别,数据已经过预处理,可直接送入分类网络训练与验证,避免从零处理原始图像的重复…

2026/9/12 2:05:33

超人会飞不算本事:系统稳定依赖清晰规则与边界设计

开头先不绕弯子。“#斯坦李吐槽dc 所以超人是无缘无故会飞的嘛哈哈哈哈哈哈哈锤哥真是技术人才啊!#雷神 #复联”这类调侃式短标题,第一波冲击力在于它把两个宇宙的角色塞进同一个吐槽箱里,但细想一下就能发现,它真正碰到的根本不是…

2026/9/12 3:55:12

超人VS蜘蛛侠:拆解超级IP的影响力与传播方法论

把“蜘蛛侠 vs 超人”放在 CSDN 上聊,可能很多人第一反应是走错片场了。但如果把这两个角色看成“两个持续运营了 80 多年的文化产品”,你会发现,这场比较本质上是两个不同 IP 策略的长期结果对比:超人赢在定义了整个超级英雄题材…

2026/9/12 10:09:03

基于CNN的调制信号识别:MATLAB实现时频图分类实战

简介:本资源是一套面向通信工程与信号处理方向学习者、研究者的深度学习实践方案,聚焦调制信号自动检测与识别这一典型无线通信任务,解决传统方法依赖人工特征、低信噪比下性能下降等痛点。压缩包共12个文件(10.73MB)&…

2026/9/12 0:04:17

MATLAB仿生优化框架:长鼻浣熊算法多策略融合实现

简介:本资源是一份面向智能优化算法研究者与MATLAB初学者的仿生智能算法实践代码包,聚焦于长鼻浣熊优化算法(COA)的多策略改进与性能验证。针对传统COA易陷局部最优、收敛精度不足等问题,作者融合Circle映射初始化提升…

2026/9/12 0:04:17

【JAVA毕设源码分享】基于 JavaWeb 的校园一卡通管理系统的设计与实现 基于 JavaWeb 的校园卡业务管理系统(程序+文档+代码讲解+一条龙定制)

博主介绍:✌️码农一枚 ,专注于大学生项目实战开发、讲解和毕业🚢文撰写修改等。全栈领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战 ✌️技术范围:&am…

2026/9/12 0:04:17

【JAVA毕设源码分享】基于 Java 的图书馆借阅管理平台的搭建与实现 基于 Java 的图书馆综合管理系统(程序+文档+代码讲解+一条龙定制)

博主介绍:✌️码农一枚 ,专注于大学生项目实战开发、讲解和毕业🚢文撰写修改等。全栈领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战 ✌️技术范围:&am…

2026/9/12 6:29:36

USB Type-C PCB布局分区设计:电源、高速信号与PD协议全攻略

做硬件这行,Type-C接口算是典型的“看着简单,做起来全坑”的东西。光引脚就24个,高低速信号、电源、控制线全部塞在一个小小的连接器里,如果PCB布局不做规划,打样回来基本就是“插上没反应”、“高速掉线”、“静电一打…

2026/9/12 14:32:17

系统编程学习原型如何补齐稳定性边界

系统编程学习原型如何补齐稳定性边界预算有限时&#xff0c;我先优化明显多余的复制&#xff0c;而不是猜测性地换容器。用借用传递只读数据通常就能减少分配&#xff1a; fn parse(line: &str) -> Result<Item, Error> { /* ... */ }用基准确认热点确实在分配&am…

2026/9/12 6:37:43

雨花区哪家财务公司代理记账比较好?

在雨花区&#xff0c;企业处理财税事务常常面临诸多挑战&#xff0c;选择一家靠谱的财务公司至关重要。湖南巨勤财务管理咨询有限公司就是本地正规实体财税服务机构&#xff0c;深耕本地工商财税行业多年&#xff0c;熟悉当地工商局、税务局最新政策与申报流程。主营公司注册、…

还想了解更多?直接咨询顾问

免费诊断 + 免费方案 + 透明报价。

全国咨询热线400-8866-253
免费获取方案
咨询二维码