NAJM 示例拆解时尚品牌 editorial 排版与留白的 5 个关键细节【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmarkNAJM 是 Hallmark 项目内置的一个时尚品牌示例页面——一个虚构的摩洛哥服装屋由反AI 味设计 skillHallmark适用于 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–14vwhugging 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 暖奶油/赤陶的组合就是可以直接对标的产出水准。相关文件速查页面结构site/examples/najm/index.html样式与结构签名site/examples/najm/styles.css颜色/字体/间距 tokensite/examples/najm/tokens.css交互逻辑购物车抽屉site/examples/najm/script.jseditorial 语体规则skills/hallmark/references/genres/editorial.mdMarquee Hero 结构定义skills/hallmark/references/macrostructures/03-marquee-hero.md提示词配方集docs/recipes.md一句话总结NAJM 的高级感来自三件事——贴边的巨型标题Marquee Hero、4pt 标度驱动的大留白、以及全页只出现 5% 的赤陶色强调。这三条就是 editorial 排版与留白最可复用的配方。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 NAJM 示例拆解：时尚品牌 editorial 排版与留白的 5 个关键细节
NAJM 示例拆解时尚品牌 editorial 排版与留白的 5 个关键细节【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmarkNAJM 是 Hallmark 项目内置的一个时尚品牌示例页面——一个虚构的摩洛哥服装屋由反AI 味设计 skillHallmark适用于 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–14vwhugging 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 暖奶油/赤陶的组合就是可以直接对标的产出水准。相关文件速查页面结构site/examples/najm/index.html样式与结构签名site/examples/najm/styles.css颜色/字体/间距 tokensite/examples/najm/tokens.css交互逻辑购物车抽屉site/examples/najm/script.jseditorial 语体规则skills/hallmark/references/genres/editorial.mdMarquee Hero 结构定义skills/hallmark/references/macrostructures/03-marquee-hero.md提示词配方集docs/recipes.md一句话总结NAJM 的高级感来自三件事——贴边的巨型标题Marquee Hero、4pt 标度驱动的大留白、以及全页只出现 5% 的赤陶色强调。这三条就是 editorial 排版与留白最可复用的配方。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考