Hallmark 组件解析T2 Logo Wall发丝线分隔——以克制呈现客户信任的反 AI 痕迹设计【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark导读本文以 Hallmark 设计技能中证明类Testimonials / proof组件T2 · Logo wall (hairline)为绝对核心完整讲解其设计意图、可直接复制的 HTML/CSS 实现、三种变化旋钮与移动端折叠行为并结合仓库内的真实实现tally 示例、Foundry 测试用例以及 Hallmark 的诚实内容纪律与 slop-test 校验门。读完你能够独立实现一套无卡片、无阴影、发丝线分隔的客户 Logo 墙判断何时该用它、何时该放弃它并绕过6 宫格 Logo 盒子墙这一最典型的 AI 生成痕迹。一、T2 在 Hallmark 组件体系中的位置Hallmark 是面向 Claude Code、Cursor、Codex 等 AI 编码助手的反 AI 痕迹设计技能核心理念是让生成出来的界面看起来是做出来的而不是生成出来的见 SKILL.md。它把整页结构拆成 46 个可组合的组件原型archetypes统一索引在 component-cookbook.md按英雄区 / 小节头 / 功能块 / CTA / 证明 / 页脚 / 导航七大类组织。T2 · Logo wall (hairline) 属于证明类Testimonials / proof与 T1 Pull quote、T3 Single huge quote、T4 Numbered stat strip 同组是页面上承担社会证明social proof职责的四个原型之一见 component-cookbook.md。典型出现位置是 Hero 之后独立成区或像 Foundry 合规类测试那样以一块 Bento 瓦片的形式嵌入网格中——合规类页面需要社会证明而 Logo 墙恰好能在不新增一个独立大节的前提下完成这件事。组件原型的定义文档位于 t2-logo-wall-hairline.md全文只有十几行但信息密度极高。本文将其与 component-cookbook.md、assets.md、color.md、slop-test.md 及仓库真实示例打通给出可直接上手的完整解读。二、T2 的核心定义什么是发丝线分隔的 Logo 墙原文档给出的定义可以拆成四个要件一行客户 Logoa row of customer logos——基础形态是单行水平排列而不是四行八列的满铺格子。单色monochromatic——所有 Logo 以同一种颜色呈现典型做法是灰度化不做全彩混排。发丝线分隔separated by hairline rules——相邻 Logo 之间用 1px 的细规则线--color-rule隔开。无卡片盒、无阴影No card boxes, no shadows——这是本原型的底线。没有圆角卡片、没有边框盒子、没有投影Logo 就是安静地躺在纸面上。原文档还给出了两条极其关键的使用判断Use when何时使用当你拥有可识别的真实客户并且想低调地把他们展示出来。Dont confuse with不要混淆AI 默认的6 Logo 盒子网格the AI-default 6-logo box grid本版本拒绝卡片盒。第二条是整个原型的灵魂。AI 模型被训练出来的默认社交证明形态就是三列两行的 6 个 Logo 盒子每个盒子里一个图标、下面一行小字——这与 slop-test 门3是否存在图标在标题上方、三列等宽卡片网格见 slop-test.md所拦截的模板化痕迹高度重合。T2 的存在意义就是用少来对抗这个默认。三、完整实现逐行拆解 HTML 与 CSS原文档的骨架代码非常精炼以下是完整呈现并逐项注释section classlogo-wall ul liimg src //li liimg src //li liimg src //li /ul /section.logo-wall ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0; } .logo-wall li { padding: var(--space-md); border-right: 1px solid var(--color-rule); display: grid; place-items: center; } .logo-wall img { filter: grayscale(1); opacity: 0.7; }对关键参数逐一展开3.1repeat(auto-fit, minmax(8rem, 1fr))自适应的等宽分割8rem在 16px 根字号下约 128px是每格最小宽度。auto-fit会让浏览器在容器宽度内尽可能多地铺列每列不窄于 8rem列数由容器宽度自动决定因此不需要手写断点就能从一行 6 个平滑过渡到一行 3 个。gap: 0是刻意为之——真正的分隔线不是网格间隙而是下面li的border-right。如果你在这里写gap: var(--space-lg)得到的是有呼吸感的悬浮 Logo那是另一种形态T2 要的是紧密贴着发丝线的密排效果。3.2li的三个职责padding: var(--space-md)让每个 Logo 在格子内有呼吸空间。Hallmark 的间距体系是 4pt 语义化间距--space-md是其中一档详见 layout-and-space.md 的 4pt 标尺。border-right: 1px solid var(--color-rule)这就是发丝线本体。--color-rule是 Hallmark 的规则线 token浅色纸面上取oklch(82% 0.010 80)、深色纸面上取oklch(30% 0.008 40)见 color.md 与 color.md——它是一个极低彩度的中性色既足够清晰地区分相邻 Logo又不会在视觉上压过 Logo 本身。display: grid; place-items: center;让不同宽高比例的 Logo 在每个格子内垂直水平居中。这一点与 assets 规范的按高度对齐、宽度自由浮动原则配合见下文 5.2。3.3img的单色化处理filter: grayscale(1); opacity: 0.7;是monochromatic要件的具体落地先把彩色 Logo 统一去饱和成灰色再降一点不透明度让整排 Logo 退回背景层、形成一行安静的印记而不是一排五颜六色的广告位。这也是 assets 规范第 1 条Logo 墙只允许单色见 assets.md的直接体现。3.4 两个工程化补充可作为实战增强原文档骨架未涉及的两个收尾细节实战中建议补上否则会留瑕疵最后一列的双线问题border-right会给最后一个li也画上右边线造成墙的右端多出一条线。可加一条规则收掉.logo-wall li:last-child { border-right: 0; }图片懒加载与 LCP 纪律根据 slop-test 门61图片承载的网格轨道必须用minmax(0, 1fr)见 slop-test.md本原型恰好天然满足——minmax(8rem, 1fr)本身就规避了1fr退化为minmax(auto, 1fr)导致轨道被大图撑破的问题。若 Logo 区在首屏之外img应加loadinglazy若在首屏内LCP 元素则永远不要懒加载。四、变化旋钮同一种原型三种自由轴component-cookbook.md 为 T2 提供了三个旋钮variation knobs。选原型只是多样性的第一轴怎么构建它是第二轴——两个页面即使用同一个原型也不能看起来一模一样旋钮取值说明Knob A · 布局单行single row· 双行2 rows· 网格 3×N客户多时用双行或 3×N客户少时用单行Knob B · Logo 处理单色墨迹monochrome ink· 品牌色brand colour· 幽灵化ghosted原文档默认是单色墨迹品牌色是少数刻意为之的例外幽灵化则比默认更退一步Knob C · 分隔线发丝线格子hairline cells· 无none发丝线是本原型默认无则退化为纯留白分隔旋钮纪律还要求把选中的取值写进宏结构戳记stamp注释作为可追溯记录。例如/* Hallmark · macrostructure: Bento Grid · T2 Logo-wall knobs: layout2rows, treatmentmonochrome-ink, dividerhairline-cells · ... */同时遵守组件级多样性规则同一页面内不能有两个小节使用同一原型见 component-cookbook.md跨页面构建时也要更换原型或至少更换一个旋钮取值见 component-cookbook.md。五、让 Logo 墙诚实来源规范与反编造纪律Logo 墙最容易翻车的地方不在 CSS而在内容来源。Hallmark 有两层约束5.1 诚实内容纪律Logo 必须是真实的SKILL.md 的第二条通用纪律Honest copy明确把 Logo 与数据、证言并列用户没有提供某个指标就不得编造它47% 转化率受 50,000 团队信赖10 倍加速一旦被编造就是垃圾内容证言、Logo、案例数量同理见 SKILL.md 与 slop-test.md 门 56。落到 Logo 墙上就是一句话没有真实客户 Logo就不要做这面墙。5.2 资产来源规范Logo 墙怎么选素材assets.md 专设 Brand / company logos 一节给出了四条硬规则Logo 墙只允许单色——用 Simple Icons 的默认单色或官方单色变体全彩混排是 2018 年 SaaS 的味道。按高度对齐而不是按宽度对齐——选一个基准高度通常 32–48px宽度自由浮动拉伸品牌比例是明显的破绽。留 2–3 倍高度的间距——32px 高的 Logo格子间距应给到 64–96px。不要给 Logo 加发丝边框或光晕——只留印记本身。推荐的 Logo 来源通路供你挑选素材时参考Simple Icons行业标准、单色 SVG、MIT 许可Logo 墙默认、SVGL人工精选、theSVG带明暗/单色/字标变体、品牌官方素材页最稳妥。反模式则包括全彩网格、被拉伸/压扁的图形、模板套件里的假客户 LogoACMEInitechHooli——假的社会证明比没有社会证明更糟以及同一面墙混排字标wordmark与图形标mark。5.3 没有真实 Logo 时的退路assets 的占位符策略明确可以暂时用明确标注的占位但绝不能把占位当最终成品交付。仓库里 Foundry 合规测试brief.md展示的正是这种做法——在 Bento 网格中放一个Tier-A 纯 CSS Logo 墙8 个单色字标以svg文本标呈现并明确标注No real customer logos (placeholder)。它用文本字标代替图片 Logoul里放的是 Tracejam、Maple、Knot、Tide 这类虚构但看起来像真名字的字标配以不同字体形态模拟品牌差异见 index.html——注意这些内容在测试语境里是占位示例在真实交付中它要么换成用户提供的真实客户 Logo要么整墙去掉而不是当成成品交付。六、仓库实证两个真实实现对照6.1 tally 示例文本字标式的安静 Logo 条site/examples/tally 是仓库内的完整示例站点其 Logo 区styles.css是 T2 思想的近亲实现.logos__row { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-xl); align-items: center; opacity: 0.62; /* 整体降透明度 → 安静的印记 */ }整行以opacity: 0.62退到背景层与 T2 的img { opacity: 0.7 }异曲同工6 个字标用不同字重/字型区分品牌性格如l-4为letter-spacing: 0.3em; text-transform: uppercase的宽松大写字距l-1为斜体衬线即字标代替图片的实现手法见 styles.css上方配一行等宽体小标签.logos__label大写、letter-spacing: 0.16em把整段内容锚定成客户说明而不是裸的一排字见 styles.css断点行为max-width: 760px时网格从 6 列塌缩为 3 列见 styles.css与 cookbook 中 T2 的6-up → 3-up折叠规则一致。对应 DOM 见 index.html结构是section.logos .logos__label .logos__row。6.2 Foundry 测试Bento 瓦片中的 Logo 墙site/_tests/07-foundry-compliance 是合规 SaaS 的测试用例它把 Logo 墙作为一个 Bento 瓦片嵌入网格grid-column: span 3见 style.css配aria-labelledby与rolelist保证可访问性瓦片内部ul.logos用repeat(4, 1fr)排布见 style.css移动端依次塌缩为 2 列、2 行见 style.css。对照它的 brief.md 可以看到设计决策记录合规页面需要社会证明而 Logo 墙能完成这件事且不必新增独立小节。两个实现与 T2 原型的差异值得注意Foundry 的瓦片用了border: 1px solid var(--color-rule)的格子边框这属于卡片盒的边缘情形——它在 Bento 瓦片语境下是为了与其他瓦片定价卡、证言卡保持同构但如果你要做的是独立的 T2 Logo 墙小节请回到无边框、无盒子的原型默认值。这正是 T2 原文档反复强调refuses card boxes的原因。七、移动端折叠两种断点的既定行为component-cookbook.md 为 T2 规定了明确的两级折叠视口行为低于60rem~960px网格 6-up → 3-uplogo 瓦片从一行 6 个变为一行 3 个低于40rem~640px网格 3-up → 2-upLogo 高度从 32px 降到 24px配合 cookbook 的跨切面规则一起执行页面容器padding-inline ≥ clamp(1rem, 4vw, 1.5rem)避免内容贴住屏幕边缘首屏之下的图片一律loadinglazyLCP 元素则绝不懒加载见 component-cookbook.md。T2 本身是非交互组件不涉及 44px 点击目标与 8 状态但上述布局安全规则对它是同样生效的硬底线。八、决策清单何时用、何时放弃把原文档的 Use when 展开成一份可执行的判断清单应该用 T2当你手头有真实、可识别的客户 Logo数量不必多3–8 个即可页面需要社会证明但不想喧宾夺主——quietly安静地是关键词你希望与 AI 默认的 6 宫格盒子墙形成明确反差展示设计判断力。不应该用 T2当没有真实客户 Logo——按诚实纪律跳过整面墙比放假 Logo 更体面客户群体无辨识度Logo 说了等于没说品牌基调要求张扬的视觉证明此时应改用 T4 Numbered stat strip 或其他证明形态同一页面里另一个小节已经用了 T 类证明原型——遵守同页不重复原型的多样性规则。替换候选需要数字冲击力时换T4 Numbered stat strip3–5 个计数横向一条需要一句话证言时换T3 Single huge quote单条大引文居中整节需要引文边注时换T1 Pull quote with marginalia。这四者共同构成 Hallmark 对证明区的全部回答见 component-cookbook.md。九、结语T2 Logo Wall 是 Hallmark 结构性克制哲学的最小样本不画盒子、不加阴影、不堆色彩用一条border-right: 1px solid var(--color-rule)和一行filter: grayscale(1); opacity: 0.7把我们被这些团队信任这件事说得极轻又极稳。它的对立面——6 宫格彩色 Logo 盒子——正是 slop-test 反复拦截的 AI 默认指纹。当你下次让 Claude Code、Cursor 或 Codex 生成页面时记住这条判据社会证明不是用来炫耀的是用来默不作声地建立信任的。更多组件原型可继续查阅 component-cookbook.md完整性校验体系见 slop-test.md素材来源规范见 assets.md。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考