hallmark简介
AI/ML
Hallmark 是一个专为 AI 编程助手（如 Claude Code、Codex CLI、Cursor 等）设计的「设计技能」插件，用于解决 AI 生成网页千篇一律、充满机器痕迹的问题。它通过内置的 48 套主题材质、严格的分层质量门禁以及真实浏览器渲染检测，强制 AI 在生成页面时遵循专业设计规范，确保最终产出的网页具备人类设计师的工艺水准。
它不仅能在从零构建页面时提供设计指导，还支持对已有项目进行视觉审计和重构。它会根据页面的实际用途（如预订、销售、订阅）来组织内容结构，并自动规避常见的 AI 设计套路，例如每个标题上方都加小标签、滥用全大写追踪字距、或者每页末尾都塞一个邮件订阅表单。
亮点特性
01三层质量门禁机制
Floor（底线，不达标绝不发布）、Reflex（反 AI 默认套路，允许合理覆盖）、Finish（工艺细节打磨），系统化保障设计质量
0248 套主题材质库
每个主题控制在 8KB 以内，仅提供材质、色彩和排版基调而不限制页面结构，确保同一主题下不同提示词能生成完全不同的页面
03真实浏览器渲染检测
通过 sloplint 脚本在 8 种屏幕宽度下进行自动化视觉审查，并由子代理以全新上下文进行冷启动复核
04合法合规的真实图库
内置 755 张来自 Wikimedia Commons 的公开授权照片，按主题智能匹配并在页面中自动署名，拒绝使用禁止 AI 抓取的图库网站
05无损重构能力
支持对现有页面进行 audit 和 redesign，重构前会记录所有链接、表单字段和事件处理器，确保视觉升级不会破坏原有业务逻辑
使用场景
场景 1独立开发者使用 AI 编程工具快速生成产品落地页，同时保证页面具有专业且独特的视觉质感
场景 2前端团队对现有项目运行视觉审计，批量检测并修复对比度不足、移动端布局破损等无障碍问题
场景 3设计师或产品经理要求 AI 基于特定品牌风格重构旧页面，在保留原有交互逻辑的前提下全面升级 UI
场景 4为不同业务场景（电商、SaaS、个人博客）生成符合用户行为路径的定制化页面结构
使用环境
快速上手
安装步骤
需要 Node.js 18 及以上版本。全局安装（适用于所有项目）：
|
如果仅需在当前项目中安装，去掉 -g 参数即可。若需启用浏览器渲染检测功能，还需安装 Puppeteer 和 Chrome：
|
基本配置与调用
安装后，Hallmark 会自动适配不同的 AI 编程工具：
- Claude Code：技能文件存放在 ~/.claude/skills/hallmark，通过 /hallmark 提示词 调用。
- Codex CLI：存放在 ~/.agents/skills/hallmark，通过 $hallmark 提示词 调用。
- Cursor / OpenCode：会自动发现上述路径中的技能文件。
如果只想为特定工具安装，可指定 agent：
|
核心用法示例
1. 从零构建新页面
直接在 AI 助手中描述需求，Hallmark 会介入设计流程：
|
2. 审计现有页面
检查某个 HTML 文件或目录是否符合设计规范：
|
3. 重构已有项目
在 AI 助手中执行重构命令，它会保留原有内容和交互逻辑，仅改变视觉系统：
|
4. 脱离主题自定义设计
在提示词中加入 custom，Hallmark 将不使用预设主题，完全根据你的描述进行原创设计：
|
替代方案
对比 1v0 by Vercel
同样用于 AI 生成 UI，但 v0 是基于 React/Next.js 的在线生成平台，而 Hallmark 是嵌入本地 AI 编程助手的纯设计规范约束层，更侧重于消除 AI 痕迹而非组件拼装
对比 2Tailwind UI
提供高质量的人工设计组件库和模板，但需要开发者手动挑选和组装；Hallmark 则是让 AI 自动生成页面，并通过规则引擎强制达到类似的专业设计标准
对比 3Figma + AI 插件
传统的设计到代码工作流，依赖设计师在 Figma 中完成视觉稿；Hallmark 直接跳过了图形界面设计阶段，在代码生成环节实时把控设计质量
相关资源
项目地址github.com/Nutlope/hallmark
官网usehallmark.com