企业官网建设流程全解析

Hallmark Playful 风格指南：在 AI 生成时代如何设计「柔软但不幼稚」的消费者友好页面

【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark

本文围绕开源设计技能 Hallmark（Anti-AI-slop design skill for Claude Code, Cursor, and Codex）的四大风格基因之一——playful（俏皮柔和）——展开。它面向消费者导向、强 onboarding、社区友好的页面类型，核心回答一个问题：如何在 Notion 营销页与 Figma onboarding 的「后 Linear 柔软学校」美学坐标系中，做出友好、可亲但又保持克制与专业的界面，而不是落入「消费者 App 高饱和粉色 + emoji 装饰 + 弹性动画」的俗套。读完本文，你将掌握 playful 风格的适用信号、允许项与禁止项、字体与色彩 token、动效纪律、导航/页脚组合方案，以及它在 Hallmark slop test 中的对应约束，可直接用于编写符合该风格规范的落地页。

什么是 Hallmark 的 playful 风格

在 SKILL.md 中，Hallmark 将输出划分为四种风格基因（genre）：editorial（默认的反 AI 俗套声音）、modern-minimal（Stripe / Linear / ElevenLabs 学派）、atmospheric（Suno / Runway / 深色 AI 工具学派）与playful（后 Linear 柔软学派）。playful 的定位文档位于 genres/playful.md，它的一句话定义是：

面向消费者 / 友好 / 以 onboarding 为导向的页面。柔软的曲面、温和的色彩、响应 hover 的动效、更友善的语气。更接近 Notion 的营销页或 Figma 的 onboarding，而不是 Stripe 的 API 文档。

关键词是soft（柔软）与friendly（友好），但两条底线必须同时守住：never childish（绝不幼稚）、never quirk-for-quirk（绝不为怪而怪）。这是 playful 与「卡通化」「低龄化」的根本分界。

何时启用：信号驱动的选择，克制是前提

playful 不是默认选项。根据 genres/playful.md 的「When to pick it」一节，只有在 brief 中明确出现以下信号时才应选择它：

• 情绪类：fun、casual、friendly、approachable、tactile-but-soft、post-Linear-soft
• 人群类：family、kids、community、social
• 场景类：consumer、onboarding-heavy

与之对应的信号路由逻辑也在 SKILL.md 第 1 步「Genre — pick before themes」中明确列出：fun, consumer, casual, friendly, onboarding, family, community这些信号命中后，才加载references/genres/playful.md并进入该风格；无信号时静默默认走 editorial。

文档特别强调了一个反向约束：

Pick playful sparingly — most consumer briefs still belong to editorial (warm-paper, hand-set) unless the user explicitly asks forsofterandfriendlier.

也就是说，绝大多数消费者类 brief 仍然应该落在 editorial（暖纸、手工排印）上，除非用户明确要求「更柔软、更友好」。同时，playful 的题材库被刻意做得很小——文档原话是「The genre is small intentionally — playful is easy to overdo（该风格被刻意做小——playful 太容易做过头）」。

主题归属：Plume 是唯一规范主题

playful 风格对应的主题集群（theme cluster）是Plume（羽毛，规范主题）。在 SKILL.md 中，主题轮换规则明确写到：playful stays on Plume——playful 风格只在 Plume 主题内轮换，不像 editorial 那样在十二个主题间行走。

Plume 的完整 token 定义位于 site/css/tokens.css，其设计意图注释为：

温暖的奶油色贯穿始终，区块交替使用 paper-2 色带，卡片带 hover 上浮效果，柔和玫瑰色强调色。页面想要既友好又不甜腻（friendly without being twee）。

关键色彩 token 如下：

注意强调色的彩度（chroma）为0.130，这符合 playful 文档「accent 永远保持低彩度」的硬性要求。

在组件形状（component shape）层面，site/css/tokens.css 为 Plume 单独覆盖了圆角与阴影：

