Hallmark 官方封面：浅色网格上的黑色大标题，下方排列三张相互叠放的网页示例。
项目截图关于这个 Skill
Hallmark 是 Together AI 制作的网页与 UI 设计 Skill，引导编程 Agent 检查项目、明确访客的主要任务，从 48 种视觉主题中选择或采用自定义方向，先完成首屏，再进行源码与浏览器检查。同一个 Skill 支持新页面、明确指定的重设计和审查报告；主题与参考文件是配套材料，并非独立安装的 Skills。
为什么推荐
适合需要在编码之外加入具体设计流程的任务。Hallmark 将视觉主题库、源码与浏览器检查结合起来，并区分新建页面、明确指定的重设计和审查报告；运行内容与安装说明均来自原始仓库。
适合用来做什么
- 为新落地页或界面确定具体视觉方向与清晰的主要操作。
- 重设计明确指定的现有页面，同时检查内容、链接、字段和事件处理是否保留。
- 审查前端文件或运行中的页面，发现常见设计问题、可访问性缺陷与响应式布局问题。
从需求到经过检查的页面
Hallmark 先读取现有项目，再确认素材、受众、目标操作与风格。它提出页面结构，提供三种相关主题供选择，或按明确要求采用自定义方向，并先完成首屏再扩展整页。品牌主张、数字与证言须来自已提供的事实。
本地检查工具将不可豁免的 Floor 错误、可给出理由的 Reflex 默认模式，以及 Finish 细节审查分开处理。浏览器检查覆盖多个视口宽度。这些检查帮助约束实现，不保证特定审美结果或直接达到生产可用状态。
制作、重设计与审查
这些模式属于同一个已安装 Skill。上游要求在明确提到 Hallmark 时才进入重设计或审查，普通修改可以沿用项目原有设计系统。
| 命令 | 用途与使用时机 |
|---|---|
/hallmark <prompt> | 根据需求制作新页面；Codex 用户可使用 $hallmark 调用。 |
/hallmark redesign <path> | 明确要求重设计指定页面，并保留现有内容与行为。 |
/hallmark audit <path> | 为指定目标生成审查报告。 |
安装与本地检查
使用安装区命令选择兼容 Agent，并安装到当前项目；添加 -g 可安装到用户级目录。README 还提供 Claude Code 插件与克隆仓库后的安装方式。需要保留整个 Skill 目录，不能只复制 SKILL.md。
| 命令 | 用途与使用时机 |
|---|---|
node <skill-dir>/scripts/sloplint.mjs <file-or-dir> --render | 安装上游要求的浏览器依赖后，执行源码与渲染检查。 |
来源与预览
Hallmark 由 Together AI 制作，维护于 Nutlope 的仓库。本页链接原始 MIT 项目。预览使用用户指定的官方 OG-hallmark.png 宣传封面，并已压缩为 WebP；它不是可交互的网站演示，也不是本次更新新制作的网页。
使用前需要了解
- 上游 README 提供 Claude Code、Codex CLI、Cursor 和 OpenCode 用法。安装时保留完整 hallmark 文件夹及主题、参考文件和辅助脚本；安装器与本地脚本需要 Node.js 18+。
- 浏览器检查与截图需要 Chrome 和 puppeteer-core；缺少时仍可执行静态检查。审查现有应用路由还需要该项目自身的依赖和可运行的预览服务。
- Skill 采用 MIT 许可证，可免费安装；编程 Agent 的使用费用另计。可选图片生成功能需要 Together AI 凭证并按服务商计费；照片素材保留各自的许可与署名要求。
支持的 Agent
资料与来源
原始资料见下方链接；文中的上手建议由 SkillHey 编辑整理。
