Hallmark F3 Tabular Spec Sheet 组件原型详解用发丝线表格承载可量化特性对比【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark导读本文聚焦 hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex组件原型库中的F3 · Tabular spec sheet表格化规格清单——一个以一行一特性、列承载名称/数值/脚注、行间发丝线分隔、数字使用等宽数字为固定形状的表格型功能区块。它专用于需要定量对比的特性罗列场景延迟、吞吐、价格、合规指标等是 46 个组件原型中唯一面向数据表格式排版的 Feature 原型。读完本文你将掌握该原型的核心 DOM 骨架、等宽数字tabular-nums纪律、三种可变旋钮、移动端两级折叠策略以及它如何在 hallmark 的 21 种宏观结构中被调用、与 F1 Bento Grid 的边界如何划定。一、原型定位一张一行一特性的规格表在 component-cookbook.md 的索引中F3 的定位是一句话概括的F3 · Tabular spec sheet— Each row is a feature; columns hold name, value, footnote. Hairline rules between rows. Tabular numerics.展开后就是三个不可动摇的形状约束每一行 一个特性feature行是语义单元列承载三件事名称name、数值value、脚注footnote行与行之间用发丝线规则hairline rules分隔数字一律采用等宽数字tabular numerics。对应的完整定义文件是 f3-tabular-spec-sheet.md它给出的使用条件是Use when:features compare quantitatively —— 特性之间是可量化比较的延迟 p99、吞吐量、可用性百分比、地域数量等Dont confuse with:F1 Bentof1-bento-grid.md后者是非表格、靠视觉节奏大小跨度的非对称磁贴承载信息的。换言之当你要表达的是谁的指标更高/更低/更快时用 F3当你要表达的是一组并列的入口/能力时用 F1。表格强调的是可扫读的数值对齐Bento 强调的是磁贴的视觉韵律。二、核心 DOM 骨架table.spec-sheet.tnumF3 的参考 HTML 极简但信息密度很高摘自 f3-tabular-spec-sheet.mdtable classspec-sheet tnum trthLatency/thtdp99 lt; 50 ms/tdtd classmutedmeasured externally/td/tr tr…/tr /table拆解这张骨架可以得到四条可执行的实现规则用语义化table而非div拼排。行、列、表头th都是原生表格语义对屏幕阅读器和搜索引擎都友好。tnum是全局工具类。在 hallmark 的站点级样式表 site/css/base.css 中它的定义是一行/* — Utility: tabular numbers ——————————————— */ .tnum { font-variant-numeric: tabular-nums; }把它挂在整个表格上而不是逐个td保证整列数字宽度对齐见下文第三节。 3.脚注列使用.muted弱化。如measured externally这类说明性文字不参与数值比较视觉上降级为次要文本避免与主数值抢注意力。 4.HTML 中的、必须转义为lt;、gt;避免破坏表格解析示例中p99 lt; 50 ms正是这个写法。这个骨架可以直接放入任意宏观结构如 04-stat-led.md 之类的数据驱动页面作为 Feature 区块使用。三、等宽数字纪律为什么 tabular-nums 是硬要求F3 之所以叫tabular表格化spec sheet核心秘密在数字的字体特性上。参考 typography.mdTabular numbers on any data display:font-variant-numeric: tabular-nums;Oldstyle figures for body copy正文可用oldstyle-nums但数据展示不行原因在 anti-patterns.md 的Tabular data without tabular-nums反模式条目里讲得很清楚A list of prices, dates, or metrics where the numbers dont align vertically because the font uses proportional figures.Fix.font-variant-numeric: tabular-nums;on any container displaying columns of numbers.比例数字proportional figures中1比8窄不同数字宽度不同导致同一列的数字右缘参差不齐——这在表格里会立刻暴露为AI 生成感。等宽数字tabular figures让每一位数字占据相同宽度整列数字天然右对齐扫读比较数值时才不会视线漂移。这条纪律在 hallmark 中并不是 F3 独有而是贯穿所有承载数字的组件H4 Stat-Ledh4-stat-led.md的.figure用font-variant-numeric: tabular-numsT4 Numbered stat stript4-numbered-stat-strip.md同样挂tnum06-anya-portfolio 等测试页面也复用了这一工具类。F3 则是这一纪律在多行多列表格场景下的最高强度应用。四、发丝线规则与主题令牌让表格轻而不是重F3 的另一半特征是hairline rules between rows——行间分隔用发丝线而不是卡片、阴影或粗边框。hallmark 的令牌体系为它提供了统一的原料发丝线宽度令牌--rule-hair发丝线颜色令牌--color-rule例如 site/css/tokens.css 中的--color-rule: oklch(91% 0 0); /* hairline */即近乎纯白的中性浅色站点自带一个.rule工具类site/css/base.cssborder-top: var(--rule-hair) solid var(--color-rule);可直接复用于表格行。在 hallmark 自己的演示站点里规格卡.spec的写法给出了更完整的参考site/css/components.css.spec { display: flex; flex-direction: column; gap: var(--space-lg); padding: var(--space-xl) 0; border-top: var(--rule-hair) solid var(--color-rule); }且发丝线会随主题theme自适应——例如 Linen 主题下规格块上下颠倒、发丝线移到下方site/css/sections.css[data-themelinen] .spec { border-top: 0; border-bottom: var(--rule-hair) solid var(--color-rule); }这意味着 F3 表格的发丝线颜色和宽度不应写死而应通过var(--color-rule)/var(--rule-hair)引用令牌让表格自动融入当前主题的纸面色paper band与氛围。此外custom-theme.md 还提示规格表这类技术/临床/规格单场景的纸面通常取L 98–100% 近白冷色调而页面含代码或表格数据时可选配一套等宽字体mono——font-family: var(--font-label)或专用 mono 令牌就是常见的落点。五、三个可变旋钮让每一张规格表都不同F3 与所有 46 个组件原型一样遵循原型 旋钮的变异机制见 component-cookbook.md § Within-archetype variation knobs。F3 的三个旋钮及可选值旋钮可选值说明Columns列数2key/val·3key/val/unit·4with footnote基础两列只放名称数值三列追加单位列如 ms、%四列再追加脚注列Rule density分隔密度every row · groups of 3 · headers only每行都划线、每三行分组划线还是仅表头下方划线Numbers数字形态tabular · proportional等宽数字推荐、默认或比例数字仅当刻意营造松散感时反模式警告cookbook 原文两次输出使用相同旋钮值与重复使用相同原型是同级别的模板化。如果上一次构建的 F3 是columns3, rulegroups-of-3, numberstabular下一次必须至少改变一个旋钮。同时cookbook 规定了同页去重规则同一页面内任何两个 section 不得使用同一个原型。若页面宏观结构如 01-bento-grid.md本身暗示 F3就使用它否则刻意换用 F2/F4/F5/F6 等其他 Feature 原型保证组合式多样性。六、移动端两级折叠表格如何在窄屏存活表格在窄视口最容易失控。cookbook 的Mobile collapse章节为每个原型都定义了明确的折叠行为F3 的两级策略是低于 60 rem约 960px布局断点列数缩减——4 列 → 2 列key value丢弃单位列和脚注列低于 40 rem约 640px排版断点规格列表转为纵向每一行变成dt在上、dd在下的结构——即从表格退化为定义列表保持语义特性名 数值不变但彻底不再横向滚动。用 DOM 语义表达第二级折叠等价于把每行改写成dl dtLatency/dt ddp99 lt; 50 ms/dd /dl折叠的核心原则写在 cookbook 的跨原型规则里Below 60 rem the archetype must still feel like itself——同样的层级、同样的语气、同样的节奏只是变成单列堆叠。F3 在 375px 的手机上如果坚持四列表格必然触发横向滚动违反 hallmark 响应式底线见 responsive.md 的no horizontal scroll门槛。七、何时使用 F3与 F1 Bento 的边界判定综合 f3-tabular-spec-sheet.md 与 component-cookbook.md给出可操作的决策清单优先选 F3当特性列表的核心诉求是数值对比——延迟、吞吐、价格、容量、合规项、可用性百分比每一行能被名称 → 数值 → 脚注三元组干净地表达你希望读者逐行扫读、纵向比较而不是被视觉元素吸引页面 tone 偏 technical / clinical / spec-sheet此时甚至可按 custom-theme.md 配近白纸面。避开 F3改用 F1 Bento当条目是并列的入口/能力没有主数值可比信息需要视觉节奏大小跨度的磁贴、不对称网格来建立层级每条目内容是多行正文而非名称 数字。一句话区分F3 是让数字说话的表格F1 是让尺寸说话的网格。把规格表硬塞进 Bento 磁贴、或把能力卡片硬排成表格都会丢失各自的信息表达力。八、在 hallmark 工作流中的调用方式F3 不是独立页面而是宏观结构内部的一个组件区块。在 hallmark 的设计流程见 SKILL.md Step 3中正确的调用路径是读索引打开 component-cookbook.md 的 archetype index在 Feature 类目下选中F3 · Tabular spec sheet只加载对应文件references/components/f3-tabular-spec-sheet.md——cookbook 明确要求load ONLY the picks you need一次构建典型只加载 5–7 个原型文件选定旋钮值按第五节的三旋钮表挑一组值并把旋钮值写进宏观结构印章stamp注释例如/* Hallmark · macrostructure: Stat-Led · F3 spec knobs: columns3, rulegroups-of-3, numberstabular · … */尊重主题令牌发丝线用var(--rule-hair)var(--color-rule)数字挂tnum工具类不内联裸色值遵守 anti-patterns 的 token 纪律实现移动端两级折叠第六节若上一轮输出已用过 F3 或同页面其他 section 已用 F3则按去重规则换原型或换旋钮。九、完整可运行示例结合上述全部规则一个 3 列name / value / unit旋钮、每行发丝线、等宽数字、挂靠tnum工具类的 F3 完整实现如下table classspec-sheet tnum trthLatency/thtd42/tdtd classunitms p99/tdtd classmutedmeasured externally/td/tr trthThroughput/thtd1,250/tdtd classunitreq/s/tdtd classmutedsustained 24h/td/tr trthUptime/thtd99.97/tdtd classunit%/tdtd classmutedtrailing 90 days/td/tr /table.spec-sheet { width: 100%; border-collapse: collapse; font-family: var(--font-body); } .spec-sheet th { font-family: var(--font-label); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); text-align: left; padding: var(--space-sm) var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); } .spec-sheet td { padding: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); font-variant-numeric: tabular-nums; } .spec-sheet .unit { color: var(--color-muted); } .spec-sheet .muted { color: var(--color-muted); } /* 低于 40 remdt/dd 纵向化dropping 脚注列 */该示例直接复用了 site/css/base.css 的tnum与 site/css/tokens.css 的--rule-hair/--color-rule/--color-muted/--font-label等命名令牌可以原样进入 hallmark 构建的任意页面。小结F3 Tabular spec sheet 是 hallmark 组件库中让数据自己说话的专用工具语义化table 行间发丝线 全局等宽数字tnum三者缺一不可。它与 F1 Bento 的分工、三旋钮变异机制、60/40 rem 两级折叠策略共同保证了它在任何宏观结构、任何主题、任何视口宽度下都能保持像它自己的可读性与专业性——这正是一个反 AI-slop 设计系统对表格这一最容易被 LLM 做成脏乱样式组的场景给出的纪律性答案。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考