企业官网建设流程全解析

Hallmark N8 终端命令行导航组件：把导航栏做成 CLI 提示符的设计方法与完整实现

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

导读

本文讲解 Hallmark（面向 Claude Code / Cursor / Codex 的 anti-AI-slop 设计技能）中第 8 号导航原型（Nav archetype）——N8 · Terminal command（终端命令行导航）。它把整条导航栏伪装成一行尚未敲完的 CLI 提示符：> studio --catalog --voice --get▮，导航链接即"命令 flag"，闪烁光标即"你下一步要敲这里"的暗示。读完本文，你将掌握该组件的 HTML/CSS 完整实现、适用边界、与 N4 ⌘K 调色板导航的辨析、三组可变旋钮，以及为什么这种导航只能属于真正的终端/CLI 品牌（Terminal 主题），并能在自己的 CLI 工具落地页中直接复制使用。

组件定位：N8 在 Hallmark 导航体系中的位置

Hallmark 的 component-cookbook.md 将页面导航抽象为 10 个原型（N1–N10），N8 是其中唯一"以命令行为形态"的导航。它的定义原文是：

A nav formatted as a CLI prompt:> studio --catalog --voice --get▮. The "links" are command flags. The blinking cursor (▮) is allowedonly here(it has purpose — signals "you'd type next"); never standalone elsewhere on the page.

这句话点出 N8 的三个核心事实：

1. 导航即提示符：整条导航不是"Logo + 链接行 + 按钮"的常见布局，而是一行尚未结束的命令；
2. 链接即 flag：每个导航目的地对应命令中的一个 flag，如--catalog、--voice、--get；
3. 光标是功能性元素：闪烁光标▮有明确语义（"继续输入的位置"），因此它是全页面唯一允许出现光标的地方——不能在其他任何位置单独使用。

在 Hallmark 的分类体系中，导航属于页面级（page-scope）原型：SKILL.md 明确"N1–N9 和 Ft1–Ft8 仅用于页面范围，组件范围（Component-scope）跳过导航与页脚原型"。因此 N8 只用于整页构建，不用于单个组件。

从阅读路线理解 N8 的引入方式

按照 SKILL.md 的设计流程（Step 2），构建页面时先读 component-cookbook.md 的索引，挑选 5–7 个原型文件（1 个 hero + 1 个 section head + 1–2 个 feature + 1 个 CTA + 1 个 footer + 1 个 nav），然后只加载被选中的原型文件——N8 就是被选中时加载的那个文件（components/n8-terminal-command.md）。

HTML 结构：一行提示符的 DOM 骨架

N8 的参考实现非常精简，整个导航只有两层容器：

<header class="nav-term"> <pre class="nav-term__line"><span class="prompt">&gt;</span> studio <a href="#catalog">--catalog</a> <a href="#voice">--voice</a> <a href="#get">--get</a><span class="caret" aria-hidden="true">▮</span></pre> </header>

结构要点逐项拆解：

三点设计语言值得注意：

• 用<pre>而非<div>：命令行的本质是"逐字符排版"，<pre>天然保留空格、启用等宽字体，是语义正确的容器；
• flag 名即锚点：href="#catalog"等锚点直接对应 flag 名称，视觉上是命令的一部分，功能上仍是真正的页面跳转；
• 命令动词是品牌词：示例中的studio是命令本体，它承载品牌名——整行读起来就是"这个品牌就是一条命令"。

CSS 实现：细线、等宽、单次闪烁

参考实现给出的 CSS 只有五条规则加一个关键帧动画：

.nav-term { padding: var(--space-sm) var(--page-gutter); border-bottom: var(--rule-hair) solid var(--color-rule); } .nav-term__line { font-family: var(--font-outlier, ui-monospace, "JetBrains Mono", monospace); font-size: var(--text-sm); margin: 0; } .nav-term__line .prompt { color: var(--color-accent); padding-right: 0.4ch; } .nav-term__line a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 2px; } .caret { display: inline-block; width: 1ch; animation: blink 1.05s steps(2) infinite; color: var(--color-accent); } @keyframes blink { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .caret { animation: none; opacity: 1; } }

对照 tokens.css 的令牌体系，逐条解读：

