项目名 | 一句话定位 | 热度来源 | 热度变化 | 解决什么问题 | 适合人群 | 链接 |
hallmark | AI反模板设计技能 | GitHub Trending | 日增800+ Star 总5,075 Star | AI写的页面千篇一律,帮你强制脱离模板化风格 | 用AI写前端/做产品的开发者和设计师 | GitHub |
讲道理,用AI写前端又爽又烦。爽的是几分钟出页面,烦的是出来的东西永远长一个样——紫蓝渐变Hero区、Inter字体通篇到底、三列图标特征卡、居中到头的排版。你让AI"做漂亮点",它每次都给你同一套模板,换个颜色就当新设计了。
这就是Together AI的Hassan El Mghari(圈内更熟的名字是Nutlope)要解决的问题。他上个月发布的hallmark,定位非常直白:一个"Anti-AI-slop"设计技能。说白了,在AI输出HTML/CSS代码之前,硬塞一套设计规则进去,强制脱离训练数据里那些烂大街的模板。效果怎么样?GitHub上5天涨了三千多Star,现在日增800+还在加速。

图片来源:github.com/Nutlope/hallmark
它到底做了什么
hallmark本质上是一个Markdown格式的设计技能文件,安装到Claude Code、Cursor或Codex之后,AI生成前端页面时会自动加载这套规则。规则是"写死"的——不需要联网、不需要API、不占token额度,就是一个纯文本上下文文件。
但重点是内容。hallmark的核心思路不是"让AI学会设计",而是"让AI别用模板"。它内置了21种页面宏观结构(macrostructures),每种对应不同的信息层级和视觉节奏。每次生成页面时,它会随机选一种结构,并且记录最近3-5次使用过的结构,主动规避重复。两个不同需求生成的页面,从骨架到配色都不会撞车。

数据来源:GitHub Trending及项目公开Star时间线
热度怎么起来的
hallmark 5月21日发布,30小时内就破了1500 Star。真正的爆发是最近一周——7月14日登上GitHub Trending日榜,单日新增802 Star,累计突破5000。Hacker News首页有人评价"这周最值得装的Claude Code技能",中文社区Trae论坛和掘金也陆续有介绍。
同一个作者Nutlope之前做过不少热门项目(比如那个"一句话生成网站"的AI工具),本身就有一批关注者。但hallmark能持续涨Star,更关键的原因是它踩中了AI开发者的一个真实痛点:用AI写代码效率是高,但写出来的东西太"AI味"了,拿不出手。
实测下来,四个动词值回票价

hallmark四大设计指令工作流
default —— 从零建页面
输入你的需求(产品名、目标用户、核心功能),hallmark自动选结构、配主题、跑完65项"反模板"关卡检测,最后交出一个完整的HTML+CSS页面。注意它不是给你几个备选方案——它直接输出成品,不留商量余地。这种"武断"反而是优点,省了来回调prompt的时间。
audit —— 给现有代码打分
如果你已经有一个AI生成的页面,想知道它到底有多"模板味",直接跑hallmark audit。它会逐项检查65种AI高频设计反模式——字体层级混乱、卡片间距不统一、对比度不足、全部居中无视觉节奏等等——输出一份缺陷报告,不自动修改。想改哪里你自己决定。
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 Code或Cursor里直接说“帮我做一个XX产品的落地页”,hallmark就会自动介入。如果想手动调用,加hallmark前缀即可:hallmark audit、hallmark redesign、hallmark study。

hallmark生成的SaaS产品页面示例(Tally主题) | 图片来源:usehallmark.com
留给你的问题
hallmark做的事情本质上是用一套人工规则去"驯化"AI的审美。想想其实有点讽刺——我们一边说AI会取代设计师,一边又得手写规则教AI别做得太模板化。所以问题来了:你觉得AI真的能学会"有品位"吗?还是说"品位"这个东西,本质上就是反统计、反模板的,LLM永远做不到?
👍 点赞 | ⭐ 收藏 | ➡️ 关注 |
觉得有用的话,一键三连支持一下,明天继续聊 AI 🙌
夜雨聆风