如果你用AI做过网页，一定见过这样的画面：紫蓝渐变背景、三张等高的功能卡片、Inter字体、底部一个硕大的CTA按钮。换多少遍prompt都没用，因为主流AI的训练数据高度重合，它们理解的"好看"几乎是一个模子刻出来的。Hallmark就是来打破这个僵局的——它是一套MIT开源的设计技能，在GitHub上已经拿了超过2.2万星，核心目标只有一个：让AI产出的网页，看起来不再像AI做的。
Hallmark到底在干什么
Hallmark本质上不复杂，就是一个SKILL.md文件加一套规则集。装到你的AI编程工具里之后，每次你要求生成网页，它会在三个节点介入：生成前，从22套预设主题里挑一组配色和页面宏观结构；生成中，跑58道质量检查，看布局是不是又在套模板、配色是不是又滑向AI默认色域、字体是不是还是Inter全家桶；输出前，不达标的直接打回重做，合格了才放行。
一句话来描述它的效果，同样的prompt，有它和没它，出来的完全是两个东西。
Hallmark安装教程
不管你用哪个工具，安装命令都是同一行：npx skills add nutlope/hallmark。装完之后它会自动识别当前环境，把文件写到对应目录。
WorkBuddy用户可以直接在对话里喊"帮我安装Hallmark"，或者在终端跑那行命令，装完它会告诉你文件丢哪儿了。Claude Code装完会写在~/.claude/skills/hallmark/，Cursor则是变成.cursor/rules/hallmark.mdc，Codex对应~/.codex/skills/hallmark/。装完记得重启工具生效。 想确认有没有装成功？去对应目录ls一下就行。Claude Code用户看~/.claude/skills/hallmark/，Cursor用户看.cursor/rules/hallmark.mdc，Codex用户看~/.codex/skills/hallmark/。 Hallmark使用方法
Hallmark不需要手动唤醒。SKILL.md里写好了触发条件，只要你的prompt里出现"landing page""marketing page""SaaS page""UI design"这类词，它就会自动接管。
这里分两种情况。一种是你的需求比较常规，比如"帮我做一个手工面包配送App的landing page，叫Levain Local，乡村风格，有周订阅和三种套餐"。Hallmark判断你没有给出特别明确的设计方向，就会从22套主题里随机挑一轮（会避开最近用过的），然后跑完检查再输出代码。
另一种是你给了很具体的创意指令，比如"做一个SaaS页面，参考1987年磁带包装的风格——低饱和度、偏暖色、Helvetica字体、故意不对齐"。这时候Hallmark发现主题库里没有能直接匹配的，会自动切到Custom模式，根据你的描述用OKLCH色域现场搭一套配色，字体也从库里自由组合。但58道检查一道都不会少。
主题不是黑箱，你可以掌控
Hallmark内置了22套主题。生成代码时它会吐出一行诊断信息，长这样：/* Hallmark · pre-emit critique: P5 H4 E5 S4 R5 V5 */，这是58道检查的评分摘要。想知道更详细的主题信息，去对话日志里搜"Picking"这个关键词。
你也可以直接点名要用哪套。在prompt里写"用Hallmark的Cobalt主题做一个开发者工具API文档站"，它就会跳过随机选择，直接加载你指定的主题。
全部22套主题在usehallmark.com上都能预览，按T键可以循环切换，每套都有实时渲染的示例页面。
挑几套热门的给你参考。Hum走柔和圆角路线，奶油配铁锈色，衬线标题，适合做食品、手工艺类页面；Cobalt是锐利科技感，深蓝锚色加等宽字体，开发者工具和API文档站很合适；Lumen用深色表面配冷调强调色，克制感强，AI工具和技术平台常用；Garden是有机布局，暖中性色里点缀手写体，农场、环保题材很搭；Carnival玩高对比展示体和杂志网格，配色活泼，适合音乐、活动类；Riso模仿错位印刷，有限色板加故意打破网格，印刷和艺术类项目会爱。
反过来用：分析别人的设计
很多人不知道Hallmark还能反向操作——分析已有设计。
给它一个URL，比如hallmark study https://linear.app，它会用WebFetch抓页面，分析宏观结构、字体配对、配色锚点、垂直节奏，然后输出诊断报告。报告里会写清楚这是什么结构、用了什么字体组合、主色在OKLCH色域里的具体坐标、段落间距多少、有什么视觉指纹。
你也可以直接贴一张设计截图，Hallmark会提取它的设计DNA，生成诊断报告，还能输出design.md文件，交给Cursor或Codex照着复刻。
不过有个底线：它拒绝逐像素复制付费模板，比如Themeforest或者带水印的Framer模板。分析学习可以，抄袭不行。
改它，比你想的容易
Hallmark的核心就是那几个文本文件，你完全可以自己动。
目录结构大概这样：SKILL.md是主指令，rules文件夹下面有anti-patterns.md（58道反模式检查）、structure.md（21种页面结构）、responsive.md（响应式规则）、typography.md（字体配对）、color.md（22套配色主题）。
想加品牌配色？打开rules/color.md，按格式追加：
然后在SKILL.md的可用主题列表里加上Acme就行。
团队有特殊的文案规范？去rules/anti-patterns.md末尾追加第59条检查。比如禁止AI味空话：
改坏了也不怕，重新跑一遍npx skills add nutlope/hallmark，新版会直接覆盖旧文件。
该开就开，该关就关
不是每个任务都需要它开着。调试简单页面的时候，Hallmark反而拖慢速度。
临时关闭很简单，在prompt里加一句"不要用Hallmark，直接生成"就行。永久关闭去技能管理面板里找到它，点关闭或卸载。
我的建议是：开发新页面时开着，改bug、调样式、写小组件的时候关掉。不用的时候保持面板清爽。
几个你大概率会问的问题
还是有AI味？检查一下你的prompt是不是太模糊了。Hallmark解决的是模板化问题，不是设计能力问题。如果你只说"做一个好看的页面"，AI没有足够的方向。加上具体场景、目标用户、品牌调性，效果会好很多。
多语言页面完全支持，用中文描述prompt就行，Hallmark会保留你的语言设定。
和Frontend Design技能冲突吗？不冲突，可以同时装。但建议二选一，两个都装的话，它们都会往prompt里注入指令，可能互相干扰。Hallmark更适合需要快速产出差异化页面的场景，Frontend Design更适合已经有明确设计系统的项目。
更新也很简单，重新执行npx skills add nutlope/hallmark，新版覆盖旧版。
Hallmark不是什么万能药，但它确实戳中了一个真实痛点——AI生成内容的同质化。如果你厌倦了千篇一律的紫蓝渐变和Inter字体，给它一次机会。花五分钟装上，下次写prompt的时候，你可能会惊喜地发现，出来的东西终于有点人味了。
AI 速览
