为什么 AI 做的网页总像同一个模板?Hallmark 想从骨架改起

让 AI 做一个产品首页，往往很快就有结果：大标题、醒目的按钮，往下滚，三张功能卡片整齐排开。

换个产品再来一次，颜色和文案变了，页面却还是眼熟。

这种模板感，很难用一句“再高级一点”改掉。你需要告诉 AI：该根据什么做设计，又该用什么标准判断交付。

开源项目 Hallmark 提供了一套具体办法。它面向 Claude Code、Cursor、Codex 等编码助手，把页面结构选择、视觉约束和交付检查写成可读取的设计 Skill。本文依据官方仓库与规则文件拆解，未进行独立的页面生成效果测试。

结构趋同与重组的概念示意，非真实生成效果对比。

01 换颜色，为什么还像同一个网站？

Hallmark 的核心判断是：AI 网页的重复感，常常藏在结构里。

标题总在同一个位置，卖点总被塞进三张等宽卡片，末尾再放一个行动按钮。即使把紫色换成绿色，这套阅读顺序也没变。它像给同一套样板房换了窗帘，户型仍然一样。

这给我们一个更有用的修改方向：先讨论访客需要看到什么，再讨论页面用什么颜色。

比如，一个命令行工具的介绍页，读者可能首先想知道安装方式和输出长什么样；一家社区面包店的页面，访客可能只关心今天卖什么、几点开门。这是需求推演，不是实测结果，但它能说明：两种任务，未必应该共用一套营销页结构。

02 先选页面骨架，再处理视觉

先组织内容，再确定视觉语言。

官方目前列出 21 种命名的页面宏观结构。可以理解成不同的内容组织办法：长文式页面重阅读，目录式页面重查找，工作台式页面重展示产品如何使用，图片主导式页面让视觉承担更多信息。

Hallmark 要求先选结构，再配置视觉主题。结构决定“内容怎么摆、先看什么”；主题更多决定字体、颜色和整体气质。README 当前也列出 21 个主题，别把这两个数量相同的概念混在一起。

这种顺序有实际意义。如果读者需要看操作过程，光把标题字体换得更有个性，并不能回答“这个工具到底怎么用”。

它还会检查项目已有的字体、配色和框架；项目根目录若有锁定的 design.md，后续设计应服从这套系统。对一个产品里的多个页面来说，统一性本身有价值，不能为了“每次不一样”把品牌拆散。

03 把“看起来不对”变成检查项

结构确定以后，还需要防止模型回到熟悉的套路。Hallmark 为此整理了反模式清单：没有语义理由的卡片嵌套、重复的功能卡、渐变大标题，以及与页面类型无关的导航和页脚等。

这些规则带着很强的审美立场。阅读时要分清：这是项目选择的设计约束，不是识别 AI 作品的科学检测器。 一张三栏卡片，也不能证明某个页面一定由 AI 生成。

更值得借鉴的是它的检查方式。交付前，模型要从层级、具体性、执行细节、克制程度等维度自评；检查表还覆盖文字对比度、输入状态和页面是否复用旧结构。

这里有个版本细节：截至本次核验，README 仍写着 57 项检查，当前 slop-test.md 标题已是 58 项，正文还存在补充编号。与其把“过了多少关”当成质量保证，不如打开当前文件，看它究竟检查了什么。

04 建、审、改、学，怎么放进工作流？

Hallmark 有一个默认行为和三个明确动词。

○  新建：按需求选择结构和视觉规则，生成新界面。

○  audit：读取现有目标，给出问题清单，默认只诊断。

○  redesign：在现有实现边界内调整视觉结构，保留路由、品牌和内容意图；整体重建需要明确确认。

○  study：分析截图或网址，提取结构、字体角色与颜色等设计特征。

study 很适合把模糊的参考需求说清楚。你喜欢一个网站，可能是因为它的图片比例，也可能是标题与正文的节奏。先把原因拆出来，再用于自己的内容，比一句“照着这个做”更容易讨论。

官方示例展示了从参考设计中提取结构特征的过程；这些属于项目提供的示例，不能当作我对不同模型的效果验证。

安装入口是：

npx skills add nutlope/hallmark 

安装后，在支持该 Skill 的助手里，可以这样组织一次任务：

请用 Hallmark 审查当前首页。目标读者是第一次接触产品的开发者，主要任务是理解用途并找到安装方式。先列出最影响理解的三个问题，暂时不要改代码。

这是本文建议的提示词示例，未实际执行。它先限定读者、任务和改动范围，便于拿到可讨论的诊断，再决定是否重做。

05 规则之后，还有一道人工验收

规则提供方向，设备上的检查仍需完成。

Hallmark 能提供设计方向，实际输出仍受模型能力、上下文和项目复杂度影响。

我的建议是从一个页面开始：用它找出重复结构，再检查修改是否让读者更容易完成任务。别只看首屏截图，还要打开手机尺寸，走一遍导航、表单和主要按钮。

检查时尤其要追问：重要信息是否更容易找到？键盘能否操作？加载或错误状态是否清楚？页面上的客户评价和效果数据，是否有真实来源？规则文件写了要求，不代表生成结果已经满足要求。

现有品牌也要放进判断。如果一套界面已经经过用户验证，引入这类 Skill 时，应明确哪些设计选择需要保留，哪些问题允许修改。

我更看重 Hallmark 的一点，是它让“审美反馈”有了可以讨论的对象：内容顺序、信息层级、组件状态、阅读节奏。你终于可以指出具体问题，而不必反复让 AI “再设计感一点”。

下次拿到一个似曾相识的 AI 页面，先看它的骨架。你最想改掉的是哪一种默认套路？欢迎在评论区聊聊。

项目地址：https://github.com/nutlope/hallmark