尧图网站建设 
Hallmark 宏结构 19 · Map / Diagram用一张空间图编排整页布局的实战指南【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark导读Map / Diagram地图/图解是 Hallmark 设计技能中二十一种具名页级宏结构之一核心主张是用一张大型空间图解组织整个页面——流程图、平面图、网络图、系统地图皆可信息以空间方式而非线性方式排布。本指南面向使用 Claude Code、Cursor、Codex 等 AI 编码助手的开发者说明何时该选择这一宏结构、六个结构轴heading / body / divider / button / image / reveal分别如何落地以及如何通过仓库内的配套规则动效、文案、反模式、多样化约束避免产出AI 味页面。读完你将掌握 Map / Diagram 的完整实现配方定位语开场、节点-边-图例的正文构成、SVG 悬停交互与按节点逐帧浮现的 reveal 模式。一、什么是 Map / Diagram 宏结构在 Hallmark 的宏结构体系中每个宏结构都是一套完整指纹——标题放置、正文构成、分隔语言、按钮语气、图像处理、浮现模式捆绑为一个具名选择见 宏结构索引。Map / Diagram 是二十一种中的第 19 号其定义在一行内即可概括A single large spatial diagram organises the page — flowchart, floor plan, network graph, system map. Information is laid outspatially, not linearly.一个关键区别是它与 20 · Ecosystem Index 的边界Ecosystem Index 是多个发现面的索引页featured / latest / by category / by people价值在于浏览与涌现Map / Diagram 则是一张图主导全页价值在于把系统的空间结构一次讲清。适用场景与禁忌官方文件明确给出了够得着就选Reach for it与别用它Avoid两个方向适用系统总览system overviews、生态地图ecosystem maps、流程图表process diagrams、组织架构图organisation charts。禁忌不要用它替代叙事。原文一句话点破Some stories shouldnt be read spatially.——有些故事不该用空间方式读。线性叙事、逐步论证的内容应当选择 Long Document、Letter 等阅读导向的宏结构。参考对象是流程可视化网站、生态地图、知识图谱产品——这类站点天然以图为主体读者进入页面就是要看懂这张图。二、六轴结构Map / Diagram 的完整指纹从源码目录看macrostructures.md 的索引行与 19-map-diagram.md 本体给出的 Map / Diagram 指纹如下。每一轴都与 structure.md 定义的六个结构轴一一对应结构轴Map / Diagram 的取值说明Heading标题地图上方或侧旁的一小段定位短语a small orientation phrase不做大标题只做方向提示Body正文地图本身节点与边某处放图例legend somewhere信息在空间里不在段落里Divider分隔图解没有内部区块——它是单幅构图one composition天然的负空间分隔Button按钮节点内部链接图下方一个描边 CTAone outlined CTA below the map描边按钮是 Hallmark 默认按钮语气见 structure.md § Button voiceImage图像地图即图像带悬停交互的 SVGSVG with interactive hovers图像不是配图是正文本身Reveal浮现节点逐帧墨水浮现node-by-node ink-on用户进入视口时触发上限 5 个节点与其它宏结构对比与 Bento Grid 相比Bento 是不规则网格里若干模块块视觉节奏来自尺寸变化Map / Diagram 则是一个整体构图节奏来自空间关系而非卡片大小。与 Narrative Workflow 相比Workflow 是编号阶段的时间线1.0 → 2.0 → 3.0是过程Map / Diagram 强调结构节点之间可以是并行、嵌套、层级关系而非先后顺序。与 Ecosystem Index 相比前者是发现界面后者是单图陈述。三、开场文案命名路径而非声明主张Map / Diagram 的开场有独特的写法规范命名路径或命名领地name the path or the territory。原文档给出三条可直接模仿具体性的示例开场imitate thespecificity不是照抄措辞Browser → API → Database. Where Tracejam fits.—— 命名层次命名位置From stdin, through the pipe, into your dashboard.—— 标注页面下方将要出现的空间流向Three tiers · two regions · one ledger.—— 计数系统地理 结构这三条开场的能力要点用→、·等符号把图的语言提前到文字里让读者在滚动前就预期这是一张空间图不写Built for the modern teamEmpower your…这类被 copy.md 明令禁止的开场表格列了十条 banned opening lines具体性优先命名真实的层、真实的输入、真实的计数而不是抽象的价值主张。仓库里现成的技术语气样本可作为延伸参考copy.md § Technical 中诸如23 spans · 4 services · 482 ms.、Drop-in OTLP. No agent, no sidecar.都是数据即标题 / 命名具体物的同族写法与 Map / Diagram 开场的精神一致——拒绝抽象先给结构。四、正文构成节点、边与图例原文档对 body 的定义只有三件事nodes节点、edges边、legend图例。将其落实为可操作的页面设计需要注意图例是硬性组件a legend somewhere一张图要能被独立读懂图例提供解码空间语法的钥匙。位置somewhere意味着不必拘泥于角落但必须存在。节点内部链接node-internal links承担主要导航读者从某个节点出发继续深入而不是从顶部的全局导航出发。这与常规页面的导航栏 正文结构截然不同。图是单幅构图one composition不要给图内部再分区块、加小节标题。图的内部结构即页面结构。从实现层面看这类图首选SVGthe map IS the image; SVG with interactive hovers。SVG 的优势在于节点和边都是可寻址的 DOM 元素天然支持:hover、title、a包裹节点链接且与 motion.md 的只动画 transform 与 opacity原则兼容——节点浮现动画对 SVG 元素同样成立。五、Reveal 模式节点逐帧墨水浮现Map / Diagram 的 reveal 是全页唯一允许的动效时刻规则非常明确节点逐帧墨水浮现node-by-node ink-on触发条件是用户进入视口viewport节点数上限 5 个cap to 5 nodes。这是防溢出设计超过 5 个节点的逐帧浮现会变成漫长等待违背 motion.md 的One orchestrated moment beats ten small ones原则。实现时应遵守仓库的动效纪律用 IntersectionObserver绝不用 scroll 事件监听见 motion.md § Scroll-linked motion只做 reveal-once 效果不做 parallax、不做 scroll-scrubbed 动画stagger 用 CSS 自定义属性按 DOM 索引做不用 JS 计算animation-delay: calc(var(--i, 0) * 60ms)总 stagger 上限约 500ms每个滚动触发的动效必须有 reduced-motion 回退media (prefers-reduced-motion: reduce)下所有空间动效坍缩为 ≤150ms 的不透明度交叉淡入motion.md § Reduced motion 给出了完整代码块。六、落地时的三条硬性纪律Map / Diagram 作为宏结构被选中后页面仍然要过 Hallmark 的通用门禁。以下是与之强相关的三条完整清单见 anti-patterns.md 与 slop-test.md诚实文案——不编造指标anti-patterns § Invented metrics如果图中要标注系统规模、节点数量、时延数字而用户没有提供就写—加一个标注metric to confirm的灰块或者换一种宏结构。编造 47 % conversion 这类数字即 slop。锁定 token——不得中途即兴anti-patterns § Mid-render token improvisation图中所有颜色必须引用命名 tokenvar(--color-accent)SVG 的fill、stroke同样适用。需要新值就先在:root提升为命名变量再引用。禁用重绘 UI chromeanti-patterns § Re-drawn UI chrome不要手工画假浏览器栏、假窗口标题条去包图或包代码。图就是图用figure加最多一条 hairline 边框即可。此外 SKILL.md 的 **diversification rule多样化规则**要求同一项目连续两次 Hallmark 输出不得复用同一宏结构主题在纸面色带 / 展示字形 / 强调色相三个轴上至少一轴不同。也就是说即使 Map / Diagram 适合当前 brief如果上一次输出也是它就必须换结构。产物 CSS 首行必须打戳/* Hallmark · macrostructure: Map / Diagram · ... */作为后续运行的轮换依据并同步更新.hallmark/log.json。七、什么时候真的选它决策清单综合 macrostructures.md § How to pick 与本文档选型步骤为通读 brief找强信号词system overviewecosystemarchitectureflowhow data moveswho talks to whom检查项目现有 CSS 的宏结构戳排除重复选择用够得着就选判断内容是否空间性主导——读者需要看见结构而非读完故事明确说出选择Macrostructure: Map / Diagram. Theme: . Differs from the last on: .写代码CSS 首行盖章并追加.hallmark/log.json记录。如果 brief 里同时出现structure 叙事两类需求应优先考虑混合策略或改选叙事型宏结构——因为原文档明确警告Map / Diagram 不是叙事的替代品。八、总结Map / Diagram 是 Hallmark 二十一种宏结构中最反模板的一型它把页面的信息架构直接画出来heading 只是一句定位短语正文就是节点与边CTA 是图下一个描边按钮动效是进入视口时最多 5 个节点的逐帧浮现。它适合系统总览、生态地图、流程与组织图不适合线性叙事。落地时要严守节点数上限、SVG 悬停交互、token 纪律与多样化轮换规则——这样产出的页面才是看起来像人做的而不是又一张 LLM 默认模板。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Hallmark 宏结构 19 · Map / Diagram：用一张空间图编排整页布局的实战指南
Hallmark 宏结构 19 · Map / Diagram用一张空间图编排整页布局的实战指南【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark导读Map / Diagram地图/图解是 Hallmark 设计技能中二十一种具名页级宏结构之一核心主张是用一张大型空间图解组织整个页面——流程图、平面图、网络图、系统地图皆可信息以空间方式而非线性方式排布。本指南面向使用 Claude Code、Cursor、Codex 等 AI 编码助手的开发者说明何时该选择这一宏结构、六个结构轴heading / body / divider / button / image / reveal分别如何落地以及如何通过仓库内的配套规则动效、文案、反模式、多样化约束避免产出AI 味页面。读完你将掌握 Map / Diagram 的完整实现配方定位语开场、节点-边-图例的正文构成、SVG 悬停交互与按节点逐帧浮现的 reveal 模式。一、什么是 Map / Diagram 宏结构在 Hallmark 的宏结构体系中每个宏结构都是一套完整指纹——标题放置、正文构成、分隔语言、按钮语气、图像处理、浮现模式捆绑为一个具名选择见 宏结构索引。Map / Diagram 是二十一种中的第 19 号其定义在一行内即可概括A single large spatial diagram organises the page — flowchart, floor plan, network graph, system map. Information is laid outspatially, not linearly.一个关键区别是它与 20 · Ecosystem Index 的边界Ecosystem Index 是多个发现面的索引页featured / latest / by category / by people价值在于浏览与涌现Map / Diagram 则是一张图主导全页价值在于把系统的空间结构一次讲清。适用场景与禁忌官方文件明确给出了够得着就选Reach for it与别用它Avoid两个方向适用系统总览system overviews、生态地图ecosystem maps、流程图表process diagrams、组织架构图organisation charts。禁忌不要用它替代叙事。原文一句话点破Some stories shouldnt be read spatially.——有些故事不该用空间方式读。线性叙事、逐步论证的内容应当选择 Long Document、Letter 等阅读导向的宏结构。参考对象是流程可视化网站、生态地图、知识图谱产品——这类站点天然以图为主体读者进入页面就是要看懂这张图。二、六轴结构Map / Diagram 的完整指纹从源码目录看macrostructures.md 的索引行与 19-map-diagram.md 本体给出的 Map / Diagram 指纹如下。每一轴都与 structure.md 定义的六个结构轴一一对应结构轴Map / Diagram 的取值说明Heading标题地图上方或侧旁的一小段定位短语a small orientation phrase不做大标题只做方向提示Body正文地图本身节点与边某处放图例legend somewhere信息在空间里不在段落里Divider分隔图解没有内部区块——它是单幅构图one composition天然的负空间分隔Button按钮节点内部链接图下方一个描边 CTAone outlined CTA below the map描边按钮是 Hallmark 默认按钮语气见 structure.md § Button voiceImage图像地图即图像带悬停交互的 SVGSVG with interactive hovers图像不是配图是正文本身Reveal浮现节点逐帧墨水浮现node-by-node ink-on用户进入视口时触发上限 5 个节点与其它宏结构对比与 Bento Grid 相比Bento 是不规则网格里若干模块块视觉节奏来自尺寸变化Map / Diagram 则是一个整体构图节奏来自空间关系而非卡片大小。与 Narrative Workflow 相比Workflow 是编号阶段的时间线1.0 → 2.0 → 3.0是过程Map / Diagram 强调结构节点之间可以是并行、嵌套、层级关系而非先后顺序。与 Ecosystem Index 相比前者是发现界面后者是单图陈述。三、开场文案命名路径而非声明主张Map / Diagram 的开场有独特的写法规范命名路径或命名领地name the path or the territory。原文档给出三条可直接模仿具体性的示例开场imitate thespecificity不是照抄措辞Browser → API → Database. Where Tracejam fits.—— 命名层次命名位置From stdin, through the pipe, into your dashboard.—— 标注页面下方将要出现的空间流向Three tiers · two regions · one ledger.—— 计数系统地理 结构这三条开场的能力要点用→、·等符号把图的语言提前到文字里让读者在滚动前就预期这是一张空间图不写Built for the modern teamEmpower your…这类被 copy.md 明令禁止的开场表格列了十条 banned opening lines具体性优先命名真实的层、真实的输入、真实的计数而不是抽象的价值主张。仓库里现成的技术语气样本可作为延伸参考copy.md § Technical 中诸如23 spans · 4 services · 482 ms.、Drop-in OTLP. No agent, no sidecar.都是数据即标题 / 命名具体物的同族写法与 Map / Diagram 开场的精神一致——拒绝抽象先给结构。四、正文构成节点、边与图例原文档对 body 的定义只有三件事nodes节点、edges边、legend图例。将其落实为可操作的页面设计需要注意图例是硬性组件a legend somewhere一张图要能被独立读懂图例提供解码空间语法的钥匙。位置somewhere意味着不必拘泥于角落但必须存在。节点内部链接node-internal links承担主要导航读者从某个节点出发继续深入而不是从顶部的全局导航出发。这与常规页面的导航栏 正文结构截然不同。图是单幅构图one composition不要给图内部再分区块、加小节标题。图的内部结构即页面结构。从实现层面看这类图首选SVGthe map IS the image; SVG with interactive hovers。SVG 的优势在于节点和边都是可寻址的 DOM 元素天然支持:hover、title、a包裹节点链接且与 motion.md 的只动画 transform 与 opacity原则兼容——节点浮现动画对 SVG 元素同样成立。五、Reveal 模式节点逐帧墨水浮现Map / Diagram 的 reveal 是全页唯一允许的动效时刻规则非常明确节点逐帧墨水浮现node-by-node ink-on触发条件是用户进入视口viewport节点数上限 5 个cap to 5 nodes。这是防溢出设计超过 5 个节点的逐帧浮现会变成漫长等待违背 motion.md 的One orchestrated moment beats ten small ones原则。实现时应遵守仓库的动效纪律用 IntersectionObserver绝不用 scroll 事件监听见 motion.md § Scroll-linked motion只做 reveal-once 效果不做 parallax、不做 scroll-scrubbed 动画stagger 用 CSS 自定义属性按 DOM 索引做不用 JS 计算animation-delay: calc(var(--i, 0) * 60ms)总 stagger 上限约 500ms每个滚动触发的动效必须有 reduced-motion 回退media (prefers-reduced-motion: reduce)下所有空间动效坍缩为 ≤150ms 的不透明度交叉淡入motion.md § Reduced motion 给出了完整代码块。六、落地时的三条硬性纪律Map / Diagram 作为宏结构被选中后页面仍然要过 Hallmark 的通用门禁。以下是与之强相关的三条完整清单见 anti-patterns.md 与 slop-test.md诚实文案——不编造指标anti-patterns § Invented metrics如果图中要标注系统规模、节点数量、时延数字而用户没有提供就写—加一个标注metric to confirm的灰块或者换一种宏结构。编造 47 % conversion 这类数字即 slop。锁定 token——不得中途即兴anti-patterns § Mid-render token improvisation图中所有颜色必须引用命名 tokenvar(--color-accent)SVG 的fill、stroke同样适用。需要新值就先在:root提升为命名变量再引用。禁用重绘 UI chromeanti-patterns § Re-drawn UI chrome不要手工画假浏览器栏、假窗口标题条去包图或包代码。图就是图用figure加最多一条 hairline 边框即可。此外 SKILL.md 的 **diversification rule多样化规则**要求同一项目连续两次 Hallmark 输出不得复用同一宏结构主题在纸面色带 / 展示字形 / 强调色相三个轴上至少一轴不同。也就是说即使 Map / Diagram 适合当前 brief如果上一次输出也是它就必须换结构。产物 CSS 首行必须打戳/* Hallmark · macrostructure: Map / Diagram · ... */作为后续运行的轮换依据并同步更新.hallmark/log.json。七、什么时候真的选它决策清单综合 macrostructures.md § How to pick 与本文档选型步骤为通读 brief找强信号词system overviewecosystemarchitectureflowhow data moveswho talks to whom检查项目现有 CSS 的宏结构戳排除重复选择用够得着就选判断内容是否空间性主导——读者需要看见结构而非读完故事明确说出选择Macrostructure: Map / Diagram. Theme: . Differs from the last on: .写代码CSS 首行盖章并追加.hallmark/log.json记录。如果 brief 里同时出现structure 叙事两类需求应优先考虑混合策略或改选叙事型宏结构——因为原文档明确警告Map / Diagram 不是叙事的替代品。八、总结Map / Diagram 是 Hallmark 二十一种宏结构中最反模板的一型它把页面的信息架构直接画出来heading 只是一句定位短语正文就是节点与边CTA 是图下一个描边按钮动效是进入视口时最多 5 个节点的逐帧浮现。它适合系统总览、生态地图、流程与组织图不适合线性叙事。落地时要严守节点数上限、SVG 悬停交互、token 纪律与多样化轮换规则——这样产出的页面才是看起来像人做的而不是又一张 LLM 默认模板。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考