用 AI 生成网页时，最大的挑战不是实现不了，而是做出来一看就是「AI 做的」。紫青渐变、居中标题按钮、三等分功能卡片——这些元素单独看都没有问题，但组合在一起就变成了 AI 页面的标准模板。更麻烦的是，即使反复修改需求，生成的结果仍然高度相似。今天介绍一个 GitHub 上已有 20500+ Star 的开源项目 Hallmark，它给 AI Agent 增加了一层「设计品味」。

Hallmark 将七条网页设计原则写入系统提示词，让 Agent 在生成页面之前先考虑结构、风格和用户体验。

生成过程中，它会自动选择页面结构、匹配主题，并进行反套路检查。用户只需描述需求，不需要提前列出几十条设计禁令。

实际运行效果

测试第一个需求：做一个咖啡订阅落地页，整体偏暖色，类似小咖啡馆的黑板风格。Hallmark 选择了 Long Document 结构搭配 Linen 主题——暖纸质感加上罗马衬线字体，形成了一套完整的页面方案。

第二个需求：开发者会议落地页，深色科技风。Hallmark 自动切换到 Marquee 结构和 Terminal 主题，深色背景配浅绿色元素，与前面的咖啡页面风格截然不同。

两个需求、两种完全不同的设计方案。Hallmark 与普通 AI 生成器的区别在于：它不是替换内容套模板，而是根据需要重新选择设计语言。

Hallmark 内置 21 种宏结构（Long Document、Marquee、Bento Grid、Stat-Led、Manifesto 等），每次生成时自动选择合适结构。

生成的页面包含完整的 HTML 和 CSS 文件，布局、间距、组件样式都已做好，打开即可使用。

四大核心能力

57 道反套路检测

AI 生成页面的常见套路包括：紫青渐变 Hero、Inter 字体贯穿全站、首屏堆满三列图标卡片、100vh 全居中布局。Hallmark 在输出前自动检测并过滤这些问题——卡片嵌套、渐变文字、纯黑纯白背景、虚构数据、不存在的用户评价等。

20 个内置主题

从极简风到高反差、从暖色到冷色全覆盖。Terminal 为终端绿色系，Linen 为暖纸配罗马衬线，Brutal 用近黑底加黄点突出，Midnight 以深冷色和磷光青为主。每个主题都有完整的配色、字体、间距和视觉节奏体系，使用 OKLCH 定义颜色。

如果 20 套主题都不满足需求，Hallmark 会进入自定义模式，从零创建配色、字体和布局体系。自定义主题同样需要通过 57 道反套路检测。

八状态组件

Hallmark 强制要求每个组件必须支持八种状态：default、hover、focus-visible、active、disabled、loading、error、success。不仅要看截图，还要实际运行测试。

四种工作模式

• audit：审查已有代码，只提设计问题和评分，不直接修改
• redesign：保留品牌和文案，重新设计页面结构
• study：上传喜欢的网站截图，分析宏观结构、配色和字体，生成 design.md

安装与使用

在 Claude Code 中执行以下命令即可安装：

npx skills add nutlope/hallmark

安装后直接让 Agent 使用 Hallmark 的设计能力。同时也支持 Cursor 和 Codex，v0、Lovable 等平台可将 SKILL.md 内容复制到项目指令中使用。

局限性

在电商、旅游、美食、Lookbook 等图片较多的页面中，Hallmark 更擅长处理排版和结构，图片素材仍需用户自行准备。

Hallmark 最有趣的地方在于把「设计品味」融入 Agent 的技术栈——以前 Agent 有模型、有工具、有记忆、有 RAG、有评测，但缺少判断设计质量的环节。它相当于在输出前增加了一道质量控制。

📦 开源地址：Nutlope/hallmark（MIT 协议）