Hallmark 导航组件 N4 · ⌘K Hidden-behind-K：面向键盘优先用户的命令面板导航模式

Hallmark 导航组件 N4 · ⌘K Hidden-behind-K面向键盘优先用户的命令面板导航模式【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark导读N4 · Hidden behind ⌘K是 Hallmark 设计技能Anti-AI-slop design skill for Claude Code, Cursor and Codex中十种导航组件原型N1–N10之一核心思路是页面不显示任何可见导航栏用户通过⌘K呼出命令面板command palette到达任意位置。本文完整解析该模式的使用边界、最小 HTML/CSS 骨架、原生dialog实现要点、三个变体旋钮、移动端回退策略并结合本仓库的组件路由表与交互状态规范给出可直接落地到页面构建的实战方案。关联文档skills/hallmark/references/components/n4-hidden-behind-k.md组件索引见 skills/hallmark/references/component-cookbook.md。一、模式定位N4 在导航谱系中的角色Hallmark 将页面导航抽象为 10 个可命名原型N1–N10每个原型都是一个「形状 一行使用时机 一行易混淆区分」的完整决策单元完整索引见 component-cookbook.md 的 Navigation 小节。N4 在其中承担的是最极端的一档原型可见性典型形态N1 · Wordmark 2 links常驻顶部字标 链接行 按钮N2 · Floating chip常驻角落固定浮动的字标 单一动作N5 · Floating pill常驻脱离页边的悬浮胶囊N8 · Terminal command常驻渲染成 CLI 提示符的导航N4 · Hidden behind ⌘K不可见仅一个⌘K快捷键触发面板关键差异是可见性归零其他原型至少保留字标或 CTA 常驻在页面上N4 连这个都不保留——导航入口整体藏在快捷键后面。这是它与 N2浮动 chip始终可见的本质区别文档原文明确标注了这条区分线Dont confuse with: N2 Floating chip (which is visible always).适用场景判断Use whenUse when: the page is for technical users who expect this affordance.判定标准非常窄页面受众是技术用户且他们天然预期⌘K这类键盘快捷方式存在。典型对象包括面向开发者/CLI 用户的产品落地页内部工具、仪表盘或 API 文档入口交互以键盘为主的工具型页面terminal 风格、IDE 风格站点。反方向——如果页面是普通消费者、营销导向、或首次访问者占多数N4 会让导航入口完全消失此时应回到常驻型原型N1/N2/N5/N9 等。与 N8 Terminal command 的边界N8 与 N4 同属「技术向」导航但形态完全不同n8-terminal-command.md 明确写了排除规则Dont confuse with: N4 ⌘K-only (which is a palette, not a visible bar).N8是一个可见的导航条把链接渲染成命令 flag studio --catalog --voice --get▮用户直接看到「命令行」形态N4没有可见条只有一个面板入口。N8 还约束了闪烁光标▮的使用该字符只在 N8 中有意义表示你可以继续输入N4 等其他场景严禁随意使用。二、最小骨架kbd-hint 触发按钮 dialog 面板N4 文档给出的结构极简只有两个元素button classkbd-hint⌘ K/button dialog classpalette…/dialog触发按钮kbd-hint⌘ K文本本身渲染为页面上唯一的导航可见线索。实现时应注意使用真实button而非div或span保证键盘可达与语义正确按钮文本用kbd语义包裹更利于可访问性与视觉统一。仓库自用站点在快捷键提示上正是这一做法site/index.html 中出现了两处kbd用法第 221 行Press kbdT/kbd to see this page in 22 shapes.第 1011 行Press kbd classkbdT/kbd to cycle · kbd classkbdR/kbd to randomise.可作为同类提示的排版参考按 Hallmark 的组件交互纪律该按钮同样必须满足八状态要求见下文第四节。面板dialog.palette面板使用原生dialog元素这一点不是可选项而是硬性纪律——interaction-and-states.md 的 Modals and overlays 小节明确要求Use the nativedialogelement. It handles focus trap, escape to close, and::backdropstyling for free.原生dialog免费提供三件事焦点陷阱focus trap、Esc 关闭、::backdrop背景样式。随后还有两条配套硬规则inert页面内容模态打开时给背后的页面内容设置inert属性让 Tab 顺序不会泄漏到面板外面首焦点策略打开后第一个焦点应落在面板内第一个可交互元素搜索输入框而不是关闭按钮。关闭通道共三条Esc 键、点击::backdrop背景、显式关闭按钮。三、三个变体旋钮Knobs同一原型内的差异化component-cookbook.md 的 Within-archetype variation knobs 表格为 N4 定义了三个旋钮每次构建必须选值避免「每个 ⌘K 面板长得都一样」旋钮可选值说明Trigger触发方式button·keyboard only·both仅按钮可见最弱入口仅键盘快捷键入口完全隐藏两者兼有按钮 快捷键双通道Surface面板形态modal·sheet·spotlight居中模态框从边缘滑出的面板覆盖整个视口的 spotlight 搜索形态Recents最近项shown·hidden面板是否展示「最近访问」列表供高频跳转选择值后应在页面 CSS 顶部的 macrostructure 印章注释中记录格式与 F1/Bento 等其他原型一致例如/* Hallmark · macrostructure: name · N4 knobs: triggerboth, surfacespotlight, recentsshown · ... */这一机制是 Hallmark「结构多样性」纪律的组成部分——同一原型搭配不同旋钮值输出的指纹不同。四、完整实现把骨架升级为可用组件把最小骨架与仓库的交互规范合并即可得到可直接复制的完整实现。以下按 Hallmark 的令牌纪律所有颜色/字体引用命名令牌见 anti-patterns.md 的 Locked tokens 纪律组织button classkbd-hint typebutton aria-haspopupdialog aria-controlscmd-palette kbd⌘/kbdkbdK/kbd /button dialog idcmd-palette classpalette div classpalette__inner rolepresentation input classpalette__input typesearch placeholderGo to… aria-labelCommand palette search / ul classpalette__list rolelistbox libutton typebutton roleoptionDocs/button/li libutton typebutton roleoptionPricing/button/li libutton typebutton roleoptionChangelog/button/li /ul button classpalette__close typebutton aria-labelCloseEsc/button /div /dialog/* 触发按钮可见的唯一导航线索放在角落 */ .kbd-hint { position: fixed; top: var(--space-md); right: var(--space-md); display: inline-flex; gap: 0.25ch; padding: 0.5rem 0.75rem; background: var(--color-paper); border: 1px solid var(--color-rule); font-family: var(--font-ui, ui-monospace, monospace); font-size: var(--text-sm); color: var(--color-ink); cursor: pointer; } /* 面板原生 dialog 令牌背景 */ .palette { width: min(560px, 90vw); border: 1px solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-paper); color: var(--color-ink); padding: 0; box-shadow: var(--shadow-lift); } .palette::backdrop { background: oklch(0% 0 0 / 0.45); } /* 打开面板时页面主体置于 inert */ body:has(dialog[open]) { /* 配合 JS 给根节点加 inert */ } /* 焦点环键盘唯一焦点信号永不动画 */ .kbd-hint:focus-visible, .palette button:focus-visible, .palette__input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; } /* 输入框border-width 全状态恒定防布局跳动interaction-and-states 铁律 */ .palette__input { border: 1px solid var(--color-rule-2); outline: 2px solid transparent; outline-offset: 1px; }配套的键盘逻辑示意const hint document.querySelector(.kbd-hint); const palette document.querySelector(.palette); hint.addEventListener(click, () palette.showModal()); document.addEventListener(keydown, (e) { if ((e.metaKey || e.ctrlKey) e.key.toLowerCase() k) { e.preventDefault(); palette.open ? palette.close() : palette.showModal(); } }); palette.addEventListener(close, () { document.body.removeAttribute(inert); hint.focus(); });这段实现同时覆盖了 interaction-and-states.md 的模态规范要点原生dialog焦点陷阱与 Esc 关闭、inert隔离、关闭后焦点归还触发按钮键盘用户不被丢在原地。八状态纪律组件不是「默认 hover」SKILL.md 的 Component-scope 流程规定任何交互组件必须为全部 8 个状态编码default · hover ·:focus-visible·:active· disabled · loading · error · success详见 interaction-and-states.md。N4 面板内的按钮与输入框同样适用尤其是Focus必须是:focus-visible仅键盘触发2px 实线环、≥3:1 对比度且禁止动画出现——焦点信号必须瞬时呈现动画过渡会让键盘用户在过渡期间失去指示anti-patterns.md 对此有专门的反模式条目Loading面板搜索触发异步过滤时输入框右侧保留约 24px 的预留槽位放内联 spinner字段保持可编辑Error/Success匹配结果为空、输入非法时用aria-invalid 辅助文本传达禁止仅靠颜色表达状态。五、移动端回退不知道 ⌘K 的用户怎么办component-cookbook.md 的 Mobile collapse 表格为 N4 定义了明确的窄屏行为N4 ⌘K-only| 60rem 以下hamburger appears for users who dont know ⌘K| 40rem 以下unchanged (⌘K equivalent is on-screen tap)即在 60rem约 960px断点以下必须补出一个汉堡按钮为不了解 ⌘K 的用户提供可见入口40rem约 640px以下⌘K 的等价物是屏幕上的点按行为保持不变。这背后的原则是键盘快捷键是「增强通道」不能成为唯一通道——窄屏设备没有实体键盘纯 ⌘K 方案在手机上等于没有导航。同时面板与触发按钮都受两条横切规则的约束同表 Cross-cutting rules所有点击目标在 40rem 以下 ≥ 44×44pxWCAG AA页面容器padding-inline ≥ clamp(1rem, 4vw, 1.5rem)。六、路由表什么场景该选 N4Hallmark 在构建页面时按「genre/theme 集群 → 默认导航」的路由表选择导航原型component-cookbook.md 的 Routing 表格如下N4 出现的三处Genre / 集群默认导航可接受备选atmosphericBloom · Aurora · Halo · MidnightN5 Floating pillN9,N4terminal / CLITerminalN8 Terminal commandN4 ⌘K-onlydocs / referenceAlmanacN3 Side-railN1,N4从路由表可以读出两层信息N4 只出现在三个集群的「备选」列从未被列为默认——它定位明确是技术向、工具向场景的强化选择不是常规默认项切换规则同一项目会话内连续两次构建不得复用同一导航原型即上次用了 N5下次在备选列里挑含 N4。这是 SKILL.md 导航多样化纪律的要求配合.hallmark/log.json项目记忆实现详见 SKILL.md 的 Step 2.5 与 Step 6。默认规避与 AI 指纹的反向对抗Hallmark 刻意默认规避 N1字标 内联链接行 右侧按钮因为在 anti-patterns.md 的 The AI nav 条目中这种「Features · Pricing · Docs · Blog · About 右按钮 全宽 吸顶 1px 底边」是最典型的 AI 生成指纹它 genre 无关——同一副导航用在婚礼摄影师主页和 SaaS 落地页上毫无区别。N4 这类非常驻型导航正是打破该指纹的「结构多样性」手段之一它迫使页面在形态上脱离千篇一律的顶部导航条。七、构建时的配套纪律将 N4 选入某个构建时需要同步遵守以下来自 SKILL.md 的硬性约束命名选择与印章在写任何代码前用一句明文声明选择——Macrostructure: 名称. Nav: N4 ⌘K-only. Footer: Ft#. Theme: 主题.构建完成后CSS 首行非空内容必须是格式为/* Hallmark · macrostructure: name · tone: tone · anchor hue: hue */的印章注释N4 的旋钮值trigger/surface/recents也应一并记录供下次构建读取并强制差异化令牌纪律面板背景、边框、焦点环、文字颜色全部引用命名令牌var(--color-paper)、var(--color-rule)、var(--color-focus)、var(--color-accent-ink)等禁止在 CSS 中内联 OKLCH/hex 值绕过令牌块所有令牌最终汇入项目根目录的tokens.css反伪造 chrome 纪律Hallmark 禁止手工绘制假的浏览器条、假 IDE 外壳等装饰anti-patterns.md 的 Re-drawn UI chrome 条目。⌘K 面板本身是真实交互元素不是装饰但面板内不应出现为了像某个工具而伪造的标题栏圆点等假 chrome组件级作用域如果任务只是做一个 ⌘K 按钮/面板组件级而非整页走 SKILL.md 的 Component-scope 流程——跳过 macrostructure、导航、页脚、hero 选择仅保留令牌继承与 8 状态纪律并输出 8 状态演示包装页.preview.html。八、小结N4 的一页决策卡维度N4 · Hidden behind ⌘K形态无可见导航⌘K呼出命令面板使用时机技术用户、键盘优先受众、工具/CLI/docs 场景易混淆排除N2 Floating chip常驻可见、N8 Terminal command可见的命令行形态结构骨架button.kbd-hint⌘K 提示dialog.palette面板实现原生dialog焦点陷阱 / Esc 关闭 / backdrop / 页面inert/ 首焦点进输入框差异化旋钮Triggerbutton / keyboard only / both· Surfacemodal / sheet / spotlight· Recentsshown / hidden移动端60rem 以下补汉堡按钮40rem 以下等价于屏幕点按目标 ≥44×44px路由位置atmospheric、terminal/CLI、docs/reference 集群的备选导航N4非默认N4 是 Hallmark 导航谱系中最激进的一档——它把「导航」这个页面必备元素压缩成一个快捷键换取的是极致干净的版面与键盘优先的交互效率。它不适用于所有页面但当受众是技术用户且预期该能力时它比任何常驻导航条都更能传达这个产品属于键盘的信号。进一步阅读skills/hallmark/references/component-cookbook.md全部 N1–N10 与路由表、skills/hallmark/references/interaction-and-states.md模态/八状态/焦点环、skills/hallmark/SKILL.md构建流程与印章纪律。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考