AI 做网页,为什么总有一股模板味?这个开源项目想管一管

让 AI 帮你做一个产品官网，代码很快就出来了。

大标题、渐变背景、三张功能卡片，再接一排客户 Logo。页面看着完整，换掉产品名，却好像也能拿去卖另一个东西。

问题往往出在这里：页面上的东西都有了，产品自己的特点却没留下来。

最近看到一个开源项目 Nutlope/hallmark，专门围绕这种“AI 味”做设计约束。它是一套供 Claude Code、Codex、Cursor 和 OpenCode 使用的设计 Skill，把素材、页面结构、视觉选择和检查流程写进了编码助手的工作方式。

本文根据项目 README、Skill 源文件与官网整理，核验日期为 2026 年 10 月 29 日，未进行网页生成实测。配图为机制解读示意。

01｜“高级感”三个字，给不了 AI 足够的方向

我们经常这样提需求：简洁一点、现代一点、有高级感。

这些词能表达偏好，却很难决定页面该放什么。

预约服务的页面，要让人找到时段和预约入口；卖商品的页面，要说明商品、价格和购买方式；开发者工具的页面，则需要让人迅速理解能力、看到示例、找到接入路径。

Hallmark 的一个关键思路，是先确定访客来这里要完成什么，再安排页面的内容和顺序。项目说明

这会改变生成的起点。

比如一个小型摄影工作室，与其先套上“功能介绍—优势展示—用户评价”，更应该先考虑作品、服务范围，以及客户怎样发起咨询。

这是我对它方法的理解：页面的差异，首先来自业务和材料本身。字体和颜色，是后面帮助它表达清楚的工具。

02｜50 套主题，提供的是设计材料

按照当前 README，Hallmark v2 提供 50 套主题，也支持根据需求自定义设计。主题说明

值得注意的是，主题主要规定字体、配色、表面质感、组件表达等视觉材料，不预先锁死整页有哪些模块、按什么顺序排列。

默认流程会挑出三个适合需求的主题，再选择其中一个继续构建。页面结构还会结合用途单独确定。

这比“从模板库里选一个，再替换文案”多走了一步。

同样的视觉语言，可以服务于不同的内容组织；同一个行业，也应该根据现有材料和目标采取不同布局。

它还会先读取项目已有的字体、色板和设计约定。如果项目里已经有锁定设计系统的 design.md，就优先遵循既有规则。Skill 源文件

对已有品牌的团队来说，这一点很实际：新页面需要接得上整个产品，而不是每次生成都换一套性格。

03｜它把“别这么设计”写成了具体规则

Hallmark 的规则分成三个层次：Floor、Reflex、Finish。规则分层说明

Floor 是不能越过的底线，例如可访问性、移动端布局，以及不能编造数据、客户评价和案例数量。

Reflex 针对模型容易反复采用的设计习惯。符合这一层的规则，可以在给出真实理由并记录后作出例外。

Finish 则关注完成度和细节，本身不作为阻止交付的门槛。

具体到源文件，你能看到非常明确的要求：交互元素要有键盘焦点状态；动画要照顾减少动态效果的偏好；禁止随手使用 transition: all；也对紫蓝渐变、卡片里套卡片等表现设了硬限制。

这些限制当然带有项目自己的审美选择，不意味着被禁止的手法在所有设计里都有问题。

它的作用，是给容易滑向默认样式的生成过程设置边界。

其中我最认同的一条，是不编造“证明自己很厉害”的材料。没有真实客户评价，就不能为了让版面饱满，补上一段某位用户的赞美。

一张页面是否可信，比它是否像成熟公司的官网更重要。

04｜写完代码，还要把页面打开看

根据官方流程，Hallmark 会先单独制作首屏，渲染、审视之后，再扩展后续内容；最后通过 sloplint --render 在八种宽度下检查页面，并安排独立上下文的复审。构建流程

这个顺序很有价值。

首屏如果没有讲清产品，下面堆再多模块，也很难挽救第一眼的理解。页面在代码里看起来规范，到了手机上，也可能出现标题挤压、图片溢出、按钮被推到屏幕之外的问题。

不过，需要把检查结果和真实效果分开看。

官网展示的前后对比，其问题数量来自 Hallmark 自己的检查器。它能说明项目如何执行自己的规则，不能直接证明用户更喜欢新页面，也不能推导出转化率提升。官网对比说明

规则检查能帮助发现问题，业务效果仍然需要真实用户和实际任务来验证。

05｜怎么开始，怎样用得更有价值

官方给出的安装命令是：

-g 表示全局安装，省略后安装到当前项目。README 要求 Node.js 18 或更高版本；浏览器检查和截图还需要 Chrome 与 puppeteer-core，条件不齐时仍可运行静态检查。安装说明

在 Claude Code 中，可以这样表达任务：

在 Codex CLI 中，官方列出的调用方式是 $hallmark <需求>。以上是使用示例，未在本文环境中执行安装或生成。

如果已有页面，也可以先审计，或明确请求重设计。项目区分了 audit 与 redesign，重设计流程会记录原有链接、字段等内容，并检查是否遗漏。重设计说明

我更建议第一次尝试时，拿一个范围清楚的小页面：准备好真实素材，明确一个主要动作，再看生成结果有没有把这件事讲清楚。

不要只比较截图漂不漂亮。还要点链接、试表单、看手机布局，检查页面承诺的事情是否真的能完成。视觉约束无法替你接好支付、预约或后台接口。

06｜AI 写前端之后，设计判断需要放在哪里

Hallmark 对独立开发者和小团队有吸引力：它把一部分设计经验变成了可以随编码任务一起执行的规则和步骤。项目采用 MIT 许可证，但配套照片仍需遵守各自的授权与署名要求。许可证说明

我的判断是，这类工具最有价值的地方，在于让“做完一个页面”的标准变得更具体。

从理解用途，到选择素材，再到检查屏幕上的结果，每一步都能提出明确的问题，而不只是反复要求 AI “再高级一点”。

下次让 AI 做网页之前，可以先写下三个答案：谁会来？他要做什么？我们有哪些真实材料？

页面自己的特点，往往就从这里开始。

你用 AI 做网页时，最难改掉的“模板味”是什么？欢迎在评论区聊聊。

项目地址：

https://github.com/Nutlope/hallmark