告别紫青渐变AI网页：Hallmark用57道反套路检测重写页面设计流程

用AI生成网页时，最让人头疼的不是做不出来，而是做出来的页面一眼就能看出是"AI做的"——紫青渐变、居中标题按钮、三等分功能卡片，这些元素单独看都没问题，组合在一起就成了AI网页的标准答案。即使反复修改需求重新生成，结果也非常相似，最后只能不断加限制条件。

Hallmark 这个Skill正好解决了这个问题。它在GitHub上已经有超过20500个Star。

简单来说，Hallmark给Agent增加了一层"设计品味"。它将七条网页设计原则写入系统提示词，让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文件，布局、间距、组件样式都已做好，打开即可使用。

核心能力

01 57道反套路检测门

最容易生成的页面风格都有固定套路：紫青渐变Hero、Inter字体贯穿全站、首屏堆满三列图标卡片、100vh全居中布局。这些已经成了AI页面的标志。Hallmark在输出前做检测，把卡片套卡片、渐变文字、纯黑纯白背景、虚构数据、不存在的用户评价等常见问题提前过滤掉，用户不需要手动列规则。

02 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
• generate：从零生成页面

安装方式

打开Claude Code，执行以下命令即可安装：

npx skills add nutlope/hallmark

安装完成后就可以直接让Agent使用Hallmark的设计能力。

局限性

目前Hallmark只支持Claude Code、Cursor和Codex。v0、Lovable也可以用，但需要把SKILL.md的内容复制到项目指令里。另外，在电商、旅游、美食、Lookbook等图片较多的页面中，它目前更偏向处理排版和结构，图片素材仍需自己准备。

小结

Hallmark最有价值的地方是把"设计品味"加入了Agent的技术栈。以前的Agent有模型、有工具、有记忆、有RAG、有评测，但缺少一个判断设计质量的环节。Hallmark相当于在输出之前增加了一道质量控制。项目基于MIT协议开源。

开源地址：https://github.com/Nutlope/hallmark