乐于分享
好东西不私藏

hallmark : 给AI编程助手装一套“反模板”设计基因

hallmark : 给AI编程助手装一套“反模板”设计基因

项目名

一句话定位

热度来源

热度变化

解决什么问题

适合人群

链接

hallmark

AI反模板设计技能

GitHub   Trending

日增800+ Star 5,075 Star

AI写的页面千篇一律,帮你强制脱离模板化风格

AI写前端/做产品的开发者和设计师

GitHub

讲道理,用AI写前端又爽又烦。爽的是几分钟出页面,烦的是出来的东西永远长一个样——紫蓝渐变Hero区、Inter字体通篇到底、三列图标特征卡、居中到头的排版。你让AI"做漂亮点",它每次都给你同一套模板,换个颜色就当新设计了。

这就是Together AIHassan El Mghari(圈内更熟的名字是Nutlope)要解决的问题。他上个月发布的hallmark,定位非常直白:一个"Anti-AI-slop"设计技能。说白了,在AI输出HTML/CSS代码之前,硬塞一套设计规则进去,强制脱离训练数据里那些烂大街的模板。效果怎么样?GitHub5天涨了三千多Star,现在日增800+还在加速。

图片来源:github.com/Nutlope/hallmark

它到底做了什么

hallmark本质上是一个Markdown格式的设计技能文件,安装到Claude CodeCursorCodex之后,AI生成前端页面时会自动加载这套规则。规则是"写死"——不需要联网、不需要API、不占token额度,就是一个纯文本上下文文件。

但重点是内容。hallmark的核心思路不是"AI学会设计",而是"AI别用模板"。它内置了21种页面宏观结构(macrostructures),每种对应不同的信息层级和视觉节奏。每次生成页面时,它会随机选一种结构,并且记录最近3-5次使用过的结构,主动规避重复。两个不同需求生成的页面,从骨架到配色都不会撞车。

数据来源:GitHub Trending及项目公开Star时间线

热度怎么起来的

hallmark 521日发布,30小时内就破了1500 Star。真正的爆发是最近一周——714日登上GitHub Trending日榜,单日新增802 Star,累计突破5000Hacker News首页有人评价"这周最值得装的Claude Code技能",中文社区Trae论坛和掘金也陆续有介绍。

同一个作者Nutlope之前做过不少热门项目(比如那个"一句话生成网站"AI工具),本身就有一批关注者。但hallmark能持续涨Star,更关键的原因是它踩中了AI开发者的一个真实痛点:用AI写代码效率是高,但写出来的东西太"AI"了,拿不出手。

实测下来,四个动词值回票价

hallmark四大设计指令工作流

default —— 从零建页面

输入你的需求(产品名、目标用户、核心功能),hallmark自动选结构、配主题、跑完65"反模板"关卡检测,最后交出一个完整的HTML+CSS页面。注意它不是给你几个备选方案——它直接输出成品,不留商量余地。这种"武断"反而是优点,省了来回调prompt的时间。

audit —— 给现有代码打分

如果你已经有一个AI生成的页面,想知道它到底有多"模板味",直接跑hallmark audit。它会逐项检查65AI高频设计反模式——字体层级混乱、卡片间距不统一、对比度不足、全部居中无视觉节奏等等——输出一份缺陷报告,不自动修改。想改哪里你自己决定。

redesign —— 换结构不丢内容

保留你现有的文案、品牌信息和信息架构,扔掉当前布局,换一套完全不同的视觉结构。适合那些内容没问题但"看着像AI写的"的页面。

study —— 拆解优秀设计DNA

这也是hallmark最特别的一个功能。给它一个URL或截图,它会提取目标页面的色彩方案、字体配对、间距系统和宏观布局,输出一份结构化的design.md文件。不复制像素、不侵犯版权——它提取的是"设计语言"而非"设计稿"。这个design.md可以喂给其他AI工具当设计参考,等于给AI装了一套"审美参考系"

跟同类工具比,差别在哪

对比维度

hallmark

Anthropic前端设计技能

传统Prompt调优

核心理念

强制脱离模板分布

审美指导,依赖模型自觉

做漂亮点,靠运气

结构多样性

21种宏观结构,主动规避重复

主要靠提示词实现

几乎无保障

反模板检测

65项关卡,逐项打分

无系统化检测

完全靠人工review

设计学习能力

study指令提取设计DNA

价格

免费开源 MIT协议

Claude使用

免费(时间成本)

60秒装好,零依赖

hallmark不需要安装任何依赖。它就是个文本文件加一套参考规则,直接让AI编程助手加载即可。三条命令覆盖主流工具:

# Claude Code / Cursor / Codex 通用安装

npx skills add nutlope/hallmark

或者手动复制(适合Cline等工具)

# Claude Code: 放到~/.claude/skills/hallmark/

# Cursor: 放到.cursor/rules/hallmark.mdc

# Codex: 放到~/.codex/skills/hallmark/

安装完成后,在Claude CodeCursor里直接说帮我做一个XX产品的落地页hallmark就会自动介入。如果想手动调用,加hallmark前缀即可:hallmark audithallmark redesignhallmark study

hallmark生成的SaaS产品页面示例(Tally主题) | 图片来源:usehallmark.com

留给你的问题

hallmark做的事情本质上是用一套人工规则去"驯化"AI的审美。想想其实有点讽刺——我们一边说AI会取代设计师,一边又得手写规则教AI别做得太模板化。所以问题来了:你觉得AI真的能学会"有品位"吗?还是说"品位"这个东西,本质上就是反统计、反模板的,LLM永远做不到?

👍 点赞

⭐ 收藏

➡️ 关注

觉得有用的话,一键三连支持一下,明天继续聊 AI 🙌