告别 AI 设计套路：Hallmark Skill 让 Claude Code 生成更有个性的网页

现在用 AI 来生成网页，最担心的不是做不出来，而是看起来就是“AI 做的”。

紫青渐变、居中标题按钮、三等分功能卡片……这些元素单独看都没问题，但组合起来就变成了 AI 网页的标准答案。更麻烦的是，哪怕你修改需求重新生成，结果还是高度雷同。最后只能不断加限制：不能有紫渐变、不能全居中、不能虚构数据。规则写了一堆，效果才勉强可以接受。

今天我在 GitHub 上又看到了一个 skill，正好解决了这个问题。它的名字叫 Hallmark，已经收获了 20.6k 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 文件，布局、间距、组件样式都已就绪，打开就能直接使用，无需手动调整细节。

它把 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。
• generate：直接生成全新页面。

从生成到分析，一个 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 查看源码和文档。

如果你对这类设计工具有更多心得，欢迎到 云栈社区 与众多开发者一起交流探讨。