Hallmark F3 Tabular Spec Sheet 组件原型详解：用发丝线表格承载可量化特性对比-编程实验室

Hallmark F3 Tabular Spec Sheet 组件原型详解：用发丝线表格承载可量化特性对比

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

导读

本文聚焦 hallmark（Anti-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、吞吐量、可用性百分比、地域数量等）；
Don't confuse with:F1 Bento（f1-bento-grid.md），后者是非表格、靠视觉节奏（大小跨度的非对称磁贴）承载信息的。

换言之：当你要表达的是"谁的指标更高/更低/更快"时，用 F3；当你要表达的是"一组并列的入口/能力"时，用 F1。表格强调的是可扫读的数值对齐，Bento 强调的是磁贴的视觉韵律。

二、核心 DOM 骨架：`table.spec-sheet.tnum`

F3 的参考 HTML 极简，但信息密度很高（摘自 f3-tabular-spec-sheet.md）：

<table class="spec-sheet tnum"> <tr><th>Latency</th><td>p99 &lt; 50 ms</td><td class="muted">measured 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 中的<、>必须转义为<、>，避免破坏表格解析（示例中p99 < 50 ms正是这个写法）。

这个骨架可以直接放入任意宏观结构（如 04-stat-led.md 之类的数据驱动页面）作为 Feature 区块使用。

三、等宽数字纪律：为什么 "tabular-nums" 是硬要求

F3 之所以叫tabular（表格化）spec sheet，核心秘密在数字的字体特性上。参考 typography.md：

Tabular 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 don't 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-Led（h4-stat-led.md）的.figure用font-variant-numeric: tabular-nums，T4 Numbered stat strip（t4-numbered-stat-strip.md）同样挂tnum，06-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.css）：border-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-theme="linen"] .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（列数）	`2`（key/val）·`3`（key/val/unit）·`4`（with footnote）	基础两列只放名称+数值；三列追加单位列（如 ms、%）；四列再追加脚注列
Rule density（分隔密度）	every row · groups of 3 · headers only	每行都划线、每三行分组划线，还是仅表头下方划线
Numbers（数字形态）	tabular · proportional	等宽数字（推荐、默认）或比例数字（仅当刻意营造松散感时）

反模式警告（cookbook 原文）：两次输出使用相同旋钮值，与重复使用相同原型是同级别的模板化。如果上一次构建的 F3 是columns=3, rule=groups-of-3, numbers=tabular，下一次必须至少改变一个旋钮。

同时，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> <dt>Latency</dt> <dd>p99 &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: columns=3, rule=groups-of-3, numbers=tabular · … */

尊重主题令牌：发丝线用var(--rule-hair)+var(--color-rule)，数字挂tnum工具类，不内联裸色值（遵守 anti-patterns 的 token 纪律）；
实现移动端两级折叠（第六节）；
若上一轮输出已用过 F3 或同页面其他 section 已用 F3，则按去重规则换原型或换旋钮。

九、完整可运行示例

结合上述全部规则，一个 3 列（name / value / unit）旋钮、每行发丝线、等宽数字、挂靠tnum工具类的 F3 完整实现如下：

<table class="spec-sheet tnum"> <tr><th>Latency</th><td>42</td><td class="unit">ms p99</td><td class="muted">measured externally</td></tr> <tr><th>Throughput</th><td>1,250</td><td class="unit">req/s</td><td class="muted">sustained 24h</td></tr> <tr><th>Uptime</th><td>99.97</td><td class="unit">%</td><td class="muted">trailing 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 rem：dt/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），仅供参考

Hallmark F3 Tabular Spec Sheet 组件原型详解：用发丝线表格承载可量化特性对比