别让 AI 交模板网页：Hallmark 把审美写成了检查项
前两天我让 AI 改一个网页。
功能倒是都在，页面也能打开。问题是我一眼看过去，就知道它又走了那条老路：大标题，副标题，几个统计数字，下面两排卡片。再加一点渐变，一点圆角，一点阴影。
这类页面很难说它错。你让它解释，它还能解释得头头是道。可读者不买账，用户也不买账。因为它不像一个被设计过的页面，更像一个模型从模板堆里摸出来的平均答案。
Hallmark 就是专门管这件事的 Skill。它是 Together AI 做的，定位很直接：给 Claude Code、Cursor、Codex 这类 coding agent 用，让 AI 做出来的界面别那么像 AI。
它有意思的地方，不是又发明了一套“高级感关键词”。它反而很克制，把审美拆成一堆可以检查的规则。AI 想偷懒，也得先过这些门。
1. 它先管住最常见的偷懒
AI 写网页有几个老毛病。
它特别爱用同一套骨架：hero、三张功能卡、CTA、footer。换个颜色，就说是另一个方案。
它也特别爱编漂亮数字。用户没给数据，它也敢写“提升 47%”“被 50,000 个团队信任”。这类字摆在页面上很好看，就是不一定是真的。
还有一些更细的东西：假浏览器外框、假手机壳、假代码窗口；标题里突然来个斜体强调；移动端一缩，按钮文字挤成两行；颜色在代码里临时写一堆十六进制，最后主题自己都管不住。
这些问题你单独看，像小毛病。放到一个页面里，就有一股熟悉的味道。
Hallmark 的做法是把这些味道列出来，变成规则。它的 SKILL.md 里反复强调一件事：别只换皮，要换结构。
这句话挺朴素，但正中要害。很多 AI 页面看着不一样，其实只是颜色不一样。页面的节奏、信息顺序、模块关系，还是同一个骨架。
2. Hallmark 有四个入口
README 里把它的用法拆成四个动词。
默认入口是做新页面。用户只说“做一个 landing page”时，它会先判断项目环境，再选页面结构和主题，最后跑检查。
hallmark audit <target> 是审稿模式。它不改代码，只读现有页面，然后按反模板清单打分，列出问题。
hallmark redesign <target> 是重做模式。它保留原来的内容、信息结构和品牌意图，但换掉视觉结构。它关心的是页面怎么重新站起来，不只是给原页面抹一层新样式。
hallmark study <screenshot | URL> 是学习模式。你给它一个喜欢的截图或网址，它提取的是设计 DNA：大结构、字体搭配、颜色锚点，而不是照抄像素。这个边界很重要。学习风格可以，搬别人的模板不行。
这四个入口分得很清楚：新做、检查、重做、学习。它没有把所有事情都塞进一个“请帮我设计得好看点”。
3. 代码里怎么做
看源码时，可以把 Hallmark 理解成三层。
第一层是 SKILL.md。它负责把总规则压住：先读项目、别乱删文件、现有项目优先就地改、设计前要问清 audience、use case、tone。这个 Skill 不是鼓励 AI 一上来重建项目，反而先把危险动作拦住。
第二层是 references/。这里放了很多具体手册，比如 macrostructures.md、anti-patterns.md、slop-test.md。这些文件才是它真正干活的地方。
macrostructures.md 负责提供页面大骨架。不是永远 hero 开头，也可以是 editorial stack、split manifesto、specimen、index wall、product cockpit 之类的结构。结构先变，页面才不容易撞脸。
anti-patterns.md 负责列出坏味道。比如虚构指标、假 chrome、主题 token 中途漂移、标题乱用斜体、默认 Specimen 结构偷懒。
slop-test.md 负责交付前检查。README 里说它有 57 个 slop-test gates，SKILL.md 里又加了 pre-emit self-critique。我的理解是：先靠规则让 AI 少跑偏，再靠检查让它别带着明显问题交作业。
第三层是项目记忆。Hallmark 会写 .hallmark/log.json 和 CSS stamp，记录这次用了什么宏结构、主题和判断。下次再做页面时，它可以避免一直选同一个套路。
4. 它最值得学的地方
第一条，是把“审美”拆到结构层。
很多人写设计 Skill，只会写“高级、简洁、有呼吸感、现代”。这些词不能说没用，但太软。模型听完以后，还是会回到它最熟悉的模板。
Hallmark 会先问：这页用什么宏结构？导航和 footer 是什么形态？移动端怎么收？它把问题从“看起来美不美”挪到“页面骨架是不是又重复了”。
第二条，是不允许编证据。
它在规则里直接说，用户没给指标，就不要写 10x faster、trusted by 50,000+ teams。可以用占位，也可以换一种不靠数字证明的版式。
这条放在设计 Skill 里很难得。因为 AI 很喜欢把页面做得热闹，热闹最省事的办法就是编几个数字。
第三条，是把移动端当硬门槛。
Hallmark 要求 320、375、414、768 这些宽度都要过。按钮文字不能挤成两行，根节点不能横向滚动，长标题要能换行。
这不是审美洁癖。很多网页在大屏截图里挺好，一到手机就露馅。公众号读者大部分也在手机上看，网页产品也是一样。移动端不好，截图再漂亮也没用。
5. 公开反馈：方向很清楚，但还偏早期
我去看了一下公开反馈。能稳定打开、细节又够的材料不算多，主要集中在 GitHub README、官网示例和 issues。
正面信号很直接。README 展示了不少不同 brief 生成的页面，并强调它们应该像不同网站，不是同一个模板换色。这和它的核心主张一致：Hallmark README 把 “twenty themes” 和 “four verbs” 放在很靠前的位置。
issues 里也能看出社区关注点。Issue #21 提到把 Hallmark 这种 anti-slop 思路迁移到写作上，这说明它最容易被人带走的，不只是网页样式，而是“把坏味道命名并检查”的方法。Issue #20 则在讨论更开放的 Design Skills 框架，说明它触发的是一类工具形态，不只是一个单点项目。
但我不会把它写成“已经被大量生产验证”。目前能看到的公开反馈，更像早期开发者和设计工具爱好者的讨论。它的价值很明确，成熟度还要继续看。
6. 怎么装，怎么用
如果你想试，先把这个 GitHub 地址给你的 AI：
https://github.com/nutlope/hallmark
然后直接说：
请帮我安装这个仓库里的 hallmark Skill。装好后确认 SKILL.md 和 references/ 都在。
装好以后，不要一上来就丢一句“做个高级网页”。可以把任务说得稍微具体一点：
用 hallmark 帮我 audit 当前网页，先只列问题，不改代码。
或者：
用 hallmark redesign 这个页面。保留文案和信息结构，但重做视觉结构。
如果你看到某个网站很喜欢，也可以说：
用 hallmark study 这个 URL，帮我分析它的设计 DNA，不要照抄。
7. 你可以这样写自己的 Skill
如果你也想写一个“反模板设计 Skill”，可以从 Hallmark 学这套结构。
适用场景：AI 生成网页、落地页、产品页、组件预览时，默认视觉太像模板。
触发条件：用户说“做个页面”“重做界面”“审美不行”“太 AI”“像模板”。
输入：目标页面、现有代码、品牌信息、受众、用途、语气，以及用户给的参考图或参考网址。
输出：页面代码、审稿清单、重做方案，或者一份可复用的 design.md。
工作流：先读项目环境，再问受众、用途和语气；接着选宏结构和主题 token；生成界面后跑反模板检查；最后检查移动端和真实文案。
关键约束：不要虚构数据，不要手画假浏览器外框，不要每页都用同一种结构，不要在代码里临时乱写颜色和字体。
可选工具：浏览器截图、移动端预览、可访问性检查、视觉回归、项目级设计记忆。
可改造方向：如果你写公众号文章 Skill，也可以照这个思路做。把“AI 味句式”“空背景开头”“虚构来源”“短句堆叠”“结尾强行升华”变成检查项。别只写“自然一点”，要让 AI 知道哪里不自然。
8. 我的判断
Hallmark 最好的地方，不是它能让网页“更好看”。
好看这个词太滑。你说高级，我说普通；你说干净，我说空。
它真正有用的地方，是把“看起来像 AI”拆成可执行的规则：结构不能老一套，数据不能瞎编，主题不能漂，移动端不能崩，交付前要自查。
这套东西很适合拿来写自己的 Skill。
因为多数时候，我们不是缺一句更漂亮的 prompt。我们缺的是一套能拦住默认答案的门。
