用 Codex 生成网页，总像同一套模板？这个技能专治“AI 味”

我觉得它最有价值的地方，不是让页面变得更花，而是强迫 AI 在动手前先回答：这到底是一个什么产品，为什么不能继续长得像 SaaS 默认模板？

AI 味，通常不是配色的问题

很多人看到页面普通，第一反应是换一套颜色、加一点玻璃效果、让 AI 再“高级一点”。结果只会得到更精致的同质化。

Hallmark 的思路更靠前：它把“千篇一律”拆成可检查的设计问题。项目说明里提到，它会先选择页面的宏观结构和主题，再经过 57 个 anti-slop 检查点和一次输出前自检；不同 brief 不应该只是在同一张模板上换色。

这个方向是对的。一个卖手作咖啡、一个做数据接口、一个是企业内部工具，当然不该都用同样的 hero 区、同样的三栏卖点和同样的紫色光晕。

会写 CSS 的 AI 很多，会拒绝默认答案的 AI 才少。

给 Codex 装上后，先别急着让它“重做全站”

Hallmark 的 README 提供了两种安装方式。最省事的是：

npx skills add nutlope/hallmark

也可以把仓库里的 SKILL.md 和 references/ 放到 ~/.codex/skills/hallmark/，作为个人 skill；或者放进项目的 .codex/skills/hallmark/，只对当前仓库生效。

基于公开信息整理，我建议第一次不要让它“从零生成一个官网”。挑一张已经能跑、但明显没有辨识度的首页，按下面的顺序做。

   hallmark audit ./src/pages/Home.tsx

audit 的定位是给现有页面打分、列问题清单，不直接编辑。你先确认问题是不是你真正不满意的地方：是层级、版式、视觉锚点，还是内容本身没说清楚。

   hallmark study /path/to/reference.png

官方描述里，study 会提取宏观结构、字体组合和颜色锚点，还可以输出可交给其他 AI 工具的 design.md。它明确拒绝像素级复刻和付费模板克隆，这一点很重要：学方向，不要照抄别人的页面。

   hallmark redesign ./src/pages/Home.tsx

redesign 不是在原页面上补几个阴影，而是保留文案、信息架构和品牌，再换一套页面指纹。对“功能没问题，但一眼像 AI 做的”这种页面，通常比继续迭代 prompt 更有效。

先让 Codex 处理 hero 区和首屏信息，不要一口气改全站。拿改前改后的截图看三件事：读者能否在 5 秒内知道你卖什么；首屏是否有一个明确视觉锚点；下面的内容是否还在重复首屏。

这套顺序的重点是：先把“哪里丑”说具体，再让 AI 负责改。否则你给它 20 次“做得更有质感”，它只会给你 20 个不同版本的圆角卡片。

一个真实可用的首页 brief，应该怎么写

不要只写“帮我做一个高级的 AI 产品官网”。这类 brief 本身就把 AI 推向默认模板。

可以改成这样：

这是一个给小团队用的客户访谈整理工具。 首屏只做一件事：让用户看懂“把 20 段访谈录音变成 5 个可行动问题”。 不要渐变背景、悬浮光球、三张等宽功能卡。 视觉参考是编辑部的采访稿：大标题像版面标题，右侧放一张被划重点的访谈摘录； 页面下面再出现问题聚类和行动清单。 先用 Hallmark audit 检查现有首页，再提出结构方案；我确认后才改代码。

里面真正有用的不是“高级”两个字，而是四个具体约束：用户是谁、首屏只传递什么、不要什么、参考的视觉语言是什么。

AI 生成的页面要有辨识度，输入就不能只有功能列表。你得先给它一个编辑方向。

这类技能也有边界

Hallmark 适合营销页、产品介绍页、活动页这类需要表达气质的界面；它不等于通用 UI 规范。

后台管理、表单密集的业务系统，首要问题仍然是信息密度、操作路径、错误状态和无障碍。为了“去 AI 味”把表格做成杂志排版，反而会降低可用性。

我会用下面三条判断是否该启用它：

今天值得试的，不是把页面变漂亮

把 Hallmark 装进 Codex，真正该试的是一件小事：找出你项目里最像“AI 默认模板”的那一屏，先让它给出一张不改代码的审计清单。

如果清单能准确说中你别扭的地方，再做 redesign。这样你得到的不是一张“AI 看起来很努力”的页面，而是一个能解释为什么要这样设计的页面。

说明：本文基于 GitHub Trending 与 Nutlope/hallmark README 的公开信息整理，未伪装成全站改版亲测。该项目为 MIT License；使用参考图时请确认素材和品牌授权，不要进行像素级抄袭或冒充他人设计。