企业官网建设流程全解析

Hallmark 实战拆解：用 Workbench 宏结构与 Tier-A 粘性 Trace 面板构建 Tracejam SaaS 可观测性落地页

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

导读

本文以 Hallmark 设计技能库中的真实生成测试 05-tracejam-saas/brief.md 为骨架，完整拆解一个面向 SRE 与平台工程师的分布式追踪（tracing）SaaS 落地页是如何被设计出来的：从 Brief 的上下文门控、项目记忆轮换，到 Workbench 宏结构的选型、Midnight 主题的落地，再到用纯 CSS 手绘的“3 态粘性 Trace 面板”。读完你既能掌握 Hallmark 从 Brief 到出品的六步设计流程，也能在源码层面看懂 index.html 与 style.css 中每一个关键实现——包括定位、配色 token、动效与响应式降级。

一、Brief 是什么：一条验证技能边界的“测试指令”

05-tracejam-saas 是 Hallmark 技能库八条生成测试之一（详见 site/_tests/README.md）。它的核心是一条与 v1 完全一致的原始指令：

"Build a landing page for Tracejam — a tracing/observability tool for distributed systems. Audience: SREs and platform engineers. Use case: try it / contact sales. Tone: technical."

这条 Brief 的信息密度很高，且场景被刻意设计成对技能的挑战：

• 领域：分布式系统追踪/可观测性工具（SaaS 类 B2B 开发者工具）；
• 受众：SRE（站点可靠性工程师）与平台工程师，需要专业、可验证的技术表达；
• 转化路径：双 CTA——"Try it free"（试用）与"Talk to sales"（联系销售）；
• 语气：technical（技术型），而非营销腔。

在 site/_tests/README.md 的测试矩阵中，05 被标记为 "Context given:Full"、Theme requested "none"，最终的技能选型是Workbench + Midnight + Tier-A sticky trace panel——即由技能自行决定宏结构与主题，而非用户指定。这正是本案例最有研究价值之处：它展示了技能在没有外部干预时，如何依据 Brief 内生的信号做出差异化决策。

二、设计流程复现：从 Step 0 到 Step 6 的完整决策链

brief.md 记录了 Hallmark 设计流程的六个关键步骤（对应 skills/hallmark/SKILL.md 中的 Design flow），每一步都有明确产出：

Step 0 · Pre-flight（预检扫描）

"No pre-flight signals — proceeding with full Hallmark stack."

按 SKILL.md 的六信号预检协议（design.md、字体栈、调色板、微交互库、间距体系、框架），该生成环境是"vanilla HTML 项目、无框架、无 motion 库、无设计 token"，因此命中"无信号"分支——技能静默启用完整 Hallmark 栈。这意味着页面所需的全部 token 体系、宏结构、微交互纪律都要由技能从零构建。

Step 1 · Design-context gate（设计上下文门控）

Audience（SRE/平台工程师）、Use case（试用/联系销售）、Tone（technical）在 Brief 中全部显式给出，因此直接通过门控，无需推断。按 SKILL 规则，完整上下文会让技能跳过"推断披露"，直接进入结构选型。

Step 2.5 · Project memory rotation（项目记忆轮换）

这是 v0.6.0 新增的披露层（见 site/_tests/README.md 的 v0.6.0 说明）。技能读取.hallmark/log.json（或 CSS stamp 推断出的历史），发现同一 Brief 的上一轮（v1）已选过Bento Grid + Pastel + Tier-A flame chart。据此：

• 宏结构在 {Workbench, Stat-Led, Long Document} 中挑选，最终Workbench 胜出。理由是：Brief 强调 "try it"，而 Workbench 的结构是"带用户走完单个工作流"，而不是像 Bento 那样用磁贴网格铺开六个表面；
• 主题轮换：Pastel（浅色 · geometric-sans · cool-indigo）→Midnight（暗色 · geometric-sans · phosphor-cyan）。二者在 paper band（浅→深）与 accent hue（indigo→phosphor-cyan）两个轴向上不同，三轴中有两轴相异，通过差异化规则。

Step 3 · Visual ruleset（视觉规则集加载）

按需加载的规则文件（对应 skills/hallmark/references/ 目录）：

注意 macrostructures/05-workbench.md 的使用条件："Reach for it for SaaS, developer tools, IDE extensions——anywhere seeing the product in motion is the sale."（SaaS、开发者工具、IDE 扩展，凡是"看产品动起来就是成交"的场景）。同时其反面约束是："Avoid when the product is conceptual or services-led. Workbench needs a UI to show."——恰好说明 Tracejam 这种带真实界面的 tracing 工具是 Workbench 的理想适用对象。

