Agent Skill - Hallmark

Hallmark 是什么？

Hallmark 是一套面向 Codex、Claude Code 和 Cursor 的前端设计 Skill。它不是组件库、CSS 框架或运行时依赖，而是一套写给 AI 编程助手的设计流程、审美约束和检查清单。

它的目标可以概括为一句话：

让 AI 生成的界面看起来像经过设计，而不是一眼就能看出的“AI 模板站”。

这里的 “AI 味” 通常包括：

• 所有产品都使用相同的“大标题 Hero → 三张功能卡 → CTA → Footer”
• 紫蓝渐变、玻璃拟态和满屏圆角卡片
• 随手编造的“提升 47%”“10× faster”“50,000+ 用户”
• 斜体强调词、假浏览器窗口、假 Mac 红黄绿按钮
• 只换颜色，不改变页面结构
• 桌面端好看，但手机端标题溢出、按钮断成两行

Hallmark 重点解决的不是单纯的配色问题，而是 页面结构同质化。它要求不同需求选择不同的宏观结构，而不是反复套用同一套 Landing Page 骨架。官方说明

它是怎么工作的？

一次完整的新页面设计大致会经过下面的流程：

1. 扫描现有项目

   读取 package.json、Tailwind 配置、CSS Token、字体、动画依赖和框架，决定哪些现有设计元素需要保留。

2. 确定设计语境

   明确三个问题：

   • Audience：谁在使用？
   • Use case：页面最主要的动作是什么？
   • Tone：editorial、brutalist、luxury、playful、technical 等具体气质

   “简洁现代”在 Hallmark 看来太模糊，不能算有效的设计方向。

3. 先选宏观结构，再选颜色

   这是它最特别的地方。它先确定页面的信息节奏、标题位置、内容密度、导航与 Footer 形态，然后才进入视觉主题。

4. 选择设计类型和主题

   它目前区分四种主要 genre：

   • Editorial
   • Modern Minimal
   • Atmospheric
   • Playful

   然后从 20 个内置主题中选择，例如 Newsprint、Brutal、Terminal、Garden、Riso、Cobalt、Lumen、Hum 等。品牌意图足够明确时，也可以生成一套定制的 OKLCH 色板、字体和页面结构。主题选择机制

5. 执行 anti-slop 检查

   包括内容真实性、字体、色彩 Token、响应式、可访问性、结构重复、交互状态等大量检查项。

6. 生成前自我评审

   从 Philosophy、Hierarchy、Execution、Specificity、Restraint、Variety 六个维度打分；低于要求就先修改，再交付。

它的完整规则并不全塞在一个 Prompt 里，而是拆成了 typography、color、responsive、motion、macrostructure、anti-patterns 等参考文件，按需求加载。规则目录

四种主要用法

Hallmark 提供一个默认模式和三个明确命令：

study 并不是让 AI 像素级抄袭。它只提取设计规律，还可以输出一个便携的 design.md，让后续页面继续遵守同一套设计系统。Study 说明

例如：

hallmark audit app/page.tsx

hallmark redesign app/page.tsx --mood editorial

hallmark study https://example.com

也可以自然语言调用：

使用 Hallmark 为一个独立咖啡订阅品牌设计首页。
受众是已经购买精品咖啡的人，主要动作是订阅。
风格要温暖、手工印刷感、偏编辑设计。

仓库还提供了一组可以直接复制的完整需求示例。Recipes

对组件的特殊处理

如果需求只是按钮、输入框、卡片、弹窗等单个组件，Hallmark 会切换到 component-scope，不套用整页流程。

交互组件原则上要覆盖八种状态：

• Default
• Hover
• Focus
• Active
• Disabled
• Loading
• Error
• Success

同时生成一个预览页面，把八种状态一次展示出来。这一点对真实产品开发很实用，因为普通 AI 经常只实现默认和 Hover 两种状态。

它比较有价值的设计原则

我认为其中最值得借鉴的是下面几项：

• 结构多样性优先于视觉换皮：不同 Brief 应产生不同页面骨架。
• 不编造商业证据：没有数据就使用待确认占位，或者改用不依赖数据的结构。
• 尊重已有项目：先扫描现有字体、颜色和组件体系，不随意推翻。
• Token 锁定：颜色和字体统一引用设计 Token，避免边写边发明新颜色。
• 响应式是硬要求：覆盖 320、375、414、768 px 等宽度。
• 保留项目边界：Redesign 不等于删除原有路由和组件目录。
• 设计可持续：通过 design.md 固定跨页面设计系统，通过 .hallmark/log.json 避免连续生成相同主题。

它的局限

Hallmark 很有想法，但也不是“安装后自动拥有顶级设计师”：

• 它是一套指令和约束，最终质量仍取决于模型执行能力、项目上下文和需求质量。
• 规则非常强势，适合需要鲜明设计方向的项目；对于必须严格遵循现有企业 Design System 的项目，需要明确让它以现有系统为准。
• 工作流较长，会比普通一句 Prompt 消耗更多上下文和执行时间。
• 它擅长网页与产品 UI，但不能替代真实用户研究、品牌策略和设计评审。
• 图片主导的电商、旅行、餐饮、Lookbook 页面目前仍是作者公开承认的薄弱项，原生图片生成集成还在 Roadmap 中。Roadmap
• 文档当前存在小版本差异：README 写的是 57 个检查 gate，而 SKILL.md 部分位置写成 58 个；不影响使用，但说明项目仍在快速迭代。

安装

官方推荐：

npx skills add nutlope/hallmark

Codex 也可以手动复制到：

~/.codex/skills/hallmark/

或者只在某个项目启用：

.codex/skills/hallmark/

安装后可以再次运行同一个 npx skills add 命令更新。安装说明

总体来说，Hallmark 最适合：

• AI 生成的页面总是“能用但很像模板”
• 想让 Codex 主动承担更多设计判断
• 需要审计、重设计或提取参考网站设计语言
• 希望把审美要求变成可复用、可检查的工程流程

它最大的贡献并不是那 20 套主题，而是把“不要有 AI 味”从一句模糊要求，拆成了一套相对可执行的设计协议。