夜雨聆风你一定见过这样的 AI 网页：
大号渐变标题、悬浮玻璃卡片、三栏功能区、居中的按钮，再接一个“准备好开始了吗”的 CTA。单看每个部分都没错，合在一起却像从同一条流水线上下来的。
问题不在于 AI 不会写 CSS，而在于它太擅长选择“最安全、最常见、最像正确答案”的设计。
最近在 GitHub 上迅速走红的开源项目 Hallmark，就是冲着这股“AI 模板味”来的。它不是组件库，也不是新的前端框架，而是一套给 Claude Code、Cursor 和 Codex 使用的设计技能：在 AI 动手写页面之前，先约束它如何思考结构、主题、字体、交互和移动端适配。
项目对自己的描述很直接：让 AI 生成的界面看起来像被认真设计过，而不是被模型批量生成出来。
一、它解决的不是“丑”，而是“千篇一律”
很多提示词会要求 AI 做一个“现代、简洁、专业”的页面。看起来要求明确，实际上这几个词几乎没有提供任何设计方向。模型于是会回到训练数据里出现频率最高的组合：Hero 首屏、三张功能卡、产品截图、客户评价、CTA、页脚。
换个品牌，通常只是换一套颜色。
Hallmark 的核心观点是：视觉差异还不够，页面结构本身也要有差异。
它会先根据需求选择页面的“宏观结构”，再匹配主题、字体和交互规则。一个面包应用和一个开发者 API，不应该只是配色不同，而应该从信息节奏、标题位置、内容密度到按钮语气都呈现出不同性格。
这正是 Hallmark 最有价值的地方：它把“别做得像 AI”从一句模糊审美要求，拆成了 AI 可以执行、检查和复用的工程规则。
二、20 套主题只是表面，真正厉害的是结构约束
Hallmark 内置了 20 套命名主题，覆盖编辑感、极简、暗色氛围和轻松活泼等不同方向。项目还提供 Custom 分支：当需求里出现明确品牌色或复杂审美意图时，可以生成一次性的配色、字体和布局方案。
但它并不是随机换皮。
在真正输出代码前，Hallmark 会先判断受众、页面目标和语气，再选择适合的页面结构。它还会检查项目里已有的字体、颜色、间距体系和动效依赖，尽量延续现有设计系统，而不是把整个项目推倒重来。
为了减少“看似高级、实际空洞”的设计，它明确禁止一批常见问题，例如：
1.不允许凭空捏造转化率、用户数和客户评价；
2.不鼓励用假浏览器外框、假手机外框制造产品感；
3.标题不使用滥俗的斜体强调；
4.颜色和字体必须来自统一设计变量，不能写到一半临时发挥；
5.输出前需要完成自我评分，并通过 57 道“AI 味”检测关卡；
6.页面要在 320、375、414 和 768 像素宽度下检查移动端表现。
这套方法很像给 AI 加了一位严格的设计总监：不只看最终截图，还会追问设计依据、内容真实性和实现一致性。
三、四种用法，覆盖从新建到改版
Hallmark 提供四种主要工作方式。
第一种是默认模式，直接根据需求构建新页面。它会选择宏观结构、应用设计规则，并在交付前完成检查。
第二种是 hallmark audit <target>，只审查已有页面，给出按优先级排列的问题清单，不直接修改代码。适合先摸清现状，再决定是否改版。
第三种是 hallmark redesign <target>，保留原有文案意图、信息架构和品牌基础，重做页面的视觉结构与交互表达。对于已经上线、但“AI 味”太重的项目，这个模式很实用。
第四种是 hallmark study <screenshot | URL>，从喜欢的网页或截图里提取结构、字体搭配和色彩锚点，形成可迁移的“设计 DNA”。它强调学习设计方法，而不是像素级照抄。
四、安装很简单，关键在于怎么提需求
安装命令只有一行：
终端 · 命令
$ npx skills add nutlope/hallmark
安装后，它可以作为个人技能放进 Claude Code 或 Codex，也可以放进具体项目，作为团队共享的设计规则。
不过，Hallmark 并不会让一句含糊需求自动变成顶级作品。它会追问三个重要问题：
1.谁会使用这个页面？
2.页面最希望用户完成什么动作？
3.你要的是编辑感、技术感、粗野主义、柔和、奢华，还是其他更明确的语气？
这三个问题其实比“请做得高级一点”有用得多。AI 网页缺乏辨识度，很多时候不是代码能力不足，而是需求里没有提供足够强的取舍。
五、它适合谁，又不适合谁？
如果你经常用 Claude Code、Cursor 或 Codex 搭建落地页、产品官网、开发者工具页面，Hallmark 很值得试。尤其适合下面几类场景：
1.原型功能已经完成，但页面总像套模板；
2.团队没有全职设计师，需要一套可执行的设计底线；
3.想审查现有 AI 页面，却不知道该从哪里开始改；
4.希望多个项目保持质量，同时避免每个项目长得一样。
但它不是 Figma 的替代品，也不会替你完成用户研究、品牌策略和真实可用性测试。它更像是一套“设计决策护栏”：让 AI 少走最俗、最省事的路，并把审美要求转成工程检查项。
写在最后
过去，我们用提示词告诉 AI“做得好看一点”；Hallmark 更进一步，它要求 AI 解释结构、遵守规则、检查结果，并主动拒绝那些高概率的模板化选择。
这可能代表 AI 编程工具的下一个阶段：能力不再只是“会不会写”，而是有没有稳定的方法避免平庸。
如果你已经受够了渐变大标题、玻璃卡片和千篇一律的三栏功能区，不妨把 Hallmark 装进自己的 AI 编程工作流里。它未必一次就能做出惊艳设计，但至少会让 AI 在动手之前，先认真想一想。
项目地址：
https://github.com/Nutlope/hallmark
官方演示：
https://www.usehallmark.com