Step 4 · Hero enrichment（英雄区增强）

"Enrichment: Tier-A pure-CSS pinned dashboard panel — a hand-built waterfall trace rendered as flex bars."

按 hero-enrichment.md 的分层（Tier 0 纯排版 → Tier A 纯 CSS 手绘 → … → Tier E Lottie 最后手段），本案例选择Tier-A：不用任何视频或 Lottie，直接用 flex 条绘制瀑布式 trace 面板。与 v1 的"裁边浏览器框架"不同，这次面板放在右栏，滚动时 sticky 固定，并随用户滚过每一步而切换三种内容状态——同样是 Tier-A 手工定制，但布局角色完全不同。

Step 5 · Preview（预览块）

brief.md 记录的预览块是 Hallmark 出品前的 TL;DR，逐行对应 SKILL.md 的六条强制子弹：

**Hallmark · v0.6.0** - **Macrostructure** · Workbench - **Theme** · Midnight (dark cool paper · Geist Mono display · phosphor-cyan accent ~3%) - **Enrichment** · Tier-A pure-CSS sticky dashboard panel (3-state, swaps on scroll) - **Sections** · Masthead · Hero · Sticky-walkthrough (3 steps × pinned panel) · Integrations · Pricing · Colophon - **Motion** · sticky-step active highlight · copy-to-clipboard on code (2 primitives) - **Slop test** · 38 / 38 ✓ - **Diversification** · differs from v1 (Bento Grid/Pastel) on macrostructure + paper band + accent hue

这里有两个关键数字：Slop test 38 / 38（38 道防"AI 味"检查全部通过）与2 primitives 动效上限（对应 microinteractions.md 的"每页不超过三种动画原语"硬规则）。

Step 6 · Macrostructure stamp（宏结构盖章）

CSS 文件首行注释是技能的可追溯记录（style.css）：

/* Hallmark · macrostructure: Workbench · F2 sticky-scroll knobs: pinned=right, content=trace-panel, steps=3 * theme: Midnight · accent: phosphor-cyan ~3% · enrichment: tier-A CSS-art trace panel (sticky-pinned, 3-state) * studied: no · context: explicit · v0.6.0 */

三、v1 → v2 变更清单：同一个 Brief，两套完全不同指纹

brief.md 末尾用"Changed / Stayed"两栏记录了相对 v1 的差异，这本身就是演示"结构差异化规则"如何落地的：

变更项：

关于"暗色面板更可信"的决策，brief 给出理由：对 tracing 工具而言，dashboard mockup 在暗色表面上读起来更可信——这是领域认知驱动主题选择的典型案例。

保持不变项：

• 品牌设定：Tracejam、分布式追踪、SRE 受众；
• Tier-A 手工定制（无 Lottie、无真实视频）；
• Slop test：38 / 38 全通过。

四、Workbench 宏结构源码解读：三步走查 + 粘性面板

4.1 为什么是 Workbench

macrostructures/05-workbench.md 对 Workbench 的定义是："Product screenshots in frames are the primary content. The page is a guided tour of the app in use. Less marketing copy, more 'here's what you do with it.'" 并给出了模仿样本的开场白范式——用三个具体动词 + 一个拒绝句：

"Open the trace, find the span, fix the regression. No glossary required."

对比 index.html 的 hero 文案：

"Distributed tracing thatexplains itself." + "Open the trace. Find the span that regressed. Read why — in plain text — without a glossary, a YAML diff, or a status-page hunt. The post-mortem starts in the trace, not in a doc."

两处是同一手法的应用：具体动词序列 + 拒绝抽象。这正是 site/_tests/README.md 中"copy voice 不可掉进 'Built for the modern team' 模板"的改进项落地。

4.2 三步走查的内容结构

.workbench区块（index.html）左侧是三篇文章式步骤，右侧是粘性面板，构成 f2-sticky-scroll-stack.md 描述的"粘性左栏 + 滚动右栏循环展示多个子状态"模式（本页将其左右对调）：

每步的标题都直接指向一个 SRE 真实工作流，而非营销话术：

