一个强调色≤5%：Hallmark AI 设计技能的强调色纪律与感知逻辑

一个强调色≤5%Hallmark AI 设计技能的强调色纪律与感知逻辑【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmarkHallmark 是一个面向 Claude Code、Cursor 和 Codex 的反 AI 味设计技能design skill它通过 22 个主题、21 种宏观结构和 69 道 slop test 门禁让 AI 生成的页面看起来像被设计过而不是被生成过。其中最有代表性的一条硬规则是强调色在任何单个视口中占比不超过 5%。为什么是这个数字它背后是一套关于人眼感知的完整逻辑。一眼看懂 Hallmark 的强调色纪律Hallmark 为不同需求生成的页面共享同一套配色纪律但视觉指纹完全不同——这正是强调色纪律要保护的东西注意力锚点。上面每个页面都只有一个高彩度的强调色其余 95% 以上的面积由纸色Paper、墨色Ink和中性灰阶承担。为什么 LLM 页面一眼 AI一场强调色危机color.md 开宗明义地列出了 AI 生成页面的四大配色败笔无脑选蓝色使用纯黑#000紫到青的渐变背景强调色铺满 30% 的页面面积。前三条是审美指纹第四条才是致命伤。anti-patterns.md 把紫渐变 Hero 称为最被广泛认出的 AI 美学因为它把注意力摊平到了整个视口——当到处都是重点时就没有重点。5% 的含义3% 基准线、5% 红线、20% 流派例外Hallmark 的强调色规则分三个层级全部以单个视口面积计量层级数值出处设计基准强调色 ≤ 3%color.md L8硬性红线 5% 即判定为 slop返工slop-test.md 第 25 门背景填充禁则强调色作背景填充 5% 直接禁用color.md L79流派例外atmospheric氛围感流派允许径向光晕覆盖 20%–30%slop-test.md 第 25/31 门注意那个例外氛围流派之所以能放宽是因为光晕本身就是设计——此时强调色不是装饰而是画面主体。而绝大多数页面里强调色是荧光笔不是色块原文The accent is a highlighter, not a colour block。这是 Hallmark 为 SaaS 产品 Tally 生成的页面modern-minimal 流派全页唯一的强调色是标题里斜体的actually一词和发票卡片中的一条预算进度条加起来远低于 5%。Hyperlane 峰会页面更极端黑色画布上橙色强调色只落在after dark.一行字上。一个词扛起了整页的品牌记忆点。少即是多背后的感知逻辑1. OKLCH先让颜色可预测。Hallmark 强制所有颜色使用 OKLCH 而非 HSL/RGB因为 OKLCH 是感知均匀的相同明度值的颜色看起来一样亮相同彩度值的颜色看起来一样饱和。这让3% 面积这种基于视觉权重的规则可以被精确设计而不是靠手感碰运气。2. 视觉显著性Saliency注意力是稀缺资源。人眼在扫视页面时会被高彩度、高对比区域首先捕获。如果强调色覆盖 30% 视口眼睛的捕获会被稀释成背景噪声如果只有 3%–5%它就成为唯一的视觉锚点——导航当前项、焦点环、悬停下划线、CTA 边框用户扫一眼就知道哪里能点、点完去哪。3. 灰阶染色Tint the greys看不见的连贯性。color.md 要求中性灰必须染上强调色的锚点色相——橙色锚点配暖灰蓝色锚点配冷灰。原文说得很直白暖强调色配冷灰正文看起来就是错的而大多数人说不出哪里错。这正是感知逻辑人说不出来的不协调往往比说出来的更伤信任。编辑流派的 Slow Pour 咖啡页把纪律玩到了极致全页大面积是米白纸色与近黑墨色强调色锈红只出现在小字号眉标和手绘咖啡豆的线条细节里——装饰性笔画同样受 5% 上限约束第 37 门要求装饰线条不超过视口 5%。NAJM 时装页则展示了纪律的边界大面积红色出现在商品卡上但那属于品牌内容资产产品视觉而装饰性强调——顶部跑马灯条与标题中的soul一词——依然保持克制。slop test 计量的是强调色 token 的填充面积内容与装饰在这里被明确区分。纪律如何落地tokens 69 道 slop test规则不写进门禁就是空话。Hallmark 的执行链是Token 锁定选定主题后每个颜色都必须引用命名 tokenvar(--color-accent)禁止在渲染中途写死十六进制值——slop-test.md 第 58 门专门拦截这种中途即兴。22 个主题的强调色定义集中在 site/css/tokens.css 中如 Specimen 主题的信号橙L25、Coral 主题的暖珊瑚L862。对比兜底强调色填充任何承载文字的色块时必须同时定义--color-accent-ink并验证对比度第 49 门防止白字配浅橙这类低对比事故。交付前自检输出前还要按六个维度含 Restraint克制打 1–5 分任一维度低于 3 分直接返工。带走这份纪律5 条自查清单数一数强调色占视口面积 5% 就开始删减目标是 3% 以内强调色只做五件事当前导航、焦点环、悬停下划线、CTA 描边、标题旁小色块用 OKLCH 定义颜色让明度/彩度可预测把中性灰染上锚点色相暖配暖、冷配冷大面积彩色需求光晕、色块先确认它是内容/设计主体而不是装饰。更多实战示例可参考 docs/recipes.md 与 docs/study-examples.md完整的规则体系在 skills/hallmark/references/ 目录下。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考