[data-theme="plume"] { --radius-card: 14px; --radius-pill: 999px; --radius-input: 10px; --shadow-card: 0 10px 28px -12px oklch(45% 0.10 18 / 0.16); }

文件头部注释明确写道：Plume 14px 是全仓库最圆的卡片圆角——因为它是 playful 主题；没有哪个元素是「为了好玩」而变圆的。这与文档中「12 px radius is the upper bound」的说法略有偏差——以当前仓库实际 token 值为准，Plume 的--radius-card是 14px，--radius-pill是全圆（999px），--radius-input是 10px。

字体与版式声音（Voice）

playful 的字体与版式规范在 genres/playful.md 的「Voice」一节中定义，共六个维度：

在 site/css/components.css 中可以看到 Plume 的实际落地：hero 标题、引用、统计数字、区块标题、页脚 wordmark、spec 名称等一律使用var(--font-display)（Geist 700、letter-spacing: -0.025em），而 lede、卡片简介、tagline 使用var(--font-body)。

文案语气的对照标准（Voice fixtures）为：

• "Made for teams who write together."（为一起写作的团队而生）
• "Soft, but exact."（柔软，但精确）
• "Software can be soft and exact at once. That's the trick."（软件可以同时柔软又精确。这就是诀窍）
• "For the people who keep things tidy."（为那些把东西收拾得井井有条的人）
• "A small tool, gently opinionated."（一个小工具，温和地有自己的主张）

文档给出的正反例格外重要：用"Made for teams who write together."而非"For the squad ✨"——前者温暖具体，后者是 emoji 化的廉价玩梗。

允许项与禁止项：完整的红绿灯清单

playful 风格的红绿灯清单是本文档最具实操价值的部分，完整继承如下。

允许（What this genre allows）

1. 卡片上的柔和投影：0 8px 24px -10px <低彩度强调色>，必须克制。仓库中 Plume 实际使用的是0 10px 28px -12px oklch(45% 0.10 18 / 0.16)。
2. 圆角体系：卡片 12px（仓库实际 token 为 14px），输入框 8px（Plume 为 10px），药丸形 999px。
3. 卡片 hover 上浮动效：translateY(-2px)+ 阴影扩散。
4. 交替区块的柔和着色背景：paper-2 与 paper 交替，带一条 tinted 色带。这在 site/css/components.css 有实际实现：[data-theme="plume"] .page > .section:nth-child(even)使用--color-paper-2作为整段区块背景，并以负 margin 加 padding 实现通栏色带。
5. 柔和强调色：oklch(50% 0.13 282)（靛蓝）及类似值，chroma 绝不超过 0.16。

禁止（What this genre disallows）

1. 高饱和消费者 App 粉色 / 紫色——即使要友好，色彩也必须保持低彩度。
2. emoji 作为装饰——emoji 可以出现在文案里（"we built X 🌱"），但绝不能作为替代图标的视觉装饰。
3. Comic Sans、Comic Neue 及任何暗示「我们很疯癫」的字体——playful 保持精致（sophisticated）。
4. 弹跳 / 过冲缓动（bouncy / overshoot easings）——这是 slop test 的Gate 13 通用门禁，即使 playful 也用平滑缓动。在 slop-test.md 中，Gate 13 明确禁止在 UI 状态切换（按钮、模态、工具提示）上使用cubic-bezier(0.34, 1.56, ...)之类的过冲曲线，只在物理交互场景保留。
5. 玻璃拟态（Glassmorphism）——全风格通用禁止。
6. 渐变文字（Gradient text）——Gate 5 通用门禁，全风格禁止。在 slop-test.md 中写明：任何background-clip: text渐变标题直接判失败，无任何风格例外。

动效与微交互纪律

playful 文档对动效有三条硬约束：

• Motion responsive on hover：卡片轻微上浮（translateY(-2px)+ 阴影扩张）是唯一默认动效；
• One small bounce-free reveal per section：每个区块最多一个无弹跳的 reveal，克制是前提；
• No spring physics on UI state：UI 状态切换禁用弹簧物理。

