>_ DevTrendszh

语言

首页

语言

板块

前端 后端 移动端 DevOps AI / ML 游戏开发 区块链 嵌入式 安全
CSS

如何停止制作看起来像通用 AI 模板的网站

熟悉的场景:你让 AI 帮你做一个落地页,它却给你整出一个千篇一律的克隆版——居中的标题、超大的首图、三个好处图标?一切看起来都很整洁,但就是有种相同的"塑料感"。这种现象已经有了名字——AI 垃圾(AI slop)。

最近我发现了 Hallmark。它不只是一个代码生成器,而是一个面向主流 AI 编辑器(如 Cursor、Claude Code 和 Codex)的技能(插件)。这个项目的主要卖点是对抗语言模型训练时学到的标准模式。它不是输出一堆互联网平均水平的东西,而是刻意寻找独特的结构和风格。

Hallmark 的内部原理

Together AI 的开发者们选择了相反的道路。他们没有用传统的提示词,而是实现了一套包含 57 项检查("slop-test gates")的系统。这些过滤器会剔除过度使用的解决方案。如果模型试图提出一个标准的"hero"区块,系统就会强制它重新设计布局,直到看起来像出自真实设计师之手。

有趣的是,Hallmark 并不使用现成的模板。它会为特定的简报选择一个宏观结构,然后用二十个主题之一来"包装"它。两个不同的任务会产生两个不同的网站,而不仅仅是换个配色方案。

Hallmark,一款拒绝看起来像 AI 生成的设计技能

四种运行模式

这个工具通过简单的命令来控制。除了常规生成,我还发现了两个最有用的场景。

第一个是 hallmark study。你给它一张截图或一个喜欢的网站链接。Hallmark 不会做一个像素级完美的复制品(通常看起来很糟糕),而是提取设计的"DNA":排版、锚点颜色和区块构建逻辑。输出是一个 design.md 文件,你可以把它作为指南给任何 AI 使用。

第二个是 hallmark audit。如果你已经有代码了,这个工具会把它过一遍"AI 垃圾"测试,然后给你一份编辑建议清单。它不会自己编辑代码(以避免破坏任何东西),但肯定会指出哪些地方的设计看起来太循规蹈矩。

还有 redesign,它会在保留你的文字和品牌的同时,完全重建页面结构。当一个旧的落地页已经过时,而你想要一个全新的视角但又不想改变内容时,这个功能非常方便。

它产出的示例

仓库里有大量示例,它们确实各不相同。有面向 SaaS 的严格极简界面,也有面向小农场或音乐厂牌的近乎"手工艺"风格的页面。

如果标准主题都不适合客户的疯狂想法,Hallmark 会切换到自定义模式。在这种情况下,它会从头开始设计配色和网格,不依赖预制的规则集。

如何在本地运行

集成非常简单。最快的方式是通过 npx:

npx skills add nutlope/hallmark

之后,必要的文件夹中会出现文件。如果你使用 Cursor,规则会被拉取到 .cursor/rules/hallmark.mdc。对于 Claude Code 或 Codex,路径略有不同,但总体原则是一样的:你把一组指令(SKILL.md)和一个引用文件夹添加到工作目录中。

整个项目代码以 MIT 许可证开源。你可以安全地 fork 它,根据自己的需求修改规则,或者用于商业项目。

谁会觉得这个有用

我不会说 Hallmark 能取代复杂项目中的专业设计师。但如果你是一个后端开发者,需要快速拼出一个像样的管理面板或宠物项目(pet project)的落地页,这就是救命稻草。网站不会大声喊"这是 ChatGPT 五秒钟做出来的"。

这个工具也非常适合快速原型设计。与其在 Figma 里折腾,不如直接在代码里勾勒出几种结构变体,看看哪种"感觉"更适合产品。

当然,有时候 Hallmark 会用力过猛,产出一个过于大胆的方案,你需要手动调整。但总比第一百次看到同一个模板布局要好。如果你已经厌倦了 AI 设计的单调,Hallmark 绝对值得加入你的工具箱。

相关项目