NAJM 示例拆解：时尚品牌 editorial 排版与留白的 5 个关键细节-开发者社区

NAJM 示例拆解：时尚品牌 editorial 排版与留白的 5 个关键细节

【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark

NAJM 是 Hallmark 项目内置的一个时尚品牌示例页面——一个虚构的摩洛哥服装屋，由反"AI 味"设计 skill（Hallmark，适用于 Claude Code、Cursor、Codex）按 editorial（杂志感）语法生成。本文带你逐层拆解这个页面的 editorial 排版与留白手法，帮你理解为什么 AI 生成的页面也能有"人手排过"的质感。

1. 宏观结构：Marquee Hero 撑起整个首屏

NAJM 页面在样式文件的头部注释里"盖章"了自己的骨架：

/* Hallmark · macrostructure: Marquee Hero · genre: editorial */

这行注释写在 site/examples/najm/styles.css 的开头，是 Hallmark 的固定签名——每个生成页面都会声明自己用了哪种宏观结构（macrostructure）。NAJM 选的是Marquee Hero：首屏就是整条页面声明，巨型标题贴近视口边缘，滚动之后页面"变成别的东西"（商品网格、宣言区块、表单）。

对应的规则定义在 skills/hallmark/references/macrostructures/03-marquee-hero.md，其中两条值得新手记住：

标题字号 8–14vw，"hugging the viewport edges"（贴着视口边缘），字体本身就是视觉主角
首屏不放产品图、不放复杂 CTA——排版即视觉

NAJM 的落实方式是左侧三行大字New cuts. / Old soul. / Made in Morocco.，其中soul一词用赤陶色斜体强调（见 index.html），右侧一张 4:5 的纯 CSS 绘制的产品卡——整页没有一张真实图片，所有"面料"都是用 CSS 渐变画出来的。

2. 排版三件套：字体、字距与单色强调

editorial 语法的排版规则写在 skills/hallmark/references/genres/editorial.md 里，NAJM 的执行细节可以在 tokens.css 中对照着看：

要素	NAJM 的选择	效果
展示字体	Bricolage Grotesque 700–900	标题极重，有印刷品份量感
正文字体	Inter 400/500	阅读层安静、不出头
字距	标题`-0.045em`，小标签`+0.16em`	大字收紧、小字拉开，层次立刻拉开
强调色	赤陶色`oklch(58% 0.18 35)`，全页占比 <5%	一个颜色只干一件事：标记重点词

新手最容易抄错的地方是强调色用量。editorial 规则明确要求：单一暖/冷色，任何视口内占比不到 5%。NAJM 只在斜体词、购物车角标、跑马灯底色上出现赤陶色——克制，所以醒目。

3. 留白系统：一套 4pt 间距标度，而不是随手写 px

留白不是"多留点空"，而是有标度的空。NAJM 的 tokens.css 定义了 11 级间距变量：

--space-1: 0.25rem; --space-5: 1.5rem; --space-7: 3rem; --space-9: 6rem; --space-11: 12rem; /* … */

页面的节奏完全由这套变量驱动：Hero 上下用--space-7/--space-9，商品区用--space-9，区块之间再叠 1px 发丝线分隔。大间距 + 发丝线（hairline）正是 editorial 语法的招牌组合——用线分割而不是用卡片边框，版面就显得像印刷品而不是网页模板。

另外注意--gutter: clamp(1rem, 4vw, 2.5rem)：页面边距随视口流动，桌面端放大到 2.5rem，这就是"杂志感"留白的主要来源。

4. editorial 语法的 5 条硬规则（反 AI 味清单）

Hallmark 判断"页面像不像 AI 批量生成的"，靠的是一组 slop-test 门禁。editorial 语体额外禁止的东西，几乎条条都能从 NAJM 页面上验证：

❌ 居中的一切式 Hero——NAJM 的标题是左偏的，右侧让给产品卡
❌ 玻璃拟态（glassmorphism）——"介质是纸，不是玻璃"，页面底色是带暖调的奶油色oklch(96.5% 0.012 75)，而非纯白
❌ 纯黑/纯白——墨色是oklch(20% 0.022 55)，暖调深棕，不是#000
❌ 三等分图标卡片特性区——NAJM 的信任区用的是"大号数字 + 标题 + 一句正文"的表格化排布，数字 24h / 14d / 100% / 1% 才是视觉锚点
✅ 允许的发丝线、编号标签、不对称栏宽（2:5、3:7）、纯 CSS 手绘图案

第 5 条正是 NAJM 最妙的一笔：商品卡上的摩洛哥 zellige 瓷砖纹样，是用conic-gradient拼出来的纯 CSS 图案（styles.css），透明度压到 0.18，只做肌理、不做装饰主角——留白之上再叠一层"纸纹"，页面就有了手工感。

5. 如何自己复现一个 NAJM 风格页面

不需要写代码。Hallmark 的 docs/recipes.md 里收录了多条可直接粘贴的提示词配方，套路是"品牌名 + 一句话故事 + 受众 + 语气"。照 NAJM 的规格，你可以这样提示：

"Build me a landing page for [你的品牌] — [一句产地/工艺故事]。Audience: [受众]。Tone: warm, hand-set, editorial, sun-warm earth."

skill 会自己完成：推断受众/用途/语气 → 选宏观结构 → 套 22 个主题之一 → 跑 65 项 slop-test 门禁 → 输出带签名注释的 HTML + CSS。规则集本体在 skills/hallmark/SKILL.md，装好之后 NAJM 这套"editorial + Marquee Hero + 暖奶油/赤陶"的组合就是可以直接对标的产出水准。