• padding: var(--space-sm) var(--page-gutter)：垂直方向用--space-sm（0.75rem），水平方向用--page-gutter（clamp(1.25rem, 4vw, 3rem)），与全站页面容器的水平留白保持一致——导航不会比正文更宽；
• border-bottom: var(--rule-hair) solid var(--color-rule)：底部--rule-hair（0.5px）细线 +--color-rule规则色，是整个导航唯一的"容器感"来源，克制而不飘；
• 等宽字体栈：var(--font-outlier, ui-monospace, "JetBrains Mono", monospace)——优先取主题的自定义显示字体令牌，回退到 JetBrains Mono / 系统等宽字体。注意 Hallmark 的令牌纪律（"锁定令牌，禁止中途即兴发挥"）要求字体必须引用命名令牌；此处展示了"令牌 + 合理回退栈"的写法；
• 字号var(--text-sm)（0.875rem）：命令行风格天然偏小、偏密，正文级以下的小号字号强化"这是终端里的一行字"的语感；
• 链接样式：链接用正文墨色（--color-ink）+ 下划线 + 2px 下划线偏移——保持可读性，同时维持"命令 flag"的等宽单调感，刻意不做常见的导航 hover 高亮盒子；
• 光标动画：width: 1ch占一个字符宽度，blink 1.05s steps(2) infinite用steps(2)做二值闪烁（真实终端光标是"全亮/全灭"的离散切换，不用线性渐隐），颜色跟随强调色令牌；
• prefers-reduced-motion: reduce：动画关闭，光标保持常亮（opacity: 1）。这符合 Hallmark 的全局纪律——所有动画必须尊重prefers-reduced-motion。

光标闪烁在仓库中的实战印证

N8 的光标规则并非孤例。Hallmark 的 microinteractions.md 将 **Caret blink（光标闪烁）**列为"默认开启型动效"之一，并给出硬性规则：

The caret must sit inside<pre class="code">…▮</pre>or an N8 Terminal nav line — never as a standalone<span>floating in a hero.

也就是说，光标只能出现在两类位置：代码块内的"待输入"处、N8 终端导航行内。同一文件还给出速度基准：@keyframes blink1s、steps(2)、无限循环，占 1ch 宽。

仓库的测试样例 site/_tests/02-streampipe-cli/style.css 中有一个非常接近的实现（Streampipe CLI 落地页）：

.lede__caret { display: inline-block; width: 0.55ch; height: 1.15em; background: var(--color-accent); vertical-align: -0.18em; margin-inline-start: 0.15em; 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; } }

可以看到同样的steps(2)二值闪烁、同样的强调色、同样的 reduced-motion 降级（区别只在降级后的透明度）。同时该页面的主标题以$提示符起头、正文嵌有tail -f access.log | streampipe parse --format nginx ...命令块，整页就是 N8 思路的完整应用——建议对照阅读 02-streampipe-cli/index.html。

Terminal 主题对"闪烁"的约束

Hallmark 的 22 个命名主题中有一个专门的Terminal主题（tokens.css 中的[data-theme="terminal"]），其动效档位为 0×——几乎完全静态：

Terminal | 0× | none, except caret blinkinsidea typed command (N8 nav, install code) | Print + monospace metaphor.No standalone blinking cursor— see the Caret blink row above.

即 Terminal 主题唯一允许的动效就是"命令内部的光标闪烁"，且再次强调禁止独立闪烁光标。该主题的令牌也高度匹配 N8 的语感：纸面为磷光 CRT 绿（--color-paper: oklch(11% 0.018 145)），全站字体栈全部为等宽（--font-display / --font-body / --font-serif / --font-label / --font-mono均为 JetBrains Mono / IBM Plex Mono 系），--measure: 70ch拉宽行宽——这是 Hallmark 允许"单字体页面"的两个特例之一（另一个是 Manifesto 海报体）。

使用时机：什么时候该选 N8

参考文档给出的判定标准：

Use when:the page is a CLI tool, dev-tool docs, or carries the Terminal theme.Don't confuse with:N4 ⌘K-only (which is a palette, not a visible bar).

