PHASE01

确定页面

·了解用途

·安排页面

PHASE02

制作与检查

·生成代码

·检查细节

它解决什么问题

把任务交给它之后，会发生什么

比如，你想做一个小说作者的个人网站，可以带上自己的资料，提出这个需求。

帮我做一个小说作者的个人网站，放上这几部作品、作者简介和联系邮箱。

先了解内容，再安排页面，生成代码后检查显示和操作。

手里已经有代码，或者有喜欢的设计参考时，可以用 Hallmark 做下面这些事。

检查、改版和学习参考设计，可以按当前需要分别使用。

检查现有页面，用 audit。

把页面文件交给它，会得到一份按严重程度排列的问题清单。每一项都包含所在位置和具体改法，方便回到代码里处理。这个模式先给检查报告，原页面保持原样。

想换个样子，用 redesign。

它会根据原来的内容、品牌和页面用途，重新安排版面，调整标题位置、按钮样式和图片展示方式。

如果要改整个网站，它会先与你确认一套统一的设计，保存到design.md，再让各个页面沿用。这样首页、作品页和联系页放在一起，也能看出是同一个网站。

看到喜欢的设计，用 study。

输入可以是一张截图，也可以是一个公开网页地址。它会拆解页面布局、字体搭配和主要配色，给出设计分析。拿到这份分析后，你可以决定将哪些做法用到自己的页面里。

设计确定后，还可以让它整理成design.md。字体、颜色等约定留下来，后面做其他页面，或者交给另一个 AI 工具继续，都有现成的资料可用。

Hallmark 也支持单独设计按钮、输入框或弹窗。任务只有一个组件时，它会围绕这个组件工作，并提供代码和状态预览。

例如，一个提交按钮除了平时的样子，还要考虑鼠标移上去、键盘选中、按下、不可用、正在加载、出错和成功时怎样显示。Hallmark 把这些状态列进了要求。

做小工具或调整现有网站时，这种用法也很实在。可以先把眼前要用的组件做好，再继续完成其他页面。

Hallmark 把设计过程写成了一套 AI 可以读取的规则。

主文件负责判断任务、安排步骤，再按需要读取布局、字体、颜色、交互和检查文档。做新页面时先选布局；研究参考图时先做分析，再决定怎样用到自己的内容里。

对使用者来说，方便的地方在于，给出具体内容和想完成的事情后，AI 有一套现成的设计流程可以遵循。

Hallmark 支持 Claude Code、Cursor 和 Codex。使用官方命令安装时，电脑上需要准备好 Node.js 和 npm。

在终端运行以下命令。

npx skills add nutlope/hallmark

以后需要更新，再运行一次这条命令即可。

也可以按 README 的说明，手动复制SKILL.md和references文件夹。例如，Codex 的项目级安装位置是.codex/skills/hallmark/。

装好后，打开准备做网页的项目，把文字、图片或已有页面交给 AI，就可以围绕具体需求开始设计。

如果你想做个人作品页、产品介绍页，或者给小店做个主页，Hallmark 可以帮你安排版面、选择样式，并把设计写成代码。

如果你已经有网站，想改进观感，也可以从检查一页开始；有喜欢的设计，就用它分析参考；只需要一个按钮或输入框，也能单独处理。

可以先从一个最想完成的页面开始。把要展示的内容准备好，再看看 Hallmark 会怎样安排它们。