现在用 AI 来生成网页，最担心的不是做不出来，而是看起来就是“AI 做的”。
紫青渐变、居中标题按钮、三等分功能卡片等元素单独来看都没问题。
但是组合起来就变成了 AI 网页的标准答案。
更麻烦的是，即使重新修改需求再生成，结果也还是非常相似。
最后只能不断加限制条件，比如不能有紫渐变、不能全居中、不能虚构数据。
写了很多规则之后，效果才勉强可以接受。
今天我在 GitHub 上又看到了一个 skill，正好解决了我遇到的问题。
它的名字叫 Hallmark，在 GitHub 上已经有 20500 多个 Star。
简单来说，它给 Agent 增加了一层“设计品味”。
Hallmark 将七条网页设计原则写入系统提示词中，让 Agent 在生成页面之前先考虑结构、风格和用户体验。
在生成的过程中，它会自动选择页面结构、匹配主题、做反套路检查。
你只要说想要做什么就可以了，不需要提前告诉它几十条设计禁令。
看一下实际运行效果
我给 Claude Code 提了一个需求，做一个咖啡订阅落地页，整体偏向暖色，希望像一家小咖啡馆的黑板设计。
Hallmark 并没有直接使用常见的 Landing Page 模板，而是选择了一个 Long Document 的结构。
并且搭配上 Linen 主题，用暖纸质感和罗马衬线字体组合起来，最后就形成了一套完整的页面。
随后换一个需求继续测试。
让它制作一个开发者会议落地页，要求为深色科技风。
Hallmark 自动切换到 Marquee 结构并且用上了 Terminal 主题。
深色背景配和浅绿色元素，整个风格与前面的咖啡页面大不相同。
两个需求、两个页面、两种不同的设计方案。
Hallmark 和普通的 AI 生成网页最大的不同之处就是：它不是替换内容，而是重新选择设计语言。
Hallmark 里有 21 种宏结构，比如 Long Document、Marquee、Bento Grid、Stat-Led、Manifesto 等等。
每次生成的时候都会根据需要选择不同的结构，不会出现“换一个标题再套模板”的情况。
上面两个例子生成的页面都是完整的 HTML 和 CSS 文件。
布局、间距、组件样式都已做好，不需要再手动去调整细节了，打开就可以直接使用。
它把 AI Agent 常见套路提前拦截
01 57 道反套路检测门。
最容易生成的页面风格基本上都有固定的套路。
比如紫青渐变 Hero、Inter 字体贯穿全站、首屏堆满三列图标卡片，再加上一个 100vh 全居中布局。
这些看起来很美，但是实际上已经成了 AI 页面的标志。
Hallmark 会在输出之前做检测，把常见的问题提前过滤掉。
卡片套卡片、渐变文字、纯黑纯白背景、虚构数据、不存在的用户评价等。
你不需要提前列出规则，Agent 会自动避开这些生成痕迹。
02 20 个内置主题。
除了结构之外，Hallmark 还有 20 个设计主题。
从极简风、高反差，到暖色、冷色都包括在内。
Terminal 为终端绿色系，Linen 为暖纸配罗马衬线，Brutal 用近黑底色加黄点突出，Midnight 以深冷色和磷光青为主。
每个主题都有一套固定的配色、字体、间距和视觉节奏，并且用 OKLCH 来定义颜色。
它不会固定套用同一种视觉方案，而是根据场景重新组合。
让最终结果保持差异。
如果 20 套主题都不能满足需求的话，Hallmark 就会进入自定义模式。
它不会简单修改一个模板，而是重新设计配色、字体和布局体系。
比如说你要做复古手写风，它就会从零开始创建出相应的主题。
同样，自定义主题依然需要通过 57 道反套路检测。
03 八状态组件强制输出。
很多 AI 生成的网页最大的问题就是截图看起来很美，但是实际交互的时候却很不完整。
Hallmark 对于组件的状态有强制的要求。
default、hover、focus-visible、active、disabled、loading、error、success 这八种状态都必须存在。
不仅要看最后的截图，还要实际运行页面进行测试。
比如禁用一个输入框，触发一次 loading，看组件是否能够正确响应。
04 四个动词贯穿整个设计流程。
Hallmark 不仅可以生成页面，而且还提供四种工作模式。
audit 用来审查已经存在的代码，只提出设计上的问题和评分，不直接修改。
redesign 会保留品牌和文案，但是要重新设计页面结构。
study 更有趣，你可以上传自己喜欢的网站截图，让其分析宏观结构、配色和字体角色，并生成 design.md。
从生成到分析，一个 skill 都被覆盖了。
用起来也很简单
打开 Claude Code，然后执行下面的命令就可以安装了。
npx skills add nutlope/hallmark安装完成后，就可以直接让 Agent 使用 Hallmark 的设计能力。
但是它也有自己的局限性。
目前 Hallmark 只支持 Claude Code、Cursor 和 Codex。
v0、Lovable 也可以用，但是要把 SKILL.md 的内容复制到项目指令里。
另外，在电商、旅游、美食、Lookbook 等图片较多的页面里，它目前更偏向处理排版和结构。
图片素材仍然需要自己准备。
写在最后
Hallmark 最有趣的地方就是把“设计品味”加入到 Agent 的技术栈中。
以前的 Agent 有模型、有工具、有记忆、有 RAG、有评测，但是缺少一个判断设计质量的环节。
Hallmark 相当于给 Agent 增加了一道质量控制，在输出之前多了一步。
经常用 AI 来制作网页、落地页的人可以试一试。
项目基于 MIT 协议开源，感兴趣的话可以去 GitHub 查看源码和文档。
开源地址：https://github.com/Nutlope/hallmark
既然看到这里，欢迎点赞、在看、转发，也可以点个 Star ⭐，获取更多开源项目分享。我们下期见！