适用场景非常明确：页面本身是 CLI 工具、开发者工具文档，或已经选了 Terminal 主题。N8 的导航路由表（component-cookbook.md 底部）也印证了这一点：

也就是说，Terminal 主题的默认导航就是 N8，备选是 N4。这形成了语义闭环：终端感页面用命令式导航，本身就是品牌声明。

N8 与 N4 的辨析

• N4 · Hidden behind ⌘K（n4-hidden-behind-k.md）：页面上没有可见导航，用户靠 ⌘K 调起命令面板导航一切，面向"预期这个交互习惯"的键盘优先用户。它是"调色板（palette）"，不是"可见的命令行"；
• N8 · Terminal command：导航始终可见，形态是一行命令。两者都面向技术用户，但 N8 保留了显式的视觉栏。

参考文档还有一句区分：不要混淆于 N4 ⌘K-only（那是 palette，不是可见栏）。

反模式：提示符词汇不得挪用

参考文档明确写了一条反模式（anti-pattern）：

using>prompt vocabulary on a non-developer site (a wedding photographer's portfolio with a> view --gallerynav reads as set decoration). N8 belongs to genuine terminal / CLI brands only.

也就是说，把>提示符、--flag导航用在不相关的站点上（例如婚礼摄影师作品集里放一条> view --gallery），读起来就是"布景道具"。N8 只属于真正的终端 / CLI 品牌。这条规则与 slop-test 的审查思路一脉相承——参考 slop-test.md gate 57：禁止用 HTML/CSS/SVG 手绘假终端框、假浏览器栏、假代码块窗，凡是被"重新绘制（re-drawn）的 UI chrome"都直接判失败；N8 的价值恰恰在于它不画终端、不画 chrome，而是让导航本身读起来像一行命令。

可变旋钮：让同一原型不重复

参考 component-cookbook.md 的"原型内变体旋钮"表，N8 有三个旋钮，每次构建必须选值并写进宏结构 stamp 注释：

这些旋钮是 Hallmark"组合式多样性"机制的一部分：同一原型在不同输出中要更换旋钮取值，避免"每个 N8 看起来都一样"。

移动端折叠行为

N8 在窄屏下的退化路径（component-cookbook.md 的 Mobile collapse 表）：

• 60rem（约 960px）以下：flag 若超宽则换行到第二行>，光标保持在行尾；
• 40rem（约 640px）以下：整条导航折叠为一个汉堡按钮，按钮文案即> menu，光标仍可见于行尾。

同时移动端有跨原型硬性规则：所有点击目标在 40rem 以下不得小于 44×44px（WCAG AA）；滚动联动动画在 40rem 以下一律禁用。N8 的折叠语义很聪明——汉堡按钮本身也保持"提示符 + 命令"的语感（> menu）。

组装建议与实战清单

把 N8 装进一个 CLI 工具落地页（参考仓库的 02-streampipe-cli/index.html 与 README.md），可按以下清单落地：

1. 主题先行：页面若选 Terminal 主题（[data-theme="terminal"]），导航默认即 N8；终端的磷光绿强调色自动用于>与光标；
2. 一行命令承载品牌：命令动词用产品名，flag 对应用户最关心的导航目标（Install、Docs、CLI Reference 等），flag 名保持与锚点一致；
3. 光标只出现一次：aria-hidden="true"，且全页除 N8 行与命令块内"待输入处"外不再出现任何闪烁块；
4. 遵守令牌纪律：颜色、字体全部引用命名令牌（var(--color-accent)、var(--font-mono)等），不内联 OKLCH/hex；
5. 补齐 reduced-motion：prefers-reduced-motion: reduce下光标停止闪烁并常亮；
6. stamp 记录旋钮：把 Prompt / Cursor / Width 的取值写进宏结构 stamp 注释，供后续 Hallmark 运行做多样性去重；
7. 过 slop-test：确认没有手绘终端框/chrome（gate 57）、没有独立悬浮闪烁光标（caret blink 硬规则）、导航无两行可点击文本（gate 59）。

遵循上述纪律，N8 就能让一个 CLI 品牌的页面"第一眼就说明自己是什么"——它不靠画一个终端窗口来伪装终端，而是让导航栏本身就是一行还没敲完的命令。

<输出文章>

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