Hallmark 实战拆解以 Streampipe 为例用 6 步设计流程生成开源 CLI 文档落地页【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark导读本文以 hallmark 仓库测试套件中的site/_tests/02-streampipe-cli/brief.md为绝对主体完整还原了该项目为开源 CLI 文档落地页这条测试 brief 所执行的六步设计流程Step 0 预检 → Step 6 宏结构盖章并结合仓库中的SKILL.md设计流程、macrostructures/02-long-document.md、typography.md、color.md、microinteractions.md、hero-enrichment.md等参考文档与最终产出的index.html/style.css逐层剖析每个决策背后的规则依据。读完你将掌握 hallmark 面向文档型 / CLI 工具类页面时如何做宏结构选型、主题锁定、增强层级取舍、动效约束与防 AI 味anti-slop自检。一、这条测试要验证什么在 site/_tests/README.md 的测试矩阵中02 号测试被设计为上下文最完整的一类场景02 | 开源 CLIStreampipe流解析| 上下文完整开发者 / 安装 阅读文档 / 技术向| 主题Terminal用户点名| 技能实际选择Long Document Terminal Tier-A 内联 CSS 终端块与 01 号播客站点用户完全不提供上下文、04 号宣言页用户给出半截指令不同这条 brief 属于规格齐全型输入——受众、用途、语气、主题全部显式给出。它的价值在于验证当用户把设计上下文全部说清楚、且明确点名某个主题时hallmark 如何在不换主题的前提下仍然保证页面的结构性差异diversification。这正好命中 v0.6.0 引入的项目记忆轮换Step 2.5 预览块Step 5 宏结构盖章Step 6三条纪律。二、原始 prompt逐字照录brief 的第一部分完整保留了 v1/v2 共用的用户提示词这是整条测试的输入锚点Make a docs landing for an open-source CLI called Streampipe. It does stream parsing for log/event pipelines. Use the Terminal theme. Audience: backend developers. Use case: install the tool and read the docs. Tone: technical, terse.翻译过来为一个做日志/事件流解析的开源 CLI「Streampipe」做一个文档落地页用 Terminal 主题受众是后端开发者用例是安装工具并阅读文档语气是技术、简洁。可以看到 prompt 里已经带上了 hallmark 设计上下文门Step 1需要的三个要素——受众Audience、用途Use case、语气Tone外加一个明确的主题约束Terminal。这正是 SKILL.md 中 Step 1 设计上下文门理想输入的形态。三、Step 0 · 预检无信号直接走完整栈brief 记录道No pre-flight signals — proceeding with full Hallmark stack.在 SKILL.md 中Step 0 预检扫描六个信号源design.md、字体栈、调色板、微交互立场、间距刻度、框架。由于_tests/目录是独立的自包含页面每个测试文件夹只有index.htmlstyle.css不共享资源没有package.json、没有 Tailwind 配置、没有design.md因此命中无信号分支——输出一行静默说明然后以完整 hallmark 能力栈继续。这条分支的意义在于预检是用户的问责线即便空项目也要明说我看到了什么而不是默默跳进设计。四、Step 1 · 设计上下文门全量回答零推断brief 的结论只有一句话Audience, use, tone, theme all explicit. No inference.对照 SKILL.md 的规则默认必须先问三个问题受众/用途/语气用户逐字回答了 prompt 中的全部字段因此无需任何推断、无需我推断你选了 X的披露句。同时注意一个细节——主题theme不在三问之内但用户显式点名 Terminal。按照 Step 2.5/2.6 的规则用户点名的主题不可轮换No theme rotation when the user names one.这为后面 Step 2.5 的决策范围划定了边界。五、Step 2.5 · 项目记忆轮换宏结构可以换主题不能动这条 brief 最具教学价值的部分在于它把轮换规则的实际推理过程写了出来Previous run on this brief picked Workbench Terminal. The user explicitly requested Terminal again, so theme is fixed. Picking from {Long Document, Component Playground, Specimen} for the macro this time — Long Document fits a docs-landing brief because the page asks the user to read, not click through a sticky tour.Theme: Terminal as requested. No theme rotation when the user names one.拆开看这里有两条规则在同时生效宏结构多样化规则macrostructures.md同一项目内连续两次输出不得使用同一宏结构。v1 已经用了 Workbench工作台——右侧钉住代码面板、逐步演示三个动作因此 v2 必须换候选集收窄为 {Long Document, Component Playground, Specimen}。主题轮换豁免用户点名 Terminal主题固定。这一点与 SKILL.md 中用户上轮指定某主题的示例分支一致——用户要求复用同主题时技能应通过改变宏结构/增强/变体旋钮来制造差异而不是把用户锁进同一个指纹。最终选择Long Document长文档理由是文档落地页的用例是读而不是点击走一遍引导游。可以对照 macrostructures/02-long-document.md 的定义读起来像备忘录、信件或日志条目。没有营销结构。连续散文配内联小节标题。页面是关于产品的文学。这与install the tool and read the docs的用例高度吻合而单一明确行动的反例如强 CTA 的交易页则明确标注应避免使用 Long Document——文档页恰好没有这个问题。六、Step 3 · 视觉规则集加载按需加载的清单brief 列出了本次加载的规则文件macrostructures.md取 Long Document 一个宏结构component-cookbook.mdtypography.md单字体等宽字排样张——设计本身就是等宽color.mdTerminal 磷光调色板microinteractions.md单个原语代码块中的光标闪烁anti-patterns.md对照 SKILL.md 的加载纪律这是索引-再-选策略的典型执行——只加载被选中的宏结构单文件02-long-document.md而非整个目录主题相关的typography.md、color.md等按构建必载microinteractions.md因页面含可交互元素代码块、链接而按需载入hero-enrichment.md则留到 Step 4 才决定是否读取。不一次性加载全部参考文件是 hallmark 控制 token 成本与决策噪音的核心机制。七、Step 4 · Hero 增强Tier-A 纯 CSS 终端块内联嵌入brief 给出了本轮增强决策的完整推理Enrichment: Tier-A pure-CSS terminal mockup, but inline as aprerendered code block — no clipped-edge browser frame. The Long Document macro wants the demo embedded in the prose, not floated next to a sticky tour. Same anti-Lottie call as v1; different placement.这背后是 hero-enrichment.md 的两层纪律图片需求检测表表格中 API, docs, changelog, CLI, library, dev-tool, SDK, package 一行对应的策略是No imagery. Typography-only. Code blocks if needed.不需要图像纯排版必要时用代码块。Streampipe 命中 CLI/dev-tool 行所以增强形式只能是代码块而不是插图或视频。增强层级能上 Tier A纯 CSS 手写就绝不上 Tier ELottie——Reaching for E because its familiar … is the signature of a templated page。终端的做法是用带$提示符的pre classterm代码块直接嵌进正文第二段不套浏览器外框无标题栏、无交通灯圆点因为 hallmark 的通用纪律之一就是禁止重绘浏览器/IDE 外壳见 anti-patterns.md 的 Re-drawn UI chrome 条款。最终产出可以在 site/_tests/02-streampipe-cli/index.html 里直接看到——正文中一段带高亮的命令示例flags 用琥珀色、输出用柔和墨色这正是内联于散文的演示pre classterm aria-labelSample streampipe command and output span classterm__linespan classterm__prompt$/span tail -f access.log | streampipe parse span classterm__flag--format/span nginx span classterm__flag--filter/span status 500 span classterm__flag--out/span json/span span classterm__line term__line--out{ts:2026-04-30T14:01:18Z,ip:203.0.113.42,...}/span /pre八、Step 5 · 预览块动手写码前的 TL;DRbrief 完整保留了 v0.6.0 要求的预览块格式在 SKILL.md 中有规范的六个必填项Macrostructure· Long DocumentTheme· Terminal深色磷光纸 · 全程 IBM Plex Mono · 磷光绿点缀Enrichment· Tier-A 纯 CSS 终端块内联、嵌入散文Sections· Masthead · Lede · Install · How it works3 条编号说明· Examples · Flag table · ColophonMotion· 代码块光标闪烁1 个原语Slop test· 38 / 38 ✓Diversification· 与 v1Workbench/Terminal在宏结构上不同Workbench → Long Document主题因用户点名而固定注意两点其一预览块必须在写任何代码之前给出让用户 5 秒内能叫停其二Slop test 38/38是 v0.6.0 时代的门禁数——_tests/README.md记录 v0.6.0 从 35 道加到 38 道而当前 SKILL.md 已是 v1.0.0防 AI 味自检已扩展到 69 道门禁references/slop-test.md后续新测试均在 69 道口径下运行。九、Step 6 · 宏结构盖章CSS 文件头的耐久记录生成的 site/_tests/02-streampipe-cli/style.css 第一行就是盖章注释这是 hallmark产出可被后续轮换读取的机制/* Hallmark · macrostructure: Long Document · H5 hero knobs: salutationcommand, body2 paragraphs, signoffmit-license * theme: Terminal · accent: phosphor-green ~6% (functional, not decorative) * enrichment: Tier-A inline CSS-art terminal blocks (no sticky pin, no Lottie) * studied: no · context: explicit · v0.6.0 */盖章注释承载了三类信息宏结构供下一次运行的多样化规则排除、主题及点缀色phosphor-green功能性点缀而非装饰、增强与上下文来源studied: no 表示非 DNA 提取context: explicit 表示上下文全显式。未来任何一次 hallmark 运行读取该注释后宏结构都不能再选 Long Document——这正是八份 brief 八个不同指纹得以维系的底层机制见 site/_tests/README.md 的结论No macro repeats, no theme repeats。十、从 brief 到成品Terminal 主题与 Long Document 宏的落地细节10.1 单字体页面的合法性等宽就是设计本身typography.md 的21 字体规则写明页面默认是展示字体 正文字体的配对但单字体页面只有当该字体本身就是设计决策时才被允许——a true terminal aesthetic is monospace-everywhere on purpose。Streampipe 页正是如此字体栈只有一族 IBM Plex Mono含 400/500 两档字重同一族不同字重算一族--font-mono: IBM Plex Mono, JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace;整页没有任何无衬线或衬线族参与masthead、lede、正文、表格、脚注全部走等宽。这是设计即等宽的合规案例也是它与 05 号测试 TracejamGeist Mono 承载技术感但配 Fraunces 字标的关键差异——后者是配对前者是单族。10.2 磷光调色板OKLCH、深色纸、单点缀style.css 的:root完整实现了 color.md 的深色模式配方--color-paper: oklch(13% 0.020 150); /* 深色纸非纯黑 */ --color-paper-2: oklch(17% 0.022 150); /* 抬升表面更亮 */ --color-rule: oklch(28% 0.025 150); --color-ink: oklch(86% 0.040 150); /* 墨色非纯白 */ --color-ink-soft: oklch(62% 0.040 150); --color-accent: oklch(82% 0.20 150); /* 磷光绿hue 150 */ --color-accent-dim: oklch(58% 0.16 150); --color-amber: oklch(78% 0.18 80); /* 命令 flags 用琥珀 */对照 custom-theme.md 的色调轴标注Terminal 的三轴是paper-band 深色L30%· display-style mono · accent-hue chromatic-phosphor~150°。所有中性色都带 hue 150 的微量色度0.020–0.040符合tint the greys原则——中性色向锚点色相倾斜无纯#000/#fffaccent 只用于提示符、小节序号、表格首列、hover 态等点缀位置正是accent 是荧光笔不是色块的用法。10.3 Long Document 的排版纪律对照 macrostructures/02-long-document.md 的六条特征逐项验证成品页Heading内联于正文的小节标题h2 classsection__head带编号 01/02/03编号作为序号而非营销眉毛实际上页面用border-block-start细分隔线 负空间组合是 Long Document 的负空间即分隔线原则的务实变体Body单栏--measure-prose: 64ch落在 60–65ch 的推荐区间line-height: 1.7≥1.65Divider节间距--space-2xl4.5rem分隔线是 1px 规则线而非装饰Button无独立按钮块CTA 以排版链接形式出现在正文中Image无全出血图演示以等宽pre内联、宽度受散文测量约束Reveal无任何入场动画——The page is justthere。10.4 动效克制默认关闭 唯一原语microinteractions.md 将Long Document 列为默认关闭动效的宏结构default-off 清单Editorial · Manifesto · Letter · Quote-Led · Type Specimen · Long Document · Index-First因此整页只有一处动效lede 末尾的光标闪烁。它严格符合caret blink配方——放在代码语义位置lede 的$命令尾、install 代码块中1ssteps(2)无限闪烁且带prefers-reduced-motion: reduce降级为不闪烁的实体块.lede__caret { width: 0.55ch; height: 1.15em; background: var(--color-accent); animation: caret 1s steps(2, jump-none) infinite; } keyframes caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } } media (prefers-reduced-motion: reduce) { .lede__caret { animation: none; opacity: 0.7; } }注意 microinteractions.md 的一条硬规则光标必须位于代码块内pre classcode…▮/pre或 N8 终端导航行内绝不能作为独立span漂浮在 hero 中——Streampipe 页把光标放在以$开头的 lede 文本末尾语义上等价于你接下来要敲的命令属于配方允许的typed command位置。整页动效原语严格 ≤3 个实际 1 个hover 态只有链接下划线颜色过渡100ms--ease-out这是运动有意图否则就砍掉的落地样本。10.5 无障碍与响应式细节演示终端块带aria-labelSample streampipe command and output视觉装饰性$提示符与光标块标aria-hiddentrue:focus-visible用磷光绿 2px 外环≥3:1 对比html, body { overflow-x: clip }与 v0.6.0 的 slop-test gate 36320–1920px 无横向滚动及 layout-and-space.md 的 clip非 hidden保留 sticky 能力纪律一致移动端≤40rem只做三件事缩小页边距、lede 字号降档、note 网格列宽 4ch→3ch——所有结构保持单列无交互折损。十一、v1 → v2 的差异与不变项同一 brief 的两次指纹brief 末尾用两小节清晰列出迭代差异这是理解结构多样化如何在同主题下生效的最佳案例。What changed vs v1变了什么维度v1Workbench/Terminalv2Long Document/Terminal宏结构Workbench右侧钉住代码面板逐步演示三步动作Long Document文档以散文书写演示内联嵌入正文主题Terminal用户点名Terminal不变——用户点名不可轮换增强位置剪边浏览器外框演示终端内联pre块嵌于第二段同为 Tier-A 手工 CSS布局角色不同开场语以$ streampipe --help开场以一句话描述 CLI 用途开场$命令移到 Install 章节What stayed the same什么没变主题Terminal用户点名单族等宽字排样张typography.md 允许——单字体即设计Slop test 38/38 通过增强层级Tier-A 纯 CSS不用 Lottie。关键洞察在于用户点名主题后多样性只能来自宏结构、增强布局与开场语这三个旋钮。v2 通过把演示从旁挂的剪边框架改为散文内联的代码块把开场从命令改为功能陈述在不动主题的情况下产出了与 v1 指纹完全不同的页面——这正是 site/_tests/README.md 反复强调的structural variety, not just visual variety结构性差异而非换色差异。十二、把这条测试迁移到你的场景如果你要在自己的项目里复刻这条测试的完整流程操作路径如下阅读 SKILL.md 的设计流程Step 0 预检 → Step 6 构建 → Step 7 防 AI 味自检阅读 macrostructures.md 的 21 宏结构索引按 brief 语义选一个文档/教程类优先 Long Document、Workbench交易类优先 Bento Grid、Stat-Led打开 02-long-document.md 与 typography.md、color.md 落地排版与调色板用 hero-enrichment.md 的图片需求检测表判断是否要增强CLI/dev-tool 一律无图像、必要时代码块在 CSS 文件头写入宏结构盖章注释让后续轮换可读用open site/_tests/02-streampipe-cli/index.html或本地开发服务器http://localhost:8765/_tests/02-streampipe-cli/直接查看最终成品site/_tests/README.md 提供了两种打开方式。结语02-streampipe-cli这条 brief 是 hallmark上下文完备型场景的标准答案它演示了完整的六步设计流程如何在零推断、零主题轮换的条件下仅靠宏结构重选与增强重排就产出与上一版指纹截然不同的页面。对读者而言最大的可复用资产是它的决策透明性——每一条选择宏结构、字体、调色板、动效、增强层级都能在仓库的参考文档中找到对应规则而 style.css 顶部的盖章注释则让这些决策对下一次运行保持可追溯。无论你是要生成 CLI 文档页、开发者工具落地页还是任何以阅读为核心动作的页面这条测试的六步流程都值得原样照搬。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Hallmark 实战拆解：以 Streampipe 为例，用 6 步设计流程生成开源 CLI 文档落地页
Hallmark 实战拆解以 Streampipe 为例用 6 步设计流程生成开源 CLI 文档落地页【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark导读本文以 hallmark 仓库测试套件中的site/_tests/02-streampipe-cli/brief.md为绝对主体完整还原了该项目为开源 CLI 文档落地页这条测试 brief 所执行的六步设计流程Step 0 预检 → Step 6 宏结构盖章并结合仓库中的SKILL.md设计流程、macrostructures/02-long-document.md、typography.md、color.md、microinteractions.md、hero-enrichment.md等参考文档与最终产出的index.html/style.css逐层剖析每个决策背后的规则依据。读完你将掌握 hallmark 面向文档型 / CLI 工具类页面时如何做宏结构选型、主题锁定、增强层级取舍、动效约束与防 AI 味anti-slop自检。一、这条测试要验证什么在 site/_tests/README.md 的测试矩阵中02 号测试被设计为上下文最完整的一类场景02 | 开源 CLIStreampipe流解析| 上下文完整开发者 / 安装 阅读文档 / 技术向| 主题Terminal用户点名| 技能实际选择Long Document Terminal Tier-A 内联 CSS 终端块与 01 号播客站点用户完全不提供上下文、04 号宣言页用户给出半截指令不同这条 brief 属于规格齐全型输入——受众、用途、语气、主题全部显式给出。它的价值在于验证当用户把设计上下文全部说清楚、且明确点名某个主题时hallmark 如何在不换主题的前提下仍然保证页面的结构性差异diversification。这正好命中 v0.6.0 引入的项目记忆轮换Step 2.5 预览块Step 5 宏结构盖章Step 6三条纪律。二、原始 prompt逐字照录brief 的第一部分完整保留了 v1/v2 共用的用户提示词这是整条测试的输入锚点Make a docs landing for an open-source CLI called Streampipe. It does stream parsing for log/event pipelines. Use the Terminal theme. Audience: backend developers. Use case: install the tool and read the docs. Tone: technical, terse.翻译过来为一个做日志/事件流解析的开源 CLI「Streampipe」做一个文档落地页用 Terminal 主题受众是后端开发者用例是安装工具并阅读文档语气是技术、简洁。可以看到 prompt 里已经带上了 hallmark 设计上下文门Step 1需要的三个要素——受众Audience、用途Use case、语气Tone外加一个明确的主题约束Terminal。这正是 SKILL.md 中 Step 1 设计上下文门理想输入的形态。三、Step 0 · 预检无信号直接走完整栈brief 记录道No pre-flight signals — proceeding with full Hallmark stack.在 SKILL.md 中Step 0 预检扫描六个信号源design.md、字体栈、调色板、微交互立场、间距刻度、框架。由于_tests/目录是独立的自包含页面每个测试文件夹只有index.htmlstyle.css不共享资源没有package.json、没有 Tailwind 配置、没有design.md因此命中无信号分支——输出一行静默说明然后以完整 hallmark 能力栈继续。这条分支的意义在于预检是用户的问责线即便空项目也要明说我看到了什么而不是默默跳进设计。四、Step 1 · 设计上下文门全量回答零推断brief 的结论只有一句话Audience, use, tone, theme all explicit. No inference.对照 SKILL.md 的规则默认必须先问三个问题受众/用途/语气用户逐字回答了 prompt 中的全部字段因此无需任何推断、无需我推断你选了 X的披露句。同时注意一个细节——主题theme不在三问之内但用户显式点名 Terminal。按照 Step 2.5/2.6 的规则用户点名的主题不可轮换No theme rotation when the user names one.这为后面 Step 2.5 的决策范围划定了边界。五、Step 2.5 · 项目记忆轮换宏结构可以换主题不能动这条 brief 最具教学价值的部分在于它把轮换规则的实际推理过程写了出来Previous run on this brief picked Workbench Terminal. The user explicitly requested Terminal again, so theme is fixed. Picking from {Long Document, Component Playground, Specimen} for the macro this time — Long Document fits a docs-landing brief because the page asks the user to read, not click through a sticky tour.Theme: Terminal as requested. No theme rotation when the user names one.拆开看这里有两条规则在同时生效宏结构多样化规则macrostructures.md同一项目内连续两次输出不得使用同一宏结构。v1 已经用了 Workbench工作台——右侧钉住代码面板、逐步演示三个动作因此 v2 必须换候选集收窄为 {Long Document, Component Playground, Specimen}。主题轮换豁免用户点名 Terminal主题固定。这一点与 SKILL.md 中用户上轮指定某主题的示例分支一致——用户要求复用同主题时技能应通过改变宏结构/增强/变体旋钮来制造差异而不是把用户锁进同一个指纹。最终选择Long Document长文档理由是文档落地页的用例是读而不是点击走一遍引导游。可以对照 macrostructures/02-long-document.md 的定义读起来像备忘录、信件或日志条目。没有营销结构。连续散文配内联小节标题。页面是关于产品的文学。这与install the tool and read the docs的用例高度吻合而单一明确行动的反例如强 CTA 的交易页则明确标注应避免使用 Long Document——文档页恰好没有这个问题。六、Step 3 · 视觉规则集加载按需加载的清单brief 列出了本次加载的规则文件macrostructures.md取 Long Document 一个宏结构component-cookbook.mdtypography.md单字体等宽字排样张——设计本身就是等宽color.mdTerminal 磷光调色板microinteractions.md单个原语代码块中的光标闪烁anti-patterns.md对照 SKILL.md 的加载纪律这是索引-再-选策略的典型执行——只加载被选中的宏结构单文件02-long-document.md而非整个目录主题相关的typography.md、color.md等按构建必载microinteractions.md因页面含可交互元素代码块、链接而按需载入hero-enrichment.md则留到 Step 4 才决定是否读取。不一次性加载全部参考文件是 hallmark 控制 token 成本与决策噪音的核心机制。七、Step 4 · Hero 增强Tier-A 纯 CSS 终端块内联嵌入brief 给出了本轮增强决策的完整推理Enrichment: Tier-A pure-CSS terminal mockup, but inline as aprerendered code block — no clipped-edge browser frame. The Long Document macro wants the demo embedded in the prose, not floated next to a sticky tour. Same anti-Lottie call as v1; different placement.这背后是 hero-enrichment.md 的两层纪律图片需求检测表表格中 API, docs, changelog, CLI, library, dev-tool, SDK, package 一行对应的策略是No imagery. Typography-only. Code blocks if needed.不需要图像纯排版必要时用代码块。Streampipe 命中 CLI/dev-tool 行所以增强形式只能是代码块而不是插图或视频。增强层级能上 Tier A纯 CSS 手写就绝不上 Tier ELottie——Reaching for E because its familiar … is the signature of a templated page。终端的做法是用带$提示符的pre classterm代码块直接嵌进正文第二段不套浏览器外框无标题栏、无交通灯圆点因为 hallmark 的通用纪律之一就是禁止重绘浏览器/IDE 外壳见 anti-patterns.md 的 Re-drawn UI chrome 条款。最终产出可以在 site/_tests/02-streampipe-cli/index.html 里直接看到——正文中一段带高亮的命令示例flags 用琥珀色、输出用柔和墨色这正是内联于散文的演示pre classterm aria-labelSample streampipe command and output span classterm__linespan classterm__prompt$/span tail -f access.log | streampipe parse span classterm__flag--format/span nginx span classterm__flag--filter/span status 500 span classterm__flag--out/span json/span span classterm__line term__line--out{ts:2026-04-30T14:01:18Z,ip:203.0.113.42,...}/span /pre八、Step 5 · 预览块动手写码前的 TL;DRbrief 完整保留了 v0.6.0 要求的预览块格式在 SKILL.md 中有规范的六个必填项Macrostructure· Long DocumentTheme· Terminal深色磷光纸 · 全程 IBM Plex Mono · 磷光绿点缀Enrichment· Tier-A 纯 CSS 终端块内联、嵌入散文Sections· Masthead · Lede · Install · How it works3 条编号说明· Examples · Flag table · ColophonMotion· 代码块光标闪烁1 个原语Slop test· 38 / 38 ✓Diversification· 与 v1Workbench/Terminal在宏结构上不同Workbench → Long Document主题因用户点名而固定注意两点其一预览块必须在写任何代码之前给出让用户 5 秒内能叫停其二Slop test 38/38是 v0.6.0 时代的门禁数——_tests/README.md记录 v0.6.0 从 35 道加到 38 道而当前 SKILL.md 已是 v1.0.0防 AI 味自检已扩展到 69 道门禁references/slop-test.md后续新测试均在 69 道口径下运行。九、Step 6 · 宏结构盖章CSS 文件头的耐久记录生成的 site/_tests/02-streampipe-cli/style.css 第一行就是盖章注释这是 hallmark产出可被后续轮换读取的机制/* Hallmark · macrostructure: Long Document · H5 hero knobs: salutationcommand, body2 paragraphs, signoffmit-license * theme: Terminal · accent: phosphor-green ~6% (functional, not decorative) * enrichment: Tier-A inline CSS-art terminal blocks (no sticky pin, no Lottie) * studied: no · context: explicit · v0.6.0 */盖章注释承载了三类信息宏结构供下一次运行的多样化规则排除、主题及点缀色phosphor-green功能性点缀而非装饰、增强与上下文来源studied: no 表示非 DNA 提取context: explicit 表示上下文全显式。未来任何一次 hallmark 运行读取该注释后宏结构都不能再选 Long Document——这正是八份 brief 八个不同指纹得以维系的底层机制见 site/_tests/README.md 的结论No macro repeats, no theme repeats。十、从 brief 到成品Terminal 主题与 Long Document 宏的落地细节10.1 单字体页面的合法性等宽就是设计本身typography.md 的21 字体规则写明页面默认是展示字体 正文字体的配对但单字体页面只有当该字体本身就是设计决策时才被允许——a true terminal aesthetic is monospace-everywhere on purpose。Streampipe 页正是如此字体栈只有一族 IBM Plex Mono含 400/500 两档字重同一族不同字重算一族--font-mono: IBM Plex Mono, JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace;整页没有任何无衬线或衬线族参与masthead、lede、正文、表格、脚注全部走等宽。这是设计即等宽的合规案例也是它与 05 号测试 TracejamGeist Mono 承载技术感但配 Fraunces 字标的关键差异——后者是配对前者是单族。10.2 磷光调色板OKLCH、深色纸、单点缀style.css 的:root完整实现了 color.md 的深色模式配方--color-paper: oklch(13% 0.020 150); /* 深色纸非纯黑 */ --color-paper-2: oklch(17% 0.022 150); /* 抬升表面更亮 */ --color-rule: oklch(28% 0.025 150); --color-ink: oklch(86% 0.040 150); /* 墨色非纯白 */ --color-ink-soft: oklch(62% 0.040 150); --color-accent: oklch(82% 0.20 150); /* 磷光绿hue 150 */ --color-accent-dim: oklch(58% 0.16 150); --color-amber: oklch(78% 0.18 80); /* 命令 flags 用琥珀 */对照 custom-theme.md 的色调轴标注Terminal 的三轴是paper-band 深色L30%· display-style mono · accent-hue chromatic-phosphor~150°。所有中性色都带 hue 150 的微量色度0.020–0.040符合tint the greys原则——中性色向锚点色相倾斜无纯#000/#fffaccent 只用于提示符、小节序号、表格首列、hover 态等点缀位置正是accent 是荧光笔不是色块的用法。10.3 Long Document 的排版纪律对照 macrostructures/02-long-document.md 的六条特征逐项验证成品页Heading内联于正文的小节标题h2 classsection__head带编号 01/02/03编号作为序号而非营销眉毛实际上页面用border-block-start细分隔线 负空间组合是 Long Document 的负空间即分隔线原则的务实变体Body单栏--measure-prose: 64ch落在 60–65ch 的推荐区间line-height: 1.7≥1.65Divider节间距--space-2xl4.5rem分隔线是 1px 规则线而非装饰Button无独立按钮块CTA 以排版链接形式出现在正文中Image无全出血图演示以等宽pre内联、宽度受散文测量约束Reveal无任何入场动画——The page is justthere。10.4 动效克制默认关闭 唯一原语microinteractions.md 将Long Document 列为默认关闭动效的宏结构default-off 清单Editorial · Manifesto · Letter · Quote-Led · Type Specimen · Long Document · Index-First因此整页只有一处动效lede 末尾的光标闪烁。它严格符合caret blink配方——放在代码语义位置lede 的$命令尾、install 代码块中1ssteps(2)无限闪烁且带prefers-reduced-motion: reduce降级为不闪烁的实体块.lede__caret { width: 0.55ch; height: 1.15em; background: var(--color-accent); animation: caret 1s steps(2, jump-none) infinite; } keyframes caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } } media (prefers-reduced-motion: reduce) { .lede__caret { animation: none; opacity: 0.7; } }注意 microinteractions.md 的一条硬规则光标必须位于代码块内pre classcode…▮/pre或 N8 终端导航行内绝不能作为独立span漂浮在 hero 中——Streampipe 页把光标放在以$开头的 lede 文本末尾语义上等价于你接下来要敲的命令属于配方允许的typed command位置。整页动效原语严格 ≤3 个实际 1 个hover 态只有链接下划线颜色过渡100ms--ease-out这是运动有意图否则就砍掉的落地样本。10.5 无障碍与响应式细节演示终端块带aria-labelSample streampipe command and output视觉装饰性$提示符与光标块标aria-hiddentrue:focus-visible用磷光绿 2px 外环≥3:1 对比html, body { overflow-x: clip }与 v0.6.0 的 slop-test gate 36320–1920px 无横向滚动及 layout-and-space.md 的 clip非 hidden保留 sticky 能力纪律一致移动端≤40rem只做三件事缩小页边距、lede 字号降档、note 网格列宽 4ch→3ch——所有结构保持单列无交互折损。十一、v1 → v2 的差异与不变项同一 brief 的两次指纹brief 末尾用两小节清晰列出迭代差异这是理解结构多样化如何在同主题下生效的最佳案例。What changed vs v1变了什么维度v1Workbench/Terminalv2Long Document/Terminal宏结构Workbench右侧钉住代码面板逐步演示三步动作Long Document文档以散文书写演示内联嵌入正文主题Terminal用户点名Terminal不变——用户点名不可轮换增强位置剪边浏览器外框演示终端内联pre块嵌于第二段同为 Tier-A 手工 CSS布局角色不同开场语以$ streampipe --help开场以一句话描述 CLI 用途开场$命令移到 Install 章节What stayed the same什么没变主题Terminal用户点名单族等宽字排样张typography.md 允许——单字体即设计Slop test 38/38 通过增强层级Tier-A 纯 CSS不用 Lottie。关键洞察在于用户点名主题后多样性只能来自宏结构、增强布局与开场语这三个旋钮。v2 通过把演示从旁挂的剪边框架改为散文内联的代码块把开场从命令改为功能陈述在不动主题的情况下产出了与 v1 指纹完全不同的页面——这正是 site/_tests/README.md 反复强调的structural variety, not just visual variety结构性差异而非换色差异。十二、把这条测试迁移到你的场景如果你要在自己的项目里复刻这条测试的完整流程操作路径如下阅读 SKILL.md 的设计流程Step 0 预检 → Step 6 构建 → Step 7 防 AI 味自检阅读 macrostructures.md 的 21 宏结构索引按 brief 语义选一个文档/教程类优先 Long Document、Workbench交易类优先 Bento Grid、Stat-Led打开 02-long-document.md 与 typography.md、color.md 落地排版与调色板用 hero-enrichment.md 的图片需求检测表判断是否要增强CLI/dev-tool 一律无图像、必要时代码块在 CSS 文件头写入宏结构盖章注释让后续轮换可读用open site/_tests/02-streampipe-cli/index.html或本地开发服务器http://localhost:8765/_tests/02-streampipe-cli/直接查看最终成品site/_tests/README.md 提供了两种打开方式。结语02-streampipe-cli这条 brief 是 hallmark上下文完备型场景的标准答案它演示了完整的六步设计流程如何在零推断、零主题轮换的条件下仅靠宏结构重选与增强重排就产出与上一版指纹截然不同的页面。对读者而言最大的可复用资产是它的决策透明性——每一条选择宏结构、字体、调色板、动效、增强层级都能在仓库的参考文档中找到对应规则而 style.css 顶部的盖章注释则让这些决策对下一次运行保持可追溯。无论你是要生成 CLI 文档页、开发者工具落地页还是任何以阅读为核心动作的页面这条测试的六步流程都值得原样照搬。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考