返回博客列表
BLOG AI 设计

Hallmark 完全指南：你的专属高品味 AI 设计搭子

bestskills

那个熟悉的「AI 味」页面

你让 AI 帮你写一个落地页。几秒钟后，它给了你一个 “挺好看” 的东西：

首页顶部是一整块紫色到蓝色的渐变，中间一行加粗大标题，下面配一句副标题，再加一个圆角按钮。往下滚动页面，你会发现有三个等宽的卡片一字排开，每个卡片顶上一个图标：⚡ 一个、🔒 一个、📊 一个，图标下面两行标题、三行说明。再往下看，“已被 10,000+ 团队信赖”，最后是一个四列链接的 footer，底部一行小小的版权。

很干净、对称、配色和谐。但你盯着看三秒，心里会冒出一个词：假。

说不上哪里错了，但你一眼就知道这是 AI 生成的。

接下来，我就来讲讲：这股 “AI 味” 到底从哪来；以及一个叫 Hallmark 的开源项目是怎么让你的作品看起来更加具有美感和独特性。

即使最后你不用它，也能收获一份 AI 味自查清单。

AI 味不是审美问题，是统计问题

先纠正一个最常见的误解。大多数人以为 AI 界面难看，是因为”模型审美不行”。不对。真正的原因藏在模型的工作方式里。

大语言模型生成任何东西，包括一个网页，本质上都是在做一件事：预测最可能的下一个词。而”最可能”，意味着它会不断向训练数据的均值回归。

一个模型能见过多少个落地页呢？几百万个。这几百万个里，绝大多数长什么样？

  • 顶部 Hero → 三栏功能卡 → CTA → Footer 的固定节奏
  • 字体是 Inter、Roboto、Open Sans 里的一个，标题正文都是同一个字体
  • 紫蓝渐变、居中大标题、100vh 满屏首屏
  • 特别喜欢用内置的 emoji 做图标
  • 一句”已被 XX,000+ 团队信赖”

于是模型忠实地、统计上正确地，复现了这个众数。所谓”AI 味”，就是这个分布的平均值本身。它不是 bug，是模型在认真完成任务时的必然结果，你要它”做个落地页”，它就给你所有落地页叠在一起的那个影子。

这也解释了一个反直觉的现象：你把 prompt 写得再详细，也很难根治。 因为你对抗的不是一句指令，而是训练数据里几百万个样本形成的引力。你说”要有设计感”，模型点头，然后依旧滑回那个众数，因为”有设计感的落地页”在它见过的数据里，长得都差不多。

视觉多样 ≠ 结构多样

Hallmark 最核心的一个洞见，也是它和市面上 “AI 换皮工具” 的本质区别：

换配色不算变化，换骨架才算。

很多工具号称能生成”多种风格”，但你仔细看，它们只是把同一个 Hero → 三栏卡 → CTA 的模板换了套颜色和圆角。结构一模一样。这种”视觉多样性”骗不过人眼，因为人眼识别”套路”靠的是结构，不是颜色。

Hallmark 的原话是：为两个不同的需求生成的两个页面，应该”感觉像两个不同的网站，而不是同一个模板的配色变体”。它坚持的是结构多样性。这是整篇文章最值得记住的一句话。

Hallmark 是谁？能干什么？

Hallmark 不是一个组件库，不是一个网站生成器。它是一份设计纪律，由 Together AI 团队出品，以 skill 的形式装进你已经在用的 AI 编程助手里，Claude Code、Cursor、Codex 都支持。装法就一行：

npx skills add nutlope/hallmark

装完之后，当你让 AI “做个页面 / 重构一下 / 学学这个网站” 时，AI 会在动手前，先被 Hallmark 的规则集接管。

它的思路，可以用一句话概括：

不要试图把 prompt 写得更聪明去”请求”好设计；而是用一套显式规则，从根本上挡住模型滑回默认众数的那条路。

把”品味”变成”可判定的闸门”