这与 SKILL.md 第 6 步 Build 的全局动效规则完全一致：只动画transform和opacity，绝不动画布局属性；只使用三个命名缓动--ease-out、--ease-in、--ease-in-out，绝不使用浏览器默认ease；必须支持prefers-reduced-motion: reduce，空间运动坍缩为 ≤150ms 的透明度交叉淡化。

在 slop test 中，slop-test.md 还有一条与 playful 高度相关的门禁：Gate 14 禁止同一元素同时叠加超过一种 hover 效果（translate + scale + shadow + colour + rotate）。这与「hover 只做一种轻微上浮」的 playful 规范互为表里。

导航与页脚组合：完整路由表

playful 文档对导航（N#）与页脚（Ft#）给出了明确的默认、可接受与禁止组合，这些路由表同时存在于 component-cookbook.md 中。

导航（Navigation）

N7 的完整实现位于 components/n7-brutal-slab.md，可直接复制使用：

<header class="nav-slab"> <a class="slab-mark">STUDIO</a> <nav class="slab-nav" aria-label="Primary"> <ul><li><a>CATALOG</a></li><li><a>VOICE</a></li><li><a>WORK</a></li></ul> </nav> <a class="cta-fill cta-fill--slab">GET</a> </header>

.nav-slab { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm) var(--page-gutter); border-bottom: 2px solid var(--color-ink); background: var(--color-paper); } .slab-mark { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.04em; } .slab-nav ul { display: flex; gap: var(--space-md); list-style: none; padding: 0; margin: 0 0 0 auto; } .slab-nav a { text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--text-sm); font-weight: 600; }

N1 与 N3 的雏形代码也分别在其对应文件中：N1 是左侧 wordmark + 右侧两枚文字链接的极简横条；N3 是左侧固定竖条，wordmark 竖向排布加 2–3 个区块圆点指示器。

值得注意的反模式：把 N7 与圆角、柔和阴影或 backdrop-blur 混搭是打架的。文档原话：如果你伸手去拿 blur，就降到 N5；如果你伸手去拿圆角，就降到 N1。

页脚（Footer）

Ft8 的完整实现位于 components/ft8-marquee-scroll.md：

<footer class="foot-marquee" aria-label="Footer"> <div class="foot-marquee__track" aria-hidden="true"> <span>STUDIO · 2026 · STUDIO · 2026 · STUDIO · 2026 · STUDIO · 2026 ·</span> <span>STUDIO · 2026 · STUDIO · 2026 · STUDIO · 2026 · STUDIO · 2026 ·</span> </div> <p class="visually-hidden">Studio · 2026 · MIT licensed</p> </footer>

.foot-marquee { overflow: hidden; border-top: 2px solid var(--color-ink); } .foot-marquee__track { display: flex; gap: var(--space-2xl); white-space: nowrap; padding-block: var(--space-md); animation: foot-marquee 32s linear infinite; } .foot-marquee__track span { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.08em; font-size: clamp(1rem, 2.5vw, 1.5rem); } @keyframes foot-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .foot-marquee__track { animation: none; } }

该文件还明确警告：Ft8 用于 editorial / quiet 场景会显得吵闹，只与 playful / sport / manifesto 声音搭配，并且永远尊重prefers-reduced-motion: reduce（即关闭滚动动画）。

从路由表反推的组合纪律

综合 component-cookbook.md 的路由表可以看出 Hallmark 的组件组合哲学：

• playful 的默认导航是 N7（Brutal slab），而非现代风格的 N5（Floating pill）——因为「响亮但克制」才是 playful 的音域，浮动的圆角药丸导航属于 modern-minimal 词汇；
• playful 的默认页脚是 Ft8（Marquee scroll），因为水平滚动跑马灯是 loud / kinetic 声音的标志性表达；
• nav 与 footer 也参与去重轮换：同一会话中连续两次构建不得共用同一导航原型或同一页脚原型，即使属于同一风格。

