企业官网建设流程全解析

Hallmark 是什么：让 Claude Code 生成的 UI 不再一眼 AI 的开源设计技能完全指南

【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark

Hallmark 是一款免费的开源设计技能（Design Skill），专为 Claude Code、Cursor 和 Codex 等 AI 编码助手打造。它为 AI 内置了一整套"反 AI 模板"规则——22 套设计主题、69 道"slop 测试"质量门和一套输出前自我批判机制，逼着 AI 放弃"居中大标题 + 三列卡片 + 渐变按钮"的套路。本指南面向新手：读完 5 分钟，跟着 3 步安装，就能让 AI 生成的页面看起来像人手做的。

为什么 AI 写的页面总是一眼 AI？ 🤖

你大概率见过这种页面：深色背景、蓝紫渐变大标题、居中排布、三个等宽功能卡片、每个卡片上方一个渐变图标、按钮悬停时放大加阴影。换十个产品、让十个 AI 各生成一遍，结构几乎一模一样。

问题不在于 AI 不会写代码，而在于所有大模型都被同一批"好看"的网页训练过，它们会不自觉地回到那个分布中心——行业里管这种一眼假的东西叫 "AI slop"（AI 泔水）。

下面就是一个典型例子：渐变文字 + 居中大标题 + 均匀留白，信息是真实的，气质是模板的。

Hallmark 是怎么治这个病的？

Hallmark 的思路不是"教 AI 更会调颜色"，而是强制结构性差异：

• 21 种页面宏观结构（macrostructure）： Bento 网格、宣言式、信件式、统计数字领衔……AI 每次必须先"点名"挑一个，且连续两次不许选同一个。
• 22 套命名主题：从暖纸色的 Linen 到终端绿的 Terminal，相邻两次生成的页面必须在"纸张明度 / 字族风格 / 强调色相"三个轴上至少不同一个。
• 69 道 slop 测试门：输出前逐条自查——"标题字体是不是 Inter？""有没有渐变文字？""卡片有没有套卡片？""有没有编造'50,000+ 团队在用'这种数据？"——任何一题答"是"就返工。
• 输出前六维自评：理念、层级、执行、特异性、克制、多样性，任一项低于 3 分重写。

规则全部写在纯 Markdown 里，核心是 skills/hallmark/SKILL.md，配套的 40 多个组件原型在 skills/hallmark/references/components/，质检清单在 skills/hallmark/references/slop-test.md。

装好之后，同一个 AI 助手、同一份需求，前后对比是这样的——内容几乎没变，气质完全不同：

四个命令（verbs），覆盖设计全流程

Hallmark 提供 1 个默认行为 + 3 个显式动词，覆盖从"从零建页"到"学习现有设计"的完整场景：

1️⃣ 默认：从零构建新页面

直接说"给我做一个 XX 的落地页"即可。AI 会先问你三个问题（目标人群、核心动作、语气基调），你可以回答，也可以说"你看着办"——它会把你没答的项明示推断出来，而不是偷偷编。

2️⃣hallmark audit：体检，只打分不动刀

把现有页面丢给它，它会对照反模式清单输出一份分级（CRITICAL / MAJOR / MINOR）的"问题清单"，每条带位置和修复建议，不做任何修改。适合接手老项目前先看底子。

3️⃣hallmark redesign：保留文案，重造结构

丢出一个典型 AI 模板页，它会拆掉结构、保留文案与信息架构，用不同的"结构指纹"重建。实测示例见 site/_tests/verbs/redesign/。

4️⃣hallmark study：提取你欣赏的设计的"DNA"

贴一张你喜欢的网站截图，它会输出一份诊断报告：宏观结构、字体配对角色、色彩锚点、节奏——然后只用骨架，绝不复制像素，也拒绝模板市场链接。URL 模式甚至能读出页面加载的确切字体和色值。

三个完整案例（输入 → 诊断 → 重建）在 docs/study-examples.md 里写得明明白白。

三步安装，两种用法

第一步：拿到技能文件。克隆仓库即可：

git clone https://gitcode.com/GitHub_Trending/hal/hallmark

第二步：按你的 AI 助手放置。

把 skills/hallmark/SKILL.md 和整个 skills/hallmark/references/ 目录拷过去就行。也可以直接用官方一行命令：

npx skills add nutlope/hallmark

第三步：用官方"验装咒语"试一下。docs/recipes.md 的第一条配方就是为验证安装准备的——直接粘贴这个需求："Build me a landing page for Coffeebox — a small-batch coffee subscription…"。如果 AI 生成了一个暖纸色、衬线字、编辑部气质的咖啡订阅页，说明技能接线正确；如果又是紫色渐变 SaaS 模板，那就是没装好。

不同需求，真的生成不同形状的页面

这是 Hallmark 最直观的价值。下面是仓库里的真实产出，全部由技能在不指定主题的情况下自动选型：SaaS 产品页、旅行预订、咖啡订阅、创意工作室——没有一个共享同一种结构或主题。

每个页面都是自包含的 HTML + CSS，CSS 头部带一行"戳记"注释（用了哪个结构、哪个主题）——下一次生成时 AI 会先读它，确保不重复。完整 13 组测试页面都在 site/_tests/ 里，每个文件夹附一份brief.md，展示从需求到选型的完整推理过程。

关键文件导览：规则都在哪？

新手上手 Tips ✨

• 先用 audit，再决定要不要 redesign——audit 只读不写，零风险，还能让你看清 AI 页面"假"在哪。
• 需求里给出"极端语气"：editorial、brutalist、soft、utilitarian……"clean and modern" 不算语气，是无效输入。
• 数字别编：Hallmark 明令禁止虚构 "50,000+ 团队"、"10× 更快"这类指标，没有数据就留占位符——这是它的 slop 测试门之一，你的品牌反而因此更可信。
• 组件级需求直接说"只要这一个按钮"：它会走轻量流程，给组件配齐 8 种交互状态的演示页，而不是硬塞一整套页面装置。
• 移动端是硬门槛：所有输出必须在 320/375/414/768px 四档宽度下无横向滚动、按钮文字不换行——不用你操心，规则已内置。

常见问题 FAQ

Hallmark 需要额外付费或 API Key 吗？不需要。它是 MIT 协议的纯 Markdown 技能，装上即用，跑在你自己的 AI 订阅里。

它会改写我的现有项目吗？默认不会。redesign 只在"现有实现边界内"换视觉层，保留路由、文案和信息架构；删除任何文件前都会先列出清单求确认。

和"让 AI 写设计规范"有什么区别？规范文档靠模型"自觉"，Hallmark 靠流程强制执行：先选型（并说出理由）→ 生成前预览 → 输出后跑 69 道门 → 戳记存档防重复。它是纪律，不是建议。

支持哪些 AI 助手？Claude Code、Cursor、Codex 三个官方适配位置，规则本身是纯 Markdown，理论上任何能读 system 规则的编码助手都能用。

Hallmark 由 Together AI 团队开源，目前 1.0 版本已在路上持续迭代——接下来计划加入hallmark variant（同需求并排生成三个不同结构版本）和"品牌先行"流程。对于每一个用 AI 写页面却总被"这怎么一股 AI 味"困扰的人来说，装上它，是成本最低的一次升级。

【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark