Hallmark 设计技能实战拆解以 Cohort 课程平台为例用 Stat-Led 宏结构与纯排版 Hero 生成落地页【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark本文以开源仓库 hallmark 中 08 号生成测试Cohortcohort-based courses 平台的 brief.md 为主体完整还原 Anti-AI-slop 设计技能 Hallmark 从预检Step 0到宏结构盖章Step 6的七步设计流程。文章结合最终产物 index.html 与 style.css以及技能规则集SKILL.md、Stat-Led 宏结构、typography.md、color.md、microinteractions.md、anti-patterns.md从设计决策与代码实现两个层面讲透为什么 brief 中30 到 500 名学生这一数字区间会成为整页视觉主角以及宏结构轮换与主题轮换规则如何保证每次输出在结构上都不重复。读完你将掌握 Stat-Led 宏结构的选型判据、H8 超大数字 Hero 的落地写法以及 Hallmark 生成流程中先决策、后写码、最后盖章的完整纪律。一、测试背景Cohort 在 Hallmark 生成测试矩阵中的位置Hallmark 是面向 Claude Code、Cursor、Codex 等 AI 编程助手的反 AI-slop 设计技能。为了验证它在不同 brief 下不重复自己的能力仓库用八个对比鲜明的 brief 各生成了一版落地页见 _tests/README.md。所有测试都基于 v0.6.0 的技能版本并且每个brief.md都完整走过了 Step 0预检→ Step 6盖章的设计流程让技能的推理过程全程可见。Cohort 是第八个测试在 README 的表格中记录如下测试Brief上下文要求主题技能最终选择08Cohort-based courses 平台完整educators / run-courses / warm-salon-room无Stat-Led Linen 无增强 · 以 brief 中的 30–500 区间作为排版式 Hero八个测试的意义在于压测技能本身六个 brief 从完整规格到你自己看着办观察点包括——技能是否两次默认产出相同形状结论没有任何两个测试共享宏结构或 Hero 原型、是否在不需要时强行加增强结论01/04/06 正确保持了纯排版、以及在跳过设计上下文门时是否用一句话声明推断结论是。Cohort 这一版作为完整上下文 未指定主题的代表是观察宏结构轮换与主题轮换如何落地的理想样本。二、原始 Brief 与设计上下文门Step 0 · Step 1Cohort 的 prompt 在 brief 中逐字保留Build a landing page for Cohort — the platform for cohort-based courses. Run live courses with 30 to 500 students. Built for educators, not LMS sales teams. Audience: course operators indie creators. Tone: warm, salon-room, editorial.这是一个典型的上下文完整的营销类 brief受众课程运营者与独立创作者、用途运营线上直播课程、语气温暖、沙龙房间、编辑感全部显式给出。Step 0 · Pre-flight的结果是一句标准输出No pre-flight signals — proceeding with full Hallmark stack.对应 SKILL.md 中预检扫描的边界情况规则当项目是纯 vanilla HTML、空仓库或临时目录、没有任何package.json、tailwind.config.*、index.html或 CSS 信号时技能保持沉默并输出这一行然后以完整技能栈继续。预检扫描的六个信号源design.md、字体栈、调色板、微交互立场、间距刻度、框架在这里一个都没有命中因此无需保留任何既有系统可以全权选择宏结构与主题。Step 1 · Design-context gate的结论是fully answered——audience、use、tone 三项都在 brief 中显式给出不需要技能推断也不需要发起追问。按 SKILL.md 的约定设计上下文门总是提问但回答可选当用户完整作答后技能直接进入下一阶段。三、项目记忆轮换宏结构与主题为什么这样选Step 2.5Step 2.5 是 Hallmark 在 v0.6.0 新增的项目记忆轮换层在选宏结构与主题之前先读取项目内此前 Hallmark 运行的记录.hallmark/log.json最近条目在前确保本次选择与最近 3–5 条记录拉开距离。Cohort 的 brief 完整记录了这次轮换的推理过程Previous run on this brief picked Marquee Hero Salon Tier-A continuous marquee. Picking from {Stat-Led, Long Document, Workbench} for the macro this time — Stat-Led wins because the brief itself leads with a number range (30 to 500 students); a stat hero answers the brief literally.Theme rotation: Salon (light · mono-display · warm-amber) → Linen (light · geometric-sans · warm-amber). Differs on display style. Accent stays warm-amber. One axis differs — passes (the rule requires at least one).这里有两个关键决策点宏结构轮换。上一次运行已用过 Marquee Hero因此本次从 {Stat-Led, Long Document, Workbench} 三个候选里选。Stat-Led 胜出的判据非常直接brief 的第一句话就带有一个数字区间30 to 500 students而 Stat-Led 的定义正是数字即叙事——用一个巨大的数字指标、计数、百分比作为 Hero页面其余部分全部用来支撑或限定它。用 Stat-Led 是对 brief 的字面回答。主题轮换。根据 SKILL.md 的主题多样性规则连续两次输出必须在以下三个轴向上至少有一项不同纸面色带dark 30% / mid 30–85% / light 85%、显示风格italic-serif / roman-serif / geometric-sans / mono / display-heavy 等、强调色相warm / cool / neutral / chromatic-other。Salon 与 Linen 同为浅色暖纸面、同为 warm-amber 强调色但 Salon 是 IBM Plex Mono display Cormorant body等宽显示Linen 是全 Inter Tight几何无衬线显示——显示风格这一个轴不同恰好满足至少一个轴的硬性要求。这一机制在 _tests/README.md 中被总结为八个测试、八个互不相同的指纹没有任何宏结构重复没有任何主题重复且每一对相邻测试都在宏结构 / 显示风格 / 强调色 / 纸面色带至少一个维度上有差异——这就是 v0.6.0 轮换规则在八个测试上的整体验证结果。四、视觉规则集每份参考文件承担什么Step 3确定宏结构与主题后技能按需加载视觉规则集。Cohort 这一版加载了六份文件各自承担不同职责参考文件本轮加载的作用macrostructures.mdStat-Led 宏结构的完整定义与组件形态component-cookbook.mdH8 超大数字 Hero、三连支撑统计、用户证言卡片typography.mdLinen 配对——Inter Tight display Inter Tight bodycolor.mdLinen 调色板——暖米色纸面 warm-amber 强调色microinteractions.md营销类页面默认开启微交互——Hero 统计数字计数器无 marqueeanti-patterns.md全程规避已命名的 AI-slop 特征其中 Stat-Led 宏结构的定义见 04-stat-led.md直接决定了这一页的骨架Heading数字型展示8–12rem等宽数字tabular figures数字下方一行小限定说明Body每个小节都锚定一个支撑性统计或图表Divider统计块之间使用发丝级细线全页使用tabular-numsButton对齐在限定说明下方的描边按钮Image图表与小型数据可视化不用摄影图RevealHero 数字的计数动画——约 500ms 从 0 数到目标值。文件还给出了选型判据与红线当 brief 是我们有数字证明时使用它企业/B2B、融资平台、气候影响类页面避免用于没有可信单一指标的产品——一个假大数字比没有数字更糟。 Cohort 的30–500正是 brief 自带的、可辩护的核心数字属于教科书式的适用场景。五、Hero 增强决策为什么无增强恰恰是对的Step 4Step 4 处理 Hero 增强问题。SKILL.md 的立场非常明确大多数页面不需要增强最强的 Hero 往往是纯排版的。增强层级不可讨价还价纯排版 → Tier A 纯 CSS 艺术 → Tier B 手写 SVG → …… → Tier E Lottie 作为最后手段。Cohort 这一版的决策记录是Enrichment: none (typography only). The briefs range 30–500 is itself the visual — set it at 22 rem and the page can carry the rest typographically. No marquee (v1 had it; the rotation rule pushes us off it). No mockup (the page isnt selling a screen).三个理由层层递进30–500本身就是视觉。当 brief 自带一个强数字区间时把它放大到 22rem设计记录值成为整页唯一的视觉锚点其余内容靠排版节奏承载不需要任何插画、视频或 mockup。不用 marquee。v1 用过连续滚动的 marquee课程标题 讲师姓名滚动条轮换规则要求本次避开——Stat-Led 完全可以在没有动效元素的情况下撑起整页。不用 mockup。这页卖的不是一块屏幕用户不需要看软件界面截图这进一步印证了 Stat-Led 宏结构图像用图表与小数据可视化、不用摄影/截图的形态约束。这一决策与 _tests/README.md 中六个测试中三个没有任何增强的发现互为印证——技能正确抵制了给每个页面都加 Lottie / 插画 / mockup的冲动因为对 podcast、宣言、个人作品集而言克制本身就是可信度信号。纯排版是这一轮的最优解而不是偷懒。六、Preview 块写码前的 TL;DRStep 5在写出任何代码之前技能先输出一段预览块让用户在 500 行 CSS 之前就能叫停。Cohort 的预览块原文如下**Hallmark · v0.6.0** - **Macrostructure** · Stat-Led - **Theme** · Linen (warm beige paper · Inter Tight geometric-sans · warm-amber accent ~3%) - **Enrichment** · none (typography only — the range 30–500 is the visual) - **Sections** · Masthead · Hero stat · Three supporting stats · Two operator testimonials · Two-tier pricing · CTA · Colophon - **Motion** · counter on hero stat (1 primitive) - **Slop test** · 38 / 38 ✓ - **Diversification** · differs from v1 (Marquee Hero/Salon) on macrostructure display style按 SKILL.md 的约定预览块包含六条必需项Macrostructure、Theme、Enrichment、Sections、Motion、Slop test加一条可选 Diversification。逐行解读Macrostructure · Stat-Led宏结构名称即最高层级的形状承诺Theme · Linen主题名 一行调色板摘要纸面色带 / 强调色 / 显示风格——暖米纸、Inter Tight 几何无衬线、warm-amber 强调色约占 3%Enrichment · none明确声明纯排版并给出理由Sections按 DOM 顺序用·分隔的完整章节清单——Masthead · Hero stat · 三个支撑统计 · 两个运营者证言 · 双档定价 · CTA · ColophonMotion只声明 1 个动效原语Hero 数字计数器符合 microinteractions.md每页不超过三个动效原语的硬性上限Slop test · 38 / 38Step 7 的 38 道 slop 门全部通过v0.6.0 版本的门数见 _tests/README.mdDiversification与 v1Marquee Hero / Salon相比宏结构与显示风格两个维度均不同。七、从代码看 Stat-Led 落地index.html 与 style.css 实现对照预览块声明的计划在 index.html 与 style.css 中逐项落地。页面自包含、不依赖共享资源可独立打开。7.1 宏结构盖章CSS 文件的第一行style.css的第一行就是 Step 6 要求的宏结构盖章——这是整个流程的耐久记录也是下一次 Hallmark 运行读取轮换依据的地方/* Hallmark · macrostructure: Stat-Led · H8 hero knobs: statrange, size22rem, weightdisplay-light * theme: Linen · accent: warm-amber ~3% · enrichment: none (typography only — the range is the visual) * studied: no · context: explicit · v0.6.0 */盖章内容与预览块严格一致宏结构 Stat-Led、H8 Hero 旋钮statrange、size22rem、weightdisplay-light、主题 Linen、强调色 warm-amber ~3%、增强 none、studied: no、context: explicit、技能版本 v0.6.0。7.2 Token 块OKLCH 调色板与 4pt 空间刻度:root中的 token 完全遵循 color.md 的纪律——只用 OKLCH、无纯黑纯白、中性色向锚点色相倾斜--color-paper: oklch(94% 0.018 78); --color-paper-2: oklch(91% 0.020 78); --color-rule: oklch(76% 0.020 70); --color-ink: oklch(22% 0.012 60); --color-ink-soft: oklch(42% 0.014 60); --color-ink-muted: oklch(60% 0.014 60); --color-accent: oklch(64% 0.14 70);纸面是暖米色L 94%、hue 78 的暖色相文字墨色向同一色相倾斜强调色 warm-amber 具有有意义的高 chroma0.14按 color.md 的规范只作高亮器使用绝不铺满背景。字体方面是 Linen 主题的全 Inter Tight 配对--font-display与--font-body均为 Inter TightJetBrains Mono 作为--font-mono承担眉标、统计标题、colophon 等标签类角色——符合 typography.md21 字体规则两种衬线/无衬线 一个等宽 outlier。空间刻度是标准的 4pt 语义化体系--space-3xs: 0.25rem到--space-4xl: 9rem外加--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1)与--dur-micro: 120ms两个动效 token。全页任何一处颜色与字体都通过var(--token)引用符合 anti-patterns.md 的锁定 token、禁止渲染中途即兴纪律。7.3 超大数字 Hero数字即视觉页面结构的第一个章节是 Hero完全对应 H8 超大数字 Hero 原型p classhero__eyebrowBuilt for educators · not LMS sales teams/p p classhero__stat30 span classhero__stat-em—/span 500/p h1 classhero__headLive courses, sized for the emclass/em you actually have./h1Hero 统计数字的 CSS 实现了30–500 即视觉的设计意图.hero__stat { font-family: var(--font-display); font-size: clamp(5rem, 14vw, 13rem); font-weight: 300; letter-spacing: -0.05em; line-height: 0.85; font-variant-numeric: tabular-nums; } .hero__stat-em { color: var(--color-accent); font-weight: 400; }要点display-light300权重配合超大字重对比tabular-nums让数字等宽对齐Stat-Led 宏结构tabular-nums 无处不在的硬要求clamp(5rem, 14vw, 13rem)让数字在 320px 到宽屏之间流畅伸缩中间的短横线用强调色单独着色成为全页最克制的色点。眉标使用 mono 小字大写 0.16em 字距标题则把class用斜体强调色托出——数字承担叙事主角文字负责语气。7.4 三个支撑统计发丝线分隔的数据行紧随 Hero 的是一行三列支撑统计#proof每个统计用发丝线border-inline-end: 1px solid var(--color-rule)分隔数字同样tabular-nums、em 后缀着色186. 场课程2025 年、93% 完成率中位数、4.7/5 运营者 NPS。每项都由数字 mono 大写标题 斜体补充说明三段构成与 Stat-Led 宏结构Body 每节锚定一个支撑统计的规范一一对应。7.5 证言、定价、CTA 与 Colophon两个运营者证言双列网格卡片用 3px 强调色左边缘线border-inline-start 左侧内边距证言引用用 display 字体 1.25rem署名用 mono 小字——D. Perell写作讲师 · 本学期 320 名学生与M. Poulin课程运营者 · 并行两期课程角色 机构名 规模数字符合证言要具体到可核查的口径。双档定价头部是Two plans, both honest.定价网格用24ch 1fr 1fr三列布局左列标题 两档卡片。First cohort档 $0 首次运行50 名学生上限、单期、直播 回放 考勤 评分册、Stripe 3% 平台费Operator档 $199/月每期 500 名学生、不限期数、多讲师 / TA 角色 / 答疑时间、Stripe 1% 平台费、课程库 校友房间推荐档用tier--feature的 2px 强调色描边列表项以强调色—前缀。CTA stripPick a date. Open the roster.Teach Tuesday.——一句话行动号召两个按钮主按钮 Run your first cohort → 次按钮 Talk to us。ColophonCohort · Lisbon Brooklyn · est. 2024外加 docs / changelog / support / community 四个链接——简洁的单行收尾不是四列 AI 页脚。7.6 响应式与滚动纪律html, body { overflow-x: clip; }出现在文件头部——按 layout-and-space 纪律用clip而非hidden以保留 sticky 定位。移动端在media (max-width: 56rem)断点将支撑统计、证言、定价全部折叠为单列masthead 改为纵向堆叠保证 320–414px 宽度下无横向滚动、无可点击文字折行。7.7 关于声明的动效原语预览块声明 Motion 为counter on hero stat (1 primitive)。对应的配方在 microinteractions.md 的 Number reveal 条目中IntersectionObserver在视口进入时触发requestAnimationFrame在 1.2–1.6s 内用--ease-out从 0 数到目标值prefers-reduced-motion下跳过动画直接渲染终值。Stat-Led 属于默认开启微交互的五个宏结构之一Bento Grid · Stat-Led · Workbench · Marquee Hero · Conversational FAQ但硬性约束是每页不超过三个动效原语——本页只有这一个克制而有目的。八、与 v1 的对比轮换规则如何强制结构不同brief 的最后两部分完整对比了两次运行的差异这是观察轮换规则实际效果的最佳窗口变化项What changed vs v1宏结构Marquee Hero → Stat-Led。v1 用课程标题 讲师姓名的连续滚动 marquee 开场v2 用 brief 自带的30–500区间以 22rem 字号开场其余页面由支撑统计与运营者证言填充。主题Salon → Linen。两者同为暖色浅色系Salon 是 IBM Plex Mono display Cormorant body等宽显示风格Linen 全 Inter Tight几何无衬线显示风格——显示风格不同。增强v1 的连续 marquee → v2 的纯排版 Hero。Stat-Led 不需要动效元素就能撑起整页。语气v1 以 Cohort runs live courses the way your favourite teacher would — with a date, a roster, and a room 开场v2 让数字区间先行语气让位给支撑文案。不变项What stayed the same品牌Cohort、课程平台、educator 受众、双档定价Run your first cohort / Scale、Slop test 38/38、暖色纸面带。这正是 Hallmark 的核心主张在 anti-patterns.md 中的体现两个不同 brief 的两个页面应该像两个不同的站点而不是同一个模板换了个颜色。Default-attractor sameness连续输出复用同一宏结构与 Specimen fall-through无论什么 brief 都默认 Specimen 排版都是被点名的 AI-slop 特征轮换规则从机制上防止它们出现——同一份 brief 连续跑两轮产出的是结构、主题、增强、语气全部不同的两个页面。九、Slop Test 与质量门38/38 意味着什么预览块中的 Slop test · 38 / 38 ✓ 是 Step 7 的后置检查结果。38 道门是 v0.6.0 的版本数——_tests/README.md 记录了该版本新增的三道门Gate 36320–1920px 任何视口无横向滚动Gate 37文本装饰效果必须落在 x-height 而非基线Gate 38交互条必须声明align-items: centerline-height: 1。与本文直接相关的门还包括诚实 copyGate 56禁止编造指标未提供的数字用— 标注占位或直接换宏结构、锁定 tokenGate 58禁止渲染中途的即兴色值/字体、禁止重绘 chromeGate 57不手绘浏览器/手机/IDE 边框、禁止 wrap-to-two-lines 可点击文本Gate 59等。Cohort 页面全部通过意味着它没有横向滚动、数字展示使用了 tabular-nums、交互元素状态完整、没有编造与引入风格冲突的装饰。值得强调的是Slop test 是写码之后的检查SKILL.md 明确要求不要在生成前预读 slop-test.md它服务于修复与复核而生成阶段由 anti-patterns.md 指导规避。预览块中的 Slop test 行必须在 Step 7 实际运行后才能填写以保证预览不撒谎。十、如何查看与复用这套产物本测试的全部产物都可以在仓库内直接查看设计流程记录site/_tests/08-cohort-courses/brief.md——逐字 prompt 与 Step 0→6 的完整决策链最终页面site/_tests/08-cohort-courses/index.html——自包含、无共享依赖样式与 tokensite/_tests/08-cohort-courses/style.css——顶部即宏结构盖章style内为完整 token 块测试总览与技能改进清单site/_tests/README.md技能本体skills/hallmark/SKILL.md 与 references 目录下的规则集。按 _tests/README.md 的说明可用open site/_tests/08-cohort-courses/index.html直接打开或通过本地开发服务器访问http://localhost:8765/_tests/08-cohort-courses/浏览。对设计技能使用者而言最有价值的读法是把 brief.md 当作决策回放先看它在每个 Step 说了什么、为什么选 Stat-Led 与 Linen再对照 index.html 与 style.css 验证决策如何变成代码——这套决策先于代码、盖章记录决策、轮换保证多样的方法论可以直接迁移到任何需要 AI 批量产出落地页的项目流程中。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Hallmark 设计技能实战拆解：以 Cohort 课程平台为例，用 Stat-Led 宏结构与纯排版 Hero 生成落地页
Hallmark 设计技能实战拆解以 Cohort 课程平台为例用 Stat-Led 宏结构与纯排版 Hero 生成落地页【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark本文以开源仓库 hallmark 中 08 号生成测试Cohortcohort-based courses 平台的 brief.md 为主体完整还原 Anti-AI-slop 设计技能 Hallmark 从预检Step 0到宏结构盖章Step 6的七步设计流程。文章结合最终产物 index.html 与 style.css以及技能规则集SKILL.md、Stat-Led 宏结构、typography.md、color.md、microinteractions.md、anti-patterns.md从设计决策与代码实现两个层面讲透为什么 brief 中30 到 500 名学生这一数字区间会成为整页视觉主角以及宏结构轮换与主题轮换规则如何保证每次输出在结构上都不重复。读完你将掌握 Stat-Led 宏结构的选型判据、H8 超大数字 Hero 的落地写法以及 Hallmark 生成流程中先决策、后写码、最后盖章的完整纪律。一、测试背景Cohort 在 Hallmark 生成测试矩阵中的位置Hallmark 是面向 Claude Code、Cursor、Codex 等 AI 编程助手的反 AI-slop 设计技能。为了验证它在不同 brief 下不重复自己的能力仓库用八个对比鲜明的 brief 各生成了一版落地页见 _tests/README.md。所有测试都基于 v0.6.0 的技能版本并且每个brief.md都完整走过了 Step 0预检→ Step 6盖章的设计流程让技能的推理过程全程可见。Cohort 是第八个测试在 README 的表格中记录如下测试Brief上下文要求主题技能最终选择08Cohort-based courses 平台完整educators / run-courses / warm-salon-room无Stat-Led Linen 无增强 · 以 brief 中的 30–500 区间作为排版式 Hero八个测试的意义在于压测技能本身六个 brief 从完整规格到你自己看着办观察点包括——技能是否两次默认产出相同形状结论没有任何两个测试共享宏结构或 Hero 原型、是否在不需要时强行加增强结论01/04/06 正确保持了纯排版、以及在跳过设计上下文门时是否用一句话声明推断结论是。Cohort 这一版作为完整上下文 未指定主题的代表是观察宏结构轮换与主题轮换如何落地的理想样本。二、原始 Brief 与设计上下文门Step 0 · Step 1Cohort 的 prompt 在 brief 中逐字保留Build a landing page for Cohort — the platform for cohort-based courses. Run live courses with 30 to 500 students. Built for educators, not LMS sales teams. Audience: course operators indie creators. Tone: warm, salon-room, editorial.这是一个典型的上下文完整的营销类 brief受众课程运营者与独立创作者、用途运营线上直播课程、语气温暖、沙龙房间、编辑感全部显式给出。Step 0 · Pre-flight的结果是一句标准输出No pre-flight signals — proceeding with full Hallmark stack.对应 SKILL.md 中预检扫描的边界情况规则当项目是纯 vanilla HTML、空仓库或临时目录、没有任何package.json、tailwind.config.*、index.html或 CSS 信号时技能保持沉默并输出这一行然后以完整技能栈继续。预检扫描的六个信号源design.md、字体栈、调色板、微交互立场、间距刻度、框架在这里一个都没有命中因此无需保留任何既有系统可以全权选择宏结构与主题。Step 1 · Design-context gate的结论是fully answered——audience、use、tone 三项都在 brief 中显式给出不需要技能推断也不需要发起追问。按 SKILL.md 的约定设计上下文门总是提问但回答可选当用户完整作答后技能直接进入下一阶段。三、项目记忆轮换宏结构与主题为什么这样选Step 2.5Step 2.5 是 Hallmark 在 v0.6.0 新增的项目记忆轮换层在选宏结构与主题之前先读取项目内此前 Hallmark 运行的记录.hallmark/log.json最近条目在前确保本次选择与最近 3–5 条记录拉开距离。Cohort 的 brief 完整记录了这次轮换的推理过程Previous run on this brief picked Marquee Hero Salon Tier-A continuous marquee. Picking from {Stat-Led, Long Document, Workbench} for the macro this time — Stat-Led wins because the brief itself leads with a number range (30 to 500 students); a stat hero answers the brief literally.Theme rotation: Salon (light · mono-display · warm-amber) → Linen (light · geometric-sans · warm-amber). Differs on display style. Accent stays warm-amber. One axis differs — passes (the rule requires at least one).这里有两个关键决策点宏结构轮换。上一次运行已用过 Marquee Hero因此本次从 {Stat-Led, Long Document, Workbench} 三个候选里选。Stat-Led 胜出的判据非常直接brief 的第一句话就带有一个数字区间30 to 500 students而 Stat-Led 的定义正是数字即叙事——用一个巨大的数字指标、计数、百分比作为 Hero页面其余部分全部用来支撑或限定它。用 Stat-Led 是对 brief 的字面回答。主题轮换。根据 SKILL.md 的主题多样性规则连续两次输出必须在以下三个轴向上至少有一项不同纸面色带dark 30% / mid 30–85% / light 85%、显示风格italic-serif / roman-serif / geometric-sans / mono / display-heavy 等、强调色相warm / cool / neutral / chromatic-other。Salon 与 Linen 同为浅色暖纸面、同为 warm-amber 强调色但 Salon 是 IBM Plex Mono display Cormorant body等宽显示Linen 是全 Inter Tight几何无衬线显示——显示风格这一个轴不同恰好满足至少一个轴的硬性要求。这一机制在 _tests/README.md 中被总结为八个测试、八个互不相同的指纹没有任何宏结构重复没有任何主题重复且每一对相邻测试都在宏结构 / 显示风格 / 强调色 / 纸面色带至少一个维度上有差异——这就是 v0.6.0 轮换规则在八个测试上的整体验证结果。四、视觉规则集每份参考文件承担什么Step 3确定宏结构与主题后技能按需加载视觉规则集。Cohort 这一版加载了六份文件各自承担不同职责参考文件本轮加载的作用macrostructures.mdStat-Led 宏结构的完整定义与组件形态component-cookbook.mdH8 超大数字 Hero、三连支撑统计、用户证言卡片typography.mdLinen 配对——Inter Tight display Inter Tight bodycolor.mdLinen 调色板——暖米色纸面 warm-amber 强调色microinteractions.md营销类页面默认开启微交互——Hero 统计数字计数器无 marqueeanti-patterns.md全程规避已命名的 AI-slop 特征其中 Stat-Led 宏结构的定义见 04-stat-led.md直接决定了这一页的骨架Heading数字型展示8–12rem等宽数字tabular figures数字下方一行小限定说明Body每个小节都锚定一个支撑性统计或图表Divider统计块之间使用发丝级细线全页使用tabular-numsButton对齐在限定说明下方的描边按钮Image图表与小型数据可视化不用摄影图RevealHero 数字的计数动画——约 500ms 从 0 数到目标值。文件还给出了选型判据与红线当 brief 是我们有数字证明时使用它企业/B2B、融资平台、气候影响类页面避免用于没有可信单一指标的产品——一个假大数字比没有数字更糟。 Cohort 的30–500正是 brief 自带的、可辩护的核心数字属于教科书式的适用场景。五、Hero 增强决策为什么无增强恰恰是对的Step 4Step 4 处理 Hero 增强问题。SKILL.md 的立场非常明确大多数页面不需要增强最强的 Hero 往往是纯排版的。增强层级不可讨价还价纯排版 → Tier A 纯 CSS 艺术 → Tier B 手写 SVG → …… → Tier E Lottie 作为最后手段。Cohort 这一版的决策记录是Enrichment: none (typography only). The briefs range 30–500 is itself the visual — set it at 22 rem and the page can carry the rest typographically. No marquee (v1 had it; the rotation rule pushes us off it). No mockup (the page isnt selling a screen).三个理由层层递进30–500本身就是视觉。当 brief 自带一个强数字区间时把它放大到 22rem设计记录值成为整页唯一的视觉锚点其余内容靠排版节奏承载不需要任何插画、视频或 mockup。不用 marquee。v1 用过连续滚动的 marquee课程标题 讲师姓名滚动条轮换规则要求本次避开——Stat-Led 完全可以在没有动效元素的情况下撑起整页。不用 mockup。这页卖的不是一块屏幕用户不需要看软件界面截图这进一步印证了 Stat-Led 宏结构图像用图表与小数据可视化、不用摄影/截图的形态约束。这一决策与 _tests/README.md 中六个测试中三个没有任何增强的发现互为印证——技能正确抵制了给每个页面都加 Lottie / 插画 / mockup的冲动因为对 podcast、宣言、个人作品集而言克制本身就是可信度信号。纯排版是这一轮的最优解而不是偷懒。六、Preview 块写码前的 TL;DRStep 5在写出任何代码之前技能先输出一段预览块让用户在 500 行 CSS 之前就能叫停。Cohort 的预览块原文如下**Hallmark · v0.6.0** - **Macrostructure** · Stat-Led - **Theme** · Linen (warm beige paper · Inter Tight geometric-sans · warm-amber accent ~3%) - **Enrichment** · none (typography only — the range 30–500 is the visual) - **Sections** · Masthead · Hero stat · Three supporting stats · Two operator testimonials · Two-tier pricing · CTA · Colophon - **Motion** · counter on hero stat (1 primitive) - **Slop test** · 38 / 38 ✓ - **Diversification** · differs from v1 (Marquee Hero/Salon) on macrostructure display style按 SKILL.md 的约定预览块包含六条必需项Macrostructure、Theme、Enrichment、Sections、Motion、Slop test加一条可选 Diversification。逐行解读Macrostructure · Stat-Led宏结构名称即最高层级的形状承诺Theme · Linen主题名 一行调色板摘要纸面色带 / 强调色 / 显示风格——暖米纸、Inter Tight 几何无衬线、warm-amber 强调色约占 3%Enrichment · none明确声明纯排版并给出理由Sections按 DOM 顺序用·分隔的完整章节清单——Masthead · Hero stat · 三个支撑统计 · 两个运营者证言 · 双档定价 · CTA · ColophonMotion只声明 1 个动效原语Hero 数字计数器符合 microinteractions.md每页不超过三个动效原语的硬性上限Slop test · 38 / 38Step 7 的 38 道 slop 门全部通过v0.6.0 版本的门数见 _tests/README.mdDiversification与 v1Marquee Hero / Salon相比宏结构与显示风格两个维度均不同。七、从代码看 Stat-Led 落地index.html 与 style.css 实现对照预览块声明的计划在 index.html 与 style.css 中逐项落地。页面自包含、不依赖共享资源可独立打开。7.1 宏结构盖章CSS 文件的第一行style.css的第一行就是 Step 6 要求的宏结构盖章——这是整个流程的耐久记录也是下一次 Hallmark 运行读取轮换依据的地方/* Hallmark · macrostructure: Stat-Led · H8 hero knobs: statrange, size22rem, weightdisplay-light * theme: Linen · accent: warm-amber ~3% · enrichment: none (typography only — the range is the visual) * studied: no · context: explicit · v0.6.0 */盖章内容与预览块严格一致宏结构 Stat-Led、H8 Hero 旋钮statrange、size22rem、weightdisplay-light、主题 Linen、强调色 warm-amber ~3%、增强 none、studied: no、context: explicit、技能版本 v0.6.0。7.2 Token 块OKLCH 调色板与 4pt 空间刻度:root中的 token 完全遵循 color.md 的纪律——只用 OKLCH、无纯黑纯白、中性色向锚点色相倾斜--color-paper: oklch(94% 0.018 78); --color-paper-2: oklch(91% 0.020 78); --color-rule: oklch(76% 0.020 70); --color-ink: oklch(22% 0.012 60); --color-ink-soft: oklch(42% 0.014 60); --color-ink-muted: oklch(60% 0.014 60); --color-accent: oklch(64% 0.14 70);纸面是暖米色L 94%、hue 78 的暖色相文字墨色向同一色相倾斜强调色 warm-amber 具有有意义的高 chroma0.14按 color.md 的规范只作高亮器使用绝不铺满背景。字体方面是 Linen 主题的全 Inter Tight 配对--font-display与--font-body均为 Inter TightJetBrains Mono 作为--font-mono承担眉标、统计标题、colophon 等标签类角色——符合 typography.md21 字体规则两种衬线/无衬线 一个等宽 outlier。空间刻度是标准的 4pt 语义化体系--space-3xs: 0.25rem到--space-4xl: 9rem外加--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1)与--dur-micro: 120ms两个动效 token。全页任何一处颜色与字体都通过var(--token)引用符合 anti-patterns.md 的锁定 token、禁止渲染中途即兴纪律。7.3 超大数字 Hero数字即视觉页面结构的第一个章节是 Hero完全对应 H8 超大数字 Hero 原型p classhero__eyebrowBuilt for educators · not LMS sales teams/p p classhero__stat30 span classhero__stat-em—/span 500/p h1 classhero__headLive courses, sized for the emclass/em you actually have./h1Hero 统计数字的 CSS 实现了30–500 即视觉的设计意图.hero__stat { font-family: var(--font-display); font-size: clamp(5rem, 14vw, 13rem); font-weight: 300; letter-spacing: -0.05em; line-height: 0.85; font-variant-numeric: tabular-nums; } .hero__stat-em { color: var(--color-accent); font-weight: 400; }要点display-light300权重配合超大字重对比tabular-nums让数字等宽对齐Stat-Led 宏结构tabular-nums 无处不在的硬要求clamp(5rem, 14vw, 13rem)让数字在 320px 到宽屏之间流畅伸缩中间的短横线用强调色单独着色成为全页最克制的色点。眉标使用 mono 小字大写 0.16em 字距标题则把class用斜体强调色托出——数字承担叙事主角文字负责语气。7.4 三个支撑统计发丝线分隔的数据行紧随 Hero 的是一行三列支撑统计#proof每个统计用发丝线border-inline-end: 1px solid var(--color-rule)分隔数字同样tabular-nums、em 后缀着色186. 场课程2025 年、93% 完成率中位数、4.7/5 运营者 NPS。每项都由数字 mono 大写标题 斜体补充说明三段构成与 Stat-Led 宏结构Body 每节锚定一个支撑统计的规范一一对应。7.5 证言、定价、CTA 与 Colophon两个运营者证言双列网格卡片用 3px 强调色左边缘线border-inline-start 左侧内边距证言引用用 display 字体 1.25rem署名用 mono 小字——D. Perell写作讲师 · 本学期 320 名学生与M. Poulin课程运营者 · 并行两期课程角色 机构名 规模数字符合证言要具体到可核查的口径。双档定价头部是Two plans, both honest.定价网格用24ch 1fr 1fr三列布局左列标题 两档卡片。First cohort档 $0 首次运行50 名学生上限、单期、直播 回放 考勤 评分册、Stripe 3% 平台费Operator档 $199/月每期 500 名学生、不限期数、多讲师 / TA 角色 / 答疑时间、Stripe 1% 平台费、课程库 校友房间推荐档用tier--feature的 2px 强调色描边列表项以强调色—前缀。CTA stripPick a date. Open the roster.Teach Tuesday.——一句话行动号召两个按钮主按钮 Run your first cohort → 次按钮 Talk to us。ColophonCohort · Lisbon Brooklyn · est. 2024外加 docs / changelog / support / community 四个链接——简洁的单行收尾不是四列 AI 页脚。7.6 响应式与滚动纪律html, body { overflow-x: clip; }出现在文件头部——按 layout-and-space 纪律用clip而非hidden以保留 sticky 定位。移动端在media (max-width: 56rem)断点将支撑统计、证言、定价全部折叠为单列masthead 改为纵向堆叠保证 320–414px 宽度下无横向滚动、无可点击文字折行。7.7 关于声明的动效原语预览块声明 Motion 为counter on hero stat (1 primitive)。对应的配方在 microinteractions.md 的 Number reveal 条目中IntersectionObserver在视口进入时触发requestAnimationFrame在 1.2–1.6s 内用--ease-out从 0 数到目标值prefers-reduced-motion下跳过动画直接渲染终值。Stat-Led 属于默认开启微交互的五个宏结构之一Bento Grid · Stat-Led · Workbench · Marquee Hero · Conversational FAQ但硬性约束是每页不超过三个动效原语——本页只有这一个克制而有目的。八、与 v1 的对比轮换规则如何强制结构不同brief 的最后两部分完整对比了两次运行的差异这是观察轮换规则实际效果的最佳窗口变化项What changed vs v1宏结构Marquee Hero → Stat-Led。v1 用课程标题 讲师姓名的连续滚动 marquee 开场v2 用 brief 自带的30–500区间以 22rem 字号开场其余页面由支撑统计与运营者证言填充。主题Salon → Linen。两者同为暖色浅色系Salon 是 IBM Plex Mono display Cormorant body等宽显示风格Linen 全 Inter Tight几何无衬线显示风格——显示风格不同。增强v1 的连续 marquee → v2 的纯排版 Hero。Stat-Led 不需要动效元素就能撑起整页。语气v1 以 Cohort runs live courses the way your favourite teacher would — with a date, a roster, and a room 开场v2 让数字区间先行语气让位给支撑文案。不变项What stayed the same品牌Cohort、课程平台、educator 受众、双档定价Run your first cohort / Scale、Slop test 38/38、暖色纸面带。这正是 Hallmark 的核心主张在 anti-patterns.md 中的体现两个不同 brief 的两个页面应该像两个不同的站点而不是同一个模板换了个颜色。Default-attractor sameness连续输出复用同一宏结构与 Specimen fall-through无论什么 brief 都默认 Specimen 排版都是被点名的 AI-slop 特征轮换规则从机制上防止它们出现——同一份 brief 连续跑两轮产出的是结构、主题、增强、语气全部不同的两个页面。九、Slop Test 与质量门38/38 意味着什么预览块中的 Slop test · 38 / 38 ✓ 是 Step 7 的后置检查结果。38 道门是 v0.6.0 的版本数——_tests/README.md 记录了该版本新增的三道门Gate 36320–1920px 任何视口无横向滚动Gate 37文本装饰效果必须落在 x-height 而非基线Gate 38交互条必须声明align-items: centerline-height: 1。与本文直接相关的门还包括诚实 copyGate 56禁止编造指标未提供的数字用— 标注占位或直接换宏结构、锁定 tokenGate 58禁止渲染中途的即兴色值/字体、禁止重绘 chromeGate 57不手绘浏览器/手机/IDE 边框、禁止 wrap-to-two-lines 可点击文本Gate 59等。Cohort 页面全部通过意味着它没有横向滚动、数字展示使用了 tabular-nums、交互元素状态完整、没有编造与引入风格冲突的装饰。值得强调的是Slop test 是写码之后的检查SKILL.md 明确要求不要在生成前预读 slop-test.md它服务于修复与复核而生成阶段由 anti-patterns.md 指导规避。预览块中的 Slop test 行必须在 Step 7 实际运行后才能填写以保证预览不撒谎。十、如何查看与复用这套产物本测试的全部产物都可以在仓库内直接查看设计流程记录site/_tests/08-cohort-courses/brief.md——逐字 prompt 与 Step 0→6 的完整决策链最终页面site/_tests/08-cohort-courses/index.html——自包含、无共享依赖样式与 tokensite/_tests/08-cohort-courses/style.css——顶部即宏结构盖章style内为完整 token 块测试总览与技能改进清单site/_tests/README.md技能本体skills/hallmark/SKILL.md 与 references 目录下的规则集。按 _tests/README.md 的说明可用open site/_tests/08-cohort-courses/index.html直接打开或通过本地开发服务器访问http://localhost:8765/_tests/08-cohort-courses/浏览。对设计技能使用者而言最有价值的读法是把 brief.md 当作决策回放先看它在每个 Step 说了什么、为什么选 Stat-Led 与 Linen再对照 index.html 与 style.css 验证决策如何变成代码——这套决策先于代码、盖章记录决策、轮换保证多样的方法论可以直接迁移到任何需要 AI 批量产出落地页的项目流程中。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考