Hallmark 项目全景速览22 个主题、21 种页面骨架、69 道质量闸门【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmarkHallmark是一个专为 Claude Code、Cursor、Codex 等 AI 编程助手打造的Anti-AI-slop 设计技能Design Skill它让 AI 生成的网页摆脱紫蓝渐变 三栏卡片 Inter 字体的机械感产出像人类设计师手工打磨的页面。整个体系由22 个命名主题、21 种页面骨架Macrostructure、69 道 slop-test 质量闸门三件套支撑由 Together AI 出品MIT 协议开源。为什么需要 Hallmark 设计技能只要用过 AI 写前端的人都有同感十个提示词十张长得一样的落地页——居中大标题、三栏等宽卡片、紫色渐变按钮、emoji 当图标。问题不在文案而在结构。Hallmark 的核心主张是结构多样性而非仅仅视觉差异。两个不同需求的页面应该像两个不同的网站而不是同一套模板换色。为此它内置了三重纪律先选骨架再谈视觉—— 从 21 种命名页面骨架中先选一种主题轮换—— 连续两次输出必须在纸面明暗、标题字体风格、强调色相三个轴上至少一个不同交付前自检—— 输出先过 6 轴自我批评再过 69 道闸门任一答案为yes就必须修复。四大动词一句话触发不同工作流Hallmark 提供1 个默认行为 3 个显式动词覆盖新建 → 体检 → 重构 → 学习的完整闭环调用方式作用(默认)构建新 UI选骨架 → 套规则集 → 交付前跑 slop 测试hallmark audit target对照反模式清单给现有代码打分只出问题清单不改动代码hallmark redesign target保留文案、信息架构与品牌用全新的结构指纹重建视觉层hallmark study 截图 \| URL从你欣赏的设计中提取DNA骨架、字体搭配、色彩锚点拒绝像素级抄袭四种典型产出示例来自site/_tests/verbs/下的真实用例三个动词的完整协议分别写在 skills/hallmark/references/verbs/audit.md、skills/hallmark/references/verbs/redesign.md 和 skills/hallmark/references/study.md 中人类可读的案例见 docs/study-examples.md。21 种页面骨架先定型再画皮骨架Macrostructure是 Hallmark 的第一选择——每种骨架是一个完整的页面指纹标题位置、正文组织、分隔线语言、按钮语气、图片处理、进场节奏全部打包好。21 种骨架包括01 · Bento Grid— 不规则网格节奏来自尺寸变化而非卡片整齐02 · Long Document— 像备忘录/信件一样连续行文04 · Stat-Led— 巨大数字开场数据即叙事07 · Manifesto— 海报式大字宣言12 · Letter— Dear friend, 开头的第一人称信16 · Feature Stack— 左侧粘性标签 右侧滚动同步截图19 · Map / Diagram— 用空间图谱而非线性段落组织信息完整索引见 skills/hallmark/references/macrostructures.md每个骨架另有独立文件如 skills/hallmark/references/macrostructures/01-bento-grid.md按需加载、不做无谓预读。⚠️强制多样性规则同一项目的连续两次 Hallmark 输出不得共用骨架已弃用的 Specimen 骨架不再作为默认选项。项目根目录的.hallmark/log.json会记录最近 20 次构建供下次轮换参考。22 个命名主题每个主题自带令牌系统骨架决定型主题决定皮。22 个主题各有独立的色彩OKLCH与字体令牌块集中在 site/css/tokens.cssSpecimen · Atelier · Brutal · Salon · Newsprint · Linen · Studio · Manifesto · Terminal · Midnight · Almanac · Garden · Quiet · Riso · Sport · Bloom · Coral · Violet · Aurora · Halo · Plume · Editorial主题按四大风格流派Genre分组轮换editorial默认、modern-minimal、atmospheric、playful见 skills/hallmark/references/genres/。主题轮换规则要求连续两次输出在三个轴上至少一轴不同轴取值示例纸面明度深色L30%/ 中间调 / 浅色85%标题字体风格斜体衬线 / 罗马衬线 / 几何无衬线 / 等宽 / 紧缩大写……强调色相暖色 / 冷色 / 中性 / 绿·磷光等此外还有一条安静的custom 分支当需求明确指定品牌色或多属性氛围时可临时构建一次性 OKLCH 调色板 字体搭配协议在 skills/hallmark/references/custom-theme.md。69 道质量闸门交付前的反 AI 味终审所有规则最终收敛为一份可执行的检查表 —— skills/hallmark/references/slop-test.md。闸门分十一个大类每一问的答案都必须是 no典型条目包括视觉用了 Inter/Roboto/Poppins 当展示字体出现紫到蓝渐变三栏等宽卡片 图标在上结构页面骨架与上一次构建相同Hero → 3 特性 → CTA → 页脚就是最典型的 AI 模板诚实文案Gate 56编造了 47% 转化、50,000 团队信任 这类假数据假外壳Gate 57手绘了假浏览器栏、假手机框、假 IDE 窗口令牌纪律Gate 58渲染中途绕过:root令牌、随手写了内联 hex/OKLCH移动端Gates 61–65图片网格轨道没用minmax(0, 1fr)根节点缺overflow-x: clip横排眉题Gate 66把01 · THE TOUR式标签放在标题左侧同行——自动失败粘性层叠Gate 68两个top: 0粘性元素互相渗透在闸门之前还有一步六轴自我批评Philosophy / Hierarchy / Execution / Specificity / Restraint / Variety各 1–5 分任一轴低于 3 分就触发返工——不把已知短板拖进 69 问评审。一键安装与上手安装非常简单在项目里运行npx skills add nutlope/hallmark随时重跑该命令即可更新。也可以手动把技能文件拷贝到对应位置Claude Code—~/.claude/skills/hallmark/Cursor—.cursor/rules/hallmark.mdcCodex—~/.codex/skills/hallmark/规则集本体在 skills/hallmark/SKILL.md全部参考资料在 skills/hallmark/references/97 个 md 文件覆盖排版、色彩、布局、动效、微交互、响应式等。想立刻验证装好了没有可以复制 docs/recipes.md 里的 8 个可粘贴提示词第一个就是官方推荐的 try-it 提示在浏览器打开 site/_tests/ 下 13 个现成案例对照效果。 交付时每个产物都会带一行印章注释如/* Hallmark · macrostructure: Marquee Hero · theme: Bloom */它既是构建记录也是下次构建的避复依据预览块则以 6 行要点骨架 / 主题 / 增强 / 分区 / 动效 / 闸门结果在写码前先给到用户5 秒内就能判断方向对不对。后续规划品牌先行流程、hallmark variant三版并排对比、MCP 实时预览自我批评等可阅读 ROADMAP.md。小结把AI 味变成可检测、可拦截的工程问题Hallmark 最有借鉴价值的地方是它把设计品味翻译成了可执行的规则体系21 种骨架负责结构多样性22 个主题 轮换规则负责视觉多样性69 道闸门 六轴自评负责质量下限。无论你是给 AI 助手装技能直接用还是只把它当一份反模式设计清单来读它都值得一放进你的 AI 工作流。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Hallmark 项目全景速览：22 个主题、21 种页面骨架、69 道质量闸门
Hallmark 项目全景速览22 个主题、21 种页面骨架、69 道质量闸门【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmarkHallmark是一个专为 Claude Code、Cursor、Codex 等 AI 编程助手打造的Anti-AI-slop 设计技能Design Skill它让 AI 生成的网页摆脱紫蓝渐变 三栏卡片 Inter 字体的机械感产出像人类设计师手工打磨的页面。整个体系由22 个命名主题、21 种页面骨架Macrostructure、69 道 slop-test 质量闸门三件套支撑由 Together AI 出品MIT 协议开源。为什么需要 Hallmark 设计技能只要用过 AI 写前端的人都有同感十个提示词十张长得一样的落地页——居中大标题、三栏等宽卡片、紫色渐变按钮、emoji 当图标。问题不在文案而在结构。Hallmark 的核心主张是结构多样性而非仅仅视觉差异。两个不同需求的页面应该像两个不同的网站而不是同一套模板换色。为此它内置了三重纪律先选骨架再谈视觉—— 从 21 种命名页面骨架中先选一种主题轮换—— 连续两次输出必须在纸面明暗、标题字体风格、强调色相三个轴上至少一个不同交付前自检—— 输出先过 6 轴自我批评再过 69 道闸门任一答案为yes就必须修复。四大动词一句话触发不同工作流Hallmark 提供1 个默认行为 3 个显式动词覆盖新建 → 体检 → 重构 → 学习的完整闭环调用方式作用(默认)构建新 UI选骨架 → 套规则集 → 交付前跑 slop 测试hallmark audit target对照反模式清单给现有代码打分只出问题清单不改动代码hallmark redesign target保留文案、信息架构与品牌用全新的结构指纹重建视觉层hallmark study 截图 \| URL从你欣赏的设计中提取DNA骨架、字体搭配、色彩锚点拒绝像素级抄袭四种典型产出示例来自site/_tests/verbs/下的真实用例三个动词的完整协议分别写在 skills/hallmark/references/verbs/audit.md、skills/hallmark/references/verbs/redesign.md 和 skills/hallmark/references/study.md 中人类可读的案例见 docs/study-examples.md。21 种页面骨架先定型再画皮骨架Macrostructure是 Hallmark 的第一选择——每种骨架是一个完整的页面指纹标题位置、正文组织、分隔线语言、按钮语气、图片处理、进场节奏全部打包好。21 种骨架包括01 · Bento Grid— 不规则网格节奏来自尺寸变化而非卡片整齐02 · Long Document— 像备忘录/信件一样连续行文04 · Stat-Led— 巨大数字开场数据即叙事07 · Manifesto— 海报式大字宣言12 · Letter— Dear friend, 开头的第一人称信16 · Feature Stack— 左侧粘性标签 右侧滚动同步截图19 · Map / Diagram— 用空间图谱而非线性段落组织信息完整索引见 skills/hallmark/references/macrostructures.md每个骨架另有独立文件如 skills/hallmark/references/macrostructures/01-bento-grid.md按需加载、不做无谓预读。⚠️强制多样性规则同一项目的连续两次 Hallmark 输出不得共用骨架已弃用的 Specimen 骨架不再作为默认选项。项目根目录的.hallmark/log.json会记录最近 20 次构建供下次轮换参考。22 个命名主题每个主题自带令牌系统骨架决定型主题决定皮。22 个主题各有独立的色彩OKLCH与字体令牌块集中在 site/css/tokens.cssSpecimen · Atelier · Brutal · Salon · Newsprint · Linen · Studio · Manifesto · Terminal · Midnight · Almanac · Garden · Quiet · Riso · Sport · Bloom · Coral · Violet · Aurora · Halo · Plume · Editorial主题按四大风格流派Genre分组轮换editorial默认、modern-minimal、atmospheric、playful见 skills/hallmark/references/genres/。主题轮换规则要求连续两次输出在三个轴上至少一轴不同轴取值示例纸面明度深色L30%/ 中间调 / 浅色85%标题字体风格斜体衬线 / 罗马衬线 / 几何无衬线 / 等宽 / 紧缩大写……强调色相暖色 / 冷色 / 中性 / 绿·磷光等此外还有一条安静的custom 分支当需求明确指定品牌色或多属性氛围时可临时构建一次性 OKLCH 调色板 字体搭配协议在 skills/hallmark/references/custom-theme.md。69 道质量闸门交付前的反 AI 味终审所有规则最终收敛为一份可执行的检查表 —— skills/hallmark/references/slop-test.md。闸门分十一个大类每一问的答案都必须是 no典型条目包括视觉用了 Inter/Roboto/Poppins 当展示字体出现紫到蓝渐变三栏等宽卡片 图标在上结构页面骨架与上一次构建相同Hero → 3 特性 → CTA → 页脚就是最典型的 AI 模板诚实文案Gate 56编造了 47% 转化、50,000 团队信任 这类假数据假外壳Gate 57手绘了假浏览器栏、假手机框、假 IDE 窗口令牌纪律Gate 58渲染中途绕过:root令牌、随手写了内联 hex/OKLCH移动端Gates 61–65图片网格轨道没用minmax(0, 1fr)根节点缺overflow-x: clip横排眉题Gate 66把01 · THE TOUR式标签放在标题左侧同行——自动失败粘性层叠Gate 68两个top: 0粘性元素互相渗透在闸门之前还有一步六轴自我批评Philosophy / Hierarchy / Execution / Specificity / Restraint / Variety各 1–5 分任一轴低于 3 分就触发返工——不把已知短板拖进 69 问评审。一键安装与上手安装非常简单在项目里运行npx skills add nutlope/hallmark随时重跑该命令即可更新。也可以手动把技能文件拷贝到对应位置Claude Code—~/.claude/skills/hallmark/Cursor—.cursor/rules/hallmark.mdcCodex—~/.codex/skills/hallmark/规则集本体在 skills/hallmark/SKILL.md全部参考资料在 skills/hallmark/references/97 个 md 文件覆盖排版、色彩、布局、动效、微交互、响应式等。想立刻验证装好了没有可以复制 docs/recipes.md 里的 8 个可粘贴提示词第一个就是官方推荐的 try-it 提示在浏览器打开 site/_tests/ 下 13 个现成案例对照效果。 交付时每个产物都会带一行印章注释如/* Hallmark · macrostructure: Marquee Hero · theme: Bloom */它既是构建记录也是下次构建的避复依据预览块则以 6 行要点骨架 / 主题 / 增强 / 分区 / 动效 / 闸门结果在写码前先给到用户5 秒内就能判断方向对不对。后续规划品牌先行流程、hallmark variant三版并排对比、MCP 实时预览自我批评等可阅读 ROADMAP.md。小结把AI 味变成可检测、可拦截的工程问题Hallmark 最有借鉴价值的地方是它把设计品味翻译成了可执行的规则体系21 种骨架负责结构多样性22 个主题 轮换规则负责视觉多样性69 道闸门 六轴自评负责质量下限。无论你是给 AI 助手装技能直接用还是只把它当一份反模式设计清单来读它都值得一放进你的 AI 工作流。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考