让 AI 做的网页，少点模板味

看懂效果与用途

AI 写出的网页能用，却常常长得一样：大标题、几张卡片、同款渐变。Hallmark 是 Together AI 制作的设计技能，用视觉主题确定字体、配色和材质，再按页面用途安排内容，完成后检查实际画面与交互。

上方是官方 Furrow 和 Cobalt 示例。前者用地图与农场记录说明产品，后者用事件流展示开发者工具。比较它们的首屏：视觉中心、信息组织和主要按钮都随内容变化，主题提供的也不只是颜色。官方展示站可以查看完整页面。

同类设计技能怎么选

• Hallmark：适合制作网页，以及检查或改版已有页面；把视觉方向、首屏制作与浏览器检查放进同一流程。
• huashu-design：适合先比较设计方案，或制作 PPT、信息图和 App 原型；先探索六个候选，再展示三套初稿供选择。
• landing-page-design：适合围绕一个主要动作组织落地页，重点是卖点、文案和逐段制作。

安装并准备项目

下面用 Claude Code 制作一个独立书店活动报名页。安装器当前要求 Node.js 22.20 或以上；Hallmark 自身的脚本要求 Node.js 18 或以上。

1. 在终端运行下面的安装命令，将完整技能包安装到全局：

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

2. 浏览器检查还需要本机安装 Chrome 或 Chromium，并安装 Puppeteer 连接库：

npm i -g puppeteer-core

3. 安装后，在新会话中确认 Claude Code 能找到 /hallmark。技能目录 ~/.claude/skills/hallmark/ 应包含 SKILL.md、references/ 和 scripts/。

如果使用 Codex CLI，改用快捷安装区中的 Codex 命令，调用入口是 $hallmark，全局目录是 ~/.agents/skills/hallmark/。本文其余请求也可用“使用 Hallmark”明确点名。

把需求说清楚

1. 新建一个项目目录，将活动名称、时间、地点、内容介绍和真实报名链接写入 brief.md。
2. 在 assets/ 放入你有权使用的书店或活动照片。在 AI 编程工具中打开这个项目目录。
3. 将下面这段本站练习请求发给 AI：

使用 Hallmark，制作一个独立书店活动报名页，输出 index.html 和配套样式文件。
读取 brief.md 中的活动信息与报名链接，使用 assets/ 中的照片。
受众：附近的读者。主要动作：点击按钮，打开我提供的报名链接。
视觉方向：温暖、克制、有书卷气的编辑式风格。
先说明你选择的主题、首屏安排和主要按钮位置，只完成首屏供我查看。
等我确认后，再完成其余内容并运行检查。

Hallmark 会先读取项目与素材。默认主题选择流程从 48 种主题中推荐三个候选，由 AI 查看参考图后选择一个，并说明理由。这里的候选是主题方向；布局仍要围绕本次活动组织。

如果已有明确视觉构想，可以直接要求 custom，让它按你的需求设计。已有项目中的 design.md 则用于延续已确定的设计系统。

先确认首屏，再完成整页

1. 按 AI 提供的路径打开首屏预览。先看活动是什么、何时举行、报名按钮在哪里，再看照片与文字是否相互遮挡。
2. 需要调整时，一次指出一个具体问题，例如“保留照片和配色，让活动日期更靠近报名按钮”。确认后再继续：

首屏方向确认。保留当前主题、字体和主要按钮样式，完成整页。
按 brief.md 的实际内容安排活动介绍、时间地点和报名入口。
所有报名按钮使用同一个真实链接，补齐手机布局与键盘焦点样式。
完成后运行 Hallmark 的静态和浏览器检查，修复问题，再做视觉评审。
给我预览路径和检查结果。

3. 查看整页并尝试报名按钮；用键盘 Tab 移动焦点，缩窄窗口检查内容是否仍能读清。页面的主要任务是帮助访客了解活动并到达报名入口，其他版块围绕这个任务取舍。

Hallmark 的检查分三层：Floor 是必须修复的底线问题；Reflex 是常见设计惯性，可以说明理由后保留；Finish 是需要评估的细节。先处理底线问题，再判断其余建议是否符合页面用途。

检查并局部修改

在项目根目录的终端，可对本例的静态页面重新运行浏览器检查：

node ~/.claude/skills/hallmark/scripts/sloplint.mjs ./index.html --render

先看报告中的 FAIL、REFLEX 和浏览器实际运行状态。缺少浏览器或 Puppeteer 时，脚本仍可做静态检查，但会标明渲染检查未运行；补齐环境后再重跑。若是框架项目，需要先启动开发服务器，再让 AI 用 --url 指向实际页面路由。

想尝试局部修改时，先保存当前版本，再发送：“使用 Hallmark 润色这个页面，保留布局和现有视觉风格，只提高正文对比度并统一按钮焦点样式。”对照前后截图，再次操作报名入口，确认修改是否解决了问题。

已有页面：先决定改到哪一层

在 Claude Code 中，可以按目标选择：

目标	发给 AI 的请求	结果
先看问题	/hallmark audit ./index.html	生成检查报告，不修改项目文件
保留布局，换视觉	/hallmark redesign ./index.html keep the layout	调整字体、配色等视觉系统
重做结构与视觉	/hallmark redesign ./index.html	保留原有内容和交互功能，重新组织页面

改版前让工作区保持干净，并提供本地源码。Hallmark 用 --before 记录原链接、表单和相关行为，完成后用 --kept 对比，并生成 .hallmark/compare.html。查看前后画面后，也要实际尝试原有操作。

换成自己的项目

完成书店页面后，换成展览、工作坊或产品介绍页。替换下面的方括号，再交给同一个 AI：

使用 Hallmark，为 [项目名称] 制作 [页面类型]。
读者与主要动作：[谁来看，最希望他们做什么]。
真实内容与素材：[文档、照片、产品地址或截图路径]。
已有设计系统：[design.md 路径或需要延续的品牌规则]。
视觉方向：[指定主题、描述气质，或要求 custom]。
先交付：[首屏或一个指定页面]，我确认后再继续。
完成后：[需要检查的主要操作与页面路由]。

新场景先调整内容顺序和主要动作，再调整外观。多页网站可以要求“lock the system”，将确认后的规则保存为 design.md，让后续页面沿用一致的字体、配色和组件样式。使用技能照片库时，保留照片的作者署名与各自许可。