Hallmark 内部维护了一份点名到位的”AI 特征清单”。它把最能出卖 AI 身份的几个特征，称为”critical”。举几个最常见的例子：

  • 紫渐变 Hero：紫到蓝或紫到粉的背景渐变 + 居中白字。“这是辨识度最高的 AI 审美，没有之一。”
  • Inter 通吃：标题正文用同一个 Inter/Roboto，没有搭配字体。
  • 三栏图标卡：三个等宽卡片，每个卡片顶部都是图标。
  • 渐变文字标题：background-clip: text 做的渐变标题。
  • 满屏居中 Hero：min-height: 100vh，所有东西居中，一句话一个大按钮。
  • 斜体强调词：一个正体标题里，带有一两个斜体的词，以突出强调。

Hallmark 为每个典型的 AI 味设计都做一个命名，这些命名的特征被记录在这个 Skill 的参考文档 中，当 Hallmark 的 audit 指令在 AI 生成的界面里运行时，会根据这些命名的特征，标记出 AI 生成的界面里，是否存在 AI 味设计。

具体怎么挡？Hallmark 有四层武器。

第 1 层：先选骨架，而不是先选颜色

这是最关键的一步，直击”结构多样性”。在加载任何设计规则集之前，Hallmark 强制 AI 先从 21 种命名好的”宏观结构”(macrostructure) 里挑一个。这些不是配色方案，是页面的骨架形态，标题放哪、正文怎么排、用什么当分隔、按钮什么语气、首图怎么处理，打包成一个命名选择。

  • Stat-Led：适合将数据作为核心亮点进行强调的场景。
  • Workbench：适合进行功能操作和流程演示的场景。
  • Manifesto：适合展示宣言和价值观的场景。
  • Letter：适合需要以书信式展示内容的场景。
  • Bento Grid：适合展示大量细分内容，或存在多个同等重要访问入口的场景。
  • ……

更多的宏观结构可以查看这里。

而且这里有一条强制多样化规则：同一个项目里，连续两次生成不许用同一个宏观结构；它还会去读项目里有没有历史记录(见第 3 层)，读到了就必须换一个。这就是为什么 Hallmark 做的两个页面会”长得不像”。

Before picking, check the target codebase for a /Hallmark · macrostructure: · …/ comment in any existing CSS file. If you find one, your pick must be a different macrostructure. No two consecutive Hallmark outputs in the same project share a macrostructure.

第 2 层：20 个主题 + 自定义分支

骨架选好后，才轮到”穿衣服”。Hallmark 内置 20 个命名主题，分别是 Specimen、Terminal、Midnight、Garden、Newsprint、Brutal……。每个主题是一整套 OKLCH 调色板 + 字体搭配 + 质感语言。它们按 4 种”genre”(编辑体 editorial / 极简现代 modern-minimal / 氛围感 atmospheric / 活泼 playful)分簇轮换。

当你的需求带有明确的品牌意图(点名了品牌色、给了一堆具体氛围词、或直接说”要独一无二”)，它会为你现调一套专属的 OKLCH 调色板 + 免费字体搭配。

第 3 层：自我批评 + 项目记忆

在跑那 58 道闸门之前，Hallmark 还要求 AI 先给自己的设计打分，沿 6 个轴，每轴 1–5 分，任何一轴低于 3 分都要先返工重来：

轴在问什么
Philosophy(哲学)该页面所要传递的立场明确吗？还是说这仅仅只是一种排版布局？
Hierarchy(层级)2 秒内能不能看出什么是主、次、末？还是所有东西一样重？
Execution(执行)线宽、留白、焦点环、对比度这些细节都在规范内吗？
Specificity(特异性)它看起来和本次需求高度相关吗，还是像”随便谁都合适的通用页面”？
Restraint(克制)是否已经删掉所有无存在必要的元素？
Variety(多样性)该设计产出是否与项目中此前的产出具备不同的结构特征，还是仅仅更换了配色？

Hallmark 会在项目根目录写一个 .hallmark/log.json，记录每次生成用了什么骨架、什么主题。下次运行时会先读这个文件，确保新页面和最近几次都不一样。

这就是”结构多样性”能跨越多个页面持续成立的机制，它给了 AI 一份”我上次干了什么”的记忆。

第 4 层：58 道 slop-test 闸门

这是 Hallmark 把”品味”变成”工程”的核心。交付任何页面之前，AI 必须让输出跑过 58 道 slop 测试，每一道的答案都必须是”否”。