盖章签名（Stamp Signature）与交付物纪律

每个 playful 风格的输出必须在 CSS 文件第一行盖上「签名戳」，用于后续构建的去重轮换与审计。格式如下：

/* Hallmark · genre: playful · macrostructure: <name> · theme: <name> · enrichment: <tier> · nav: <N#> · footer: <Ft#> */

这是 SKILL.md 第 6 步的硬性要求，也是 Step 2.5 项目记忆读取的依据：下次 Hallmark 运行时会读取该戳，从而选择一个不同的 macrostructure / 主题 / 导航 / 页脚组合。主题轮换规则进一步要求：相邻两次输出必须在纸面亮度带（paper band）/ display 样式（display style）/ 强调色相（accent hue）三个轴上至少一项不同——而 playful 固定在 Plume，因此它的差异化主要落在 macrostructure、组件原型与 knob 取值上。

在 slop test 中的位置：playful 的放宽与不放宽

在 slop-test.md 中，风格门禁分为通用门禁与按风格放宽（genre-scoped）两类。与 playful 直接相关的有三条：

1. Gate 7（居中 hero）：slop test 默认反对min-height: 100vh+ 全居中的 hero，但注明atmospheric 与 playful 允许居中 hero——当画布本身就是设计时（Suno 式）。
2. Gate 5（渐变文字）：通用门禁，playful 不放宽，渐变文字任何风格都禁止。
3. Gate 13（过冲缓动）：通用门禁，playful 不放宽，即使俏皮风格也只用平滑缓动。

此外 Gate 23 规定 atmospheric、modern-minimal 与 playful从不默认使用 Specimen macrostructure——Specimen 回退是全局禁用的默认陷阱，只有 editorial 且 brief 明确信号时才能使用。整套 slop-test.md 的核查方式是：输出前逐条过门禁，任一答案为「是」即判失败，修正后重跑，直到全部通过（当前为 66 道门禁的完整列表）。

落地路径：如何在你的项目中实践 playful

综合以上规范，一次符合 playful 风格的页面构建应遵循以下步骤：

1. 信号检测：brief 中出现 fun / consumer / casual / family / kids / friendly / onboarding-heavy / community / social / tactile-but-soft 等信号才进入 playful；否则回退 editorial。
2. 锁定主题：playful 只在 Plume 上轮换，直接引入 site/css/tokens.css 中的[data-theme="plume"]token 块（暖奶油纸面、paper-2 色带、oklch(68% 0.130 18)玫瑰强调色、14px 卡片圆角、999px 药丸、10px 输入框）。
3. 组合导航与页脚：默认 N7 Brutal slab + Ft8 Marquee scroll；目的地极少时用 N1，长滚动编号页面用 N3；footer 可接受 Ft5 / Ft3；禁用N5、N6、Ft6。
4. 实现允许项：卡片柔和投影（如0 10px 28px -12px低彩度强调色）、hover 上浮translateY(-2px)+ 阴影扩张、交替区块 tinted 色带（参考 site/css/components.css 的nth-child(even)实现）。
5. 守住禁止项：低彩度上限 chroma ≤ 0.16、无 emoji 装饰、无 Comic 系字体、无过冲缓动（Gate 13）、无玻璃拟态、无渐变文字（Gate 5）。
6. 盖戳：在 CSS 顶部写入/* Hallmark · genre: playful · macrostructure: <name> · theme: Plume · enrichment: <tier> · nav: <N#> · footer: <Ft#> */，并写入.hallmark/log.json项目记忆，供下次构建去重。

参考风格基准（Reference register）：柔软曲面、低彩度色彩、友好但克制的字体、响应 hover 的动效——post-Linear soft school。永远记住这句自我检查：Never childish, never quirk-for-quirk（绝不幼稚，绝不为怪而怪）。

【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark