这是一个给 Claude Code、Codex、Cursor 和 OpenCode 等编码代理使用的设计技能，用来生成不那么“一眼像 AI”的网页。它通过主题、任务导向的页面结构和一套检查规则，尽量减少 AI 生成页面中常见的套路化设计。

项目是什么

这个项目试图解决的问题很明确：AI 生成的网页常常会因为某些固定视觉习惯而显得“机器感”明显，比如标题上方加小标签、大量大写间距文字、标题里只给一个词上色、页面堆满空框或照片等。它会在生成页面时设置底线和检查项，让结果更接近经过人工审视的页面。

主要功能与特性

• 支持在 Claude Code、Codex CLI、Cursor、OpenCode 等工具中使用。
• 提供 48 个主题，每个主题被描述为一种“材料”，包含纸张、字体、颜色、表面、组件和纹理等设计要素。
• 主题不限制页面内容和顺序，因此同一个主题下，不同提示可以生成不同的页面。
• 页面围绕访客要完成的任务构建，例如预约页就服务于预约，商店页就服务于销售，订阅页就服务于订阅。
• 支持 custom 模式：可以完全根据用户提示进行设计，同时仍然遵循同样的规则和检查。
• 可以指向真实产品，例如 URL、开发服务器或应用，并自行捕获截图。
• 内置 755 张开放授权照片，按主题选择，并在页面中标注来源。
• 支持重设计和审计：
• 重设计可以保留原有内容和交互，只改变设计系统和布局。
• 审计模式只输出检查报告，不直接修改页面。
• 采用分层检查机制：
• Floor：底线检查，未通过不应发布，例如对比度、焦点、减少动效、虚构事实、损坏的手机布局等问题。
• Reflex：针对模型容易陷入的默认设计倾向，如果有明确理由，可以在记录中覆盖。
• Finish：偏工艺细节的检查，不会阻止页面发布。
• 构建流程包含预检、主题选择、单独构建并审查首屏区域、在多种宽度下渲染检查，以及由新的审查视角进行复查。
• 生成的每个页面是自包含的 HTML 和 CSS，并会在首个 CSS 注释中记录关键设计决策。

安装与使用

项目提供了安装命令：

npx skills add nutlope/hallmark -g

其中 -g 表示安装到全局，供所有项目使用；如果去掉 -g，则只安装到当前项目。

环境要求方面，需要 Node 18 或更高版本。如果需要使用浏览器检查能力，例如渲染检查或截图，还需要安装 puppeteer-core 和 Chrome：

npm i -g puppeteer-core

如果只运行静态检查，则可以不安装浏览器相关依赖。

使用示例：

/hallmark redesign ./src/app

这个命令会对指定目录进行重设计，同时保留内容和原有交互连接。

/hallmark audit ./index.html

这个命令只会对页面进行审计并输出报告，不会直接修改文件。

如果需要指定安装到某一个代理工具，也可以使用类似命令：

npx skills add nutlope/hallmark -g --agent claude-code

README 中还提到，可以作为 Claude Code 插件安装：

/plugin marketplace add nutlope/hallmark
/plugin install hallmark@hallmark

适合什么场景和目标用户

这个工具适合需要借助 AI 编码代理生成网页，但又不希望页面看起来过于模板化、套路化的人。它比较适合以下场景：

• 使用 Claude Code、Codex CLI、Cursor 或 OpenCode 生成页面时，希望增加一层设计约束。
• 需要快速构建以任务为核心的页面，例如预约页、商店页、订阅页等。
• 已有页面需要重设计，但希望保留原本的内容、链接、表单和交互逻辑。
• 想对现有页面进行设计审计，检查是否存在常见的“AI 生成痕迹”。

目标用户主要是使用 AI 编码工具的开发者、独立开发者，以及需要让 AI 协助完成页面设计的人。它不需要用户从零开始理解复杂设计系统，但可以帮助页面生成过程多一些克制和检查。

总结

整体来看，这个项目的思路不是简单地给 AI 生成的页面套一个主题，而是通过材料式主题、任务导向结构和多层检查机制，减少网页生成中常见的机械感。它的安装方式清晰，使用命令也比较直观，适合希望让 AI 编码代理输出更自然页面的人尝试。项目采用 MIT 许可，使用、修改和分发都比较自由。