Hallmark 22 主题完全图鉴：从 Specimen 到 Editorial 逐一解析

Hallmark 22 主题完全图鉴从 Specimen 到 Editorial 逐一解析【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmarkHallmark 是一款面向 Claude Code、Cursor 和 Codex 的免费反 AI 味设计技能anti-AI-slop design skill它的核心资产就是一套22 个命名主题每生成一个页面都从这 22 套主题中挑选并强制要求连续两次产出的主题必须在纸张明度 / 展示字体风格 / 强调色相三个轴上至少不同。本文带你从 Specimen 到 Editorial 逐一解析 Hallmark 22 主题分别长什么样、适合什么页面帮新手快速为自己的项目选对那一款。为什么是 22 个主题而不是 1 个模板大多数 AI 生成页面都长一个样居中大标题 → 三个图标特性卡 → CTA → 四列页脚。Hallmark 的解法不是换配色而是结构性差异——22 个主题各自占据 OKLCH 色彩空间里一个不同的点纸张颜色互不相邻展示字体跨类别区分衬线 / 等宽 / 压缩无衬线 / 斜体。这套机制的关键规则主题轮换每次运行 Hallmark 都会记录上一次用了什么主题写入.hallmark/log.json下次必须换一个更远的主题三轴去重纸面明度带深 / 中 / 浅、展示字体风格、强调色相——连续两个主题至少有一项不同一键预览官方站点按T键即可在 22 个主题间循环切换同一句话会呈现 22 种完全不同的设计主题令牌全部集中定义在 site/css/tokens.css 中每个主题用[data-theme...]属性挂载到html上主题到风格流派genre的映射关系见 site/js/main.js。流派一 Editorial13 个手写排版主题Editorial 是 Hallmark 的默认流派——暖纸面、发丝线、不对称网格、克制留白规则细节见 skills/hallmark/references/genres/editorial.md。13 个主题如下Specimen暖燕麦色的编辑工坊默认主题。96% 明度的暖燕麦纸面Fraunces 斜体衬线展示字体 Geist 正文搭配标志性的橙色强调#FC4C02。它像一间安静的字体样张室适合作品集、品牌故事、字体工作室。NewsprintFT 风报纸粉真实参考了 FT 报纸的三文鱼粉纸面Playfair Display 展示 Crimson Pro 正文全衬线正文罕见的报纸手感勃艮第强调色。适合新闻站、深度内容、杂志型页面。Atelier高级时装屋冷调奶油纸 深棕墨色 Playfair Display 900 字重的 Didone 风格大标题字距标签拉开到 0.24em——克制中的奢华。时装、奢侈品、高端工作室的首选。Garden淡鼠尾草绿 玫瑰强调偏绿的冷色纸面色相 130Cormorant Garamond斜体展示玫瑰红#B6485E点缀组件带 6px 小圆角。植物园、自然系品牌、生活方式内容的气质。Salon精品药房的打字机暖象牙纸面上用 IBM Plex Mono 等宽字体做大标题——这是它与其它奶油色主题最大的差异像一张药房标签卡。适合小众香氛、手工品牌、精品小店。Linen冷调石板灰的轻几何从亚麻黄重新调色为冷灰蓝色相 220纸面Hanken Grotesk 300 细字重几何无衬线展示钢蓝强调色。画廊、建筑、设计咨询类页面。Almanac百科全书式冷纸低饱和冷调纸面色相 245 全站更小一号的字号 84rem 超宽版心 粘滞标签信息密度最高的一档。适合文档型产品、年鉴、知识索引。Studio现代编辑型工作室冷灰纸面 Fraunces 高光学斜体 森林绿强调全目录里最不常见的绿色组件带 6px 圆角和极浅阴影。研究感工作室、机构官网、创意团队。Riso Risograph 印刷风暖桃纸面Public Sans 800 大标题青 黄双强调色甚至模拟了套印偏移。独立杂志、艺术展览、活动海报页的最佳拍档。Sport锐白斜体运动风纯白纸面 Inter Tight斜体700 大标题 焦橙强调色字距收到 -0.04em速度感拉满。赛事、健身、运动品牌。Brutal粗野主义白98% 亮白纸 Albert Sans 700 压缩大字 鲜红#E63946边框加粗到 2–3px零圆角。要冲击力、要态度时选它宣言、活动、DTC 品牌。Manifesto黑底全大写宣言Brutal 的反极纯黑纸面Anton 全大写压缩字体红色#E51A1A色块展示字号最大可冲到 9rem行高压到 0.86。品牌宣言、反共识立场页。Editorial第 22 号杂志形高级感v1.0.0 加入的主题灵感来自开放设计项目暖奶油纸 珊瑚强调 Inter Tight 800 展示字体内嵌 Playfair Display 斜体强调词发丝线、罗马数字边注、双轴衬线/无衬线搭配——最杂志的一档。流派二 Modern-Minimal3 个企业级主题Stripe / Linear / ElevenLabs 学派的极简声音规则见 skills/hallmark/references/genres/modern-minimal.md。共同点Geist 级无衬线、大留白、胶囊 CTA、单一克制强调色。Quiet克制即设计全目录的反面纯白纸面、系统级字体、没有彩色强调accent 就是墨色只在键盘焦点处给一点小蓝。它故意让展示字号偏小、留白给到最大——自信的大极简适合 API 文档、基础设施产品、不想花哨的 B2B。CoralStripe 但不 Linear暖灰纸面不是纯冷中性 单一珊瑚强调胶囊按钮 8px 圆角卡片 极浅阴影。企业 SaaS、计费平台、开发者工具的温和版极简。Violet安静的紫近白纸 近黑墨 一点安静的紫只出现在焦点环和小标记上6px 圆角、胶囊 CTA。需要Linear 的克制感但又不想抄 Linear时的选择。流派三 Atmospheric5 个暗色画布主题Suno / Runway 式的暗色 AI 创意工具美学允许径向光晕、居中英雄区、发光阴影规则见 skills/hallmark/references/genres/atmospheric.md。Bloom暖色径向绽放目录里第一个非印刷主题暖奶油底上两团暖粉/珊瑚光晕16px 大圆角 发光阴影。生成音乐、AI 绘画、氛围类创作工具的招牌气质。Midnight深冷炭的技术暗色冷调蓝炭纸面色相 250Geist 细字重展示冷蓝强调。偏开发者工具暗色模式比 Bloom 冷静得多。Terminal磷光 CRT全站 JetBrains Mono 等宽连正文都是深绿磷光纸面 荧光绿强调。终端审美、CLI 工具、黑客向品牌——等宽不是点缀而是设计本身。Aurora近黑上的冷色极光近黑冷纸面 青色主强调 青绿副色两团冷色光晕右上青、左下青绿正文用 Sentient 保持冷而不冷峻。AI 基础设施、夜猫子工具站。Halo只在英雄区发光中性炭纸面暖琥珀光晕只出现在页面顶部往下是纯内容驱动的炭色页面。定位是你真正每天打开的工具比 Suno 式氛围更务实。流派四 Playful唯一的 PlumePost-Linear 软学派的代表也是唯一成员刻意保持稀缺规则见 skills/hallmark/references/genres/playful.md。Plume暖奶油 柔粉全程暖奶油纸区块交替使用着色带卡片 14px 大圆角 悬停上浮柔和玫瑰粉强调。友好但不幼稚、社区感和亲和力拉满——消费级产品、社群工具、轻松 SaaS。22 主题速查表#主题纸面展示字体强调色一句话定位1Specimen暖燕麦Fraunces 衬线橙默认编辑工坊2Newsprint三文鱼粉Playfair Display勃艮第FT 风报纸3Atelier冷奶油Playfair 900深棕时装屋奢华4Garden淡鼠尾草绿Cormorant 斜体玫瑰自然系5Salon暖象牙IBM Plex Mono棕药房打字机6Linen冷石板灰Hanken Grotesk 300钢蓝画廊极简7Almanac冷调浅纸小号无衬线石板灰百科高密度8Studio冷灰Fraunces 斜体森林绿现代工作室9Riso暖桃Public Sans 800青黄孔版印刷10Sport锐白Inter Tight 斜体焦橙运动速度11Brutal亮白Albert Sans 700鲜红粗野冲击12Manifesto纯黑Anton 全大写正红宣言海报13Quiet纯白系统无衬线无墨色克制极简14Coral暖灰Geist珊瑚温和企业15Violet近白Geist静紫安静的 Linear 感16Bloom暖奶油 光晕Geist 600暖粉珊瑚AI 创意氛围17Midnight冷炭Geist 300冷蓝技术暗色18Terminal深绿 CRT全站等宽荧光绿磷光终端19Aurora近黑 冷晕Geist 600青色冷色极光20Halo中性炭Geist 600暖琥珀只发光的工具21Plume暖奶油 色带Geist 700柔玫瑰友好消费级22Editorial暖奶油Inter Tight 800珊瑚杂志形高级上手体验按 T 键轮换 22 个主题最快的体验方式官方站点打开后按T键同一句标题会在 22 套设计间循环切换顶部横幅还能直接点选主题选择会存进localStorage真实示例集浏览 site/_tests/ 下的完整案例页播客、CLI、面包店、SaaS、作品集……每个页面都是独立 HTML CSSCSS 头部注释标注了所用的宏观结构成品示例site/examples/ 收录了 Tally、Wayfare、BananaStudio、NAJM、Hyperlane 等完整站点每个都带独立tokens.css想深入学习规则本体推荐阅读核心规则skills/hallmark/SKILL.md主题令牌源文件site/css/tokens.css每个主题的完整 OKLCH 取值与注释实战配方docs/recipes.md · DNA 提取示例docs/study-examples.md两分钟安装npx skills add nutlope/hallmark随时重跑即可更新。也可以克隆仓库后手动放置git clone https://gitcode.com/GitHub_Trending/hal/hallmark将 skills/hallmark/SKILL.md 与 skills/hallmark/references/ 目录复制到对应位置Claude Code→~/.claude/skills/hallmark/Cursor→.cursor/rules/hallmark.mdcCodex→~/.codex/skills/hallmark/装好之后直接对 AI 说一句给 X 做一个落地页Hallmark 会自动完成三问受众 / 用例 / 语气、挑选宏观结构与主题、跑完 65 道反 AI 味检查门slop test后才交付——而页面长什么样就看它抽中了 22 主题中的哪一位。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考