Hallmark Playful 风格指南在 AI 生成时代如何设计「柔软但不幼稚」的消费者友好页面【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark本文围绕开源设计技能 HallmarkAnti-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 将输出划分为四种风格基因genreeditorial默认的反 AI 俗套声音、modern-minimalStripe / Linear / ElevenLabs 学派、atmosphericSuno / 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 如下Token值含义--color-paperoklch(96% 0.020 70)暖奶油底色--color-paper-2oklch(94% 0.026 70)交替区块的 tinted 色带--color-paper-3oklch(91% 0.030 70)更深的表面--color-accentoklch(68% 0.130 18)柔和玫瑰粉强调色--color-accent-inkoklch(96% 0.020 70)强调色上的可读墨色--color-inkoklch(22% 0.015 50)主文字墨色非纯黑--color-focusoklch(68% 0.130 18)键盘焦点环注意强调色的彩度chroma为0.130这符合 playful 文档「accent 永远保持低彩度」的硬性要求。在组件形状component shape层面site/css/tokens.css 为 Plume 单独覆盖了圆角与阴影[data-themeplume] { --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。字体与版式声音Voiceplayful 的字体与版式规范在 genres/playful.md 的「Voice」一节中定义共六个维度维度规范DisplayGeist Sans 600字距收紧-0.025em或 bricolage 风格 700 字重的 display。友好但不幼稚BodyGeist Sans 400墨色略微柔化非纯黑Accent柔和靛蓝、暖珊瑚或低彩度玫瑰色。永远低彩度绝不用消费者 App 那种高饱和撞色Layout圆角曲面、柔和投影、更友好的卡片边缘Motion响应 hover卡片轻微上浮每个区块最多一次无弹跳 revealUI 状态切换禁用弹簧物理Copy tone温暖、直接、具体。避免为怪而怪在 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. Thats 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卡片上的柔和投影0 8px 24px -10px 低彩度强调色必须克制。仓库中 Plume 实际使用的是0 10px 28px -12px oklch(45% 0.10 18 / 0.16)。圆角体系卡片 12px仓库实际 token 为 14px输入框 8pxPlume 为 10px药丸形 999px。卡片 hover 上浮动效translateY(-2px) 阴影扩散。交替区块的柔和着色背景paper-2 与 paper 交替带一条 tinted 色带。这在 site/css/components.css 有实际实现[data-themeplume] .page .section:nth-child(even)使用--color-paper-2作为整段区块背景并以负 margin 加 padding 实现通栏色带。柔和强调色oklch(50% 0.13 282)靛蓝及类似值chroma 绝不超过 0.16。禁止What this genre disallows高饱和消费者 App 粉色 / 紫色——即使要友好色彩也必须保持低彩度。emoji 作为装饰——emoji 可以出现在文案里we built X 但绝不能作为替代图标的视觉装饰。Comic Sans、Comic Neue 及任何暗示「我们很疯癫」的字体——playful 保持精致sophisticated。弹跳 / 过冲缓动bouncy / overshoot easings——这是 slop test 的Gate 13 通用门禁即使 playful 也用平滑缓动。在 slop-test.md 中Gate 13 明确禁止在 UI 状态切换按钮、模态、工具提示上使用cubic-bezier(0.34, 1.56, ...)之类的过冲曲线只在物理交互场景保留。玻璃拟态Glassmorphism——全风格通用禁止。渐变文字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 stateUI 状态切换禁用弹簧物理。这与 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 Brutal slab加粗大写 wordmark 字母追踪大写链接 2px 底部边框。声音响亮但克制loud but composed可接受N1 Wordmark 2 links当目标极少时使用如只有两个落地目的地可接受N3 Side-rail当页面为长滚动且带区块编号时使用如 Studio 型页面禁止N5 Floating pill属于 modern-minimal 词汇与 playful 的响亮音域冲突禁止N6 Newspaper masthead编辑部风格不对味N7 的完整实现位于 components/n7-brutal-slab.md可直接复制使用header classnav-slab a classslab-markSTUDIO/a nav classslab-nav aria-labelPrimary ulliaCATALOG/a/liliaVOICE/a/liliaWORK/a/li/ul /nav a classcta-fill cta-fill--slabGET/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 Marquee scroll水平无限滚动的重复 tagline 圆点分隔线必须尊重prefers-reduced-motion: reduce可接受Ft5 Statement一句大字展示句收尾可接受Ft3 Index columns仅在页面本身是 hub枢纽页时使用禁止Ft6 Letter close温暖安静的语气风格错位Ft8 的完整实现位于 components/ft8-marquee-scroll.mdfooter classfoot-marquee aria-labelFooter div classfoot-marquee__track aria-hiddentrue spanSTUDIO · 2026 · STUDIO · 2026 · STUDIO · 2026 · STUDIO · 2026 ·/span spanSTUDIO · 2026 · STUDIO · 2026 · STUDIO · 2026 · STUDIO · 2026 ·/span /div p classvisually-hiddenStudio · 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 的默认导航是 N7Brutal slab而非现代风格的 N5Floating pill——因为「响亮但克制」才是 playful 的音域浮动的圆角药丸导航属于 modern-minimal 词汇playful 的默认页脚是 Ft8Marquee 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 直接相关的有三条Gate 7居中 heroslop test 默认反对min-height: 100vh 全居中的 hero但注明atmospheric 与 playful 允许居中 hero——当画布本身就是设计时Suno 式。Gate 5渐变文字通用门禁playful 不放宽渐变文字任何风格都禁止。Gate 13过冲缓动通用门禁playful 不放宽即使俏皮风格也只用平滑缓动。此外 Gate 23 规定 atmospheric、modern-minimal 与 playful从不默认使用 Specimen macrostructure——Specimen 回退是全局禁用的默认陷阱只有 editorial 且 brief 明确信号时才能使用。整套 slop-test.md 的核查方式是输出前逐条过门禁任一答案为「是」即判失败修正后重跑直到全部通过当前为 66 道门禁的完整列表。落地路径如何在你的项目中实践 playful综合以上规范一次符合 playful 风格的页面构建应遵循以下步骤信号检测brief 中出现 fun / consumer / casual / family / kids / friendly / onboarding-heavy / community / social / tactile-but-soft 等信号才进入 playful否则回退 editorial。锁定主题playful 只在 Plume 上轮换直接引入 site/css/tokens.css 中的[data-themeplume]token 块暖奶油纸面、paper-2 色带、oklch(68% 0.130 18)玫瑰强调色、14px 卡片圆角、999px 药丸、10px 输入框。组合导航与页脚默认 N7 Brutal slab Ft8 Marquee scroll目的地极少时用 N1长滚动编号页面用 N3footer 可接受 Ft5 / Ft3禁用N5、N6、Ft6。实现允许项卡片柔和投影如0 10px 28px -12px低彩度强调色、hover 上浮translateY(-2px) 阴影扩张、交替区块 tinted 色带参考 site/css/components.css 的nth-child(even)实现。守住禁止项低彩度上限 chroma ≤ 0.16、无 emoji 装饰、无 Comic 系字体、无过冲缓动Gate 13、无玻璃拟态、无渐变文字Gate 5。盖戳在 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考