用 Hallmark 做 SaaS 落地页完整实战从 brief 到 slop test 全绿【免费下载链接】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设计技能给它一段 SaaS 产品 brief它会自动挑选宏观结构macrostructure、套用 22 套命名主题、跑完 60 道 slop test 门禁后才把落地页交给你。本文用仓库自带的 Tracejam 实战案例带你完整走一遍从 brief 到全绿的流程 一、Hallmark 是什么为什么 SaaS 页面最容易一眼 AI普通 LLM 生成的 SaaS 落地页有一个共同指纹Hero 全屏居中 → 三列等宽特性卡 → 紫色渐变按钮 → CTA → 四栏链接 footer。你在任何一个 AI 产品页上都见过这套组合看多了就腻。Hallmark 的核心主张是结构性多样而不只是换配色每次生成都先从 21 种命名宏观结构中挑一种如 Workbench、Bento Grid、Stat-Led再搭配 22 套命名主题Quiet、Midnight、Linen、Terminal……连续两次输出必须至少在纸色深浅 / 标题字风格 / 强调色相三个轴中的一个上不同交付前跑 60 道 slop test 门禁 六轴自我批评任何一项不达标就回炉。规则全部写在 skills/hallmark/SKILL.md 和 skills/hallmark/references/ 目录里装好即生效不需要写任何代码。二、3 分钟安装 Hallmark在终端执行一条命令即可npx skills add nutlope/hallmark随时重跑该命令就能更新。也可以手动把 SKILL.md references/复制到Claude Code—~/.claude/skills/hallmark/Cursor—.cursor/rules/hallmark.mdcCodex—~/.codex/skills/hallmark/装完可以先粘贴 docs/recipes.md 里的官方试用 briefCoffeebox 咖啡订阅验证流程是否走通。三、Step 0–1写好 SaaS brief先过三问门禁SaaS 是最容易猜错的场景所以 Hallmark 在动手前一定会问三个问题回答是可选的回一句go ahead即可让它自己推断Audience— 谁会来这页Use case— 页面只推动一个什么动作注册订阅联系销售Tone— 选一个极端editorial · brutalist · soft · utilitarian · luxury · playful · technical · austere干净现代不算 tone仓库里 SaaS 实战案例 Tracejam 的原始 brief 只有一句话Build a landing page for Tracejam — a tracing/observability tool for distributed systems. Audience: SREs and platform engineers. Use case: try it / contact sales. Tone: technical.三个要素齐全完整流程记录在 site/_tests/05-tracejam-saas/brief.md。关键细节Tone 是 technical 领域是分布式追踪工具会命中modern-minimal 类型genre的信号SaaS / platform / developer tool / infra技能随后加载 references/genres/modern-minimal.md锁定 Geist 系无衬线、克制单色、胶囊按钮这一整套语言。四、Step 2先挑宏观结构再挑主题Hallmark 的顺序是结构优先于视觉这也是它和模板站最不一样的地方查项目记忆— 若项目根有.hallmark/log.json最近 3 次用的宏观结构这次都不能再用挑宏观结构— 从 references/macrostructures.md 的索引里选一个名字只加载对应那一个文件。Tracejam 选的是Workbench因为 brief 说try itWorkbench 擅长带用户走一条单一线上工作流而不是把 6 个功能切成瓦片挑导航和 footer 原型— 从 references/component-cookbook.md 路由表里选N1–N10 / Ft1–Ft8并默认避开最像 AI 指纹的 N1 和 Ft3挑主题— SaaS 类默认走 Quiet 等克制主题但受三轴分化规则约束纸色深浅、标题字风格、强调色相至少换一项。Tracejam 的实际选择过程原文摘录自 brief.md上次这个 brief 用了 Bento Grid Pastel。这次从 {Workbench, Stat-Led, Long Document} 里挑 —Workbench 胜出。主题轮换Pastel亮纸 · 几何无衬线 · 冷靛蓝→Midnight暗纸 · 荧光青强调。三轴中两轴不同通过。 同一个仓库里TallySaaS · modern-minimal和 TracejamSaaS · 技术工具都是 SaaS 类 brief但一个走 Bento、一个走 Workbench主题也完全不同 —— 这就是结构性多样的直观证据。五、Step 4–5Hero 增强决策 预览块SaaS 工具类 brief 通常值得放一个视觉增强demo 或 mockup。Hallmark 的增强层级是强制从高到低纯文字排版 → 纯 CSS 手绘 → 手绘 SVG → 生成图 → 图库素材 →Lottie 是最后手段。Tracejam 的选择Tier-A 纯 CSS 粘性追踪面板sticky-pinned3 态随滚动切换零视频、零 Lottie、零手绘假浏览器外框 —— 重绘 UI 外框在 slop test 里是硬伤。动手写代码前技能会先输出一个 5 秒能扫完的预览块**Hallmark · v0.6.0** - **Macrostructure** · Workbench - **Theme** · Midnight (dark cool paper · Geist Mono display · phosphor-cyan accent ~3%) - **Enrichment** · Tier-A pure-CSS sticky dashboard panel (3-state, swaps on scroll) - **Sections** · Masthead · Hero · Sticky-walkthrough (3 steps × pinned panel) · Integrations · Pricing · Colophon - **Motion** · sticky-step active highlight · copy-to-clipboard on code (2 primitives) - **Slop test** · 38 / 38 ✓ - **Diversification** · differs from v1 (Bento Grid/Pastel) on macrostructure paper band accent hue看到不对在这里说一声就能改方向比生成 500 行 CSS 之后返工便宜得多。六、Step 6构建与盖章生成产物有三个标志性动作全部能在 site/_tests/05-tracejam-saas/style.css 里找到CSS 顶部盖章— 文件第一行注释记录本次所有选择/* Hallmark · macrostructure: Workbench · F2 sticky-scroll knobs: pinnedright, contenttrace-panel, steps3 * theme: Midnight · accent: phosphor-cyan ~3% · enrichment: tier-A CSS-art trace panel (sticky-pinned, 3-state) * studied: no · context: explicit · v0.6.0 */这个章是持久记录下次 Hallmark 在同一项目运行时读到它就强制换一个宏观结构。写.hallmark/log.json— 在数组头部追加本次的宏观结构 / 主题 / 增强 / brief 摘要最多保留 20 条供下次轮换参考。始终输出tokens.css— 所有颜色必须走 OKLCH 命名 token如var(--color-accent)禁止在渲染中途随手写内联色值 —— 这是门禁 58 卡的就是这个。页面本身index.html也值得看Hero 左侧是文案 双 CTA右侧是一张纯 CSS 手绘的追踪瀑布卡含红色回退span下面三段 sticky 走查步骤各配一条$ tracejam ...命令配合三档定价和单行 colophon。没有 Built for the modern team没有渐变文字没有图标墙。七、Step 7slop test 全绿才准交付最终关卡是 references/slop-test.md 里的 60 道门禁每题答案必须是 no。挑几条和 SaaS 页面最相关的门禁拦的是什么#1标题字体是 Inter / Roboto / Poppins / 系统默认#2出现紫-蓝或青-品红渐变gradient 文字永久封杀#3三列等宽卡片 图标在标题上方#9与上一次输出同结构指纹Hero→3特性→CTA→footer#11用transition: all偷懒#16focus 环是淡入出现的必须瞬间出现#23无端回落 Specimen 结构Specimen-fall-through 被封#25强调色盖过单个视口 5% 的面积#36320–1920px 任意宽度出现横向滚动交付前还有六轴自我批评Philosophy / Hierarchy / Execution / Specificity / Restraint / Variety任何一轴 3 分就触发一轮修订并把六项分数打进文件头注释。Tracejam 这轮的最终成绩slop test 38 / 38 ✓v0.6.0 时期的门禁数当前版本已扩展到 60 门禁且 mobile 四项硬门槛 320/375/414/768px 全部写入。⚠️ 一个诚实提醒门禁拦的是视觉 tell。文案层面的 tell如 Built for the modern team 这类 LLM 味标语要靠 Step 5 预览块 你自己把关这也是仓库在 site/_tests/README.md 里公开列出的改进方向。八、交付后还能做什么Hallmark 不止新建一个动词SaaS 存量页面还能hallmark audit target— 对现有代码按反模式清单打分只出整改清单、不动代码示例见 verbs/audit/hallmark redesign target— 保留文案、IA 和品牌只重建视觉结构示例见 verbs/redesign/hallmark study 截图|URL— 从你欣赏的设计里提取DNA结构 字体配对 颜色锚点拒绝像素级抄袭还能锁成可移植的design.md示例见 docs/study-examples.md。完整实战 brief 集合在 docs/recipes.md8 个可直接粘贴的 prompt生成测试全记录在 site/_tests/README.md。九、常见问题新手向 FAQQ1brief 可以只写五个词吗可以。直接说build a SaaS landing技能会推断 audience / use / tone 并在回复开头一句话声明它的推断你随时可以纠正。Q2连续做两页 SaaS会不会长得一样不会。宏观结构不能重复主题三轴至少换一轴导航/footer 原型也要轮换 —— 规则由.hallmark/log.json强制执行。Q3一定要选 SaaS 默认那套克制风格吗不一定。brief 里点名品牌色、或描述出目录装不下的多属性氛围时会触发custom 主题分支现场构建一套 OKLCH 调色板 免费字体配对见 references/custom-theme.md。Q4生成物是 React 组件还是 HTML默认产出自包含的 HTML CSStokens.css方便直接预览接入框架项目时Step 0 预检会先扫描你的package.json/ Tailwind 配置沿用已有 token 体系而不是推翻它。总结Hallmark 做 SaaS 落地页的完整闭环是 —— 三问定 briefAudience / Use case / Tone→ 结构先行宏观结构 主题 nav/footer→ 预览块确认 → 构建并盖章 → slop test 全绿交付。全程你只需要一句话 brief 和一次预览确认剩下的反 AI 味纪律由技能自己执行 ✅【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 用 Hallmark 做 SaaS 落地页完整实战：从 brief 到 slop test 全绿
用 Hallmark 做 SaaS 落地页完整实战从 brief 到 slop test 全绿【免费下载链接】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设计技能给它一段 SaaS 产品 brief它会自动挑选宏观结构macrostructure、套用 22 套命名主题、跑完 60 道 slop test 门禁后才把落地页交给你。本文用仓库自带的 Tracejam 实战案例带你完整走一遍从 brief 到全绿的流程 一、Hallmark 是什么为什么 SaaS 页面最容易一眼 AI普通 LLM 生成的 SaaS 落地页有一个共同指纹Hero 全屏居中 → 三列等宽特性卡 → 紫色渐变按钮 → CTA → 四栏链接 footer。你在任何一个 AI 产品页上都见过这套组合看多了就腻。Hallmark 的核心主张是结构性多样而不只是换配色每次生成都先从 21 种命名宏观结构中挑一种如 Workbench、Bento Grid、Stat-Led再搭配 22 套命名主题Quiet、Midnight、Linen、Terminal……连续两次输出必须至少在纸色深浅 / 标题字风格 / 强调色相三个轴中的一个上不同交付前跑 60 道 slop test 门禁 六轴自我批评任何一项不达标就回炉。规则全部写在 skills/hallmark/SKILL.md 和 skills/hallmark/references/ 目录里装好即生效不需要写任何代码。二、3 分钟安装 Hallmark在终端执行一条命令即可npx skills add nutlope/hallmark随时重跑该命令就能更新。也可以手动把 SKILL.md references/复制到Claude Code—~/.claude/skills/hallmark/Cursor—.cursor/rules/hallmark.mdcCodex—~/.codex/skills/hallmark/装完可以先粘贴 docs/recipes.md 里的官方试用 briefCoffeebox 咖啡订阅验证流程是否走通。三、Step 0–1写好 SaaS brief先过三问门禁SaaS 是最容易猜错的场景所以 Hallmark 在动手前一定会问三个问题回答是可选的回一句go ahead即可让它自己推断Audience— 谁会来这页Use case— 页面只推动一个什么动作注册订阅联系销售Tone— 选一个极端editorial · brutalist · soft · utilitarian · luxury · playful · technical · austere干净现代不算 tone仓库里 SaaS 实战案例 Tracejam 的原始 brief 只有一句话Build a landing page for Tracejam — a tracing/observability tool for distributed systems. Audience: SREs and platform engineers. Use case: try it / contact sales. Tone: technical.三个要素齐全完整流程记录在 site/_tests/05-tracejam-saas/brief.md。关键细节Tone 是 technical 领域是分布式追踪工具会命中modern-minimal 类型genre的信号SaaS / platform / developer tool / infra技能随后加载 references/genres/modern-minimal.md锁定 Geist 系无衬线、克制单色、胶囊按钮这一整套语言。四、Step 2先挑宏观结构再挑主题Hallmark 的顺序是结构优先于视觉这也是它和模板站最不一样的地方查项目记忆— 若项目根有.hallmark/log.json最近 3 次用的宏观结构这次都不能再用挑宏观结构— 从 references/macrostructures.md 的索引里选一个名字只加载对应那一个文件。Tracejam 选的是Workbench因为 brief 说try itWorkbench 擅长带用户走一条单一线上工作流而不是把 6 个功能切成瓦片挑导航和 footer 原型— 从 references/component-cookbook.md 路由表里选N1–N10 / Ft1–Ft8并默认避开最像 AI 指纹的 N1 和 Ft3挑主题— SaaS 类默认走 Quiet 等克制主题但受三轴分化规则约束纸色深浅、标题字风格、强调色相至少换一项。Tracejam 的实际选择过程原文摘录自 brief.md上次这个 brief 用了 Bento Grid Pastel。这次从 {Workbench, Stat-Led, Long Document} 里挑 —Workbench 胜出。主题轮换Pastel亮纸 · 几何无衬线 · 冷靛蓝→Midnight暗纸 · 荧光青强调。三轴中两轴不同通过。 同一个仓库里TallySaaS · modern-minimal和 TracejamSaaS · 技术工具都是 SaaS 类 brief但一个走 Bento、一个走 Workbench主题也完全不同 —— 这就是结构性多样的直观证据。五、Step 4–5Hero 增强决策 预览块SaaS 工具类 brief 通常值得放一个视觉增强demo 或 mockup。Hallmark 的增强层级是强制从高到低纯文字排版 → 纯 CSS 手绘 → 手绘 SVG → 生成图 → 图库素材 →Lottie 是最后手段。Tracejam 的选择Tier-A 纯 CSS 粘性追踪面板sticky-pinned3 态随滚动切换零视频、零 Lottie、零手绘假浏览器外框 —— 重绘 UI 外框在 slop test 里是硬伤。动手写代码前技能会先输出一个 5 秒能扫完的预览块**Hallmark · v0.6.0** - **Macrostructure** · Workbench - **Theme** · Midnight (dark cool paper · Geist Mono display · phosphor-cyan accent ~3%) - **Enrichment** · Tier-A pure-CSS sticky dashboard panel (3-state, swaps on scroll) - **Sections** · Masthead · Hero · Sticky-walkthrough (3 steps × pinned panel) · Integrations · Pricing · Colophon - **Motion** · sticky-step active highlight · copy-to-clipboard on code (2 primitives) - **Slop test** · 38 / 38 ✓ - **Diversification** · differs from v1 (Bento Grid/Pastel) on macrostructure paper band accent hue看到不对在这里说一声就能改方向比生成 500 行 CSS 之后返工便宜得多。六、Step 6构建与盖章生成产物有三个标志性动作全部能在 site/_tests/05-tracejam-saas/style.css 里找到CSS 顶部盖章— 文件第一行注释记录本次所有选择/* Hallmark · macrostructure: Workbench · F2 sticky-scroll knobs: pinnedright, contenttrace-panel, steps3 * theme: Midnight · accent: phosphor-cyan ~3% · enrichment: tier-A CSS-art trace panel (sticky-pinned, 3-state) * studied: no · context: explicit · v0.6.0 */这个章是持久记录下次 Hallmark 在同一项目运行时读到它就强制换一个宏观结构。写.hallmark/log.json— 在数组头部追加本次的宏观结构 / 主题 / 增强 / brief 摘要最多保留 20 条供下次轮换参考。始终输出tokens.css— 所有颜色必须走 OKLCH 命名 token如var(--color-accent)禁止在渲染中途随手写内联色值 —— 这是门禁 58 卡的就是这个。页面本身index.html也值得看Hero 左侧是文案 双 CTA右侧是一张纯 CSS 手绘的追踪瀑布卡含红色回退span下面三段 sticky 走查步骤各配一条$ tracejam ...命令配合三档定价和单行 colophon。没有 Built for the modern team没有渐变文字没有图标墙。七、Step 7slop test 全绿才准交付最终关卡是 references/slop-test.md 里的 60 道门禁每题答案必须是 no。挑几条和 SaaS 页面最相关的门禁拦的是什么#1标题字体是 Inter / Roboto / Poppins / 系统默认#2出现紫-蓝或青-品红渐变gradient 文字永久封杀#3三列等宽卡片 图标在标题上方#9与上一次输出同结构指纹Hero→3特性→CTA→footer#11用transition: all偷懒#16focus 环是淡入出现的必须瞬间出现#23无端回落 Specimen 结构Specimen-fall-through 被封#25强调色盖过单个视口 5% 的面积#36320–1920px 任意宽度出现横向滚动交付前还有六轴自我批评Philosophy / Hierarchy / Execution / Specificity / Restraint / Variety任何一轴 3 分就触发一轮修订并把六项分数打进文件头注释。Tracejam 这轮的最终成绩slop test 38 / 38 ✓v0.6.0 时期的门禁数当前版本已扩展到 60 门禁且 mobile 四项硬门槛 320/375/414/768px 全部写入。⚠️ 一个诚实提醒门禁拦的是视觉 tell。文案层面的 tell如 Built for the modern team 这类 LLM 味标语要靠 Step 5 预览块 你自己把关这也是仓库在 site/_tests/README.md 里公开列出的改进方向。八、交付后还能做什么Hallmark 不止新建一个动词SaaS 存量页面还能hallmark audit target— 对现有代码按反模式清单打分只出整改清单、不动代码示例见 verbs/audit/hallmark redesign target— 保留文案、IA 和品牌只重建视觉结构示例见 verbs/redesign/hallmark study 截图|URL— 从你欣赏的设计里提取DNA结构 字体配对 颜色锚点拒绝像素级抄袭还能锁成可移植的design.md示例见 docs/study-examples.md。完整实战 brief 集合在 docs/recipes.md8 个可直接粘贴的 prompt生成测试全记录在 site/_tests/README.md。九、常见问题新手向 FAQQ1brief 可以只写五个词吗可以。直接说build a SaaS landing技能会推断 audience / use / tone 并在回复开头一句话声明它的推断你随时可以纠正。Q2连续做两页 SaaS会不会长得一样不会。宏观结构不能重复主题三轴至少换一轴导航/footer 原型也要轮换 —— 规则由.hallmark/log.json强制执行。Q3一定要选 SaaS 默认那套克制风格吗不一定。brief 里点名品牌色、或描述出目录装不下的多属性氛围时会触发custom 主题分支现场构建一套 OKLCH 调色板 免费字体配对见 references/custom-theme.md。Q4生成物是 React 组件还是 HTML默认产出自包含的 HTML CSStokens.css方便直接预览接入框架项目时Step 0 预检会先扫描你的package.json/ Tailwind 配置沿用已有 token 体系而不是推翻它。总结Hallmark 做 SaaS 落地页的完整闭环是 —— 三问定 briefAudience / Use case / Tone→ 结构先行宏观结构 主题 nav/footer→ 预览块确认 → 构建并盖章 → slop test 全绿交付。全程你只需要一句话 brief 和一次预览确认剩下的反 AI 味纪律由技能自己执行 ✅【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考