Hallmark N5 Floating Pill 导航原型实战用悬浮胶囊导航摆脱 AI 默认的顶栏指纹【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark悬浮胶囊Floating Pill是 Hallmark 设计技能中用于现代极简与氛围感页面的首选导航原型一个明显脱离页面边缘、悬浮于视口顶部的圆角胶囊配合柔和模糊背景与阴影呈现 Vercel、Linear、Framer、Raycast 一脉的当代现代极简语汇。本文以 n5-floating-pill.md 为骨架结合 Hallmark 的组件路由表、主题 token 体系与 slop-test 门禁完整讲解 N5 的定位、可复制的 HTML/CSS 实现、变化旋钮、移动端折叠行为以及它与其他导航原型N1、N2、N10、N7的边界——读完即可在真实页面中落地一个不露 AI 痕迹的顶部导航。N5 是什么定义与设计语言N5 Floating pill 的完整定义只有一句话但信息密度很高一个圆角全胶囊导航明显脱离页面边缘距顶部约var(--space-md)柔和模糊背景柔和阴影。读感为当代现代极简——Vercel、Linear、Framer、Raycast。拆开来看这句话锁定了四个不可妥协的视觉属性全胶囊形态——border-radius: 999px导航整体是一个胶囊而不是带圆角末端的全宽条明显脱离visibly detached——胶囊与页面四边都有间距position: fixed悬停于内容之上这是它与全宽顶栏的本质区别顶部偏移约var(--space-md)——利用 Hallmark 4pt 间距刻度的语义 token在 tokens.css 中--space-md: 1rem而不是随手写一个魔数软模糊 软阴影——backdrop-filter模糊让胶囊下方的 hero 表面透出来形成玻璃质感这是它读起来当代而非模板的关键。在 Hallmark 的组件体系里N5 属于导航原型家族N1–N10的一员由 component-cookbook.md 的 Archetype index 索引具体实现细节单独存放在references/components/n5-floating-pill.md。选型工作流在 SKILL.md 第 2 步先定宏观结构macrostructure再定导航N#与页脚Ft#原型一个典型页面只加载 5–7 个原型文件N5 就是其中之一。何时用、何时不用适用场景与边界文档给出了明确的判定条件Use when适用页面属于 modern-minimal 或 atmospheric 流派且 hero 区域有清晰的表面或图像可供胶囊的模糊效果覆盖——即模糊有东西可透而不是透出一片空白。Dont confuse with勿混淆N1 Wordmark 2 links——全宽顶栏wordmark 居左、链接居右占满整行N2 Floating chip——角落锚定的悬浮小芯片只含 wordmark 单个动作不参与文档流。这一点在 component-cookbook.md 的导航路由表中被进一步固化N5 是多个流派在 genre 路由上的默认项Genre / 主题簇默认导航也可接受modern-minimalSpecimen · Quiet · Coral · Violet · PlumeN5 Floating pillN1, N9atmosphericBloom · Aurora · Halo · MidnightN5 Floating pill模糊背景烘托氛围N9, N4editorial / playful / terminal / docs各自流派默认如 N6 Masthead、N7 Brutal slab见路由表值得注意的是流派文件中的禁用清单editorial 流派明确禁止 N5modern-minimal vocabularyplayful 流派同样禁止fights the loud register。N5 是流派敏感的组件——选型必须与页面整体语汇一致而不是所有页面都用它。从 structure.md 的结构映射表可以进一步看到N5 主要绑定在 Bloom、Coral、Halo、Midnight、Violet、Specimen 等主题上与 Ft5 Statement、Ft2 Inline single line 等页脚原型搭配使用。可复制的完整实现HTML 与 CSS文档给出的最小骨架可直接复制使用。HTML 结构如下nav classnav-pill aria-labelPrimary a classwordmarkStudio/a ul classnav-pill__linksliaCatalog/a/liliaVoice/a/li/ul a classcta-fillGet →/a /nav配套 CSS 是 N5 的核心资产.nav-pill { position: fixed; inset: var(--space-md) auto auto 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: var(--space-md); padding: 0.5rem 0.875rem; background: color-mix(in oklch, var(--color-paper) 78%, transparent); backdrop-filter: blur(14px) saturate(120%); border: var(--rule-hair) solid var(--color-rule); border-radius: 999px; box-shadow: 0 8px 24px -12px oklch(0% 0 0 / 0.18); z-index: 20; }逐行解读这份 CSS每一行都对应文档定义中的一个属性position: fixed; inset: var(--space-md) auto auto 50%——固定定位、顶部偏移一个--space-md、水平居中于视口左边界固定在 50%。这是悬浮且脱离页面的物理基础。Hallmark 要求所有颜色/间距/字体引用命名 token--space-md在 tokens.css 中定义为1rem。transform: translateX(-50%)——配合left: 50%实现真正的水平居中。inset与transform组合是文档推荐的写法避免使用margin这种会影响布局的居中方式。display: inline-flex; align-items: center; gap: var(--space-md)——胶囊是内容尺寸content-sized的inline-flex保证它只包住内容宽度而不是撑满整行。gap: var(--space-md)1rem统一 wordmark、链接组与 CTA 之间的间距。padding: 0.5rem 0.875rem——胶囊内部的呼吸空间使用 rem 相对单位随根字号缩放。background: color-mix(in oklch, var(--color-paper) 78%, transparent)——用color-mix把主题纸张色与透明混合到 78% 不透明度。Hallmark 全面使用 OKLCH 色彩空间见 color.md 与 tokens.css 的--color-paper: oklch(96% 0.018 80)color-mix让胶囊底色自动适配任意主题而不需要为每个主题手写透明度。backdrop-filter: blur(14px) saturate(120%)——模糊 饱和度提升是玻璃质感的两半模糊柔化背后的图像saturate(120%)防止 blur 把颜色洗灰。这正是文档所说hero 有表面可透时模糊才有意义的物理原因。border: var(--rule-hair) solid var(--color-rule)——极细描边。--rule-hair在 tokens.css 中定义为0.5px--color-rule是主题的分隔线色。这层描边让胶囊在浅色/深色背景上都能切出边界。border-radius: 999px——全胶囊。注意 Hallmark 的 token 体系中也有--radius-pilltokens.css在 soft 流派主题Garden、Studio、Quiet、Plume中被覆盖为圆角值在 Specimen 等方角主题中为0。落地时既可按文档写死999px表达全胶囊这一不可协商的属性也可在确认主题提供圆角--radius-pill时改为引用该 token 以保持 token 纪律。box-shadow: 0 8px 24px -12px oklch(0% 0 0 / 0.18)——柔和阴影垂直偏移 8px、模糊 24px、扩散 -12px透明度 18%。软阴影三字背后是负扩散值——它让阴影只出现在下方并保持柔和而不是一个生硬的矩形投影。z-index: 20——悬浮层需要高于页面内容层确保滚动时胶囊始终压在上方。用 token 体系落地从原型到主题自适应原型文件为了可读性直接写了var(--color-paper)、var(--color-rule)等 token 名。这些 token 在 tokens.css 中每个主题都有定义例如 Specimen 主题的--color-paper是亮燕麦色oklch(96% 0.018 80)L16而暗色主题L121 附近的--color-paper是oklch(15% 0.022 250)。由于 N5 完全通过 token 取色同一份.nav-pill样式在亮暗主题间切换时无需改动任何代码——这是 Hallmark「Locked tokens — no mid-render improvisation」纪律见 SKILL.md Discipline 3在组件层的直接收益。变化旋钮同一原型的三根调节杆按 component-cookbook.md 的 within-archetype variation knobs 表N5 有三根可调旋钮每次落地必须显式选择并写进 stamp 注释防止每个 N5 都长一样旋钮可选值说明Width宽度内容尺寸 · 最大 ~720px · 最大 ~560px内容尺寸是文档默认链接多时可设上限配合max-widthBackdrop背景模糊饱和默认 · 实色 · 微妙渐变实色用于无图像可透的页面渐变用于氛围感更强的场景Anchor锚点顶部居中默认 · 右上 · 左上居中是最稳的默认偏置锚点用于不对称版式stamp 的书写格式参照 SKILL.md Step 6例如/* Hallmark · macrostructure: Marquee Hero · N5 pill knobs: width~560px, backdropblursaturate, anchortop-centred · ... */移动端折叠两个断点下的行为变化N5 是悬浮组件但移动端不能简单缩小了事。按 component-cookbook.md 的 Mobile collapse 规则两个断点行为如下60rem~960px以下布局断点胶囊丢掉链接列表只保留 wordmark CTA仍然保持脱离页面边缘的悬浮状态——链接不是挤进胶囊而是被裁掉避免胶囊被撑成一条横贯屏幕的窄条。40rem~640px以下排版断点胶囊退化为顶部锚定的角落芯片——wordmark 居左、汉堡按钮居右。此时它实际上向 N2 Floating chip 的形态收敛但锚点保持在顶部。跨断点硬规则所有命中目标 ≥ 44×44pxWCAG AApadding-inline ≥ clamp(1rem, 4vw, 1.5rem)防止内容贴边。这个折叠策略与文档的反模式警告互为表里正因为胶囊必须保持内容尺寸 明显脱离链接多了在窄屏必然溢出所以折叠不是可选项而是必须实现的路径。与相邻原型的边界N1、N2、N7、N10N5 是导航原型家族里最容易变形成其他原型的一个文档与相邻原型文件共同划出了四条边界vs N1 Wordmark 2 linksn1-wordmark-2-links.md——N1 是顶部全宽栏N5 是脱离的胶囊。文档的反模式给了最锋利的判据一个 ~95% 视口宽的胶囊只是带圆角末端的全宽导航违背了 N5 的初衷。胶囊必须明显脱离、按内容定宽如果链接列表把胶囊撑过 ~720px就删掉一个链接或者干脆切换成 N1。vs N2 Floating chipn2-floating-chip.md——N2 是角落锚定的小芯片wordmark 单个动作如 Try it同样不参与文档流N5 是顶部居中的完整导航wordmark 链接组 CTA。区别在锚点位置与内容完整度。vs N7 Brutal slabn7-brutal-slab.md——N7 的反模式恰好说明了两者语汇互斥N7 不能与圆角、柔和阴影、backdrop-blur 组合一旦需要 blur 就降级到 N5一旦需要圆角就降级到 N1。N5 与 N7 分别属于soft 玻璃感与硬朗粗野两套互斥语汇。vs N10 Floating on scroll morphn10-floating-on-scroll-morph.md——N10 是N5 加一个默认顶栏态页面顶部是常规全宽栏滚动越过阈值后变形为悬浮胶囊。文档明确写N10 一个 DOM、两种视觉模式、单个 class 切换、一条时间曲线。如果你要的是常驻悬浮选 N5要的是滚动后才浮起来选 N10。真实仓库中 bananastudio/styles.css 就是 N10 的落地实现——默认态.nav是带saturate(1.4) blur(14px)的全宽栏.is-floating态下外层透明化、blur(0)平滑过渡.nav__inner变为border-radius: var(--radius-pill)的胶囊并translateY(12px)脱离顶边完整演示了N5 的视觉 N10 的滚动逻辑如何在单一 DOM 上协同。N5 在 Hallmark 工作流中的位置路由、多样化与门禁N5 不是孤立的 CSS 片段它在 Hallmark 的选型纪律中承担着明确职责1. 默认规避 N1N5–N9 优先。SKILL.md 与 component-cookbook.md 反复强调N1wordmark 链接行 按钮居右是 AI 生成页面最著名的指纹默认应取 N5–N9只有页面确实只有 2 个目的地且流派路由允许时才回头用 N1。N5 正是这个反指纹策略在前两个流派上的主力。2. 多样化规则延伸至导航。同一会话中连续两次 Hallmark 输出不得使用同一导航原型上一次用了 N5下一次同一流派就必须从路由表的也可接受列选 N1 或 N9。选型结果记录在.hallmark/log.json与 CSS stamp 注释中供下一次运行读取见 SKILL.md Step 2.5。3. slop-test 门 51 的判据。slop-test.md 的第 51 门Nav fingerprint把wordmark 左 4–5 个行内链接 按钮右 全宽 1px 底边线 白底的 AI 默认导航列为失败项并要求输出在 N1/N3/N4/N5/N6/N7/N8/N9 之间轮换——N5 是被点名的合规形态之一。而 anti-patterns.md 进一步给出修复路径从导航路由表选型N5 对应 modern-minimal / atmospheric 流派。4. study 动词的识别特征。study.md 在 URL 模式中通过 DOM 识别导航原型position: fixedrounded-full即判定为 N5 Floating pill。这意味着 N5 不仅是我们要输出的形态也是我们从参考站点提取设计 DNA 时能识别出的形态——它是现代极简流派的一个客观可检测指纹。反模式速查什么情况下 N5 会翻车综合文档与相邻规则落地 N5 时有五条红线胶囊撑成 ~95% 视口宽——只是带圆角的全宽导航违背明显脱离 内容尺寸的初衷。链接超过 ~720px 时删链接或切 N1。模糊没有东西可透——页面是纯色无层次背景时backdrop-filter形同虚设此时应按旋钮切到实色背景solid backdrop。在 editorial / playful 流派强用 N5——语汇冲突被流派文件明令禁止。与 N7 语汇混搭——圆角、软阴影、blur 同时出现在粗野风导航上。移动端不做折叠——在 40rem 以下还保留完整链接列表胶囊必然溢出视口违反无横向滚动的硬门禁。N5 的价值恰恰在于克制一个胶囊、一种模糊、一条阴影、一处居中——把细节投入 token 自适、断点折叠与流派匹配而不是加更多。这正是它区别于 AI 默认导航的地方。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Hallmark N5 Floating Pill 导航原型实战：用悬浮胶囊导航摆脱 AI 默认的顶栏指纹
Hallmark N5 Floating Pill 导航原型实战用悬浮胶囊导航摆脱 AI 默认的顶栏指纹【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark悬浮胶囊Floating Pill是 Hallmark 设计技能中用于现代极简与氛围感页面的首选导航原型一个明显脱离页面边缘、悬浮于视口顶部的圆角胶囊配合柔和模糊背景与阴影呈现 Vercel、Linear、Framer、Raycast 一脉的当代现代极简语汇。本文以 n5-floating-pill.md 为骨架结合 Hallmark 的组件路由表、主题 token 体系与 slop-test 门禁完整讲解 N5 的定位、可复制的 HTML/CSS 实现、变化旋钮、移动端折叠行为以及它与其他导航原型N1、N2、N10、N7的边界——读完即可在真实页面中落地一个不露 AI 痕迹的顶部导航。N5 是什么定义与设计语言N5 Floating pill 的完整定义只有一句话但信息密度很高一个圆角全胶囊导航明显脱离页面边缘距顶部约var(--space-md)柔和模糊背景柔和阴影。读感为当代现代极简——Vercel、Linear、Framer、Raycast。拆开来看这句话锁定了四个不可妥协的视觉属性全胶囊形态——border-radius: 999px导航整体是一个胶囊而不是带圆角末端的全宽条明显脱离visibly detached——胶囊与页面四边都有间距position: fixed悬停于内容之上这是它与全宽顶栏的本质区别顶部偏移约var(--space-md)——利用 Hallmark 4pt 间距刻度的语义 token在 tokens.css 中--space-md: 1rem而不是随手写一个魔数软模糊 软阴影——backdrop-filter模糊让胶囊下方的 hero 表面透出来形成玻璃质感这是它读起来当代而非模板的关键。在 Hallmark 的组件体系里N5 属于导航原型家族N1–N10的一员由 component-cookbook.md 的 Archetype index 索引具体实现细节单独存放在references/components/n5-floating-pill.md。选型工作流在 SKILL.md 第 2 步先定宏观结构macrostructure再定导航N#与页脚Ft#原型一个典型页面只加载 5–7 个原型文件N5 就是其中之一。何时用、何时不用适用场景与边界文档给出了明确的判定条件Use when适用页面属于 modern-minimal 或 atmospheric 流派且 hero 区域有清晰的表面或图像可供胶囊的模糊效果覆盖——即模糊有东西可透而不是透出一片空白。Dont confuse with勿混淆N1 Wordmark 2 links——全宽顶栏wordmark 居左、链接居右占满整行N2 Floating chip——角落锚定的悬浮小芯片只含 wordmark 单个动作不参与文档流。这一点在 component-cookbook.md 的导航路由表中被进一步固化N5 是多个流派在 genre 路由上的默认项Genre / 主题簇默认导航也可接受modern-minimalSpecimen · Quiet · Coral · Violet · PlumeN5 Floating pillN1, N9atmosphericBloom · Aurora · Halo · MidnightN5 Floating pill模糊背景烘托氛围N9, N4editorial / playful / terminal / docs各自流派默认如 N6 Masthead、N7 Brutal slab见路由表值得注意的是流派文件中的禁用清单editorial 流派明确禁止 N5modern-minimal vocabularyplayful 流派同样禁止fights the loud register。N5 是流派敏感的组件——选型必须与页面整体语汇一致而不是所有页面都用它。从 structure.md 的结构映射表可以进一步看到N5 主要绑定在 Bloom、Coral、Halo、Midnight、Violet、Specimen 等主题上与 Ft5 Statement、Ft2 Inline single line 等页脚原型搭配使用。可复制的完整实现HTML 与 CSS文档给出的最小骨架可直接复制使用。HTML 结构如下nav classnav-pill aria-labelPrimary a classwordmarkStudio/a ul classnav-pill__linksliaCatalog/a/liliaVoice/a/li/ul a classcta-fillGet →/a /nav配套 CSS 是 N5 的核心资产.nav-pill { position: fixed; inset: var(--space-md) auto auto 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: var(--space-md); padding: 0.5rem 0.875rem; background: color-mix(in oklch, var(--color-paper) 78%, transparent); backdrop-filter: blur(14px) saturate(120%); border: var(--rule-hair) solid var(--color-rule); border-radius: 999px; box-shadow: 0 8px 24px -12px oklch(0% 0 0 / 0.18); z-index: 20; }逐行解读这份 CSS每一行都对应文档定义中的一个属性position: fixed; inset: var(--space-md) auto auto 50%——固定定位、顶部偏移一个--space-md、水平居中于视口左边界固定在 50%。这是悬浮且脱离页面的物理基础。Hallmark 要求所有颜色/间距/字体引用命名 token--space-md在 tokens.css 中定义为1rem。transform: translateX(-50%)——配合left: 50%实现真正的水平居中。inset与transform组合是文档推荐的写法避免使用margin这种会影响布局的居中方式。display: inline-flex; align-items: center; gap: var(--space-md)——胶囊是内容尺寸content-sized的inline-flex保证它只包住内容宽度而不是撑满整行。gap: var(--space-md)1rem统一 wordmark、链接组与 CTA 之间的间距。padding: 0.5rem 0.875rem——胶囊内部的呼吸空间使用 rem 相对单位随根字号缩放。background: color-mix(in oklch, var(--color-paper) 78%, transparent)——用color-mix把主题纸张色与透明混合到 78% 不透明度。Hallmark 全面使用 OKLCH 色彩空间见 color.md 与 tokens.css 的--color-paper: oklch(96% 0.018 80)color-mix让胶囊底色自动适配任意主题而不需要为每个主题手写透明度。backdrop-filter: blur(14px) saturate(120%)——模糊 饱和度提升是玻璃质感的两半模糊柔化背后的图像saturate(120%)防止 blur 把颜色洗灰。这正是文档所说hero 有表面可透时模糊才有意义的物理原因。border: var(--rule-hair) solid var(--color-rule)——极细描边。--rule-hair在 tokens.css 中定义为0.5px--color-rule是主题的分隔线色。这层描边让胶囊在浅色/深色背景上都能切出边界。border-radius: 999px——全胶囊。注意 Hallmark 的 token 体系中也有--radius-pilltokens.css在 soft 流派主题Garden、Studio、Quiet、Plume中被覆盖为圆角值在 Specimen 等方角主题中为0。落地时既可按文档写死999px表达全胶囊这一不可协商的属性也可在确认主题提供圆角--radius-pill时改为引用该 token 以保持 token 纪律。box-shadow: 0 8px 24px -12px oklch(0% 0 0 / 0.18)——柔和阴影垂直偏移 8px、模糊 24px、扩散 -12px透明度 18%。软阴影三字背后是负扩散值——它让阴影只出现在下方并保持柔和而不是一个生硬的矩形投影。z-index: 20——悬浮层需要高于页面内容层确保滚动时胶囊始终压在上方。用 token 体系落地从原型到主题自适应原型文件为了可读性直接写了var(--color-paper)、var(--color-rule)等 token 名。这些 token 在 tokens.css 中每个主题都有定义例如 Specimen 主题的--color-paper是亮燕麦色oklch(96% 0.018 80)L16而暗色主题L121 附近的--color-paper是oklch(15% 0.022 250)。由于 N5 完全通过 token 取色同一份.nav-pill样式在亮暗主题间切换时无需改动任何代码——这是 Hallmark「Locked tokens — no mid-render improvisation」纪律见 SKILL.md Discipline 3在组件层的直接收益。变化旋钮同一原型的三根调节杆按 component-cookbook.md 的 within-archetype variation knobs 表N5 有三根可调旋钮每次落地必须显式选择并写进 stamp 注释防止每个 N5 都长一样旋钮可选值说明Width宽度内容尺寸 · 最大 ~720px · 最大 ~560px内容尺寸是文档默认链接多时可设上限配合max-widthBackdrop背景模糊饱和默认 · 实色 · 微妙渐变实色用于无图像可透的页面渐变用于氛围感更强的场景Anchor锚点顶部居中默认 · 右上 · 左上居中是最稳的默认偏置锚点用于不对称版式stamp 的书写格式参照 SKILL.md Step 6例如/* Hallmark · macrostructure: Marquee Hero · N5 pill knobs: width~560px, backdropblursaturate, anchortop-centred · ... */移动端折叠两个断点下的行为变化N5 是悬浮组件但移动端不能简单缩小了事。按 component-cookbook.md 的 Mobile collapse 规则两个断点行为如下60rem~960px以下布局断点胶囊丢掉链接列表只保留 wordmark CTA仍然保持脱离页面边缘的悬浮状态——链接不是挤进胶囊而是被裁掉避免胶囊被撑成一条横贯屏幕的窄条。40rem~640px以下排版断点胶囊退化为顶部锚定的角落芯片——wordmark 居左、汉堡按钮居右。此时它实际上向 N2 Floating chip 的形态收敛但锚点保持在顶部。跨断点硬规则所有命中目标 ≥ 44×44pxWCAG AApadding-inline ≥ clamp(1rem, 4vw, 1.5rem)防止内容贴边。这个折叠策略与文档的反模式警告互为表里正因为胶囊必须保持内容尺寸 明显脱离链接多了在窄屏必然溢出所以折叠不是可选项而是必须实现的路径。与相邻原型的边界N1、N2、N7、N10N5 是导航原型家族里最容易变形成其他原型的一个文档与相邻原型文件共同划出了四条边界vs N1 Wordmark 2 linksn1-wordmark-2-links.md——N1 是顶部全宽栏N5 是脱离的胶囊。文档的反模式给了最锋利的判据一个 ~95% 视口宽的胶囊只是带圆角末端的全宽导航违背了 N5 的初衷。胶囊必须明显脱离、按内容定宽如果链接列表把胶囊撑过 ~720px就删掉一个链接或者干脆切换成 N1。vs N2 Floating chipn2-floating-chip.md——N2 是角落锚定的小芯片wordmark 单个动作如 Try it同样不参与文档流N5 是顶部居中的完整导航wordmark 链接组 CTA。区别在锚点位置与内容完整度。vs N7 Brutal slabn7-brutal-slab.md——N7 的反模式恰好说明了两者语汇互斥N7 不能与圆角、柔和阴影、backdrop-blur 组合一旦需要 blur 就降级到 N5一旦需要圆角就降级到 N1。N5 与 N7 分别属于soft 玻璃感与硬朗粗野两套互斥语汇。vs N10 Floating on scroll morphn10-floating-on-scroll-morph.md——N10 是N5 加一个默认顶栏态页面顶部是常规全宽栏滚动越过阈值后变形为悬浮胶囊。文档明确写N10 一个 DOM、两种视觉模式、单个 class 切换、一条时间曲线。如果你要的是常驻悬浮选 N5要的是滚动后才浮起来选 N10。真实仓库中 bananastudio/styles.css 就是 N10 的落地实现——默认态.nav是带saturate(1.4) blur(14px)的全宽栏.is-floating态下外层透明化、blur(0)平滑过渡.nav__inner变为border-radius: var(--radius-pill)的胶囊并translateY(12px)脱离顶边完整演示了N5 的视觉 N10 的滚动逻辑如何在单一 DOM 上协同。N5 在 Hallmark 工作流中的位置路由、多样化与门禁N5 不是孤立的 CSS 片段它在 Hallmark 的选型纪律中承担着明确职责1. 默认规避 N1N5–N9 优先。SKILL.md 与 component-cookbook.md 反复强调N1wordmark 链接行 按钮居右是 AI 生成页面最著名的指纹默认应取 N5–N9只有页面确实只有 2 个目的地且流派路由允许时才回头用 N1。N5 正是这个反指纹策略在前两个流派上的主力。2. 多样化规则延伸至导航。同一会话中连续两次 Hallmark 输出不得使用同一导航原型上一次用了 N5下一次同一流派就必须从路由表的也可接受列选 N1 或 N9。选型结果记录在.hallmark/log.json与 CSS stamp 注释中供下一次运行读取见 SKILL.md Step 2.5。3. slop-test 门 51 的判据。slop-test.md 的第 51 门Nav fingerprint把wordmark 左 4–5 个行内链接 按钮右 全宽 1px 底边线 白底的 AI 默认导航列为失败项并要求输出在 N1/N3/N4/N5/N6/N7/N8/N9 之间轮换——N5 是被点名的合规形态之一。而 anti-patterns.md 进一步给出修复路径从导航路由表选型N5 对应 modern-minimal / atmospheric 流派。4. study 动词的识别特征。study.md 在 URL 模式中通过 DOM 识别导航原型position: fixedrounded-full即判定为 N5 Floating pill。这意味着 N5 不仅是我们要输出的形态也是我们从参考站点提取设计 DNA 时能识别出的形态——它是现代极简流派的一个客观可检测指纹。反模式速查什么情况下 N5 会翻车综合文档与相邻规则落地 N5 时有五条红线胶囊撑成 ~95% 视口宽——只是带圆角的全宽导航违背明显脱离 内容尺寸的初衷。链接超过 ~720px 时删链接或切 N1。模糊没有东西可透——页面是纯色无层次背景时backdrop-filter形同虚设此时应按旋钮切到实色背景solid backdrop。在 editorial / playful 流派强用 N5——语汇冲突被流派文件明令禁止。与 N7 语汇混搭——圆角、软阴影、blur 同时出现在粗野风导航上。移动端不做折叠——在 40rem 以下还保留完整链接列表胶囊必然溢出视口违反无横向滚动的硬门禁。N5 的价值恰恰在于克制一个胶囊、一种模糊、一条阴影、一处居中——把细节投入 token 自适、断点折叠与流派匹配而不是加更多。这正是它区别于 AI 默认导航的地方。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考