• step 01 open：输入 trace ID、请求 URL 或五秒时间窗口，从 collector 拉取 spans 并内联渲染——"trace 就是工作单元"；
• step 02 find：按p99 与七日基线的偏差对 spans 排序，第一个几乎总是问题所在；基线每五分钟按服务预计算，无需设置过滤器。命令tracejam top --window 1h展示"本小时回归前三的 spans"；
• step 03 read：每个 span 携带自动生成的解释器——哪个依赖回归了、哪个服务的哪个版本、哪个部署与之相关、上一次干净运行时间，以及"当时 vs 现在"的差异。纯文本、可直接复制进 post-mortem。

右侧粘性面板（.pinned，index.html）则模拟了同一个 trace9c3a72ef的渲染：

<aside class="pinned" aria-label="Pinned trace panel"> <header class="pinned__head"> <span>trace · 9c3a72ef</span> <span class="pinned__chip">REGRESSED</span> </header> <div class="pinned__body"> <div class="span"><span class="span__label">api.checkout</span>…<span class="span__time">4.21s</span></div> <div class="span"><span class="span__label">↳ auth.verify</span>…<span class="span__time">762ms</span></div> <div class="span span--err">…pricing.quote…3.28s</div> <div class="span span--warn">…rates.fx…2.71s</div> <div class="span">…ledger.write…240ms</div> </div> <p class="pinned__why"> <strong>WHY:</strong> rates.fx p99 doubled at 14:02 UTC. Correlates with deploy rates-svc@v1.34.2 — which lowered the FX cache TTL from 5 m to 30 s. Roll back, or raise TTL. Last clean run: 13:57 UTC (2.41 s end-to-end). </p> </aside>

面板底部的 WHY 文本是整页最有说服力的"解释型追踪"演示：p99 在 14:02 UTC 翻倍 → 与部署rates-svc@v1.34.2相关（FX 缓存 TTL 从 5 分钟降到 30 秒）→ 给出"回滚或提高 TTL"两个动作 → 附上最近一次干净运行时间。产品主张"explains itself"在这里被具象化。

4.3 粘性行为的 CSS 实现

style.css 中面板的粘性定位：

.pinned { position: sticky; top: var(--space-xl); height: fit-content; background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: 6px; padding: var(--space-lg); }

要点：

• position: sticky; top: var(--space-xl)——面板在滚动过程中钉在视口上方3rem处，直到父容器.workbench滚出视口；
• height: fit-content——高度随内容自适应，避免出现多余空白；
• 粘性面板依赖页面根部的overflow-x: clip而非hidden。这一点在 slop-test.md 的 gate 36/62 中被明确为硬要求："Useclipnothiddento preserve sticky positioning"（style.css 中html, body { overflow-x: clip; }正是此规则的落地）。

4.4 "3 态切换"如何工作

brief.md 声称面板在滚动时"swaps its content as the user scrolls past each step"。从 index.html 的静态 DOM 看，面板当前实现承载的是 "REGRESSED" 态（含 WHY 解释块）。结合 microinteractions.md 的默认开启规则（Workbench 属于default-on宏结构，应自动携带 2~3 个微型交互原语）与"active-step highlight via IntersectionObserver"的加载声明，可以推断：

• 面板状态切换与左侧步骤的滚动高亮由同一个IntersectionObserver驱动——观测每个.step进入视口，联动更新面板内容与左侧步骤指示线；
• 三条命令代码块（tracejam open / top / why）承载copy-to-clipboard原语。

从源码结构看，这三态内容的切换在纯静态 HTML 中体现为面板区域预留的.pinned__why与头部的REGRESSEDchip，属于"设计与交互意图先行、静态落盘"的实现——这是该测试页以零 JavaScript 依赖（无独立 script.js）交付时的真实状态。

五、Midnight 主题源码解读：OKLCH token 体系

5.1 token 定义

style.css 的:root区块完整定义了 Midnight 主题的 token 体系：

:root { --color-paper: oklch(15% 0.012 240); --color-paper-2: oklch(19% 0.014 240); --color-paper-3: oklch(23% 0.014 240); --color-rule: oklch(30% 0.012 240); --color-ink: oklch(94% 0.010 240); --color-ink-soft: oklch(70% 0.012 240); --color-ink-muted: oklch(55% 0.012 240); --color-accent: oklch(82% 0.18 200); --color-accent-dim: oklch(58% 0.13 200); --color-warn: oklch(78% 0.16 50); --color-error: oklch(68% 0.20 30); ... }

对照 color.md 的调色板构造原则，可以逐条验证：

