Hallmark 设计规范 S1 Left-Margin Numbered用左栏数字标注构建编辑式页面层级【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark导读本文深度解析 Hallmarkskills/hallmark/SKILL.md中定义的 Anti-AI-slop 设计技能组件库中的S1 · Left-margin numbered左栏数字标注章节头模式。你将掌握它的适用场景、最小可运行的 HTML/CSS 骨架、与其他四个章节头原型的区分方法以及它作为 Specimen 宏观结构skills/hallmark/references/macrostructures/10-specimen.md核心指纹时所受到的 slop-test 约束——尤其是如何规避 slop-test gate 66 对标签与标题同行两栏模式的硬性禁令。S1 模式速览一条窄左栏 一条宽右栏S1 的骨架极其简洁整个结构只做一件事用一根窄左栏装编号与标签如01 — LABEL.把标题与正文内容放进右侧的宽栏。这一排列给页面注入编辑式editorial与字模/样张specimen的气息让读者在进入内容之前先看到明确的章节序号。组件定义文件skills/hallmark/references/components/s1-left-margin-numbered.md给出的核心骨架如下header classhead-margin p classnum-label01 — Foundations/p h2…/h2 /header对应的最小 CSS 依赖CSS Grid的两列模板.head-margin { display: grid; grid-template-columns: 10rem 1fr; gap: var(--space-xl); align-items: baseline; }这里的三个关键决策点列宽10rem 1fr左栏固定 10rem约 160px足以容纳01 — LABEL.这样的短标签而不换行右栏1fr吸收所有剩余宽度承担标题与正文。如果标签内容较长可适当加大左栏或改用minmax()但保持窄/宽的比例关系是这套语法的辨识点。间距gap: var(--space-xl)引用 Hallmark 的语义化间距 token。仓库的 site/css/tokens.css第 67 行将--space-xl定义为2.5rem在窄屏断点第 589 行收紧为2rem。使用语义 token 而非硬编码像素是该技能locked tokens纪律的一部分见 anti-patterns.md 的Mid-render token improvisation条目。align-items: baseline让左栏标签与右侧标题按文本基线对齐营造精确的排版感——这是编辑式页面被认真排过版的关键细节。Use when / Dont confuse withS1 的定位边界组件文件明确划定了 S1 的使用场景与易混淆对象Use when何时使用页面气质是editorial编辑式或specimen字模样张。也就是说S1 服务的页面本身就在展示排版/材料而不是在推销 SaaS 或电商。Dont confuse with不要混淆S5 · Bottom-anchored——后者把标签放在章节内容之下如— end of 02是对层级的倒置见s5-bottom-anchored.md而 S1 是用标签领起章节。二者方向相反。在skills/hallmark/references/component-cookbook.md的章节头索引中S1 与 S2 Hanging标题悬于负空间上方、S3 Sticky pinned标题随滚动钉住、S4 Inline小型大写词嵌入正文流、S5 Bottom-anchored 共同构成五个可选原型。同一页面内任意两个章节不得复用同一个原型——这是 cookbook 开篇就写明的多样化规则。S1 与 Specimen 宏观结构一对被限制的默认值S1 不只是独立组件它是Specimen 宏观结构的标志性指纹。10-specimen.md这样描述 Specimen左栏数字标签 巨型衬线展示字体 非对称栏跨 发丝分隔线 纯排版 CTA 慷慨留白并给出了它的英雄区示例header classspecimen p classnum-label01 — HELLO./p h1 classserif-xxlA quiet eminstrument./em/h1 p classlede narrow…/p a classlinkOpen your studio →/a /header注意这里的.num-label与 S1 骨架中的类名完全同源——num-label是整套组件库中贯穿 S1、S3、S5 以及 Specimen 英雄区的编号标签统一命名。为什么它不再是默认Specimen连同它的左栏编号标签是 Hallmark 历史上一度最泛滥的输出[SKILL.md](https://link.gitcode.com/i/76d4599ba71cff7bdfad1208f4bb42fc)明确将其从默认宏观结构中剔除macrostructures.md与anti-patterns.md将其列为Specimen fall-through反模式。规则可以概括为只有当 brief 明确指向editorial / type-foundry / journal / specimen sheet气质时才允许使用 Specimen 与 S1对 SaaS 定价页、开发者工具、电商等默认场景左栏编号标签就是模板味的信号。更硬的禁令gate 66S1 本身编号在窄左栏、标题在右栏同一行是 Specimen 语法的合法部分但该语法有一个不可越过的红线——slop-test.md中的gate 66Section eyebrow / tag beside the headingtag-left, header-right任何章节渲染出01 · THE TOUR这类编号/眉标且它出现在标题的左侧或右侧同一水平行上——自动失败Auto-fail。当必须使用眉标时标题必须垂直堆叠在其正下方同一栏内。对应的约束同样出现在SKILL.md的 Build 步骤与structure.md的第一轴Section-heading placement中措辞几乎一致tag-left / heading-right 两栏章节头又称 hanging header、left-margin label是最可靠的 AI 模板化 tellgate 66 自动判失败。这里需要澄清一个容易误读的点S1 组件与 gate 66 的关系是文档内部分工。S1 的配方里标签与标题同处一个 grid 行内这正是它作为 Specimen 指纹的定义特征而 gate 66 针对的是眉标滥用——在没有章节需求、或用于 SaaS/dev-tool 页面时把01 — LABEL摆在标题左侧读起来就是模板编辑风。实践中Hallmark 的使用边界是S1 只服务于明确 editorial/specimen 的 brief其他场景下章节眉标默认关闭default OFF即使要用也必须是标签在上、标题在下的垂直堆叠每页上限 1–2 处。与相邻章节头原型的对比矩阵理解 S1 的最好方式是放在五个章节头原型中横向对照出处各组件文件与 component-cookbook.md原型核心形态何时使用易混淆点S1 Left-margin numbered窄左栏放01 — LABEL.宽右栏放标题与内容编辑式 / 字模样张页面与 S5 方向相反S5 标签在内容之下S2 Hanging标题悬于章节上方的负空间中无边框无分隔线需要安静、留白呼吸的内容与 S3 混淆S3 随滚动移动S2 不动S3 Sticky pinned标题保持钉在视口内内容在其下滚动信息密集、需要持续定位的章节与 S1 混淆S1 不随滚动移动S4 Inline no break小号大写短语从正文流内部浮现无空间断裂散文主导、阅读需连续与 S2 混淆S2 用负空间分隔S5 Bottom-anchored标签/标题位于章节内容之下倒置层级内容为主角、标签充当其脚注与 S1 混淆S1 以标签领起S3 还额外携带一条sticky 配对规则若页面存在position: sticky; top: 0的导航必须在tokens.css中声明--banner-height与--z-sticky-nav否则章节头滚动时会被钉在导航之上对应 slop-test gate 68。这提醒我们选型 S 系列章节头时要同时考虑页面级钉住行为与 token 约定而不只是贴一段 grid CSS。移动端折叠与 token 纪律组件库为每个原型规定了视口收窄时的折叠行为。对 S1 家族而言关键断点在responsive.md60rem约 960px布局断点多栏网格折叠为单栏40rem约 640px排版断点展示字号降一档侧栏标签转为内联。因此 S1 在手机宽度下的合理退化方式是grid-template-columns退化为1fr01 — LABEL.移到标题上方垂直堆叠正好与 gate 66 的垂直堆叠精神一致。Responsive 文档还要求min-width媒体查询自小向大构建、根元素使用overflow-x: clipgate 62、图片轨道用minmax(0, 1fr)gate 61——这些是任何 S1 落地页都必须通过的下限。同时S1 的 CSS 里出现的var(--space-xl)正是locked tokens纪律的例证主题一旦在 Step 2.6 选定所有颜色与字体必须引用命名 token如var(--color-accent)、var(--font-display)不允许内联 OKLCH/hex 或绕过 token 块的font-family见 anti-patterns.md 与 slop-test gate 58。实际 token 数值以仓库 site/css/tokens.css 为准其中--space-lg: 1.5rem、--space-xl: 2.5rem、--space-3xl: 6.5rem构成了 4pt 语义间距体系的一部分。实战清单什么时候允许你拿起 S1把上述规则浓缩成一份可直接对照的使用清单brief 是否 editorial / type-foundry / journal / specimen是 → S1 可用否则默认不用。同一页面内其他章节是否已用了 S1五个 S 原型一页只能用一种。标签与标题是否垂直堆叠在非 Specimen 语境下01 — LABEL只能放在标题正上方绝不能与标题同排分栏gate 66。左栏是否用语义 tokenvar(--space-xl)而非硬编码间距是 → 符合 locked-tokens 纪律。320/375/414/768px 四个宽度下是否单栏折叠、标签内联是 → 满足移动端硬性下限。遵循这套清单S1 就能成为编辑式页面的精确工具违背其中任何一条它就立刻退化为整套 AI 设计社区最警惕的模板编辑风标志。Hallmark 的价值正在于此——skills/hallmark/SKILL.md开篇即声明它让 AI 生成的 UI 看起来是被做出来的而不是被生成的。S1 的正确使用就是这句话在章节头维度上的具体实践。延伸阅读章节头选型索引见component-cookbook.md§ Section headsSpecimen 宏观结构完整定义见macrostructures/10-specimen.md眉标与两栏章节头的反模式分析见anti-patterns.md69 项 slop-test 中的 gate 66/68 见slop-test.md。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Hallmark 设计规范 S1 Left-Margin Numbered：用左栏数字标注构建编辑式页面层级
Hallmark 设计规范 S1 Left-Margin Numbered用左栏数字标注构建编辑式页面层级【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark导读本文深度解析 Hallmarkskills/hallmark/SKILL.md中定义的 Anti-AI-slop 设计技能组件库中的S1 · Left-margin numbered左栏数字标注章节头模式。你将掌握它的适用场景、最小可运行的 HTML/CSS 骨架、与其他四个章节头原型的区分方法以及它作为 Specimen 宏观结构skills/hallmark/references/macrostructures/10-specimen.md核心指纹时所受到的 slop-test 约束——尤其是如何规避 slop-test gate 66 对标签与标题同行两栏模式的硬性禁令。S1 模式速览一条窄左栏 一条宽右栏S1 的骨架极其简洁整个结构只做一件事用一根窄左栏装编号与标签如01 — LABEL.把标题与正文内容放进右侧的宽栏。这一排列给页面注入编辑式editorial与字模/样张specimen的气息让读者在进入内容之前先看到明确的章节序号。组件定义文件skills/hallmark/references/components/s1-left-margin-numbered.md给出的核心骨架如下header classhead-margin p classnum-label01 — Foundations/p h2…/h2 /header对应的最小 CSS 依赖CSS Grid的两列模板.head-margin { display: grid; grid-template-columns: 10rem 1fr; gap: var(--space-xl); align-items: baseline; }这里的三个关键决策点列宽10rem 1fr左栏固定 10rem约 160px足以容纳01 — LABEL.这样的短标签而不换行右栏1fr吸收所有剩余宽度承担标题与正文。如果标签内容较长可适当加大左栏或改用minmax()但保持窄/宽的比例关系是这套语法的辨识点。间距gap: var(--space-xl)引用 Hallmark 的语义化间距 token。仓库的 site/css/tokens.css第 67 行将--space-xl定义为2.5rem在窄屏断点第 589 行收紧为2rem。使用语义 token 而非硬编码像素是该技能locked tokens纪律的一部分见 anti-patterns.md 的Mid-render token improvisation条目。align-items: baseline让左栏标签与右侧标题按文本基线对齐营造精确的排版感——这是编辑式页面被认真排过版的关键细节。Use when / Dont confuse withS1 的定位边界组件文件明确划定了 S1 的使用场景与易混淆对象Use when何时使用页面气质是editorial编辑式或specimen字模样张。也就是说S1 服务的页面本身就在展示排版/材料而不是在推销 SaaS 或电商。Dont confuse with不要混淆S5 · Bottom-anchored——后者把标签放在章节内容之下如— end of 02是对层级的倒置见s5-bottom-anchored.md而 S1 是用标签领起章节。二者方向相反。在skills/hallmark/references/component-cookbook.md的章节头索引中S1 与 S2 Hanging标题悬于负空间上方、S3 Sticky pinned标题随滚动钉住、S4 Inline小型大写词嵌入正文流、S5 Bottom-anchored 共同构成五个可选原型。同一页面内任意两个章节不得复用同一个原型——这是 cookbook 开篇就写明的多样化规则。S1 与 Specimen 宏观结构一对被限制的默认值S1 不只是独立组件它是Specimen 宏观结构的标志性指纹。10-specimen.md这样描述 Specimen左栏数字标签 巨型衬线展示字体 非对称栏跨 发丝分隔线 纯排版 CTA 慷慨留白并给出了它的英雄区示例header classspecimen p classnum-label01 — HELLO./p h1 classserif-xxlA quiet eminstrument./em/h1 p classlede narrow…/p a classlinkOpen your studio →/a /header注意这里的.num-label与 S1 骨架中的类名完全同源——num-label是整套组件库中贯穿 S1、S3、S5 以及 Specimen 英雄区的编号标签统一命名。为什么它不再是默认Specimen连同它的左栏编号标签是 Hallmark 历史上一度最泛滥的输出[SKILL.md](https://link.gitcode.com/i/76d4599ba71cff7bdfad1208f4bb42fc)明确将其从默认宏观结构中剔除macrostructures.md与anti-patterns.md将其列为Specimen fall-through反模式。规则可以概括为只有当 brief 明确指向editorial / type-foundry / journal / specimen sheet气质时才允许使用 Specimen 与 S1对 SaaS 定价页、开发者工具、电商等默认场景左栏编号标签就是模板味的信号。更硬的禁令gate 66S1 本身编号在窄左栏、标题在右栏同一行是 Specimen 语法的合法部分但该语法有一个不可越过的红线——slop-test.md中的gate 66Section eyebrow / tag beside the headingtag-left, header-right任何章节渲染出01 · THE TOUR这类编号/眉标且它出现在标题的左侧或右侧同一水平行上——自动失败Auto-fail。当必须使用眉标时标题必须垂直堆叠在其正下方同一栏内。对应的约束同样出现在SKILL.md的 Build 步骤与structure.md的第一轴Section-heading placement中措辞几乎一致tag-left / heading-right 两栏章节头又称 hanging header、left-margin label是最可靠的 AI 模板化 tellgate 66 自动判失败。这里需要澄清一个容易误读的点S1 组件与 gate 66 的关系是文档内部分工。S1 的配方里标签与标题同处一个 grid 行内这正是它作为 Specimen 指纹的定义特征而 gate 66 针对的是眉标滥用——在没有章节需求、或用于 SaaS/dev-tool 页面时把01 — LABEL摆在标题左侧读起来就是模板编辑风。实践中Hallmark 的使用边界是S1 只服务于明确 editorial/specimen 的 brief其他场景下章节眉标默认关闭default OFF即使要用也必须是标签在上、标题在下的垂直堆叠每页上限 1–2 处。与相邻章节头原型的对比矩阵理解 S1 的最好方式是放在五个章节头原型中横向对照出处各组件文件与 component-cookbook.md原型核心形态何时使用易混淆点S1 Left-margin numbered窄左栏放01 — LABEL.宽右栏放标题与内容编辑式 / 字模样张页面与 S5 方向相反S5 标签在内容之下S2 Hanging标题悬于章节上方的负空间中无边框无分隔线需要安静、留白呼吸的内容与 S3 混淆S3 随滚动移动S2 不动S3 Sticky pinned标题保持钉在视口内内容在其下滚动信息密集、需要持续定位的章节与 S1 混淆S1 不随滚动移动S4 Inline no break小号大写短语从正文流内部浮现无空间断裂散文主导、阅读需连续与 S2 混淆S2 用负空间分隔S5 Bottom-anchored标签/标题位于章节内容之下倒置层级内容为主角、标签充当其脚注与 S1 混淆S1 以标签领起S3 还额外携带一条sticky 配对规则若页面存在position: sticky; top: 0的导航必须在tokens.css中声明--banner-height与--z-sticky-nav否则章节头滚动时会被钉在导航之上对应 slop-test gate 68。这提醒我们选型 S 系列章节头时要同时考虑页面级钉住行为与 token 约定而不只是贴一段 grid CSS。移动端折叠与 token 纪律组件库为每个原型规定了视口收窄时的折叠行为。对 S1 家族而言关键断点在responsive.md60rem约 960px布局断点多栏网格折叠为单栏40rem约 640px排版断点展示字号降一档侧栏标签转为内联。因此 S1 在手机宽度下的合理退化方式是grid-template-columns退化为1fr01 — LABEL.移到标题上方垂直堆叠正好与 gate 66 的垂直堆叠精神一致。Responsive 文档还要求min-width媒体查询自小向大构建、根元素使用overflow-x: clipgate 62、图片轨道用minmax(0, 1fr)gate 61——这些是任何 S1 落地页都必须通过的下限。同时S1 的 CSS 里出现的var(--space-xl)正是locked tokens纪律的例证主题一旦在 Step 2.6 选定所有颜色与字体必须引用命名 token如var(--color-accent)、var(--font-display)不允许内联 OKLCH/hex 或绕过 token 块的font-family见 anti-patterns.md 与 slop-test gate 58。实际 token 数值以仓库 site/css/tokens.css 为准其中--space-lg: 1.5rem、--space-xl: 2.5rem、--space-3xl: 6.5rem构成了 4pt 语义间距体系的一部分。实战清单什么时候允许你拿起 S1把上述规则浓缩成一份可直接对照的使用清单brief 是否 editorial / type-foundry / journal / specimen是 → S1 可用否则默认不用。同一页面内其他章节是否已用了 S1五个 S 原型一页只能用一种。标签与标题是否垂直堆叠在非 Specimen 语境下01 — LABEL只能放在标题正上方绝不能与标题同排分栏gate 66。左栏是否用语义 tokenvar(--space-xl)而非硬编码间距是 → 符合 locked-tokens 纪律。320/375/414/768px 四个宽度下是否单栏折叠、标签内联是 → 满足移动端硬性下限。遵循这套清单S1 就能成为编辑式页面的精确工具违背其中任何一条它就立刻退化为整套 AI 设计社区最警惕的模板编辑风标志。Hallmark 的价值正在于此——skills/hallmark/SKILL.md开篇即声明它让 AI 生成的 UI 看起来是被做出来的而不是被生成的。S1 的正确使用就是这句话在章节头维度上的具体实践。延伸阅读章节头选型索引见component-cookbook.md§ Section headsSpecimen 宏观结构完整定义见macrostructures/10-specimen.md眉标与两栏章节头的反模式分析见anti-patterns.md69 项 slop-test 中的 gate 66/68 见slop-test.md。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考