Hallmark 是什么让 Claude Code 生成的 UI 不再一眼 AI 的开源设计技能完全指南【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmarkHallmark 是一款免费的开源设计技能Design Skill专为 Claude Code、Cursor 和 Codex 等 AI 编码助手打造。它为 AI 内置了一整套反 AI 模板规则——22 套设计主题、69 道slop 测试质量门和一套输出前自我批判机制逼着 AI 放弃居中大标题 三列卡片 渐变按钮的套路。本指南面向新手读完 5 分钟跟着 3 步安装就能让 AI 生成的页面看起来像人手做的。为什么 AI 写的页面总是一眼 AI 你大概率见过这种页面深色背景、蓝紫渐变大标题、居中排布、三个等宽功能卡片、每个卡片上方一个渐变图标、按钮悬停时放大加阴影。换十个产品、让十个 AI 各生成一遍结构几乎一模一样。问题不在于 AI 不会写代码而在于所有大模型都被同一批好看的网页训练过它们会不自觉地回到那个分布中心——行业里管这种一眼假的东西叫 AI slopAI 泔水。下面就是一个典型例子渐变文字 居中大标题 均匀留白信息是真实的气质是模板的。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 助手放置。AI 助手放置位置Claude Code~/.claude/skills/hallmark/Cursor.cursor/rules/hallmark.mdc取 SKILL.md 正文Codex~/.codex/skills/hallmark/把 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 CSSCSS 头部带一行戳记注释用了哪个结构、哪个主题——下一次生成时 AI 会先读它确保不重复。完整 13 组测试页面都在 site/_tests/ 里每个文件夹附一份brief.md展示从需求到选型的完整推理过程。关键文件导览规则都在哪想了解什么看这里技能总纲所有流程与纪律skills/hallmark/SKILL.md21 种页面宏观结构skills/hallmark/references/macrostructures.md46 个组件原型Hero/导航/页脚/CTAskills/hallmark/references/component-cookbook.md69 道 slop 测试门skills/hallmark/references/slop-test.md反模式清单哪些一眼 AIskills/hallmark/references/anti-patterns.md4 种气质流派editorial/atmospheric…skills/hallmark/references/genres/8 个可直接粘贴的需求配方docs/recipes.mdstudy 动词的三个完整案例docs/study-examples.md项目规划品牌流、variant 命令等ROADMAP.md新手上手 Tips ✨先用 audit再决定要不要 redesign——audit 只读不写零风险还能让你看清 AI 页面假在哪。需求里给出极端语气editorial、brutalist、soft、utilitarian……clean and modern 不算语气是无效输入。数字别编Hallmark 明令禁止虚构 50,000 团队、10× 更快这类指标没有数据就留占位符——这是它的 slop 测试门之一你的品牌反而因此更可信。组件级需求直接说只要这一个按钮它会走轻量流程给组件配齐 8 种交互状态的演示页而不是硬塞一整套页面装置。移动端是硬门槛所有输出必须在 320/375/414/768px 四档宽度下无横向滚动、按钮文字不换行——不用你操心规则已内置。常见问题 FAQHallmark 需要额外付费或 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Hallmark 是什么：让 Claude Code 生成的 UI 不再一眼 AI 的开源设计技能完全指南
Hallmark 是什么让 Claude Code 生成的 UI 不再一眼 AI 的开源设计技能完全指南【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmarkHallmark 是一款免费的开源设计技能Design Skill专为 Claude Code、Cursor 和 Codex 等 AI 编码助手打造。它为 AI 内置了一整套反 AI 模板规则——22 套设计主题、69 道slop 测试质量门和一套输出前自我批判机制逼着 AI 放弃居中大标题 三列卡片 渐变按钮的套路。本指南面向新手读完 5 分钟跟着 3 步安装就能让 AI 生成的页面看起来像人手做的。为什么 AI 写的页面总是一眼 AI 你大概率见过这种页面深色背景、蓝紫渐变大标题、居中排布、三个等宽功能卡片、每个卡片上方一个渐变图标、按钮悬停时放大加阴影。换十个产品、让十个 AI 各生成一遍结构几乎一模一样。问题不在于 AI 不会写代码而在于所有大模型都被同一批好看的网页训练过它们会不自觉地回到那个分布中心——行业里管这种一眼假的东西叫 AI slopAI 泔水。下面就是一个典型例子渐变文字 居中大标题 均匀留白信息是真实的气质是模板的。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 助手放置。AI 助手放置位置Claude Code~/.claude/skills/hallmark/Cursor.cursor/rules/hallmark.mdc取 SKILL.md 正文Codex~/.codex/skills/hallmark/把 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 CSSCSS 头部带一行戳记注释用了哪个结构、哪个主题——下一次生成时 AI 会先读它确保不重复。完整 13 组测试页面都在 site/_tests/ 里每个文件夹附一份brief.md展示从需求到选型的完整推理过程。关键文件导览规则都在哪想了解什么看这里技能总纲所有流程与纪律skills/hallmark/SKILL.md21 种页面宏观结构skills/hallmark/references/macrostructures.md46 个组件原型Hero/导航/页脚/CTAskills/hallmark/references/component-cookbook.md69 道 slop 测试门skills/hallmark/references/slop-test.md反模式清单哪些一眼 AIskills/hallmark/references/anti-patterns.md4 种气质流派editorial/atmospheric…skills/hallmark/references/genres/8 个可直接粘贴的需求配方docs/recipes.mdstudy 动词的三个完整案例docs/study-examples.md项目规划品牌流、variant 命令等ROADMAP.md新手上手 Tips ✨先用 audit再决定要不要 redesign——audit 只读不写零风险还能让你看清 AI 页面假在哪。需求里给出极端语气editorial、brutalist、soft、utilitarian……clean and modern 不算语气是无效输入。数字别编Hallmark 明令禁止虚构 50,000 团队、10× 更快这类指标没有数据就留占位符——这是它的 slop 测试门之一你的品牌反而因此更可信。组件级需求直接说只要这一个按钮它会走轻量流程给组件配齐 8 种交互状态的演示页而不是硬塞一整套页面装置。移动端是硬门槛所有输出必须在 320/375/414/768px 四档宽度下无横向滚动、按钮文字不换行——不用你操心规则已内置。常见问题 FAQHallmark 需要额外付费或 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考