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

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 与平台工程师的分布式追踪tracingSaaS 落地页是如何被设计出来的从 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设计上下文门控AudienceSRE/平台工程师、Use case试用/联系销售、Tonetechnical在 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 hueindigo→phosphor-cyan两个轴向上不同三轴中有两轴相异通过差异化规则。Step 3 · Visual ruleset视觉规则集加载按需加载的规则文件对应 skills/hallmark/references/ 目录规则文件提供的约束macrostructures/05-workbench.mdWorkbench 宏结构产品截图/面板为核心内容页面是应用使用导览components/f2-sticky-scroll-stack.md左侧滚动步骤 右侧粘性面板typography.mdMidnight 配对Geist Mono 展示 Geist 正文color.mdMidnight 调色板暗色冷灰microinteractions.mdIntersectionObserver 步进高亮、代码行复制、focus-visible 环anti-patterns.md反模式清单注意 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 / 3838 道防AI 味检查全部通过与2 primitives 动效上限对应 microinteractions.md 的每页不超过三种动画原语硬规则。Step 6 · Macrostructure stamp宏结构盖章CSS 文件首行注释是技能的可追溯记录style.css/* Hallmark · macrostructure: Workbench · F2 sticky-scroll knobs: pinnedright, contenttrace-panel, steps3 * 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 的差异这本身就是演示结构差异化规则如何落地的变更项维度v1v2宏结构Bento Grid六个不对称磁贴统计/迷你图/引言/代码/集成/聚光Workbench三步 SRE 工作流每步旁固定一个随滚动切换的面板主题Pastel浅色冷纸 indigo 强调Midnight暗色冷纸 phosphor-cyan 强调增强右侧裁边浏览器框架粘性 3 态面板滚动切换内容定价无新增 Free / Team / Scale 三档表格关于暗色面板更可信的决策brief 给出理由对 tracing 工具而言dashboard mockup 在暗色表面上读起来更可信——这是领域认知驱动主题选择的典型案例。保持不变项品牌设定Tracejam、分布式追踪、SRE 受众Tier-A 手工定制无 Lottie、无真实视频Slop test38 / 38 全通过。四、Workbench 宏结构源码解读三步走查 粘性面板4.1 为什么是 Workbenchmacrostructures/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 heres 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 描述的粘性左栏 滚动右栏循环展示多个子状态模式本页将其左右对调步骤编号标题对应命令step 01openOpen the trace, not a dashboard.$ tracejam open 9c3a72efstep 02findFind the regressed span.$ tracejam top --window 1hstep 03readRead why, in plain text.$ tracejam why pricing.quote每步的标题都直接指向一个 SRE 真实工作流而非营销话术step 01 open输入 trace ID、请求 URL 或五秒时间窗口从 collector 拉取 spans 并内联渲染——trace 就是工作单元step 02 find按p99 与七日基线的偏差对 spans 排序第一个几乎总是问题所在基线每五分钟按服务预计算无需设置过滤器。命令tracejam top --window 1h展示本小时回归前三的 spansstep 03 read每个 span 携带自动生成的解释器——哪个依赖回归了、哪个服务的哪个版本、哪个部署与之相关、上一次干净运行时间以及当时 vs 现在的差异。纯文本、可直接复制进 post-mortem。右侧粘性面板.pinnedindex.html则模拟了同一个 trace9c3a72ef的渲染aside classpinned aria-labelPinned trace panel header classpinned__head spantrace · 9c3a72ef/span span classpinned__chipREGRESSED/span /header div classpinned__body div classspanspan classspan__labelapi.checkout/span…span classspan__time4.21s/span/div div classspanspan classspan__label↳ auth.verify/span…span classspan__time762ms/span/div div classspan span--err…pricing.quote…3.28s/div div classspan span--warn…rates.fx…2.71s/div div classspan…ledger.write…240ms/div /div p classpinned__why strongWHY:/strong rates.fx p99 doubled at 14:02 UTC. Correlates with deploy rates-svcv1.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-svcv1.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 positioningstyle.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 58token 纪律Paper 暗色带oklch(15% …)落在 color.md 定义的暗色 paper 区间L 12–16%非纯黑#000中性色带色相倾斜所有中性色的色相均为 240冷蓝因为强调色是 phosphor-cyan200°——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 recipeElevation: 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 的 21 字体纪律与 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__panelindex.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-labelSample trace preview与aria-labelPinned 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 的三档结构档位价格核心能力Free$0 forever50 GB trace ingest/月 · 7 天保留 · 单项目 · 社区 SlackTeamtier--feature高亮$799/月500 GB ingest/月 · 30 天保留 · 无限项目 · Auto-explainers · SLO 告警ScaleCustom自定义 ingest · 365 天保留 · SOC2/ISO27001 · 专属基础设施 · 24/7 oncallCSS 侧.tier--feature仅用border-color: var(--color-accent)高亮中档style.css列表项用 accent 色的 em-dash 前缀content: —而非 emoji——命中 slop-test gate 60禁止 emoji 作图标。其余区块.integrationsOpenTelemetry、Jaeger、Zipkin、AWS X-Ray、Tempo、Datadog APM、Honeycomb、New Relic 八项集成与.colophon页脚Tracejam · v0.4 · made in Lisbon Berlin都以 mono 小号排版呈现维持工具感。八、动效、可访问性与响应式降级8.1 动效默认开启但要克制按 microinteractions.mdWorkbench 属于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 26copy-to-clipboard on code三条命令代码块提供复制按钮反馈为按钮标签变 Copied而非 toastsilent success 原则。8.2 可访问性要点所有按钮/链接均有:focus-visible环outline: 2px solid var(--color-accent); outline-offset: 3px且transition只声明具体属性color,background,border-color没有transition-allgate 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; } }关键决策粘性面板在窄屏取消 stickyposition: static退化为普通流式区块——避免小屏下粘性面板抢占视口component-cookbook.md 的mobile collapse纪律双栏 hero 与 workbench 折叠为单栏三档定价折叠为单列。九、在 Hallmark 测试矩阵中的定位与验证价值在 site/_tests/README.md 的八条测试矩阵中05-tracejam-saas 承担了特定验证角色验证同一 Brief 两次生成结构不重复v1Bento Grid/Pastel与 v2Workbench/Midnight在宏结构 paper band accent hue 三个维度全部相异验证 Tier-A 纯 CSS 定制能力瀑布式 trace 面板是手绘 CSS 而非 Lottie的正面样本v0.6.0 修复记录明确提及the trace waterfall is pure CSS bars on a percentage grid验证 default-on 微交互作为 Workbench 案例自动携带 2 个动效原语验证 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 gate36/37/38固化——阅读 slop-test.md 时可以在 gate 36禁止水平滚动、gate 37高亮带必须落在 x-height 而非基线、gate 38交互条必须align-items: centerline-height: 1中看到这条闭环。十、从本案例可复用的实战要点Brief 信号先于技能直觉Context 全给出时直接引用try it / contact sales 与 technical 是宏结构与主题选型的有效输入差异化轮换要有轴宏结构、paper band、display style、accent hue——至少两轴相异才通过纯 CSS 能胜过视频Tier-A 瀑布条grid-template-columns: 14ch 1fr 6ch::after宽度伪元素无依赖、可复制、可解释暗色主题层级用明度而非黑度paper 15% → paper-2 19% → paper-3 23%配--color-ink94% 正文全部带色相倾斜sticky 面板的移动端纪律position: sticky必须配overflow-x: clip根规则窄屏断点必须position: static降级动效 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考