举几个例子：

  • 标题字体是不是 Inter / Roboto / Open Sans / 系统默认？
  • 有没有紫蓝渐变？包括 background-clip: text 的渐变标题？
  • 有没有三等宽、图标压标题的卡片网格？
  • Hero 是不是”所有东西都居中”？
  • 标题或展示型文字是不是斜体？
  • 用了 transition: all 吗？hover:scale-105 满屏用吗？
  • 页面在 320px 手机宽度下会横向滚动吗？可点文字会折成两行吗？
  • 用了 ✨🚀⚡ 这种 emoji 当功能图标吗？

在这里可以完整查看所有 58 道阀门。

Hallmark 的四种行为模式

Hallmark 有 1 个默认行为和 3 个动词，正好覆盖独立开发者最常见的三种处境。

全新设计（默认）

你不需要记任何命令，直接说”帮我做个 X 的落地页”就行。但 Hallmark 做的第一件事，是先问你三个问题，它把这一步当成不可跳过的纪律：

在我动手之前，我需要三样东西：

  1. 受众 ， 谁会用这个？他们已经知道什么？
  2. 用途 ， 这个页面要驱动的唯一动作是什么？(注册？订阅？阅读？购买？)
  3. 调性 ， 挑一个风格：编辑体 / 粗野 / 柔软 / 实用 / 奢华 / 活泼 / 技术 / 冷峻。

你也可以直接说”你来定”，它就会自己推断，并明确告诉你推断了什么，方便你纠偏。

然后它会当着你的面报出它的选择，“骨架：Workbench。主题：Midnight。与上次的区别：显示字体 + 强调色不同”，再开始写代码。写完跑 58 道闸门，最后给你一个 5 秒能扫完的预览摘要。

旧设计审计

这是最被低估的动词。如果你手上已经有一个”总觉得哪里不对但说不上来”的站，直接：

hallmark audit ./src/pages/index.astro

它只会读取你当前的设计，按那份 AI 特征清单给你打分，输出一份分级问题清单。但不会修改任何代码。

[critical] 紫渐变 Hero — index.astro:42
  最辨识度的 AI 审美
  → 换单一锚定色，去掉渐变背景
[major] Inter 通吃 — globals.css:8
  一个字体的页面就是模板页面
  → 配一个有辨识度的展示字体
...
总结 — 3 个 critical · 5 个 major · 2 个 minor
判决 — [ships as slop | reads as AI-generated | close， fix the minors]

对没有设计师的团队，这相当于花零成本请了一个设计评审。你甚至可以只用这个动词，把它当成一份 checklist 工具。

借鉴他人优秀的设计思想

看到一个心水的网站或截图，想”学它但不想抄它”？

hallmark study <screenshot | URL>

用户粘贴或上传一张自己欣赏的设计图片，或粘贴可访问页面的网址链接。Hallmark 会抽取它的 DNA，包括整体架构、原型范式、字体搭配、主色调基准，并生成一份诊断分析报告。

用户可选择基于提取出的设计内核重构用户内容，或导出一份可通用的 design.md 设计内核文档，或仅保留诊断报告不再执行后续操作。

如果你认为用这条命令可以克隆一个别人的网站，那可能要失望了。Hallmark 拒绝像素级克隆，拒绝付费模板站(ThemeForest、Framer/Webflow 模板、Dribbble shot 这些直接拒绝)。 它抽的是”结构和品味”，不是”别人的具体像素”。字体它只说”角色 + 候选”，配图它绝不搬运原图，只生成结构等价的占位或让你提供自己的素材。

重新设计

不管是经过 audit 还是 study 之后，如果你已经很明确自己想要的设计不是当前的风格，那我们就可以进入 redesign 的环节。

hallmark redesign <target> [--mood <name>]

这条命令会提取目标内容与设计意图，再重新设计视觉结构。需要说明的是，redesign 和全新设计（即命令不加任何参数）的行为有区别，它更克制：

  • 只重构视觉层与交互层，默认不会删除生产环境文件，除非用户明确要求删除，或是审批了列明删除项的文件级处理方案。
  • 默认对指定页面/组件文件进行原位编辑，或是新增组件/标记并接入现有路由。
  • 若本次重构需要移除多个组件、替换路由树，或是将整个应用整合为单一全新页面，需先暂停操作并向用户确认。
  • 将PDF文件、自述文档、.md 文档、技术文档、文字稿以及演示文稿视作用于理解产品的参考素材，默认不作为页面正文使用。除非用户明确要求原文照搬，否则需对内容进行概括与改写。
  • 编辑操作开始前，需列明计划修改、新建及删除的全部文件；任何文件删除操作均需获得用户明确确认。

