尧图网站建设 
BananaStudio 示例拆解:读懂 playful 生成式创意工作室设计语言的完整指南【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmarkBananaStudio是 Hallmark(面向 Claude Code、Cursor、Codex 的 Anti-AI-slop 设计技能)官方示例中的一个「AI 头像生成工作室」落地页。它由同一条规则集两次生成而来,完整展示了 playful 风格如何做到活泼但不幼稚。本篇带你用 5 分钟读懂它的配色、字体、结构与动效设计语言。为什么这个示例值得拆解:一次两次生成的实验每个 Hallmark 示例都自带一份生成日志。BananaStudio 的日志 .hallmark/log.json 记录了同一个品牌的两次产出:轮次宏观结构主题风格轴第一轮Bento Grid( Bento 网格)Quiet(浅色)浅色 / 几何无衬线 / 暖琥珀第二轮Marquee Hero(走马灯 Hero)Bloom(深色)深色 / 斜体衬线 / 高饱和琥珀第二轮的 brief 只有一句话:redesign to dark mode, bold, smooth interactions, animated animations。结果页面不是换个皮肤,而是换了一副骨架——这正是 Hallmark 的主题多样化规则(两次产出必须在纸面明度、字体风格、强调色三个轴上至少差一项)在起作用。设计语言第一层:一份 tokens.css 定生死这个页面最不像 AI 生成的地方,是它的色彩体系。打开 tokens.css,你会看到全部颜色都写成带注释的 OKLCH 变量:纸面色:深夜紫oklch(10% 0.018 285),而不是偷懒的纯黑强调色:琥珀绽放(amber bloom)色相 75°,只允许高饱和地出现一次字体三件套:Fraunces 斜体衬线做标题、Geist 做正文、Geist Mono 做点缀——三种字各干各的活所有颜色、字号、间距、圆角、动效时长(120ms 微交互 → 9s 光孔动画)全部收敛为命名变量。页面 CSS 里禁止出现裸写色值——这是 Hallmark slop-test 的第 58 道关卡。结构指纹:Marquee Hero Tier-A 纯 CSS 动画页面骨架来自 21 种宏观结构中的Marquee Hero:超大斜体标题居左,右侧用纯 CSS 绘制的动画光孔当配重,底部一条 Boardroom / Editorial / Noir 的走马灯文字带横穿整屏。值得新手注意的是它的装饰升级等级:Hallmark 规定视觉装饰的优先级是 纯排版 →Tier A 纯 CSS 绘制→ 手绘 SVG → 生成图 → 动画库。BananaStudio 的呼吸感头像、光孔开合全部用 CSS 画出来,零图片、零 Lottie——这是它质感高级的关键。规则出处见 hero-enrichment.md。微交互清单:5 个小动效,一个都不多余index.html 底部内嵌了全部脚本,共 5 段、每段都是一次性触发 尊重prefers-reduced-motion: Hero 区前后对比滑块:拖动对比手机自拍 → 4K 精修,同时支持键盘方向键 数字滚动计数:100,000 头像交付量,进入视口才开始动画 导航悬浮变形:滚过首屏后导航条加底色浮起✨ 逐块错峰入场:IntersectionObserver 序号延迟,每屏只出现一次 推荐套餐脉冲:定价卡进入视口时轻微呼吸一次原则很统一:动效服务于信息,且用户选择减少动效时全部降级为静态。playful 风格边界:活泼的克制很多人以为 playful 糖果色 表情符号,这恰恰是 Hallmark 明令禁止的AI 味。playful.md 里写着这条风格的红线:✅ 允许:12px 圆角卡片、低彩度柔和阴影、悬停轻抬、温暖直白的文案❌ 禁止:高饱和粉紫、玻璃拟态、渐变字、弹跳缓动、装可爱字体BananaStudio 把 playful 翻译成了摄影棚的俏皮:深色底 琥珀光 会呼吸的头像,文案依然具体(平均交付 27 分钟,重拍率 4.1%)。这就是soft, but exact(柔软而精确)的注脚。如何复现:三步生成你自己的 playful 页面安装技能:npx skills add nutlope/hallmark(或把 SKILL.md 与 references/ 复制到~/.claude/skills/hallmark/)写一条带信号词的 brief:提到 fun / friendly / casual 等词,规则集会静默切到 playful 风格按T键轮换主题:同一 brief 可在 22 个命名主题间切换,每个主题自带不同的字体配对与色彩锚点更多可对照的成品案例见 docs/recipes.md 与 docs/study-examples.md,完整示例源码都在 site/examples/bananastudio/ 下,建议配合 styles.css 顶部那条/* Hallmark · macrostructure: ... */签名注释一起读。小结BananaStudio 示例证明了一件事:让 AI 生成的页面不像 AI 生成不靠运气,而靠可执行的规则——先选宏观结构,再锁 tokens,最后用 65 道 slop-test 关卡自检。读懂了这套设计语言,你也就能看懂其他 7 个官方示例为什么同门不同脸。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 BananaStudio 示例拆解:读懂 playful 生成式创意工作室设计语言的完整指南
BananaStudio 示例拆解:读懂 playful 生成式创意工作室设计语言的完整指南【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmarkBananaStudio是 Hallmark(面向 Claude Code、Cursor、Codex 的 Anti-AI-slop 设计技能)官方示例中的一个「AI 头像生成工作室」落地页。它由同一条规则集两次生成而来,完整展示了 playful 风格如何做到活泼但不幼稚。本篇带你用 5 分钟读懂它的配色、字体、结构与动效设计语言。为什么这个示例值得拆解:一次两次生成的实验每个 Hallmark 示例都自带一份生成日志。BananaStudio 的日志 .hallmark/log.json 记录了同一个品牌的两次产出:轮次宏观结构主题风格轴第一轮Bento Grid( Bento 网格)Quiet(浅色)浅色 / 几何无衬线 / 暖琥珀第二轮Marquee Hero(走马灯 Hero)Bloom(深色)深色 / 斜体衬线 / 高饱和琥珀第二轮的 brief 只有一句话:redesign to dark mode, bold, smooth interactions, animated animations。结果页面不是换个皮肤,而是换了一副骨架——这正是 Hallmark 的主题多样化规则(两次产出必须在纸面明度、字体风格、强调色三个轴上至少差一项)在起作用。设计语言第一层:一份 tokens.css 定生死这个页面最不像 AI 生成的地方,是它的色彩体系。打开 tokens.css,你会看到全部颜色都写成带注释的 OKLCH 变量:纸面色:深夜紫oklch(10% 0.018 285),而不是偷懒的纯黑强调色:琥珀绽放(amber bloom)色相 75°,只允许高饱和地出现一次字体三件套:Fraunces 斜体衬线做标题、Geist 做正文、Geist Mono 做点缀——三种字各干各的活所有颜色、字号、间距、圆角、动效时长(120ms 微交互 → 9s 光孔动画)全部收敛为命名变量。页面 CSS 里禁止出现裸写色值——这是 Hallmark slop-test 的第 58 道关卡。结构指纹:Marquee Hero Tier-A 纯 CSS 动画页面骨架来自 21 种宏观结构中的Marquee Hero:超大斜体标题居左,右侧用纯 CSS 绘制的动画光孔当配重,底部一条 Boardroom / Editorial / Noir 的走马灯文字带横穿整屏。值得新手注意的是它的装饰升级等级:Hallmark 规定视觉装饰的优先级是 纯排版 →Tier A 纯 CSS 绘制→ 手绘 SVG → 生成图 → 动画库。BananaStudio 的呼吸感头像、光孔开合全部用 CSS 画出来,零图片、零 Lottie——这是它质感高级的关键。规则出处见 hero-enrichment.md。微交互清单:5 个小动效,一个都不多余index.html 底部内嵌了全部脚本,共 5 段、每段都是一次性触发 尊重prefers-reduced-motion: Hero 区前后对比滑块:拖动对比手机自拍 → 4K 精修,同时支持键盘方向键 数字滚动计数:100,000 头像交付量,进入视口才开始动画 导航悬浮变形:滚过首屏后导航条加底色浮起✨ 逐块错峰入场:IntersectionObserver 序号延迟,每屏只出现一次 推荐套餐脉冲:定价卡进入视口时轻微呼吸一次原则很统一:动效服务于信息,且用户选择减少动效时全部降级为静态。playful 风格边界:活泼的克制很多人以为 playful 糖果色 表情符号,这恰恰是 Hallmark 明令禁止的AI 味。playful.md 里写着这条风格的红线:✅ 允许:12px 圆角卡片、低彩度柔和阴影、悬停轻抬、温暖直白的文案❌ 禁止:高饱和粉紫、玻璃拟态、渐变字、弹跳缓动、装可爱字体BananaStudio 把 playful 翻译成了摄影棚的俏皮:深色底 琥珀光 会呼吸的头像,文案依然具体(平均交付 27 分钟,重拍率 4.1%)。这就是soft, but exact(柔软而精确)的注脚。如何复现:三步生成你自己的 playful 页面安装技能:npx skills add nutlope/hallmark(或把 SKILL.md 与 references/ 复制到~/.claude/skills/hallmark/)写一条带信号词的 brief:提到 fun / friendly / casual 等词,规则集会静默切到 playful 风格按T键轮换主题:同一 brief 可在 22 个命名主题间切换,每个主题自带不同的字体配对与色彩锚点更多可对照的成品案例见 docs/recipes.md 与 docs/study-examples.md,完整示例源码都在 site/examples/bananastudio/ 下,建议配合 styles.css 顶部那条/* Hallmark · macrostructure: ... */签名注释一起读。小结BananaStudio 示例证明了一件事:让 AI 生成的页面不像 AI 生成不靠运气,而靠可执行的规则——先选宏观结构,再锁 tokens,最后用 65 道 slop-test 关卡自检。读懂了这套设计语言,你也就能看懂其他 7 个官方示例为什么同门不同脸。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考