Hallmark 的 21 种 macrostructure 完全图鉴页面骨架决定一切【免费下载链接】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设计技能而它的核心武器就是21 种 macrostructure宏结构在写下一行代码之前先为页面选一个骨架——标题摆在哪、正文怎么组织、分隔线怎么画、按钮什么语气、图片如何处理全部打包成一次命名选择。选对 macrostructure页面就像人做的而不是同一个模板换了色。为什么骨架比皮肤更重要 AI 生成的页面为什么总像同一个模子因为它们倾向于独立选择配色 字体 卡片 动画等六个维度最后收敛到训练分布的均值上。Hallmark 的解法是先选骨架再谈皮肤。一个 macrostructure 就是一整套指纹——标题位置、正文构成、分隔语言、按钮语气、图片处理、滚动揭示方式捆绑成一个命名选项。这比逐维度拼装更快、更少出错而且类别化的差异让两次生成的结果看起来像两个不同的网站而不是同一模板的换色版。完整目录在 macrostructures.md。21 种 macrostructure 速查表Hallmark 强制的规则是一次生成只选一个然后只读那一个文件位于 skills/hallmark/references/macrostructures/不要加载整个目录。#宏结构一句话特征什么时候选它01Bento Grid不规则尺寸混排网格节奏来自大小变化很多小功能要展示、SaaS 落地页02Long Document像备忘录/信件一样连续行文品牌叙事、文档式产品页03Marquee Hero首屏被一个巨型宣言占满无 CTA个人品牌、这就是我们是谁的宣言式页面04Stat-Led巨型数字开场数据即叙事B2B、融资页、我们有数字证明05Workbench产品截图框是主角页面即产品导览有 UI 可展示的产品、功能走查06Conversational FAQ粗体问句 短答像诚实的采访问答驱动、信任建立型页面07Manifesto论战式大字号政治海报美学品牌宣言、使命驱动产品08Photographic每屏一张巨图文字只是小标注图片即信息量的品牌09Quote-Led开场是名人引语 署名社会证明优先、证言驱动10Specimen左页边距编号 超大衬线体编辑气质明确编辑风/字体行业不再是默认选项11Catalogue同款事物的均匀网格产品清单、字体/色板目录12Letter第一人称书信亲爱的朋友开场创始人的私人笔记13Index-First页面本身就是一份链接清单个人主页、导航即设计14Narrative Workflow编号阶段 1.0→4.0 讲使用故事流程时间线、方法论叙事15Split Studio双联画式左右分栏方向交替工作室、文字一侧 证据一侧16Feature Stack左栏固定 右栏滚动同步截图电影节奏的功能逐个拆解17Type Specimen字体本身就是设计有定制字体的品牌无特色字体别用18Portfolio Grid可筛选的项目卡片网格设计师/工作室作品即产品19Map / Diagram一张巨型空间图组织全页流程图、系统架构、网络图谱20Ecosystem Index精选/最新/分类多入口浏览平台型生态价值在逛21Component Playground代码 预览的交互块即正文组件库、设计系统营销页冷知识前 10 种是刻意最强的通用形状覆盖了约80% 的 brief。当需求模糊时Hallmark 会先从 01–10 里挑而不是伸手去够 11–21。三条内置的防偷懒规则 ⚠️多样性规则强制生成前先扫描目标项目里是否已有/* Hallmark · macrostructure: 名称 · ... */的 CSS 印章若找到本次必须换一个。同一项目连续两次输出绝不同骨架。Specimen 不再是默认曾经人人爱的编辑风 大衬线体10 号被降权只有 brief 明确偏编辑/字体行业时才选它。骨架决定导航和页脚每个 macrostructure 还隐含一个导航原型N1–N9和页脚原型Ft1–Ft8——它们是页面形状的一部分不是可选装饰。4 步决策流Hallmark 是怎么挑的 读 brief抓信号词数据密集→ Stat-Led讲个故事→ Long Document链接清单→ Index-First很多小功能→ Bento Grid私人笔记→ Letter。查代码库印章排除已用过的骨架。匹配气质多数 brief 会命中 2–4 个候选选与历史输出类别距离最远的那个。先报再写动代码前用一句白话说出 Macrostructure: Bento Grid然后 CSS 文件顶部写印章。真正纠结时从不同类别给用户提供 3 选 1。看真实生成效果同一个技能四种完全不同的骨架仓库里 site/_tests/ 和 site/examples/ 保存了多份放养生成结果——每个 CSS 顶部都印有骨架印章可以对照速查表逐张认领Marquee Hero03 号——Tally 的 SaaS 首屏就是一个占满视口的宣言首屏内没有按钮滚动之后页面才变成别的东西Index-First13 号——Anya 的个人主页干脆就是一份编号链接清单没有 hero 图、没有叙事流导航即设计Long Document02 号——Søroe 陶瓷工作室页面像一本连续行文的刊物营销结构为零产品本身被写成关于它的文献Marquee Hero 手绘 SVG 装饰03 号变体——Slow Pour 咖啡订阅同一骨架却靠手绘咖啡豆 SVG 和暖调主题走出了完全不同的指纹8 个测试 brief、8 种互不重复的骨架每份案例的完整决策记录见 site/_tests/01-tide-podcast/brief.md 与各测试目录下的brief.md。SaaS 页专属骨架还会决定章节顺序 当骨架是Bento Grid / Stat-Led / Workbench / Marquee Hero且 brief 是 B2B SaaS 时Hallmark 会按配方组织章节缺两项以上就显得页面没写完Hero → 客户 logo 墙 → 功能卡 → 证言 →明码标价的价格表 → 会话式 FAQ → 单按钮 CTA 条 → 页脚注意语音规则证言必须带职位和公司Jane Doe 会被 slop 测试直接判死价格必须写真实数字——Contact sales for pricing 全档出现是品牌不信任买家的明显破绽。这套配方对烘焙店、Manifesto 等非 SaaS 骨架明确不适用。想深挖从这几个文件入手总目录与选型规则macrostructures.md单骨架档案各含排版细则 示例开头句 最小 HTML 骨架01-bento-grid.md、07-manifesto.md首屏加花纹E1–E8 增强 HP1–HP4 抛光hero-enrichment.md导航/页脚原型速查component-cookbook.md完整生成配方与案例docs/recipes.md、docs/study-examples.md一句话总结21 个 macrostructure 的本质是把AI 该画什么页面从一个连续的概率问题压缩成 21 个离散、可命名、可审计的选项——骨架选定风格自成。这也是 Hallmark 敢说自己拒绝长得像 AI 生成的最大底气。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Hallmark 的 21 种 macrostructure 完全图鉴：页面骨架决定一切
Hallmark 的 21 种 macrostructure 完全图鉴页面骨架决定一切【免费下载链接】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设计技能而它的核心武器就是21 种 macrostructure宏结构在写下一行代码之前先为页面选一个骨架——标题摆在哪、正文怎么组织、分隔线怎么画、按钮什么语气、图片如何处理全部打包成一次命名选择。选对 macrostructure页面就像人做的而不是同一个模板换了色。为什么骨架比皮肤更重要 AI 生成的页面为什么总像同一个模子因为它们倾向于独立选择配色 字体 卡片 动画等六个维度最后收敛到训练分布的均值上。Hallmark 的解法是先选骨架再谈皮肤。一个 macrostructure 就是一整套指纹——标题位置、正文构成、分隔语言、按钮语气、图片处理、滚动揭示方式捆绑成一个命名选项。这比逐维度拼装更快、更少出错而且类别化的差异让两次生成的结果看起来像两个不同的网站而不是同一模板的换色版。完整目录在 macrostructures.md。21 种 macrostructure 速查表Hallmark 强制的规则是一次生成只选一个然后只读那一个文件位于 skills/hallmark/references/macrostructures/不要加载整个目录。#宏结构一句话特征什么时候选它01Bento Grid不规则尺寸混排网格节奏来自大小变化很多小功能要展示、SaaS 落地页02Long Document像备忘录/信件一样连续行文品牌叙事、文档式产品页03Marquee Hero首屏被一个巨型宣言占满无 CTA个人品牌、这就是我们是谁的宣言式页面04Stat-Led巨型数字开场数据即叙事B2B、融资页、我们有数字证明05Workbench产品截图框是主角页面即产品导览有 UI 可展示的产品、功能走查06Conversational FAQ粗体问句 短答像诚实的采访问答驱动、信任建立型页面07Manifesto论战式大字号政治海报美学品牌宣言、使命驱动产品08Photographic每屏一张巨图文字只是小标注图片即信息量的品牌09Quote-Led开场是名人引语 署名社会证明优先、证言驱动10Specimen左页边距编号 超大衬线体编辑气质明确编辑风/字体行业不再是默认选项11Catalogue同款事物的均匀网格产品清单、字体/色板目录12Letter第一人称书信亲爱的朋友开场创始人的私人笔记13Index-First页面本身就是一份链接清单个人主页、导航即设计14Narrative Workflow编号阶段 1.0→4.0 讲使用故事流程时间线、方法论叙事15Split Studio双联画式左右分栏方向交替工作室、文字一侧 证据一侧16Feature Stack左栏固定 右栏滚动同步截图电影节奏的功能逐个拆解17Type Specimen字体本身就是设计有定制字体的品牌无特色字体别用18Portfolio Grid可筛选的项目卡片网格设计师/工作室作品即产品19Map / Diagram一张巨型空间图组织全页流程图、系统架构、网络图谱20Ecosystem Index精选/最新/分类多入口浏览平台型生态价值在逛21Component Playground代码 预览的交互块即正文组件库、设计系统营销页冷知识前 10 种是刻意最强的通用形状覆盖了约80% 的 brief。当需求模糊时Hallmark 会先从 01–10 里挑而不是伸手去够 11–21。三条内置的防偷懒规则 ⚠️多样性规则强制生成前先扫描目标项目里是否已有/* Hallmark · macrostructure: 名称 · ... */的 CSS 印章若找到本次必须换一个。同一项目连续两次输出绝不同骨架。Specimen 不再是默认曾经人人爱的编辑风 大衬线体10 号被降权只有 brief 明确偏编辑/字体行业时才选它。骨架决定导航和页脚每个 macrostructure 还隐含一个导航原型N1–N9和页脚原型Ft1–Ft8——它们是页面形状的一部分不是可选装饰。4 步决策流Hallmark 是怎么挑的 读 brief抓信号词数据密集→ Stat-Led讲个故事→ Long Document链接清单→ Index-First很多小功能→ Bento Grid私人笔记→ Letter。查代码库印章排除已用过的骨架。匹配气质多数 brief 会命中 2–4 个候选选与历史输出类别距离最远的那个。先报再写动代码前用一句白话说出 Macrostructure: Bento Grid然后 CSS 文件顶部写印章。真正纠结时从不同类别给用户提供 3 选 1。看真实生成效果同一个技能四种完全不同的骨架仓库里 site/_tests/ 和 site/examples/ 保存了多份放养生成结果——每个 CSS 顶部都印有骨架印章可以对照速查表逐张认领Marquee Hero03 号——Tally 的 SaaS 首屏就是一个占满视口的宣言首屏内没有按钮滚动之后页面才变成别的东西Index-First13 号——Anya 的个人主页干脆就是一份编号链接清单没有 hero 图、没有叙事流导航即设计Long Document02 号——Søroe 陶瓷工作室页面像一本连续行文的刊物营销结构为零产品本身被写成关于它的文献Marquee Hero 手绘 SVG 装饰03 号变体——Slow Pour 咖啡订阅同一骨架却靠手绘咖啡豆 SVG 和暖调主题走出了完全不同的指纹8 个测试 brief、8 种互不重复的骨架每份案例的完整决策记录见 site/_tests/01-tide-podcast/brief.md 与各测试目录下的brief.md。SaaS 页专属骨架还会决定章节顺序 当骨架是Bento Grid / Stat-Led / Workbench / Marquee Hero且 brief 是 B2B SaaS 时Hallmark 会按配方组织章节缺两项以上就显得页面没写完Hero → 客户 logo 墙 → 功能卡 → 证言 →明码标价的价格表 → 会话式 FAQ → 单按钮 CTA 条 → 页脚注意语音规则证言必须带职位和公司Jane Doe 会被 slop 测试直接判死价格必须写真实数字——Contact sales for pricing 全档出现是品牌不信任买家的明显破绽。这套配方对烘焙店、Manifesto 等非 SaaS 骨架明确不适用。想深挖从这几个文件入手总目录与选型规则macrostructures.md单骨架档案各含排版细则 示例开头句 最小 HTML 骨架01-bento-grid.md、07-manifesto.md首屏加花纹E1–E8 增强 HP1–HP4 抛光hero-enrichment.md导航/页脚原型速查component-cookbook.md完整生成配方与案例docs/recipes.md、docs/study-examples.md一句话总结21 个 macrostructure 的本质是把AI 该画什么页面从一个连续的概率问题压缩成 21 个离散、可命名、可审计的选项——骨架选定风格自成。这也是 Hallmark 敢说自己拒绝长得像 AI 生成的最大底气。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考