• 全部 OKLCH，无一个 hex/rgb：颜色全集中在 token 块，正文没有任何内联色值——命中 slop-test gate 58（token 纪律）；
• Paper 暗色带：oklch(15% …)落在 color.md 定义的暗色 paper 区间（L 12–16%），非纯黑#000；
• 中性色带色相倾斜：所有中性色的色相均为 240（冷蓝），因为强调色是 phosphor-cyan（200°）——"Tint every neutral toward the anchor hue"，中性色不可能是零 chroma 的纯灰（oklch(... 0 ...)被 gate 24 禁止）；
• 语义化状态色：--color-warn（琥珀 50°）与--color-error（红 30°）对应 trace 面板中的span--warn/span--err条；
• Accent 占比纪律：--color-accent为oklch(82% 0.18 200)的高明度高 chroma 磷光青，仅用于强调元素（eyebrow、步骤编号、按钮、状态条），面积远低于 5% 视口——命中 gate 25。

字体 token 同样完整：

--font-display: "Geist Mono", "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace; --font-body: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

5.2 暗色主题的层级逻辑

按 color.md 的 Dark mode recipe："Elevation: higher surfaces arelighter, not darker. Add ~3% lightness per level." style.css 中：

• --color-paper15%（页面基底）→--color-paper-219%（面板/代码块背景）→--color-paper-323%（进度条轨道）——每级 +3~4% 明度，浮起的面板比基底更亮，符合暗色 elevatide 规则。

5.3 字体角色分配

按 SKILL.md 的 2+1 字体纪律与 v0.6.0 的 wordmark 规则（"on Bento / Stat-Led / Workbench / Marquee Hero, wordmarkshoulduse a different display face"），页面字体使用为：

• Geist Mono（--font-display）：标题、导航、编号、代码、时间、面板——mono 作展示字体是 Midnight/Terminal 主题的标志性选择；
• Geist（--font-body）：正文与段落。

页面顶部<head>通过 Google Fonts 预连接与加载这两个家族（index.html）。

六、瀑布式 Trace 面板的纯 CSS 实现：Tier-A 手工定制

hero 区（.hero__panel，index.html）与粘性面板共用.span条形结构。CSS 核心（style.css）：

.trace { display: grid; gap: 4px; } .span { display: grid; grid-template-columns: 14ch 1fr 6ch; gap: var(--space-2xs); align-items: center; } .span__bar { height: 8px; background: var(--color-paper-3); position: relative; border-radius: 1px; } .span__bar::after { content: ""; position: absolute; inset-block: 0; background: var(--color-accent); border-radius: 1px; } .span--err .span__bar::after { background: var(--color-error); } .span--warn .span__bar::after { background: var(--color-warn); } .span__time { font-variant-numeric: tabular-nums; color: var(--color-ink-soft); text-align: end; }

实现细节：

• 每一行 span 是三列网格：14ch标签 /1fr进度条 /6ch右对齐耗时（tabular-nums保证数字等宽对齐）；
• 进度条通过.span__bar::after伪元素着色，宽度百分比由内联width:var(--w)控制（hero 区首行使用style="--w:100%"，其余行用内联绝对定位 span 设宽度）；
• 错误/告警语义色：span--err用--color-error（红）、span--warn用--color-warn（琥珀），同一条 trace 内正常/慢/错误三种状态一目了然；
• 这组结构同时承载了 slop-test gate 37 的可访问性要求——aria-label="Sample trace preview"与aria-label="Pinned trace panel"让纯装饰的 trace 可视化有可读名称（gate 35 与 v0.6.0 的修复记录中均有提及）。

hero 区面板还模拟了 trace 头部信息："trace · 9c3a72ef" + "4.21 s"（总耗时），与粘性面板形成呼应。

七、定价表格与其余区块

v1 没有定价，v2 因 Workbench 能承载三档表格而新增（brief.md 明确"Workbench can carry it without becoming a Bento"）。index.html 的三档结构：

CSS 侧：.tier--feature仅用border-color: var(--color-accent)高亮中档（style.css），列表项用 accent 色的 em-dash 前缀（content: "—"）而非 emoji——命中 slop-test gate 60（禁止 emoji 作图标）。

其余区块：.integrations（OpenTelemetry、Jaeger、Zipkin、AWS X-Ray、Tempo、Datadog APM、Honeycomb、New Relic 八项集成），与.colophon页脚（"Tracejam · v0.4 · made in Lisbon & Berlin"）都以 mono 小号排版呈现，维持工具感。

八、动效、可访问性与响应式降级

8.1 动效：默认开启但要克制

