用 Claude Code、Codex 等 AI 工具写前端页面，对任何人来说几乎没有了门槛。

只需简单一句话描述需求，几分钟就能拿到一个完整且能部署运行的页面。

但这些页面基本一个样：紫色渐变大标题、所有元素居中、三列圆角图标大卡片。

大家一眼就知道是 AI 生成的，如果要交付给客户或推广自己的产品，实在拿不出手。

最近在 GitHub 上找到的 Hallmark，正好解决了这个问题——它给 Agent 编程工具安装了一个「反 AI 味页面生成」的 Skill。

项目作者是 AI 圈知名开发者 Hassan El Mghari，目前已在 GitHub 上获得超过 21000 Star。

Hallmark 的实现思路很有意思，它把整个设计流程拆成了几条硬规则：当接到需求先确定页面结构，再从内置 20 套主题里匹配，生成前还要经过 57 道「AI 味」检测关卡，外加一轮自我批判，从而拒绝大模型千篇一律的页面布局。

项目直接列举了 5 个最常见的「AI 味」特征，并对应给出 Hallmark 的解决方案。比如烂大街的紫色主题、统一的 Inter 字体包、所有组件内容居中、通用图标卡片样式，还有千篇一律的顶部导航。这些特征都是大模型在训练时已固定的模式，而 Hallmark 内置的规则就是逼着模型绕开它们。

生成案例

以下每个页面都是一条 Prompt 一次直出的：

Tally 计量计费产品页：/hallmark 给 SaaS 产品做一个官网页，走现代极简风。生成结果克制、留白，看不出模板腔。

Wayfare 旅行预订网站：/hallmark 做一个旅行预订网站，要有氛围感。同一个工具换成了另一种气质。

Cinder AI 推理工具页面：/hallmark 给 AI 推理工具 Cinder 做个页面，指定 Lumen 主题。

蜂蜜农场落地页：/hallmark 给一家小规模的蜂蜜农场做个落地页。这条连风格都没指定，Garden 主题是它自己挑的。

这四个案例放在一起，很难看出来是来自同一个模型产出，也更看不到同一套模板的影子。

子命令

除了默认生成页面，Hallmark 还带有三个实用的子命令：

• /hallmark audit：对现有页面进行打分，输出问题列表方便重构
• /hallmark redesign：在保留原有文案和信息架构的前提下，将现有页面的骨架推倒重新设计
• /hallmark study：将看到的喜欢的网页截图或访问地址发给他，它会提取页面结构、字体搭配、色彩锚点等设计要素，整理到 DESIGN.md 文件中，供 AI 参考设计

Hallmark study 命令可以从参考页面提取设计要素到 DESIGN.md。

新版还增加了 Custom 模式，当需求太特殊、20 套主题都套不上时，会从零定制配色、字体和布局。

安装

安装只需一行命令：

npx skills add nutlope/hallmark

Claude Code、Cursor、Codex 三家通吃，想更新把命令重跑一遍就行。

总结

AI 把写前端的门槛打下来之后，页面的产量在暴涨，但长相越来越趋同。说到底，模型的默认审美就是训练数据的最大公约数，那些紫色渐变、居中卡片、字体都是这么来的。Hallmark 这类管审美的 Skill，以后会像代码检查一样，成为 AI 编程工作流里的标配。功能可以趋同，但页面长相如果跟一万个网站撞脸，产品就真没脸见人了。

GitHub 项目地址：github.com/Nutlope/hallmark