Hallmark 导航组件 N2Floating Chip 角落浮动芯片的完整实现指南【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark导读本文基于开源仓库 GitHub_Trending/hal/hallmark 中 N2 · Floating chip 组件规范 展开完整讲解如何为 fold-heavy首屏信息过载页面实现一个悬浮于角落、不占用文档流的极简导航芯片一个 wordmark 加一个单一动作按钮以最小存在感在首屏之外持续提供品牌锚点与核心 CTA。读完本文你将掌握 N2 的适用场景判定、可复制的 HTML/CSS 骨架、与 C4 Sticky bottom bar、N5 Floating pill 等易混淆组件的区分标准以及其在 Hallmark 组件体系中的路由与移动端收敛规则。一、N2 是什么一个被刻意做小的导航Hallmark 将页面可复用的 UI 构件抽象为 36 个 archetype组件原型其中导航Navigation一类共有 N1N10 十个原型。component-cookbook.md 对 N2 的索引描述是N2 · Floating chip— A small fixed chip in a corner — wordmark a single action (Try it). Doesnt sit in document flow.N2 组件规范 的完整定义只有三部分形状描述、Use when何时使用、Dont confuse with不要与谁混淆以及一段最小可运行的 HTML CSS 骨架。它属于以退为进的设计——用最少的导航存在感换取内容的最大舞台。核心特征角落固定corner-anchored通过position: fixed钉在视口的一个角落典型位置是右上角topright。不占文档流doesnt sit in document flow它是浮层不参与页面布局不推挤任何内容。极小内容量wordmark品牌字标 单一动作一个 CTA如 Try it / Try →。没有链接列表没有菜单图标。极简视觉纸色底 发丝级边框无圆角强调、无阴影堆叠、无模糊背景。原始骨架规范文件中的可复制代码aside classnav-chip a classwordmarkStudio/a a classcta-outlineTry →/a /aside.nav-chip { position: fixed; top: var(--space-md); right: var(--space-md); display: inline-flex; gap: var(--space-md); padding: 0.5rem 0.75rem; background: var(--color-paper); border: 1px solid var(--color-rule); }这段代码即 N2 的形状shape——组件体系中的每个条目都由shape use-when dont-confuse三件套构成目的是让模型在生成时有一个极短、极明确的模式可循。二、适用场景Use when 判定N2 规范的适用条件只有一句话却是一个非常精确的判定信号Use when:the page is fold-heavy and traditional nav would fight the content.即当页面是 fold-heavy首屏信息过载且传统导航会与内容打架时使用。拆解一下这个判定fold-heavy首屏above the fold要展示的信息很多——巨型标题、视觉主角、演示视频、插图中心件等。Hero 区本身信息密度已经很高再放一条全宽导航条会压缩内容空间、分散注意力。traditional nav would fight the contentN1全宽顶部条、N5居中悬浮胶囊这类导航会与内容争抢首屏视觉权重。此时导航应该退场只留一个角落芯片保持存在感。典型的使用场景首屏是 H1 Marquee单句声明铺满折叠区、H6 Photographic fold全出血大图或 H9 Custom illustration centerpiece手绘插图中心件这类内容即主角的 hero页面真正需要的目的地只有 12 个品牌主页 一个动作不需要导航链路需要品牌在用户滚动到任意位置时仍可见但又不想要 sticky 全宽条的视觉负担。与邻近原型的区分Dont confuse with规范明确要求不要与C4 · Sticky bottom bar混淆维度N2 Floating chipC4 Sticky bottom bar位置角落默认右上视口底部全宽横条宽度内容自适应content-sized全宽full-width内容wordmark 单一动作CTA 一行 reassurance 文案视觉重量极轻更重是页面收束动作C4 规范 是水平钉在视口底部的横条容纳一个 CTA 和一行安抚性说明与 N2 是两种完全不同的结构语汇。C4 适合让转化动作始终在手指可达范围内N2 适合品牌 一个动作的极简悬浮锚点。此外 N4 Hidden behind ⌘K 规范中也特别标注了它与 N2 的区别N4 默认不可见用户必须按 ⌘K 唤起命令面板而N2 是始终可见的。N4 面向键盘优先受众N2 面向需要一个低调常驻锚点的普通浏览场景。与 N5 Floating pill 的边界N5 Floating pill 规范在 Dont confuse with 中专门指出N2 是角落锚定corner-anchored而 N5 是顶部居中、与页面边缘明显分离的全胶囊导航。两者都用了position: fixed但N5 是inset: var(--space-md) auto auto 50%; transform: translateX(-50%)——顶部居中带毛玻璃背景、柔和阴影、border-radius: 999px且允许包含链接列表wordmark 若干链接 CTAN2 是top: var(--space-md); right: var(--space-md)——右上角纸色实底 发丝边框无模糊无圆角内容只有 wordmark 一个动作。N5 服务于 modern-minimal / atmospheric 页面hero 下方有独立表面或影像可供模糊效果覆盖的场景N2 服务于导航应该退居二线的场景。N5 的规范还附带一个反模式提醒一个占视口约 95% 宽的胶囊其实就是全宽导航两端加了圆角失去意义同理N2 的芯片如果做得过大也就不再是芯片了。三、逐行拆解实现HTML 语义与 CSS 属性HTML 骨架的语义选择aside classnav-chip a classwordmarkStudio/a a classcta-outlineTry →/a /aside两个细节值得注意用aside而非nav。N2 不是页面主导航它只是一个附带性的悬浮标识块。aside在语义上表示与主内容互补的附带内容更贴合角落里的品牌锚点这一定位也避免辅助技术把单个 CTA 误读为导航结构。两个链接wordmark cta-outline。wordmark是品牌字标通常回到首页cta-outline是单一动作按钮。cta-outline这个名字与 C1 · Outlined chip 组件的类名一致——说明 N2 直接复用了 C1 的按钮形态这是 Hallmark 组件之间互相组合的一个实例。CSS 关键属性逐项说明.nav-chip { position: fixed; /* 脱离文档流相对视口定位 */ top: var(--space-md); /* 距视口顶部 1 个间距单位默认 1rem */ right: var(--space-md); /* 距视口右侧 1 个间距单位 */ display: inline-flex; /* 内部两个元素水平排列宽度内容自适应 */ gap: var(--space-md); /* wordmark 与 CTA 之间留出 1rem 间距 */ padding: 0.5rem 0.75rem; background: var(--color-paper); /* 纸色实底 */ border: 1px solid var(--color-rule); /* 发丝级边框 */ }属性值作用与依据position: fixed—相对视口固定不随页面滚动不占文档流N2 的定义性特征top/rightvar(--space-md)与视口边缘保持 1 个间距单位呼吸感tokens.css 中--space-md: 1remdisplay: inline-flex—让 wordmark 与 CTA 成行排列且整体宽度只包裹内容gapvar(--space-md)两个元素间的间距也走间距刻度保持体系一致padding0.5rem 0.75rem纵向 8px、横向 12px 的紧凑内边距——芯片小的关键backgroundvar(--color-paper)纸色实底与页面底色同类形成低对比的融入式存在border1px solid var(--color-rule)发丝边框勾勒轮廓不用阴影、不用圆角、不用模糊这些 token--space-md、--color-paper、--color-rule都来自 Hallmark 的全局 token 体系 site/css/tokens.css如 Specimen 主题下--color-paper: oklch(96% 0.018 80)、--color-rule: oklch(82% 0.014 75)、--space-md: 1rem。规范要求所有输出必须引用命名 token禁止在渲染中途内联裸颜色值——N2 的骨架正是这一纪律的范例。可选增强完全体的 N2 芯片把规范骨架与 Hallmark 全局纪律interaction-and-states.md 的 8 状态要求、microinteractions.md 的动效规则结合可以扩展成一个可直接上线的完整实现aside classnav-chip aria-labelSite a classwordmark href/Studio/a a classcta-outline href/startTry →/a /aside.nav-chip { position: fixed; top: var(--space-md); right: var(--space-md); z-index: var(--z-sticky-nav); /* 层级高于 in-page sticky低于 modal */ display: inline-flex; align-items: center; gap: var(--space-md); padding: 0.5rem 0.75rem; background: var(--color-paper); border: 1px solid var(--color-rule); } .nav-chip .wordmark { font-family: var(--font-display); font-size: var(--text-sm); line-height: 1; } .nav-chip .cta-outline { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.4rem 0.85rem; min-height: 44px; /* 移动端命中区域下限 */ border: 1px solid var(--color-ink); /* C1 outlined chip 形态 */ color: var(--color-ink); } .nav-chip a:hover { color: var(--color-accent); } .nav-chip a:focus-visible { outline: 2px solid var(--color-focus); /* ≥3:1 对比度焦点环不带动画 */ outline-offset: 2px; }补充说明z-index: var(--z-sticky-nav)tokens.css 中为 300确保芯片浮于页面内 sticky 元素之上但低于 modal/toast:focus-visible焦点环使用--color-focus且绝不动画化焦点环的出现——这是 SKILL.md 第 6 步 Build 的硬性纪律箭头符号→是 C1/C3 类 CTA 的惯用 adornment在 component-cookbook.md 的 CTA 变体表中可见arrow: → · ↗ · none。四、N2 的变体旋钮Variation KnobsHallmark 的每个 archetype 都带有 23 个变体旋钮——同一个原型内部通过旋钮取值产生差异避免每个 N2 都长得一样。来自 component-cookbook.md 的 N2 旋钮表旋钮可选值Anchor锚点位置top · bottom · top-right · bottom-leftContent内容theme picker主题切换· search搜索· navigation导航Backdrop背景blur毛玻璃· solid实底· none无规范骨架取的是默认组合top-right锚点 navigation 内容wordmarkCTA solid 实底。实际使用中可以改为bottom-left锚点贴合某些移动端单手操作的布局内容换成主题切换器或搜索入口把芯片做成一个漂浮的小工具Backdrop 换blur时需要参考 N5 的写法backdrop-filter: blur(14px) saturate(120%)但注意 N2 的定位是低调实底通常更符合其气质。选取旋钮值后需要在产物的 stamp 注释中声明例如/* Hallmark · macrostructure: Marquee Hero · N2 knobs: anchortop-right, contentnavigation, backdropsolid · ... */五、N2 在 Hallmark 体系中的位置路由与纪律导航原型与流派的路由component-cookbook.md 底部给出了哪个导航配哪个流派的路由表Genre / clusterDefault navAcceptable alsoeditorialN6 MastheadN1, N9modern-minimalN5 Floating pillN1, N9atmosphericN5 Floating pillN9, N4playfulN7 Brutal slabN1, N3terminal / CLIN8 Terminal commandN4 ⌘K-onlydocs / referenceN3 Side-railN1, N4可见N2 不在任何流派的默认列中——它不是默认导航而是在特定内容情境fold-heavy下主动选择的一种退场策略。同时有一条重要纪律Default away from N1.最容易被识别的 AI 指纹就是 N1wordmark 内联链接行 右侧按钮被反射性地使用。优先 N5N9只有页面真正只有 2 个目的地且流派路由允许时才用 N1。N2 正是目的地极少 首屏过载时的克制答案。此外同一页面内不允许两个 section 使用同一个 archetype连续多次 Hallmark 输出也不允许共享同一导航原型——这是贯穿 cookbook 的多样化纪律。移动端收敛规则N2 的移动端行为写在 cookbook 的 Mobile collapse — per archetype 表中|N2 Floating chip| chip remains floating; reduce padding | chip widens to support 44 px hit target; never below 280 px |具体而言60rem~960px布局断点芯片保持悬浮仅减小内边距40rem~640px排版断点芯片加宽以保证44×44px的命中区域WCAG AA 的最低可点击尺寸且芯片宽度不得低于 280px——也就是说在窄屏上它从角落小芯片收敛为顶部一条窄的固定标识条避免按钮过小难以点击。这与 cookbook 的跨切面规则一致所有命中目标在 40rem 以下必须 ≥44×44px。因此移动端完整实现应确保min-height: 44px前文示例已加入并考虑把.nav-chip在窄屏下扩展到接近全宽的细条。与整体流程的衔接在 SKILL.md 的默认 Design flow 中导航与页脚原型的选取发生在 Step 2选择 macro structure 之后Pick a nav archetype (N1–N10) and a footer archetype (Ft1–Ft8) at this step... State both picks alongside the macrostructure:Macrostructure: Marquee Hero. Nav: N5 Floating pill. Footer: Ft5 Statement. Theme: Bloom.选取 N2 时模型应在构建前明确说出Macrostructure: X · Nav: N2 Floating chip · Footer: FtY · Theme: Z并在最终产物的 CSS 头部留下 stamp 注释如/* Hallmark · macrostructure: name · nav: N2 Floating chip · ... */作为该项目后续 Hallmark 运行的多样化依据SKILL.md Step 6。悬浮定位的系统级佐证仓库中的实际落地例子可以佐证固定定位position: fixed/position: sticky在 Hallmark 风格站点中的实现方式。例如 site/examples/bananastudio/styles.css 实现了从全宽条 morph 成悬浮胶囊的 N10 导航外层.nav用position: sticky; top: 0悬浮态时外层背景变透明、backdrop-filter: blur(0)内层.nav__inner在.is-floating下获得border-radius: var(--radius-pill)、毛玻璃背景与阴影并用transform: translateY(12px)制造与视口顶部的呼吸间距——这印证了固定/悬浮层必须用transform而非margin/padding来制造视觉偏移避免触发布局抖动的悬浮实现铁律。N2 的position: fixed; top: var(--space-md); right: var(--space-md)是同一套悬浮层纪律在角落芯片上的简化应用。六、易踩的坑与反模式综合 N2 规范、cookbook 与全局反模式anti-patterns.md使用 N2 时要注意把 N2 做成 N5加了圆角、毛玻璃、阴影、链接列表的角落芯片就不再是 N2而是错位的 N5。N2 的克制体现在实底、发丝边框、零装饰。把 N2 做成全宽条position: fixed; left: 0; right: 0的芯片只是又一个全宽导航。N2 必须内容自适应、远离边缘留出呼吸感--space-md。内容膨胀N2 是wordmark 单一动作。塞进三四个链接、菜单按钮、搜索框就违背了它的存在理由。命中区域不足移动端芯片过小无法点击。遵循 44×44px 底线与宽度不低于 280px的收敛规则。硬编码颜色/间距骨架中的var(--color-paper)、var(--color-rule)、var(--space-md)都来自 token 体系直接写死 hex 会违反 Hallmark 的 Locked tokens 纪律SKILL.md Discipline 3。与 C4/N4/N5 混淆记住三条分界线——C4 是全宽底部条N4 是默认不可见的 ⌘K 导航N5 是顶部居中、带模糊阴影的完整胶囊导航。N2 是角落锚定、始终可见、极简实底芯片。七、小结N2 · Floating chip 是 Hallmark 导航原型中最小存在感的选项一个position: fixed钉在角落的aside内容只有 wordmark 加一个cta-outline动作纸色实底、发丝边框、不占文档流。它服务的是 fold-heavy 页面——当传统导航会与首屏内容争抢权重时用退场换取内容舞台同时保持品牌锚点与单一转化路径的常驻可见。完整骨架与逐属性拆解见 N2 组件规范 与本文第三节变体旋钮、流派路由与移动端收敛规则见 component-cookbook.md依赖的颜色/间距/层级 token 见 site/css/tokens.css悬浮层实现纪律的完整代码示例见 site/examples/bananastudio/styles.cssN10 morph 导航与 floating-nav.md相邻原型对比可参考 C4 Sticky bottom bar、N4 Hidden behind ⌘K、N5 Floating pill。在把 N2 纳入你的页面构建时记得遵循 Hallmark 的两条铁律选取后要在 stamp 中声明旋钮取值且连续输出不重复使用同一导航原型——这才是看起来是设计出来的而不是生成出来的的底层机制。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考