按 microinteractions.md，Workbench 属于default-on宏结构——静止会让页面读起来像截图。本页的动效控制在 2 个原语：

• sticky-step active highlight：滚动经过某一步时，步骤指示线（.step::before）以 accent 色延伸、激活步骤高亮。CSS 基础在 style.css：

.step::before { content: ""; position: absolute; inset-inline-start: -2px; inset-block-start: 0; width: 2px; height: 0; background: var(--color-accent); transition: height var(--dur-short) var(--ease-out); } .step:hover::before, .step:focus-within::before { height: 100%; }

时长 token（--dur-short: 200ms）与缓动 token（--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1)）均来自命名体系，不自由发挥（gate 26）；

• copy-to-clipboard on code：三条命令代码块提供复制按钮，反馈为"按钮标签变 Copied"而非 toast（silent success 原则）。

8.2 可访问性要点

• 所有按钮/链接均有:focus-visible环（outline: 2px solid var(--color-accent); outline-offset: 3px），且transition只声明具体属性（color,background,border-color），没有transition-all（gate 11 禁止）；
• 装饰性面板用aria-label标注，浏览器框架 chrome 点不涉及（本页未手绘浏览器栏——命中 gate 57 的"禁手绘 chrome"纪律）；
• @media (prefers-reduced-motion: reduce)关闭步骤指示线动画（style.css）——命中 gate 29。

8.3 响应式降级

style.css 在max-width: 56rem断点下：

@media (max-width: 56rem) { .hero { grid-template-columns: 1fr; } .workbench { grid-template-columns: 1fr; } .pinned { position: static; } .tiers { grid-template-columns: 1fr; } }

关键决策：

• 粘性面板在窄屏取消 sticky（position: static），退化为普通流式区块——避免小屏下粘性面板抢占视口（component-cookbook.md 的"mobile collapse"纪律）；
• 双栏 hero 与 workbench 折叠为单栏，三档定价折叠为单列。

九、在 Hallmark 测试矩阵中的定位与验证价值

在 site/_tests/README.md 的八条测试矩阵中，05-tracejam-saas 承担了特定验证角色：

1. 验证"同一 Brief 两次生成结构不重复"：v1（Bento Grid/Pastel）与 v2（Workbench/Midnight）在宏结构 + paper band + accent hue 三个维度全部相异；
2. 验证 Tier-A 纯 CSS 定制能力：瀑布式 trace 面板是"手绘 CSS 而非 Lottie"的正面样本（v0.6.0 修复记录明确提及"the trace waterfall is pure CSS bars on a percentage grid"）；
3. 验证 default-on 微交互：作为 Workbench 案例，自动携带 2 个动效原语；
4. 验证 copy voice 纪律：标题从 v1 草稿的 "Trace what matters." 修正为 "Distributed tracing thatexplains itself."——后者具体、可验证，是 README.md 中"copy 易滑向 'Built for the modern team'"问题的对策示范。

此外，README 还记录了 05 暴露出的改进点（移动端断点折叠、aria-label 检查、overflow-x clip），这些缺陷在 v0.6.0 已修复并被三道新增 slop-test gate（36/37/38）固化——阅读 slop-test.md 时可以在 gate 36（禁止水平滚动）、gate 37（高亮带必须落在 x-height 而非基线）、gate 38（交互条必须align-items: center+line-height: 1）中看到这条闭环。

十、从本案例可复用的实战要点

1. Brief 信号先于技能直觉：Context 全给出时直接引用；"try it / contact sales" 与 "technical" 是宏结构与主题选型的有效输入；
2. 差异化轮换要有轴：宏结构、paper band、display style、accent hue——至少两轴相异才通过；
3. 纯 CSS 能胜过视频：Tier-A 瀑布条（grid-template-columns: 14ch 1fr 6ch+::after宽度伪元素）无依赖、可复制、可解释；
4. 暗色主题层级用明度而非黑度：paper 15% → paper-2 19% → paper-3 23%，配--color-ink94% 正文，全部带色相倾斜；
5. sticky 面板的移动端纪律：position: sticky必须配overflow-x: clip根规则，窄屏断点必须position: static降级；
6. 动效 2 原语封顶：IntersectionObserver 步进高亮 + 复制反馈，足够让 Workbench 页"活"起来，又不会滑入transition-all的模板味。

若想亲手复现，可在仓库根目录直接打开 index.html（其引用的 style.css 位于同目录），对照 brief.md 逐步阅读每一步决策与产出的对应关系。

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