Hallmark 宏结构Macrostructure体系21 种页面形态索引与选择方法论【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark从视觉差异化到结构差异化的设计决策框架Hallmarkskills/hallmark/SKILL.md是一个面向 Claude Code、Cursor、Codex 等 AI 编码助手的反 AI 味设计技能。它的核心立场是大多数 AI 生成的界面在视觉上各不相同但在结构上惊人地一致——都是hero → 三个特性卡片 → CTA → footer的同一套节奏。结构雷同才是 AI 指纹而非视觉雷同。宏结构Macrostructure正是 Hallmark 用来打破结构雷同的第一决策层21 种命名的整页形态写任何代码之前先选一种。每一种宏结构都是一套完整的页面指纹——标题位置、正文构成、分隔语言、按钮语态、图像处理、呈现动画——打包成一个具名选择。与其从 structure.md 中独立挑选六个轴8 × 7 × 5 × 5 × 5 × 6 42,000 种指纹组合不如直接选一个具名宏结构更快、更不易出错、且类别上更多样。本文基于skills/hallmark/references/macrostructures.md索引文档结合仓库内各宏结构的详细定义文件、component-cookbook.md、structure.md、hero-enrichment.md以及docs/recipes.md中的实战案例完整讲解这 21 种形态、多样化规则、Hero 润色模式、导航/页脚配套以及 SaaS 页面序列的落地方法。一、为什么先选宏结构从六轴原语到具名页面形态structure.md 将结构变体拆解为六个原始轴Section 标题位置左栏编号 / 悬挂 / 居中大标题 / 底部对齐 / 叠加图像 / 粘性固定 / 编号展示 / 内联正文正文构成单栏 / 非对称双栏 / 多栏对齐 / 边注 / 三栏等宽 / 出血留白重置 / 非对称跨列分隔语言发丝线 / 装饰符号 / 负空间 / 出血色块 / 双规则线按钮语态描边 / 无装饰链接 / 超大实心 / 纯排印 / 表单即 CTA图像处理全出血 / 紧密裁剪 / 内联正文 / 边距对齐 / 无图像呈现动画上浮交错 / 水平扫入 / 字体蒙版 / 数字跳动 / 打字机 / 无动画理论上可以逐轴组合出 42,000 种指纹。但在实践中Hallmark 主张优先从宏结构索引中挑选具名整页形态只有在需要偏离某宏结构默认值时才回到这六个轴上去做单项调整。原因很直接逐轴组合是默认吸引子——模型总会滑向最熟悉的组合而具名宏结构是一次性的完整决策天然自带类别距离。二、21 种宏结构完整目录以下索引逐条列出全部 21 种宏结构。选择规则是先选一个名字然后只读取对应那一个文件位于skills/hallmark/references/macrostructures/不要一次性加载整个目录。各宏结构的 slug 是稳定的多样化规则正是从 CSS 印章/* Hallmark · macrostructure: name · ... */中读取name来做去重判断的。前 10 种最强的非 Specimen 形态覆盖约 80% 的简报01 · Bento Grid— 大小各异的模块组成不规则网格每个块可以是特性、引用、图像或数据。视觉节奏来自尺寸差异而非卡片统一。参考 01-bento-grid.md固定高度 hero 中的居中大标题、8–15 个混合跨距1×1、2×1、1×2、2×2的非对称网格、12–24px 一致间距且无规则线网格本身就是节奏、hero 上描边 chip 按钮 块内 CTA 用排印链接、图像在块内紧密裁剪绝不整页出血、呈现动画为无或一次性淡入。适用于有很多小东西要展示的特性页/SaaS 落地页/多入口产品页。02 · Long Document— 读起来像备忘录、信件或日记条目没有营销结构连续散文内嵌小节标题页面本身就是关于产品的文学。适合需要诚实、长篇、深度内容的场景。03 · Marquee Hero— hero 就是首屏之上的一切一个大胆的声明或视觉填满视口首屏内无副标题、无 CTA首屏之下页面变成别的东西列表、网格、散文。参考 03-marquee-hero.md8–14vw 的展示级字型贴着视口边缘、hero 与下方之间用粗规则线或硬性颜色切换、首屏无按钮、图像要么没有要么作为整页背景。适用于品牌或人本身就是信息的页面设计师/导演作品集、独立产品单一声明。04 · Stat-Led— hero 是一个巨大的数字——指标、计数、百分比其后的一切都支撑或限定它数据即叙事。参考 04-stat-led.md8–12rem 的数字展示字型、tabular 数字、下方小限定行、区块间发丝线、数字跳动动画0 计数到目标约 500ms。适用于我们有数字作证的企业/B2B/气候影响类页面。注意没有可辩护的单一指标的产品不要用——一个假大数字比没有数字更糟。05 · Workbench— 带框架的产品截图是主要内容页面是对应用使用的引导式参观少营销文案、多你拿它做什么。参考 05-workbench.md小巧功能性标题、带短标题与内联标注箭头的截图序列、截图框本身就是分隔、第三张截图后出现粘性底部 CTA 栏。适用于 SaaS、开发者工具、IDE 扩展。概念性或服务型产品不要用——Workbench 需要一个 UI 来展示。06 · Conversational FAQ— 大胆的问题配简短回答页面读起来像对产品的诚实访谈通常每个 Q/A 是可折叠手风琴。07 · Manifesto— 论战式大字排印宣言能量页面先告诉读者该相信什么再告诉他们买什么常是政治海报美学。08 · Photographic— 单张巨幅图像主导每个首屏文字是小标注而非标题设计先让人看再让人读。09 · Quote-Led— hero 是一条带署名的引言头条是借来的可信度而非品牌自己的声音页面以社会证明开场。10 · Specimen不再是默认— 左栏编号标签、巨大衬线展示字型、非对称跨列、发丝规则线、纯排印 CTA、慷慨留白。参考 10-specimen.md01 — HELLO.式左栏编号 大号衬线短语、发丝线分隔、带箭头的排印链接按钮、首次加载上浮交错动画。仅当简报明确是编辑风、字库相关、或用户点名时才选它——Specimen 回退已被明令禁止slop-test gate 23 自动失败。11–21 种专项形态11 · Catalogue— 同一事物变体的统一网格——字体、色板、产品 SKU页面是库存的视觉索引。12 · Letter— 第一人称、手写感、亲密以问候开场Dear friend,首屏内无按钮读起来像创始人的私人便条。13 · Index-First— 页面本身就是链接列表无 hero 图像、无叙事流纯导航即设计。14 · Narrative Workflow— 编号阶段讲述用户随时间使用产品的故事每节是一个阶段1.0 → 2.0 → 3.0 → 4.0页面是流程时间线。15 · Split Studio— 双联画Diptych每个主要内容块把屏幕一分为二——一边文字、一边证明成对方向在页面下方交替。16 · Feature Stack— 粘性左栏标签/描述 滚动同步右栏截图循环展示相关细节电影感节奏。17 · Type Specimen— 字体本身就是设计字库主页或自定义字体是品牌证明的设计系统营销页。18 · Portfolio Grid— 可筛选的作品卡片网格工作室或设计师主页作品即产品。19 · Map / Diagram— 单个大型空间图组织页面——流程图、平面图、网络图、系统地图信息空间化而非线性排列。20 · Ecosystem Index— 多个发现面——精选/最新/按分类/按人平台的价值是涌现与浏览而非声明。21 · Component Playground— 交互式代码与预览块是页面主要内容每个块预览一件事并展示如何复制粘贴。三、多样化规则强制宏结构索引的顶端是一条强制规则这是整套体系防止模板化的核心机制选择之前先检查目标代码库的现有 CSS 文件中是否存在/* Hallmark · macrostructure: name · ... */注释。如果找到一个你的选择必须是不同的宏结构。同一项目内不能有连续两次 Hallmark 输出共用同一宏结构。这条规则在 SKILL.md 的设计流程 Step 2 中被进一步强化为三条在目标代码库任何 CSS 顶部若发现现有印章必须选择不同宏结构若本会话中已为用户产出过任何 Hallmark 输出本次选择必须与上一次不同Specimen 不再是默认——仅当简报明确是编辑/字库风格或用户点名时使用。配套的主题多样化规则要求即使宏结构不同连续两次输出的主题也必须在三个轴中至少一个上不同——纸张亮度带暗 30% / 中 30–85% / 亮 85%按主题--color-paper亮度、展示字型风格斜体衬线/罗马衬线/几何无衬线/等宽/斜体浓缩展示/重型展示/系统原生/孔版粗体、强调色相暖色 10–60° / 冷色 200–300° / 中性无彩色强调 / 其他色相。各主题的三个轴值作为注释写在 site/css/tokens.css 每个主题 token 块顶部。若候选主题与上一次有两项轴值相同应改选更远的主题。当简报模糊无主题、无基调时从前 10 种中选择——前 10 种是刻意筛选出的最强非 Specimen 形态能覆盖约 80% 的简报。四、Hero 润色模式HP1–HP4Hero 类宏结构Marquee Hero · Stat-Led · Quote-Led · Letter · Photographic · Clipped在其基础形态之上可以叠加一个可选的润色模式。润色模式是结构性的影响布局/字型/动效而非装饰性的它与 hero 宏结构共存而非取代。完整目录与适用场景见 hero-enrichment.md § Hero shape polish。四个润色模式HP1 · Vertical-rail title— 字标或拉取标签沿居中正文垂直排列writing-mode: vertical-rl; text-orientation: mixed读出工作室/画室/编辑风日式印刷节奏。HP2 · Marquee-overflow— H1 故意大于视口overflow-x: clip标题从右缘溢出去宣言/粗野/运动感。仅适用于短标题≤6 词长标题 溢出 噪音。反模式同时在html/body上使用overflow-x: hidden——应只在 hero 容器上作用域化使用clip。HP3 · Cursor-spotlight— 追踪mousemove的径向渐变背景仅限 hero。大气风/现代极简 SaaSLinear、Tailwind Labs、Raycast 风。反模式在整个页面追踪光标。reduced-motion 回退必须把渐变固定到合理的静态位置50%/30%而不是简单禁用。HP4 · Decorative-numeral— 巨大版本号/年份/章节数字以斜体展示字型置于 hero 角落。数字必须有语义——期号 22、年份 2026、章节 03、版本 0.8。无语义锚点的随机数字是装饰属于 slop见 slop-test gate 55。关键组合约束一个 hero 可以同时携带一个富化原型E1–E8和一个润色模式HP1–HP4但绝不能同时使用两个润色模式。决策序列固定为宏结构 → 富化→ 润色→ 空间纪律。五、导航与页脚语态宏结构的配套层每种宏结构还隐含一个导航原型N1–N10和一个页脚原型Ft1–Ft8默认值位于 component-cookbook.md 底部的路由表中§ Navigation 和 § Footers。不要只交付一个 hero 宏结构而不选导航与页脚——它们是页面形态的一部分不是可选的装饰性镀铬。导航路由表按流派/主题簇流派 / 簇默认导航可接受的备选编辑风Newsprint · Salon · Garden · Linen · AtelierN6 MastheadN1, N9现代极简Specimen · Quiet · Coral · Violet · PlumeN5 Floating pillN1, N9大气风Bloom · Aurora · Halo · MidnightN5 Floating pill模糊背景烘托氛围N9, N4俏皮风Brutal · Manifesto · Sport · Riso · StudioN7 Brutal slabN1, N3终端/CLITerminalN8 Terminal commandN4 ⌘K-only文档/参考AlmanacN3 Side-railN1, N4页脚路由表流派默认页脚也可用编辑风Ft1 Mast-headedFt2, Ft4, Ft6, Ft7现代极简Ft2 Inline single lineFt1, Ft5大气风Ft5 StatementFt1, Ft2俏皮风Ft8 Marquee scrollFt5, Ft3终端Ft4 Dense colophonFt2文档/参考Ft3 Index columnsFt1两条默认规避规则值得注意默认远离 N1字标 内联链接行 右侧按钮——最知名的 AI 指纹和默认远离 Ft3四栏索引页脚 社交行 小版权——反射性使用时同样是 AI 指纹。多样化的范围也延伸到导航与页脚同一项目会话内连续两次输出不得共用同一导航原型或同一页脚原型。六、SaaS 页面序列宏结构决定外观序列决定内容当宏结构是Bento Grid · Stat-Led · Workbench · Marquee Hero且简报是 B2B SaaS 营销页时按大致顺序交付以下小节。没有一个是强制性的——但跳过超过两个会读起来像页面不完整Hero— 宏结构特定Bento/Stat/Workbench/Marquee。两个 CTA主行动 次级Talk to sales。社会证明 / Logo 墙— 6–8 个单色客户 Logo参见 assets.md § Logo walls。特性— 3–6 个特性卡片随宏结构变化Bento 内联于网格Stat-Led 通常置于支撑数据网格之后。客户评价— 2–4 个引言卡片引用语 姓名 职位 公司。照片可选。避免We use [product] every day式语言引言应对应具体用例Foundry got us SOC2 in five weeks. We wrote zero policies ourselves.。定价— 2–3 档对比表每档特性清单中档推荐徽章。展示真实价格每档都写Contact sales for pricing是品牌不信任买家的信号。FAQ— 5–10 个问题此处适用 Conversational FAQ 形态即 Macrostructure 06。最终 CTA 条— 单个按钮 一句话提示。页脚— 索引式或表格化主题匹配。各节过渡使用主题匹配的垂直间距——主要小节之间最小--space-3xl。不要把小节细分成带子规则的行——节的分隔本身就是视觉节奏。SaaS 各节的语态规则定价展示真实价格。全档Contact us销售主导式定价意味着品牌不信任买家。客户评价包含被引人的职位和公司。抽象的Engineering Manager评价是 slop。真实产品用真实姓名占位简报用合理姓名——绝不用Jane Doe/John Smithgate 20。FAQ像人一样回答而非销售文档。Yes — Stripe and Adyen are both supported out of the box远胜Our platform integrates with leading payment providers.CTA 条一个按钮不是两个。重复本身就是行动号召。关键澄清这个序列不是你要盖章复制的模板——它是应有哪些内容的配方。宏结构决定每节看起来如何Bento Grid 页在网格内交错特性与证明Stat-Led 页自上而下排列它们Marquee Hero 页让大字声明完成社会证明的工作。对非 SaaS 工作编辑风、宣言、信件、长文、引用引领此序列不适用——面包店不需要定价档位对比。七、如何挑选五步决策流程读简报。记下强烈指向某宏结构的词data heavy、tell a story、a list of links、many small features、personal note。检查代码库中是否有/* Hallmark · macrostructure: name · ... */印章。若找到将该名字排除出选择。将简报能量与宏结构匹配使用各宏结构文件中的Reach for it行。大多数简报匹配 2–4 种形态选与该用户过往输出类别距离最远的那一个。在写代码前用纯文本声明你的选择Macrostructure: Bento Grid.然后写代码CSS 以必需印章开头。若真的犹豫不决从不同类别给用户三个选择如 Bento Long Document Manifesto让他们挑选。当简报模糊到无法推断领域时structure.md 提供了领域 → 三选组映射表例如podcast/audio → Photographic · Quote-Led · Letterdocs/CLI/API → Workbench · Long Document · Component Playgroundplatform/infra/observability → Bento Grid · Workbench · Stat-Ledagency/portfolio → Portfolio Grid · Split Studio · Index-First毫无信号时的兜底 → Bento Grid · Long Document · Manifesto。提供三个类别相距甚远的选项是产出多样性的保证三个近似孪生是这套技能存在意义就在于消灭的 AI 迹象。目标是多样性本身吗不是。目标是这样两条页面看起来像不同的网站而非同一模板的不同换色。八、宏结构在构建管线中的位置印章、记忆与验收宏结构不是孤立的选型——它在 Hallmark 完整设计流程中承担着贯穿性职责仓库源码多处印证了这一点8.1 决策时机Step 2早于视觉规则按 SKILL.md 的设计流程宏结构选择发生在 Step 2早于加载视觉规则集 Step 3 与 hero 富化决策 Step 4。流程要求先读宏结构索引并选一个名字然后只加载references/macrostructures/下对应的那一个文件例如05-workbench.md绝不整目录加载。选型同时决定六个结构轴中的五个只剩呈现动画需自行决定。导航与页脚原型也在这一步一并声明——典型的构建共加载 5–7 个原型文件。8.2 CSS 印章可被机器读取的持久记录Step 6 要求产物 CSS 的第一非空行必须是印章注释/* Hallmark · macrostructure: name · tone: tone · anchor hue: hue */这个印章是所选形态的持久记录。下次 Hallmark 在本项目运行时读取它并选择不同的宏结构——这就是多样化规则在文件系统层面的落点。对于组件级输出非页面印章使用component:前缀并列出 8 个状态清单明确告知后续运行这是组件作用域不触发页面级多样化规则。8.3 项目记忆.hallmark/log.jsonStep 2.5 要求运行前读取项目根的.hallmark/log.json若存在。其结构是一个 JSON 数组最新条目在前[ { date: 2026-04-30, macrostructure: Bento Grid, theme: Linen, enrichment: E1 clipped-edge, brief: Tracejam · SaaS observability }, { date: 2026-04-28, macrostructure: Long Document,theme: Linen, enrichment: E5 hand-built SVG, brief: Maple Street Bread · bakery }, { date: 2026-04-25, macrostructure: Manifesto, theme: Manifesto,enrichment: none, brief: Meridian · studio manifesto } ]用最近 3–5 条记录指导多样化宏结构不得与最近三次中的任何一个相同主题必须在至少一个轴上与上一次不同富化原型不应与上一次相同。每次构建完成后追加新条目并裁剪到最近 20 条。8.4 验收slop-test 门禁slop-test.md 中与宏结构直接相关的门禁包括gate 21CSS 顶部缺少宏结构印章、gate 22所选手法与本项目之前输出的印章相同、gate 23在简报未明确要求编辑/字库/标本能量时默认回退到 Specimen、gate 9与上次构建使用相同的结构指纹——hero → 3 特性 → CTA → footer 是 AI 结构模板必须拒绝。此外hero-enrichment.md 的质量关卡还有一道删除测试如果 hero 删掉富化后仍然成立富化才配拥有位置如果 hero 会坍塌说明你用拐杖撑起了孱弱的排印。九、仓库中的实战实证宏结构体系并非纸面理论——仓库中保存着真实产出可逐一对照docs/recipes.md收录八个可直接粘贴的完整简报。Coffeebox咖啡订阅→ Long Document · Linen · Tier-B 手绘 SVGTide独立播客→ Letter · Salon · 纯排印无富化Streampipe开源 CLI→ Long Document · Terminal · Tier-A 内联 CSS 终端块。site/_tests/下保存着 13 个测试产出页面与各自简报brief.md如01-tide-podcast/Letter、02-streampipe-cli/Long Document · Terminal、03-maple-bakery/E5 手绘 SVG 面包、04-meridian-manifesto/Manifesto、05-tracejam-saas/Bento/Stat 系 SaaSE1 裁边演示视频、06-anya-portfolio/、07-foundry-compliance/、08-cohort-courses/。它们展示了同一体系下完全不同的页面形状——正是不同网站而非不同换色的实证。site/css/tokens.css中每个主题 token 块顶部的注释携带三轴值纸亮度带 / 展示字型风格 / 强调色相是主题多样化规则的机器可读依据。site/examples/下的 tally、wayfare、hyperlane、najm、bananastudio 等完整示例站点则展示了宏结构与主题、富化、微交互组合后的完整落地形态。十、常见误用与反模式Specimen 回退简报模糊时默认选了 Specimen——重新开始。Specimen 只在明确编辑/字库语境中可用。Bento-Grid-by-default多样化规则 log.json 轮换记录的存在就是为了防止模型滑回最熟悉的形态。宏结构孤儿只选了 hero 宏结构而不同时声明导航与页脚原型——它们属于页面形态不是可选镀铬。序列当模板SaaS 八节序列不是盖章模板——跳过太多节会不完整但盲目逐节照搬同样违背其设计意图。数字造假Stat-Led 需要可辩护的单一指标。伪造 47% conversion、trusted by 50,000 teams 是 slop——真实数字、占位符—加灰色标注块、或换宏结构三选一。徽章式小节编号01 · THE TOUR、02 / FEATURES这类大写等宽章节编号默认关闭除非用户明确要求章节编号或宏结构是 Long Document/Manifesto/Catalogue 且内容确为有序。即便使用也必须上下堆叠编号在上、标题紧接其下的同一栏——标签居左 / 标题居右的两栏悬挂标题是 slop-test gate 66 直接自动失败的模板化编辑风迹象。一句话总结这套体系先选一个具名页面形态宏结构再配套导航与页脚原型用印章与日志保证不重复用 slop-test 门禁保证不出格——最终让 AI 产出的两个页面像两个不同团队的作品。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考