你是否也有这样的苦恼：让 AI 写个网页，它确实能写出来。

但不管你做的是个人主页、SaaS 产品，还是电商网站，最后的效果总有点似曾相识。

大标题、渐变色、圆角卡片、整齐的功能模块，再配上几个看起来很高级的按钮……

功能是有了，但设计感没了。

如果你也被 AI 生成的网页“模板味”折磨过，今天这个 GitHub 项目值得收藏。

01. 它是什么？能解决什么问题？

项目名称：Hallmark

GitHub：https://github.com/Nutlope/hallmark

这是一个专门改善 AI 网页设计的开源设计技能，支持 Claude Code、Codex、Cursor 和 OpenCode 等 AI 编程工具。

截至目前，GitHub 页面显示该项目已经获得约 3.7 万颗 Star。

它的目标很直接：让 AI 生成的网页，不再一眼看上去就是 AI 做的。

它不是一个新的建站平台，也不是简单地给 AI 加一句“请设计得高级一点”。

Hallmark 会为页面选择合适的设计风格，根据页面用途组织布局，并通过一系列规则检查生成结果，减少常见的 AI 设计套路。

02. 它到底特别在哪里？

① 不再所有网站都长一个样

Hallmark 提供了多种设计主题，涵盖色彩、字体、表面质感和组件风格。比如，你要做一个金融 SaaS 产品，和一个面向儿童的阅读应用，它们就不应该只是换一套颜色。

前者需要清晰、可信、高效；后者可能更需要轻松、活泼、有亲和力的视觉语言。

Hallmark 会根据项目需求选择设计方向，而不是每次都套用同一份网页模板。

② 不只是生成，还会检查

很多 AI 编程工具的问题是：代码生成了，就觉得任务完成了。

Hallmark 则会检查一些常见的设计问题，例如：

• 每个标题上方都放一行小字，页面看起来像同一个模板。

• 为了营造高级感，过度使用大面积渐变和空洞的卡片。

• 首页首屏布局不合理，手机上显示错乱。

• 表单看起来能提交，实际上却没有真正的处理逻辑。

• 对比度、键盘焦点等基础可用性问题被忽略。

其中，部分检查针对设计风格，部分涉及真实的可用性问题。

③ 已有项目也能改，不必推倒重来

这是我认为很实用的一个功能。

如果你已经有一个能运行、但设计不够好的网页，可以让 Hallmark 审查现有页面，或者重新设计。

它提供了两种不同的操作：

• audit：检查现有页面，给出问题清单，不直接修改。

• redesign：重新设计页面，尽量保留原有内容和功能逻辑。

举个例子：

你之前用 AI 搭了一个数据看板，功能都正常，但布局很像默认后台模板。

可以先让它检查问题，再决定是局部优化还是重新设计。相比直接要求 AI “全部重写得好看一点”，这种方式更有针对性。

03. 怎么安装？三步就能开始

如果你已经在使用支持的 AI 编程工具，可以试试。

第一步：确认环境

需要 Node.js 18 或更高版本。

第二步：安装 Hallmark

打开终端，执行：

npx skills add nutlope/hallmark -g

这里的 -g 表示全局安装，让技能可以在多个项目中使用。想只安装到当前项目，可以去掉它。

第三步：在 AI 编程工具里调用

例如，在 Claude Code 或 Codex CLI 中，可以尝试：

/hallmark 帮我设计一个现代化的个人作品集网站

Codex CLI 的调用形式则可以是：

$hallmark 帮我设计一个现代化的个人作品集网站

如果你已经有现成的页面，也可以尝试：

/hallmark audit ./index.html

检查页面有哪些设计问题。

或者：

/hallmark redesign ./src/app

尝试重新设计现有页面。

注意：具体调用方式取决于使用的编程工具和安装方式。如果命令没有触发技能，可以在提示词中明确要求使用 Hallmark。

04. 哪些人值得收藏？

如果你符合下面任何一种情况，都可以关注这个项目：

• 独立开发者： 想快速做出有辨识度的产品页面。

• 前端开发者： 不想每次都从默认的 AI 网页模板开始修改。

• 产品经理： 想用 AI 快速验证产品原型，同时关注页面体验。

• AI 编程爱好者： 已经能让 AI 写代码，下一步想提升生成结果的质量。

不过，也别把它当成万能设计师。

它能提供设计规则、自动检查和重新设计能力，但不代表每次输出都能达到专业设计师的水平。产品定位、真实业务逻辑、素材质量和人工审美判断，依然很重要。

05. 最后说说我的看法

过去用 AI 写网页，大家比的是谁生成得快。

但当越来越多人都能用 AI 搭建网站，真正拉开差距的，可能不再是“能不能做出来”，而是：

做出来的东西，有没有自己的风格，能不能真正解决用户的问题。

Hallmark 的价值，不是让 AI 多写几行代码，而是尝试给 AI 加上一套更具体的设计标准和质量检查流程。

如果你平时经常用 AI 做网页，这个项目值得放进收藏夹。

🔗 项目地址：https://github.com/Nutlope/hallmark

你用 AI 做网页时，最受不了哪种问题？

A. 页面总是一个模板B. 视觉效果一般，缺乏设计感C. 页面看起来不错，但功能跑不通D. 改一个地方，其他地方又坏了

欢迎在评论区聊聊，也可以分享你用过的其他 AI 网页设计工具。