Hallmark 设计技能组件解析N9 Edge-Aligned Minimal 极简边缘对齐导航的实现与应用【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmarkHallmark 是面向 Claude Code、Cursor、Codex 等 AI 编程助手的反 AI-Slop 设计技能详见 skills/hallmark/SKILL.md。本篇文章围绕其 46 个组件原型中的导航原型 N9Edge-Aligned Minimal边缘对齐极简展开逐行拆解它的 DOM/CSS 最小实现、token 依赖、变异旋钮、响应式行为与反模式边界并结合仓库内的真实落地案例wayfare、loafer给出可复用的实战方案。读完你将能够判断何种页面配得上这种用留白说话的导航、用 Hallmark token 体系把它写成可运行的代码并在多页面项目中正确应用导航多样化规则。一、N9 是什么把空当作设计本体N9 的完整定义记录在组件原型的源文件 n9-edge-aligned-minimal.md 中一句话概括是Wordmark hard-left, single CTA hard-right, vast empty space between, no link row at all.字标高靠左唯一 CTA 硬靠右中间是巨大的空白没有任何链接行。它的核心主张是The absence is the design——缺省本身就是设计。与之形成强烈共鸣的参考对象是 Apple 产品页、Carl Hauser 的作品集和奢侈品站点这些页面从不试图填满导航栏而是让导航栏自己证明品牌自信。在 Hallmark 的组件分类体系里见 component-cookbook.md § NavigationN9 是 10 个导航原型之一与 N1 Wordmark 2 links、N2 Floating chip、N5 Floating pill、N8 Terminal command 等并列但它是唯一一个完全放弃中间链接区的方案。二、适用场景只有品牌配得上这份安静时才用它原文档用Use when明确划定了边界Use when:the page is luxury / quiet / Atelier / Salon and the brand earns the silence.页面是奢华 / 安静 / Atelier / Salon 气质且品牌配得上这份安静。翻译成可操作的判断标准需要同时满足两个条件内容体量整站真正需要导航可达的目的地极少一两个字标高 一个 CTA 就能覆盖全部关键动作进入、购买、预约等。品牌气质属于高端、克制的审美谱系。Hallmark 的 22 个主题中Atelier工作室、Salon沙龙、Quiet安静这类主题天然适配而 Brutal粗野、Manifesto宣言、Riso孔版印刷等强表现力主题则需要谨慎它们的页面节奏更嘈杂边缘对齐的空荡感反而会显得没做完。从 genre 维度看component-cookbook.md § Navigation routing 表格给出了更精确的路由结论在editorial编辑风与modern-minimal现代极简两个 genre 下N9 都是N6/N5 默认之外的 acceptable 备选在atmospheric氛围风下N9 同样被允许与 N4 并列。一句话判断口诀如果你的页面像一间只摆了一张桌子的画廊而不是一个塞满货架的超市N9 就是对的。三、与 N1 的边界别把中间填满原文档专门强调Dont confuse with:N1 Wordmark 2 linkswhich fills the middle.不要与 N1 混淆——N1 会把中间填满。N1 的定义见 n1-wordmark-2-links.md同样是字标在左、链接在右但 N1 是顶部通栏 两个文本链接的常规结构。二者的分界线是中间区域是否有内容。维度N9 Edge-Aligned MinimalN1 Wordmark 2 links结构字标 唯一 CTA两端对齐字标 两个文本链接顶部通栏中间区域完全留空space-between撑开被链接行占据设计主张缺省即设计少即是多但仍以链接为载体适合场景luxury / quiet / Atelier / Salon页面确实只有 2 个目的地需要特别注意的是SKILL.md 对 N1 有明确的使用纪律Default away from N1——N1 是 AI 生成页面最常见的指纹字标 4~5 个内联链接 右侧按钮anti-patterns.md § The AI nav 将其列为最容易被识别的 AI 导航形态。因此只有当页面确实只有 2 个目的地且 genre 路由表允许时才允许回落到 N1其余情况优先从 N5–N9 中选择。四、最小实现HTML CSS 逐行拆解原文档给出了一段可以直接复制的最小实现这是整个 N9 原型的骨架我们在此基础上结合仓库 token 体系逐行深入。4.1 结构HTMLheader classnav-edge a classwordmarkStudio/a a classcta-outlineGet →/a /header分析这 3 行 DOM 的结构语义使用header而非nav因为 N9 的语义重心是页面品牌头而非导航容器若页面还有第二个导航元素如页脚链接header是正确的 landmark 划分。若想强化辅助技术语义可在header内部加rolebanner参见仓库 loafer 示例_tests/12-loafer/index.html的写法。.wordmark是唯一标识页面的品牌字标。.cta-outline是唯一的行动入口采用描边outline样式以保持低调的奢侈感——注意 N9 默认 CTA 形态就是 outlined而不是实心按钮见第六节变异旋钮。4.2 关键样式CSS.nav-edge { display: flex; justify-content: space-between; align-items: center; padding: var(--space-md) var(--page-gutter); } .nav-edge .wordmark { font-family: var(--font-display); font-size: var(--text-md); }这三行样式的核心机制逐一拆解justify-content: space-between是 N9 的发动机。它把两个子元素分别推到行的左右两端中间的vast empty space全部由布局自动生成——不需要任何占位元素、不需要绝对定位、不需要 width 计算留白是免费的。这是 N9 与手工塞 margin 把两端撑开做法之间的本质区别留白来自布局规则而不是手写数字。align-items: center保证字标与 CTA 在垂直方向上居中对齐视觉重心稳定。padding: var(--space-md) var(--page-gutter)让导航不贴边纵向用--space-md1rem即 16px横向用--page-gutter。--page-gutter在 site/css/tokens.css 中定义为clamp(1.25rem, 4vw, 3rem)意思是最小 20px、随视口宽度增长、封顶 48px。这让 N9 的左右空距天然响应式。字标用var(--font-display)var(--text-md)--font-display是主题的展示字体族如 editor 系主题为Fraunces, Tiempos, ui-serif, Georgia, serif现代极简系主题为Geist, Futura, Avenir Next, ui-sans-serif, sans-serif--text-md为 1.125rem18px。字标不必巨大——N9 的奢侈感恰恰来自字标不大、但周围很空。注意这段 CSS 只字未提 CTA 的样式cta-outline的描边形态通常来自页面级按钮体系如--color-ink描边 透明底建议把它接到主题统一的按钮 token 上而不是在导航里另写一套颜色。五、从源码看 token 依赖N9 依赖哪些设计变量N9 之所以能保持几乎不写代码前提是仓库的 token 体系把视觉决策都收编成了命名变量。以 site/css/tokens.css 的默认编辑系主题为参照N9 实际依赖的 token 有Token值编辑系默认作用--space-md1rem导航纵向内边距4pt 节奏尺见同文件--space-*系列0.125rem→13rem--page-gutterclamp(1.25rem, 4vw, 3rem)导航横向内边距随视口平滑伸缩--font-displayFraunces, Tiempos, ui-serif, Georgia, serif字标字体--text-md1.125rem字标字号约 18px--color-inkoklch(18% 0.014 60)字标/CTA 文字颜色深墨色--color-ruleoklch(82% 0.014 75)可选的 1px 底部分隔线hairline rule这条依赖链印证了 SKILL.md 的Locked tokens纪律见 anti-patterns.md § Mid-render token improvisation一旦主题锁定导航里的每个颜色、每个字体都必须通过var(--token)引用不允许出现手写的#000或内联font-family。N9 因为代码量极小反而是最容易犯图省事直接写死颜色的地方实际实现时务必走 token。六、变异旋钮同一个 N9三种不同的指纹组件原型的源文件只有 15 行但 Hallmark 的多样性纪律要求同一原型不能每次都长得一模一样。根据 component-cookbook.md § Within-archetype variation knobs 的表格N9 有三个可以独立选择的变异维度旋钮可选值影响CTA shapeCTA 形态outlined描边·filled pill实心胶囊·textarrow文字 箭头决定唯一行动入口的视觉权重描边最克制实心胶囊最强调文字箭头最轻Wordmark字标风格serif italic衬线斜体·sans无衬线·monospace等宽呼应主题的 display style 轴线编辑系常用 serif italic技术系可用 monoPadding-block纵向内边距tight紧凑·default默认·spacious宽松控制导航的高度与呼吸感spacious 更适合奢华系页面选用规则每次输出 N9 时必须为三个旋钮各选一个值并把选择写进 CSS 顶部的 macrostructure 印章注释里。例如/* Hallmark · macrostructure: Long Document · N9 knobs: ctatextarrow, * wordmarkserif-italic, paddingtight · theme: Atelier */这一机制与连续两次输出不得使用相同导航原型的多样性规则见 SKILL.md § Design flow共同作用确保即使相邻页面都选中 N9它们的可感知形态仍然不同。七、响应式表现N9 是断点友好型导航component-cookbook.md § Mobile collapse 专门为每个原型定义了窄视口行为N9 的两档表现是60rem约 960px以下unchangedalready designed for breathing room——因为 N9 本来就只有两个元素、没有链接行堆叠与否意义不大保持原样即可。40rem约 640px以下字标与 CTA 保持两端对齐edge-aligned但CTA 需要补足 44×44px 的最小触控目标WCAG AA 硬性要求仓库在 component-cookbook.md § Mobile collapse 的 Cross-cutting rules 中明确列出。实现示例media (max-width: 40rem) { .nav-edge { min-height: 44px; } .nav-edge .cta-outline { min-height: 44px; display: inline-flex; align-items: center; padding-inline: var(--space-md); } }另需遵守两条跨切规则页面容器的padding-inline不低于clamp(1rem, 4vw, 1.5rem)防止内容贴屏幕边缘点击文案按钮、导航链接一律不允许折行成两行详见 anti-patterns.md § Wrap-to-two-lines clickable text。N9 的 CTA 文案因此也应保持极短如 Get → / Book / Visit这本身就是留白哲学的一部分。八、反模式往中间塞链接是最常见的 N9 背叛原文档以Anti-pattern明确警告Anti-pattern:adding 4 inline links between the wordmark and CTA to fill the space. The spaceisthe design; if you fill it, youve made N1 with extra steps.反模式为了填满空间在字标和 CTA 之间塞 4 个内联链接。空间本身就是设计一旦填满你就只是把 N1 做得更啰嗦而已。这条反模式有双重含义行为层面往中间加链接会让 N9 退化成多链接版本的 N1既丢掉了留白带来的奢侈感又引入了 AI 导航的识别指纹anti-patterns.md § The AI nav 明确定义字标靠左 4~5 个内联链接 右侧按钮 最典型的 AI 导航。结构层面说明设计决策不能被填空焦虑驱动。如果你发现自己正想加点东西让导航更完整正确动作是停下来重新评估 N9 是否适用而不是往 N9 里加料。仓库中另一个可对照的教训是 N5 Floating pilln5-floating-pill.md的反模式一个占满 95% 视口宽度的胶囊其实是带圆角的通栏导航。两者同源——原型被破坏往往是往里面塞了不该塞的东西。九、仓库实证wayfare 的 N9 落地与 loafer 的对照9.1 wayfare印章标注 N9 的真实页面仓库示例页 wayfare 的样式文件 site/examples/wayfare/style.css 第 3 行的 Hallmark 印章明确写着nav: N9说明该页面正是按 N9 原型构建的实战样本。其导航实现在 site/examples/wayfare/index.html 第 45–56 行header classshell nav classmasthead aria-labelPrimary a href# classwordmark aria-labelWayfare, homeWAYFARE/a span classmasthead-metaIssue Nº 14 · Spring 26/span div classmasthead-links a href#picksTrips/a a href#processHow/a a href#noteAbout/a a href#bookSign in/a /div /nav /header对应样式style.css 第 130–150 行使用display: grid; grid-template-columns: auto 1fr auto; align-items: baseline;布局中间列是1fr的弹性留白配合border-bottom: var(--rule-hair)的发丝分隔线。这个实例展示了 N9 家族的核心手法字标高靠左配合✱强调色前缀、用弹性列产生留白、baseline 对齐、1px hairline 收底。同时也要如实指出该页面在 N9 的骨架上保留了极简的 issue meta 与链接行属于原型在真实项目中的适应性演绎——这正说明了原型是起点不是紧身衣。9.2 loafer同一仓库里的反面对照另一个示例 loafer 则在 site/_tests/12-loafer/index.html 中使用了 N5 Floating pill 导航.nav固定定位 nav__linksnav__cta。将两者并排对比可以直观看到两种现代极简路线的取舍N9wayfare参与文档流、通栏、靠留白制造空灵——适合内容安静的页面。N5loafer脱离文档流、悬浮胶囊、毛玻璃 阴影——适合下方有明确表面或图像的 hero。同一个仓库、两个示例、两种导航指纹正是 Hallmarkstructural variety结构性多样而非只换配色理念的直观证据。十、N9 在 Hallmark 工作流中的位置要正确使用 N9需要把它放回 Hallmark 的整体流程里理解详见 SKILL.md导航原型选择发生在 Macrostructure 阶段SKILL.md 要求在设计流程第 2 步同时选定导航N1–N10与页脚Ft1–Ft8原型并声明Macrostructure: … · Nav: N9 · Footer: Ft…。N9 是页面级page-scope原型组件级任务不涉及导航选择。路由表约束editorial 与 modern-minimal genre 允许 N9作为默认 N6/N5 之外的备选在 navigation routing 表中N9 的 acceptable 列表同时出现在 editorial 和 modern-minimal 两行这使它成为跨 genre 迁移能力最强的极简导航之一。多样性规则同一项目会话内连续两次输出不得共用同一导航原型即使 genre 相同。如果上一次用了 N5这一次即便仍在 modern-minimal 下也应从路由表的 also 列N1 / N9中选择。印章记录选择结果要写进 CSS 顶部印章如nav: N9供下一次运行读取这是多样性的持久化机制。结语N9 Edge-Aligned Minimal 是 Hallmark 十个导航原型中最反直觉的一个它要求的不是加法而是减法。在 AI 生成的页面普遍用字标 4 个链接 按钮 毛玻璃填满顶部时N9 用两端对齐 一片空白提供了一种高辨识度的差异。它的实战门槛不在代码全部依赖只有 4 个 token而在于判断力——只有当品牌配得上这份安静时留白才成立。判断错了空白会变成空洞判断对了它就是整个页面最贵的一行。如需继续深入可以顺读同一 catalog 中的对照原型 n1-wordmark-2-links.md、n5-floating-pill.md、n8-terminal-command.md以及导航的完整路由规则 component-cookbook.md 与反模式清单 anti-patterns.md。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Hallmark 设计技能组件解析：N9 Edge-Aligned Minimal 极简边缘对齐导航的实现与应用
Hallmark 设计技能组件解析N9 Edge-Aligned Minimal 极简边缘对齐导航的实现与应用【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmarkHallmark 是面向 Claude Code、Cursor、Codex 等 AI 编程助手的反 AI-Slop 设计技能详见 skills/hallmark/SKILL.md。本篇文章围绕其 46 个组件原型中的导航原型 N9Edge-Aligned Minimal边缘对齐极简展开逐行拆解它的 DOM/CSS 最小实现、token 依赖、变异旋钮、响应式行为与反模式边界并结合仓库内的真实落地案例wayfare、loafer给出可复用的实战方案。读完你将能够判断何种页面配得上这种用留白说话的导航、用 Hallmark token 体系把它写成可运行的代码并在多页面项目中正确应用导航多样化规则。一、N9 是什么把空当作设计本体N9 的完整定义记录在组件原型的源文件 n9-edge-aligned-minimal.md 中一句话概括是Wordmark hard-left, single CTA hard-right, vast empty space between, no link row at all.字标高靠左唯一 CTA 硬靠右中间是巨大的空白没有任何链接行。它的核心主张是The absence is the design——缺省本身就是设计。与之形成强烈共鸣的参考对象是 Apple 产品页、Carl Hauser 的作品集和奢侈品站点这些页面从不试图填满导航栏而是让导航栏自己证明品牌自信。在 Hallmark 的组件分类体系里见 component-cookbook.md § NavigationN9 是 10 个导航原型之一与 N1 Wordmark 2 links、N2 Floating chip、N5 Floating pill、N8 Terminal command 等并列但它是唯一一个完全放弃中间链接区的方案。二、适用场景只有品牌配得上这份安静时才用它原文档用Use when明确划定了边界Use when:the page is luxury / quiet / Atelier / Salon and the brand earns the silence.页面是奢华 / 安静 / Atelier / Salon 气质且品牌配得上这份安静。翻译成可操作的判断标准需要同时满足两个条件内容体量整站真正需要导航可达的目的地极少一两个字标高 一个 CTA 就能覆盖全部关键动作进入、购买、预约等。品牌气质属于高端、克制的审美谱系。Hallmark 的 22 个主题中Atelier工作室、Salon沙龙、Quiet安静这类主题天然适配而 Brutal粗野、Manifesto宣言、Riso孔版印刷等强表现力主题则需要谨慎它们的页面节奏更嘈杂边缘对齐的空荡感反而会显得没做完。从 genre 维度看component-cookbook.md § Navigation routing 表格给出了更精确的路由结论在editorial编辑风与modern-minimal现代极简两个 genre 下N9 都是N6/N5 默认之外的 acceptable 备选在atmospheric氛围风下N9 同样被允许与 N4 并列。一句话判断口诀如果你的页面像一间只摆了一张桌子的画廊而不是一个塞满货架的超市N9 就是对的。三、与 N1 的边界别把中间填满原文档专门强调Dont confuse with:N1 Wordmark 2 linkswhich fills the middle.不要与 N1 混淆——N1 会把中间填满。N1 的定义见 n1-wordmark-2-links.md同样是字标在左、链接在右但 N1 是顶部通栏 两个文本链接的常规结构。二者的分界线是中间区域是否有内容。维度N9 Edge-Aligned MinimalN1 Wordmark 2 links结构字标 唯一 CTA两端对齐字标 两个文本链接顶部通栏中间区域完全留空space-between撑开被链接行占据设计主张缺省即设计少即是多但仍以链接为载体适合场景luxury / quiet / Atelier / Salon页面确实只有 2 个目的地需要特别注意的是SKILL.md 对 N1 有明确的使用纪律Default away from N1——N1 是 AI 生成页面最常见的指纹字标 4~5 个内联链接 右侧按钮anti-patterns.md § The AI nav 将其列为最容易被识别的 AI 导航形态。因此只有当页面确实只有 2 个目的地且 genre 路由表允许时才允许回落到 N1其余情况优先从 N5–N9 中选择。四、最小实现HTML CSS 逐行拆解原文档给出了一段可以直接复制的最小实现这是整个 N9 原型的骨架我们在此基础上结合仓库 token 体系逐行深入。4.1 结构HTMLheader classnav-edge a classwordmarkStudio/a a classcta-outlineGet →/a /header分析这 3 行 DOM 的结构语义使用header而非nav因为 N9 的语义重心是页面品牌头而非导航容器若页面还有第二个导航元素如页脚链接header是正确的 landmark 划分。若想强化辅助技术语义可在header内部加rolebanner参见仓库 loafer 示例_tests/12-loafer/index.html的写法。.wordmark是唯一标识页面的品牌字标。.cta-outline是唯一的行动入口采用描边outline样式以保持低调的奢侈感——注意 N9 默认 CTA 形态就是 outlined而不是实心按钮见第六节变异旋钮。4.2 关键样式CSS.nav-edge { display: flex; justify-content: space-between; align-items: center; padding: var(--space-md) var(--page-gutter); } .nav-edge .wordmark { font-family: var(--font-display); font-size: var(--text-md); }这三行样式的核心机制逐一拆解justify-content: space-between是 N9 的发动机。它把两个子元素分别推到行的左右两端中间的vast empty space全部由布局自动生成——不需要任何占位元素、不需要绝对定位、不需要 width 计算留白是免费的。这是 N9 与手工塞 margin 把两端撑开做法之间的本质区别留白来自布局规则而不是手写数字。align-items: center保证字标与 CTA 在垂直方向上居中对齐视觉重心稳定。padding: var(--space-md) var(--page-gutter)让导航不贴边纵向用--space-md1rem即 16px横向用--page-gutter。--page-gutter在 site/css/tokens.css 中定义为clamp(1.25rem, 4vw, 3rem)意思是最小 20px、随视口宽度增长、封顶 48px。这让 N9 的左右空距天然响应式。字标用var(--font-display)var(--text-md)--font-display是主题的展示字体族如 editor 系主题为Fraunces, Tiempos, ui-serif, Georgia, serif现代极简系主题为Geist, Futura, Avenir Next, ui-sans-serif, sans-serif--text-md为 1.125rem18px。字标不必巨大——N9 的奢侈感恰恰来自字标不大、但周围很空。注意这段 CSS 只字未提 CTA 的样式cta-outline的描边形态通常来自页面级按钮体系如--color-ink描边 透明底建议把它接到主题统一的按钮 token 上而不是在导航里另写一套颜色。五、从源码看 token 依赖N9 依赖哪些设计变量N9 之所以能保持几乎不写代码前提是仓库的 token 体系把视觉决策都收编成了命名变量。以 site/css/tokens.css 的默认编辑系主题为参照N9 实际依赖的 token 有Token值编辑系默认作用--space-md1rem导航纵向内边距4pt 节奏尺见同文件--space-*系列0.125rem→13rem--page-gutterclamp(1.25rem, 4vw, 3rem)导航横向内边距随视口平滑伸缩--font-displayFraunces, Tiempos, ui-serif, Georgia, serif字标字体--text-md1.125rem字标字号约 18px--color-inkoklch(18% 0.014 60)字标/CTA 文字颜色深墨色--color-ruleoklch(82% 0.014 75)可选的 1px 底部分隔线hairline rule这条依赖链印证了 SKILL.md 的Locked tokens纪律见 anti-patterns.md § Mid-render token improvisation一旦主题锁定导航里的每个颜色、每个字体都必须通过var(--token)引用不允许出现手写的#000或内联font-family。N9 因为代码量极小反而是最容易犯图省事直接写死颜色的地方实际实现时务必走 token。六、变异旋钮同一个 N9三种不同的指纹组件原型的源文件只有 15 行但 Hallmark 的多样性纪律要求同一原型不能每次都长得一模一样。根据 component-cookbook.md § Within-archetype variation knobs 的表格N9 有三个可以独立选择的变异维度旋钮可选值影响CTA shapeCTA 形态outlined描边·filled pill实心胶囊·textarrow文字 箭头决定唯一行动入口的视觉权重描边最克制实心胶囊最强调文字箭头最轻Wordmark字标风格serif italic衬线斜体·sans无衬线·monospace等宽呼应主题的 display style 轴线编辑系常用 serif italic技术系可用 monoPadding-block纵向内边距tight紧凑·default默认·spacious宽松控制导航的高度与呼吸感spacious 更适合奢华系页面选用规则每次输出 N9 时必须为三个旋钮各选一个值并把选择写进 CSS 顶部的 macrostructure 印章注释里。例如/* Hallmark · macrostructure: Long Document · N9 knobs: ctatextarrow, * wordmarkserif-italic, paddingtight · theme: Atelier */这一机制与连续两次输出不得使用相同导航原型的多样性规则见 SKILL.md § Design flow共同作用确保即使相邻页面都选中 N9它们的可感知形态仍然不同。七、响应式表现N9 是断点友好型导航component-cookbook.md § Mobile collapse 专门为每个原型定义了窄视口行为N9 的两档表现是60rem约 960px以下unchangedalready designed for breathing room——因为 N9 本来就只有两个元素、没有链接行堆叠与否意义不大保持原样即可。40rem约 640px以下字标与 CTA 保持两端对齐edge-aligned但CTA 需要补足 44×44px 的最小触控目标WCAG AA 硬性要求仓库在 component-cookbook.md § Mobile collapse 的 Cross-cutting rules 中明确列出。实现示例media (max-width: 40rem) { .nav-edge { min-height: 44px; } .nav-edge .cta-outline { min-height: 44px; display: inline-flex; align-items: center; padding-inline: var(--space-md); } }另需遵守两条跨切规则页面容器的padding-inline不低于clamp(1rem, 4vw, 1.5rem)防止内容贴屏幕边缘点击文案按钮、导航链接一律不允许折行成两行详见 anti-patterns.md § Wrap-to-two-lines clickable text。N9 的 CTA 文案因此也应保持极短如 Get → / Book / Visit这本身就是留白哲学的一部分。八、反模式往中间塞链接是最常见的 N9 背叛原文档以Anti-pattern明确警告Anti-pattern:adding 4 inline links between the wordmark and CTA to fill the space. The spaceisthe design; if you fill it, youve made N1 with extra steps.反模式为了填满空间在字标和 CTA 之间塞 4 个内联链接。空间本身就是设计一旦填满你就只是把 N1 做得更啰嗦而已。这条反模式有双重含义行为层面往中间加链接会让 N9 退化成多链接版本的 N1既丢掉了留白带来的奢侈感又引入了 AI 导航的识别指纹anti-patterns.md § The AI nav 明确定义字标靠左 4~5 个内联链接 右侧按钮 最典型的 AI 导航。结构层面说明设计决策不能被填空焦虑驱动。如果你发现自己正想加点东西让导航更完整正确动作是停下来重新评估 N9 是否适用而不是往 N9 里加料。仓库中另一个可对照的教训是 N5 Floating pilln5-floating-pill.md的反模式一个占满 95% 视口宽度的胶囊其实是带圆角的通栏导航。两者同源——原型被破坏往往是往里面塞了不该塞的东西。九、仓库实证wayfare 的 N9 落地与 loafer 的对照9.1 wayfare印章标注 N9 的真实页面仓库示例页 wayfare 的样式文件 site/examples/wayfare/style.css 第 3 行的 Hallmark 印章明确写着nav: N9说明该页面正是按 N9 原型构建的实战样本。其导航实现在 site/examples/wayfare/index.html 第 45–56 行header classshell nav classmasthead aria-labelPrimary a href# classwordmark aria-labelWayfare, homeWAYFARE/a span classmasthead-metaIssue Nº 14 · Spring 26/span div classmasthead-links a href#picksTrips/a a href#processHow/a a href#noteAbout/a a href#bookSign in/a /div /nav /header对应样式style.css 第 130–150 行使用display: grid; grid-template-columns: auto 1fr auto; align-items: baseline;布局中间列是1fr的弹性留白配合border-bottom: var(--rule-hair)的发丝分隔线。这个实例展示了 N9 家族的核心手法字标高靠左配合✱强调色前缀、用弹性列产生留白、baseline 对齐、1px hairline 收底。同时也要如实指出该页面在 N9 的骨架上保留了极简的 issue meta 与链接行属于原型在真实项目中的适应性演绎——这正说明了原型是起点不是紧身衣。9.2 loafer同一仓库里的反面对照另一个示例 loafer 则在 site/_tests/12-loafer/index.html 中使用了 N5 Floating pill 导航.nav固定定位 nav__linksnav__cta。将两者并排对比可以直观看到两种现代极简路线的取舍N9wayfare参与文档流、通栏、靠留白制造空灵——适合内容安静的页面。N5loafer脱离文档流、悬浮胶囊、毛玻璃 阴影——适合下方有明确表面或图像的 hero。同一个仓库、两个示例、两种导航指纹正是 Hallmarkstructural variety结构性多样而非只换配色理念的直观证据。十、N9 在 Hallmark 工作流中的位置要正确使用 N9需要把它放回 Hallmark 的整体流程里理解详见 SKILL.md导航原型选择发生在 Macrostructure 阶段SKILL.md 要求在设计流程第 2 步同时选定导航N1–N10与页脚Ft1–Ft8原型并声明Macrostructure: … · Nav: N9 · Footer: Ft…。N9 是页面级page-scope原型组件级任务不涉及导航选择。路由表约束editorial 与 modern-minimal genre 允许 N9作为默认 N6/N5 之外的备选在 navigation routing 表中N9 的 acceptable 列表同时出现在 editorial 和 modern-minimal 两行这使它成为跨 genre 迁移能力最强的极简导航之一。多样性规则同一项目会话内连续两次输出不得共用同一导航原型即使 genre 相同。如果上一次用了 N5这一次即便仍在 modern-minimal 下也应从路由表的 also 列N1 / N9中选择。印章记录选择结果要写进 CSS 顶部印章如nav: N9供下一次运行读取这是多样性的持久化机制。结语N9 Edge-Aligned Minimal 是 Hallmark 十个导航原型中最反直觉的一个它要求的不是加法而是减法。在 AI 生成的页面普遍用字标 4 个链接 按钮 毛玻璃填满顶部时N9 用两端对齐 一片空白提供了一种高辨识度的差异。它的实战门槛不在代码全部依赖只有 4 个 token而在于判断力——只有当品牌配得上这份安静时留白才成立。判断错了空白会变成空洞判断对了它就是整个页面最贵的一行。如需继续深入可以顺读同一 catalog 中的对照原型 n1-wordmark-2-links.md、n5-floating-pill.md、n8-terminal-command.md以及导航的完整路由规则 component-cookbook.md 与反模式清单 anti-patterns.md。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考