这就是”结构多样性”落到一个具体需求上的样子。

实战案例

我用 hallmark 设计了一个「个人旅游相册」的页面。你可以看看下面两个不同的版本。

版本一：

版本1

版本1

版本二：

版本2 版本2

一份 AI 界面自查清单

就算你今天不装 Hallmark，下面这份清单也能让你在 code review 时，一眼揪出自己(或 AI)埋下的 tell。

结构层

  • 我的页面是不是又是 Hero → 三栏卡 → CTA → Footer？换个骨架。
  • 每个小节顶上是不是都挂着 01 / FEATURES 眉标？默认全部去掉。
  • 各小节的留白节奏是不是一模一样？变一变。

视觉层

  • 有没有紫蓝渐变？(背景和文字都算)去掉，用单一锚定色。
  • 标题正文是不是同一个 Inter？配一个有辨识度的展示字体。
  • Hero 是不是所有东西都居中 + 满屏高？打破对称，偏左或偏右。
  • 标题里有没有斜体强调词？改成用字重或颜色。
  • 用了纯 #000 / #fff 吗？往锚定色微调一点。
  • 功能图标是不是 ✨🚀⚡ emoji？换成统一图标库或干脆用文字。

交互层

  • 用了 transition: all 吗？指定具体属性。
  • 每个卡片都 hover:scale-105 吗？一个元素只给一个信号。
  • 焦点环是淡入出现的吗？必须瞬间出现(键盘用户需要它)。
  • 保存成功弹了个庆祝 toast 吗？用户看得见的效果，静默即可。

响应层

  • 320px 手机宽度下会横向滚动吗？
  • 按钮 / 导航文字会折成两行吗？缩短文案或 nowrap。

细节层

  • 引号是直的 " 还是弯的 "？破折号是 -- 还是 —？
  • 占位名字是”Jane Doe”、产品叫”Acme / Nexus”吗？换成贴合场景的具体名字。

这份清单本身就值钱，它是把”资深设计师的直觉”拆成了可勾选的动作。

什么时候该使用 Hallmark？

如果下列任何一个场景符合你的情况，那你可以使用 Hallmark：

  • 你是独立开发者 / 没有设计师的小团队，需要一个看起来不平庸的落地页。
  • 你在快速做 MVP，想让它看起来像一个专业的设计。
  • 你有个”总觉得哪里不对”的老站，希望另外做一个版本，看看再决定要不要重构。
  • 你看到一个不错的设计，想借鉴对方的设计思想（而不是直接抄袭）。

FAQ

Q：Hallmark 是一个组件库或网站生成器吗？

不是。它既不给你现成组件，也不直接生成网站，而是一份”设计纪律”，以 skill 的形式接管你已经在用的 AI 助手，在它动手前先用一套显式规则挡住”AI 味”。

Q：把 prompt 写得更详细，是不是就能避免”AI 味”？

很难。“AI 味”是模型向训练数据均值回归的必然结果，你对抗的不是一句指令，而是几百万个样本形成的引力。你说”要有设计感”，模型点头，然后依旧滑回那个众数。Hallmark 的做法是用显式规则从根上挡住这条退路。

Q：它支持哪些 AI 编程助手？

Claude Code、Cursor、Codex 都支持。安装只要一行：npx skills add nutlope/hallmark。

Q：audit、study、redesign 有什么区别？

audit 只读当前设计并按 AI 特征清单打分，不改代码；study 抽取一张截图或一个网址的设计”DNA”，供你借鉴而非照抄；redesign 则重新设计视觉结构，且默认不删除生产文件。不加任何参数时则是”全新设计”模式。

Q：用 study 能直接克隆别人的网站吗？

不能。Hallmark 拒绝像素级克隆，也拒绝付费模板站的搬运。它抽取的是”结构和品味”，配图绝不搬运原图，只生成结构等价的占位或让你提供自己的素材。

Q：不安装 Hallmark，这篇文章还有用吗？

有。文中的”AI 界面自查清单”本身就是一份可勾选的 checklist，能让你在 code review 时一眼揪出自己或 AI 埋下的 tell。

继续阅读