Hallmark modern-minimal 风格指南用约束打造不靠装饰取胜的 SaaS 与开发者工具页面【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark导读本文围绕 Hallmark 设计技能仓库中的modern-minimal风格规范skills/hallmark/references/genres/modern-minimal.md展开系统拆解 Stripe / Linear / ElevenLabs 这一流派在排版、色彩、布局、动效与文案上的完整约束。读完你将掌握如何识别需要 modern-minimal 风格的 Brief、如何用 Quiet 主题的 OKLCH 令牌构建页面、如何选择 N5 浮动胶囊导航与 Ft2 单行页脚以及如何在反 AI 味检查slop test中正确处理本风格被放宽的规则门。一、modern-minimal 是什么在 Hallmark 四风格中的定位Hallmark 将页面的视觉 DNA 划分为四个风格genreeditorial默认、反 AI 味的经典之声、modern-minimalStripe / Linear / ElevenLabs 流派、atmosphericSuno / Runway 式暗色 AI 工具、playful后 Linear 的柔和派。这一分流逻辑在 SKILL.md Step 1 中有明确说明The genre scopes which themes can rotate, which slop-test gates apply, and which voice fixtures the LLM picks from.modern-minimal 的目标对象是打磨过的企业级 / 开发者工具 / API 页面。它的设计哲学可以浓缩为一句话——Minimalism with conviction, not the absence of choice带着信念的极简而非选择的缺席。这不是少放点东西而是在严格约束下做出明确、有把握的设计决策纯白画布、自信的无衬线大标题、慷慨的留白、胶囊形 CTA、近乎单色的配色。二、何时选用信号词检测风格选择不是拍脑袋而是信号驱动的。当 Brief 中出现以下任一关键词时即命中 modern-minimalSaaS、enterprise、API、platform、developer tool、infra、B2B、dashboard、billingStripe-like、Linear-like、ElevenLabs-likedev experience、ship fast用户指定了品牌色但 Brief 其余部分保持克制这条检测规则在 SKILL.md 的 Step 1 中有对应的实现逻辑SKILL.md L231SaaS, enterprise, API, platform, developer tool, infra, B2B, dev experience → modern-minimal。当 brief 同时命中两个非默认风格信号时需要向用户提出一个简短追问没有任何信号则静默回落到 editorial。三、主题归属Quiet 是唯一现役主题本风格当前只承载一个规范化主题——Quiet。未来可以新增任何单色或近单色 Geist / Inter 系无衬线 display 胶囊 CTA的新主题加入本风格。在仓库的 22 个命名主题中modern-minimal 风格只轮换 Quiet 一个主题这一点在 SKILL.md 中写得很清楚modern-minimal stays on Quiet。Quiet 主题的完整令牌定义位于 site/css/tokens.css其核心设计如下[data-themequiet] { --color-paper: oklch(100% 0 0); /* pure white */ --color-paper-2: oklch(98.5% 0 0); /* card surface */ --color-paper-3: oklch(96% 0 0); /* hover surface */ --color-rule: oklch(91% 0 0); /* hairline */ --color-muted: oklch(55% 0 0); --color-ink: oklch(15% 0 0); /* near-black */ --color-accent: oklch(15% 0 0); /* mono — accent IS ink */ --color-accent-ink: oklch(15% 0 0); --color-focus: oklch(60% 0.10 240); /* a single tiny blue for keyboard focus only */ --font-display: Geist, Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; --font-body: Geist, Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; --text-display: clamp(2.5rem, 5.0vw 0.5rem, 4.75rem); --tracking-display: -0.025em; }三个值得注意的实现细节纯白纸面--color-paper: oklch(100% 0 0)这是整个仓库中极少数使用纯白作为基底的主题——正是因为它属于被放宽的流派见下文第七节。accent IS ink--color-accent与--color-ink同为oklch(15% 0 0)即强调色就是墨色。全站唯一的彩色出现点是--color-focus一个用于键盘焦点环的淡蓝oklch(60% 0.10 240)——这正符合风格规范中单一克制色相只用于 focus ring不允许大面积色彩倾泻的要求。组件形状Quiet 的主题覆写site/css/tokens.css为--radius-card: 8px; --radius-pill: 999px; --radius-input: 8px;——8px 卡片圆角 999px 胶囊 CTA正是风格规范精致卡片表面 8px 圆角的落地值。此外Coral 与 Violet两个主题也属于Stripe 系的相邻变体见 site/css/tokens.css 与 site/css/tokens.css它们采用暖灰纸面 珊瑚色强调、或近白纸面 低调紫罗兰强调保留了单色基调 单一克制强调的流派基因可作为企业级页面的替换选项。四、Voice字排、色彩、版式、动效与文案的五维约束4.1 字排TypographyDisplayGeist Sans 500–700或 Inter Tight Display 600同类亦可。字距收紧-0.02em到-0.035em。Quiet 主题实际取值--tracking-display: -0.025em处于规范区间正中。BodyGeist Sans 400 / Inter 400且与 display 同族single-family discipline单族纪律。这与 typography.md 的21 规则兼容页面最多使用三个字族display body 一个 outlier而 modern-minimal 流派甚至倾向只用 display body 两族——Two families is still the right answer for most pages.大字尺度规范给出 display 尺寸公式clamp(2.5rem, 5vw 0.5rem, 4.75rem)modern-minimal.md与 typography.md 的 display 上限纪律≤ 5.5rem / 88px一致。Quiet 主题的--text-display正是此公式的字面实现。4.2 色彩ColourAccent 即墨色accent IS ink单色设计或者至多一个只用于焦点环的克制色相。禁止色彩倾泻no chromatic floods。这继承了 color.md 的总原则One accent. Maximum two. Everything else is neutral并在此基础上更进一步——本流派连强调色都是中性墨色。4.3 版式Layout两栏 hero标题居左、导语居右这是本风格的规范化canonical配置。慷慨留白Quiet 主题在 site/css/tokens.css 中专门覆写了间距刻度--space-2xl: 4.5rem; --space-3xl: 7rem; --space-4xl: 11rem注释明言Generous whitespace — the page breathes。精致的卡片表面极细边框oklch(91% 0 0) 8px 圆角。两栏 hero 的实现骨架可以这样组织与 site/examples/tally/index.html 的hero__layout结构同源div classhero__layout div h1 classhero__h1Bill what your customers actually use./h1 p classhero__subTally meters every API call…/p div classhero__ctas button classbtn btn--primaryStart free →/button button classbtn btn--ghostBook a demo/button /div /div !-- 右侧产品截屏 / 指标卡 / 引证 -- /div.hero__layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); /* 标题左 · 内容右 */ gap: var(--space-2xl); align-items: center; }4.4 动效Motion极简。Reveal 关闭——页面是被构图composed出来的不是被动画带出来的。这条纪律与 SKILL.md 的cut motion before adding it先砍动效再谈添加一致。4.5 文案语气Copy tone陈述式declarative、具体、技术化。Built for X 没有被禁止但必须具体说出 X 是什么——不允许空泛的自我表扬。这直接对接 slop test 的gate 56禁止编造指标stat-led 布局、对比行、证明条只能用真实数字、占位符— 标注metric to confirm的灰色块或干脆换一种宏观结构。五、允许清单本流派被放开的约束允许项说明仓库依据胶囊形 CTA填充 描边两种都要黑底填充为主 CTA 白描边为次 CTA是规范配对N5 导航示例中的cta-fillQuiet 的--radius-pill: 999px纯白纸面#fff/oklch(100% 0 0)gate 8 在此放宽Quiet 主题--color-paper零色度中性色gate 24 在此放宽。Stripe / ElevenLabs 流派天生就是单色设计Quiet 主题全部中性色 chroma 0两栏 hero标题左 段落右本风格明确规范化见 4.3 节精致卡片表面极细边框oklch(91% 0 0) 8px 圆角Quiet 主题--radius-card: 8px大而紧排的 displayclamp(2.5rem, 5vw 0.5rem, 4.75rem)Quiet 主题--text-display注意理解放宽的边界gate 8 与 gate 24 的豁免只适用于本流派slop test 文件中明确标注Genre note: modern-minimal allows pure #fff paper与modern-minimal allows zero-chroma neutrals。换到 editorial 或 atmospheric 风格纯白与零色度灰依然是违规项。这正是流派作用于哪些 slop-test gate的具体体现。六、禁止清单即使极简也不能碰的红线禁止项原因关联 slop test斜体衬线正文modern-minimal 必须从头到尾无衬线sans top-to-bottom—全发丝线hairline-everything边框应细但可见不是 editorial 的 0.5px 发丝美学—非对称散文栏本流派左对齐、遵循规整网格—首字下沉、花饰符fleurons、装饰纹一律不要—弹跳 / 过冲缓动gate 13 通用在本流派严格生效。UI 状态变化禁用cubic-bezier(0.34, 1.56, ...)等过冲曲线gate 13渐变文字gate 5 通用持续禁用。background-clip: text渐变标题是反 AI 味检查的顶级红旗gate 5玻璃拟态glassmorphism禁止—这些红线与 anti-patterns.md 的命名红旗一一对应渐变标题The gradient headline、纯黑纯白滥用、Inter-everywhere单字族模板页等均在审计动词hallmark audit中被点名。七、Nav 与 Footer 的语音选择导航与页脚不是可选的装饰而是页面结构指纹的一部分。本风格的路由规则如下依据 component-cookbook.md 底部的路由表导航Navigation默认N5 Floating pill——内容自适应尺寸的浮动胶囊与页面边缘明显分离顶部留var(--space-md)间距带模糊背景与柔和阴影。这是 Vercel / Linear / Framer / Raycast 的词汇表。可选N1Wordmark 2 链接当目标确实极简时N9边缘对齐极简当品牌配得上这份安静时。本风格禁止N6报纸报头是 editorial 词汇、N7粗野 slab与克制对抗。N5 的实现参考 components/n5-floating-pill.md关键 CSS.nav-pill { position: fixed; inset: var(--space-md) auto auto 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: var(--space-md); padding: 0.5rem 0.875rem; background: color-mix(in oklch, var(--color-paper) 78%, transparent); backdrop-filter: blur(14px) saturate(120%); border: var(--rule-hair) solid var(--color-rule); border-radius: 999px; box-shadow: 0 8px 24px -12px oklch(0% 0 0 / 0.18); }反模式警告一个占视口 95% 宽的胶囊其实就是两端变圆的通栏导航失去了明显分离、内容自适应的意义当链接把胶囊撑过 ~720px 时应删掉一个链接或改用 N1。仓库示例 site/examples/tally/index.html 正是 N5 的实际落地.nav采用浮动胶囊形态内含品牌字标、四个文本链接、Sign in 与黑色填充的 Start free 主 CTA——主 CTA 黑底填充正是canonical pair中的主位。页脚Footer默认Ft2 Inline single line——单行wordmark tagline 微小版权行上方一条发丝分割线整体克制。实现示例见 components/ft2-inline-rule-single-line.mdfooter classfoot-line p© 2026 · 137 Marlow Street · MIT licensed/p /footer可选Ft1Mast-headed、Ft5Statement当页面需要一个收尾句时。本风格禁止Ft8Marquee scroll 跑马灯动能太强、语音不对Ft3满饱和度的索引式四栏页脚——gate 52 眼中的 AI 指纹。八、Stamp 签名可追溯的风格声明每个 Hallmark 产物的 CSS 首行必须携带流派签名作为后续运行含 audit、diversification 检查的持久记录/* Hallmark · genre: modern-minimal · macrostructure: name · theme: name · enrichment: tier · nav: N# · footer: Ft# */例如genre: modern-minimal · macrostructure: Workbench · theme: Quiet · enrichment: none · nav: N5 · footer: Ft2。这条签名同时回答了 SKILL.md Step 6 要求的 accountability 问题——选择是在页面上公开做出的而不是藏在模型脑子里。九、流派与 slop test 的交互放宽 ≠ 豁免很多开发者误以为极简风格 不需要跑反 AI 味检查恰恰相反。modern-minimal 只是对三处与单色流派天然冲突的门做了局部放宽gate 8 纯白纸面、gate 24 零色度中性色其余 66 个门全部照常生效gate 51 / gate 52导航与页脚指纹检查照样运行——为什么本流派禁止 N6/N7/Ft8/Ft3正是因为这些是 editorial 或 kinetic 语汇会被判定为结构指纹错误。gate 5渐变文字、gate 13过冲缓动、gate 59两行可点击文本、gate 61–69移动端非协商项无一放宽。N5 胶囊在 375px 断点必须收敛为wordmark 汉堡按钮的顶部角落形态见 component-cookbook.md 的 Mobile collapse 表而不是挤成一团。gate 56编造指标现代极简页面最爱用数据说话但数字必须是真实的。47% conversion、trusted by 50,000 teams一旦被凭空生成就是 slop。十、一句话总结modern-minimal 是 Hallmark 为企业级 / 开发者工具 / API 页面准备的流派Quiet主题用纯白纸面、墨色即强调色、Geist 单族纪律和 8px 卡片圆角把极简做成一种有信念的选择两栏 hero 胶囊 CTA N5 浮动胶囊导航 Ft2 单行页脚构成它的标准结构指纹而放宽只发生在 gate 8 与 gate 24其余反 AI 味门槛依然一视同仁。在动手前先读取 skills/hallmark/references/component-cookbook.md 与 skills/hallmark/references/slop-test.md 的路由表和 gate 说明把本风格的每个决策落到命名令牌与可验证的规则上——这才是Minimalism with conviction的工程化实现。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考