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–N10N8 是其中唯一以命令行为形态的导航。它的定义原文是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 youd type next); never standalone elsewhere on the page.这句话点出 N8 的三个核心事实导航即提示符整条导航不是Logo 链接行 按钮的常见布局而是一行尚未结束的命令链接即 flag每个导航目的地对应命令中的一个 flag如--catalog、--voice、--get光标是功能性元素闪烁光标▮有明确语义继续输入的位置因此它是全页面唯一允许出现光标的地方——不能在其他任何位置单独使用。在 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 classnav-term pre classnav-term__linespan classpromptgt;/span studio a href#catalog--catalog/a a href#voice--voice/a a href#get--get/aspan classcaret aria-hiddentrue▮/span/pre /header结构要点逐项拆解元素角色说明header classnav-term导航外层承载内边距与底部细线pre classnav-term__line命令整行用pre保证空白与换行不被折叠等宽字体自然生效span classprompt提示符前缀符号用主题强调色着色a href#catalog等命令 flag导航链接即 flag用--双连字符前缀模拟 CLI 参数span classcaret闪烁光标带aria-hiddentrue纯装饰、不进无障碍树三点设计语言值得注意用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-sm0.75rem水平方向用--page-gutterclamp(1.25rem, 4vw, 3rem)与全站页面容器的水平留白保持一致——导航不会比正文更宽border-bottom: var(--rule-hair) solid var(--color-rule)底部--rule-hair0.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 insidepre classcode…▮/preor an N8 Terminal nav line — never as a standalonespanfloating 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-themeterminal]其动效档位为 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.Dont confuse with:N4 ⌘K-only (which is a palette, not a visible bar).适用场景非常明确页面本身是 CLI 工具、开发者工具文档或已经选了 Terminal 主题。N8 的导航路由表component-cookbook.md 底部也印证了这一点Genre / cluster默认导航可接受的备选terminal / CLITerminalN8 Terminal commandN4 ⌘K-only也就是说Terminal 主题的默认导航就是 N8备选是 N4。这形成了语义闭环终端感页面用命令式导航本身就是品牌声明。N8 与 N4 的辨析N4 · Hidden behind ⌘Kn4-hidden-behind-k.md页面上没有可见导航用户靠 ⌘K 调起命令面板导航一切面向预期这个交互习惯的键盘优先用户。它是调色板palette不是可见的命令行N8 · Terminal command导航始终可见形态是一行命令。两者都面向技术用户但 N8 保留了显式的视觉栏。参考文档还有一句区分不要混淆于 N4 ⌘K-only那是 palette不是可见栏。反模式提示符词汇不得挪用参考文档明确写了一条反模式anti-patternusingprompt vocabulary on a non-developer site (a wedding photographers 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 注释旋钮取值效果Prompt提示符·$·~/$切换命令提示符符号~/$更有用户 shell 内的真实感Cursor光标in-line at end · after final flag · none光标放在命令中间、末尾 flag 之后或干脆去掉Width宽度full bleed · content · ~80 ch整行拉满全宽、内容自适应或限制约 80 字符经典终端列宽这些旋钮是 Hallmark组合式多样性机制的一部分同一原型在不同输出中要更换旋钮取值避免每个 N8 看起来都一样。移动端折叠行为N8 在窄屏下的退化路径component-cookbook.md 的 Mobile collapse 表60rem约 960px以下flag 若超宽则换行到第二行光标保持在行尾40rem约 640px以下整条导航折叠为一个汉堡按钮按钮文案即 menu光标仍可见于行尾。同时移动端有跨原型硬性规则所有点击目标在 40rem 以下不得小于 44×44pxWCAG AA滚动联动动画在 40rem 以下一律禁用。N8 的折叠语义很聪明——汉堡按钮本身也保持提示符 命令的语感 menu。组装建议与实战清单把 N8 装进一个 CLI 工具落地页参考仓库的 02-streampipe-cli/index.html 与 README.md可按以下清单落地主题先行页面若选 Terminal 主题[data-themeterminal]导航默认即 N8终端的磷光绿强调色自动用于与光标一行命令承载品牌命令动词用产品名flag 对应用户最关心的导航目标Install、Docs、CLI Reference 等flag 名保持与锚点一致光标只出现一次aria-hiddentrue且全页除 N8 行与命令块内待输入处外不再出现任何闪烁块遵守令牌纪律颜色、字体全部引用命名令牌var(--color-accent)、var(--font-mono)等不内联 OKLCH/hex补齐 reduced-motionprefers-reduced-motion: reduce下光标停止闪烁并常亮stamp 记录旋钮把 Prompt / Cursor / Width 的取值写进宏结构 stamp 注释供后续 Hallmark 运行做多样性去重过 slop-test确认没有手绘终端框/chromegate 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考