baoyu-infographic 层级分层布局hierarchical-layers实战指南金字塔与同心圆信息图的设计与生成【免费下载链接】baoyu-skills项目地址: https://gitcode.com/gh_mirrors/ba/baoyu-skills本篇技术指南聚焦 baoyu-skills 仓库中 baoyu-infographic 技能的hierarchical-layers布局层级分层布局。该布局是 21 种信息图布局之一用于呈现重要性、影响力或亲疏程度的嵌套层级结构典型形态包括金字塔Pyramid与同心圆Concentric。读完本文你将掌握该布局的结构规则、两种变体的选择方法、视觉要素与文字排布规范、推荐风格搭配并了解它如何被整合进该技能的完整工作流从内容分析到提示词生成——实现选定布局 → 生成专业提示词 → 产出可发布信息图的闭环。布局定位什么是 hierarchical-layers在 baoyu-infographic 中每个信息图都由两个维度决定layout信息结构× style视觉美学任意 layout 与任意 style 都可以自由组合。hierarchical-layers正是布局画廊Layout Gallery中面向层级类内容的专门布局。在 SKILL.md 的 Layout Gallery 中它的定位被概括为hierarchical-layers— Pyramids, priority levels金字塔、优先级层级它与同画廊中的其他布局形成明确分工tree-branching负责分类/类目树hub-spoke负责中心概念辐射structural-breakdown负责分解视图而hierarchical-layers专攻由核心到外围、自上而下的嵌套分层。在 analysis-framework.md 的内容类型分类表中Hierarchy层级类型的内容被推荐使用hierarchical-layers或tree-branching布局配合craft-handmade、corporate-memphis风格——这说明该布局是内容分析框架中层级结构数据的官方首选映射。结构规则从核心到外围的嵌套分层根据 hierarchical-layers.md该布局的核心结构约束如下多层嵌套从核心延伸到外围整个信息图由多个层级构成从中心/顶部向外/向下逐层展开核心/顶层承载最重要、最中心的内容最重要的概念放在最核心金字塔顶部或同心圆中心的位置外层/底层重要性递减越往外围、越往底层内容的重要性或影响力依次降低典型层级数为 37 层太少无法体现层次感太多则视觉拥挤、可读性下降层级之间边界清晰每层必须有明确的视觉边界不能含糊地融在一起。这 5 条规则共同保证了信息架构的严谨性读者一眼就能判断出内容的相对优先级这正是层级类信息图的价值所在。两种核心变体Pyramid 与 Concentrichierarchical-layers.md 明确规定了该布局的两种官方变体二者在形状与视觉强调上截然不同变体形状视觉强调Pyramid金字塔三角形垂直自上而下的层级、数量关系Concentric同心圆圆环放射状自中心向外的影响力、亲疏程度Pyramid 变体采用下宽上窄的三角形堆叠底层最宽通常对应数量最多、最基础的要素顶层最窄数量最少但层级最高。它擅长表达基础 → 高层的递进关系与数量递减关系。最典型的应用就是马斯洛需求层次Maslows hierarchy生理需求在最底层最宽自我实现在最顶层最窄。Concentric 变体采用嵌套圆环最核心的圆环承载中心概念越往外环内容与核心的关系越疏远。它强调自中心向外的影响辐射与亲疏程度比如影响力圈层Circle of Control → Circle of Influence → Circle of Concern、利益相关者分析等。最佳适用场景哪些内容该用层级分层布局hierarchical-layers.md 给出了 5 类最适合该布局的内容马斯洛需求层次风格的概念多层递进、层层支撑的经典层级模型优先级与重要性分级需要明确区分核心/重要/次要的内容影响力圈层Spheres of influence以个人或组织为中心向外辐射影响范围组织结构公司、团队的层级结构从最高管理层到执行层利益相关者分析按对项目的影响程度/亲疏关系对相关方分级。在 analysis-framework.md 的视觉机会映射Visual Opportunity Mapping表中Hierarchies层级类内容对应的视觉处理方式被明确为Pyramids, layers, size differences金字塔、分层、尺寸差异——这与 hierarchical-layers 的视觉要素完全一致说明该布局正是把分析阶段的层级视觉机会落地的标准容器。视觉要素如何让层级一眼可辨hierarchical-layers.md 规定了 5 项核心视觉要素每个层级使用独立颜色不同层级用不同色相区分避免相邻层级撞色每层配图标或插画用图标强化每层内容的语义降低阅读负担尺寸表示重要性/数量层级的大小金字塔的宽度、圆环的半径与重要性或数量成正比标签放在层内或层旁层级名称可直接置于层内也可以放在层外一侧并辅以引线装饰性的顶端/中心元素金字塔顶部或同心圆中心可放置一个醒目的装饰元素如皇冠、核心图标强化焦点感知。下面两张来自仓库screenshots/infographic-layouts/的真实生成截图可以直观印证上述结构规则与视觉要素金字塔变体的典型呈现——底层最宽生理需求逐层收窄至顶层自我实现每层独立配色、层内居中放置大字号标题并辅以图标是自上而下层级 数量关系的教科书案例同心圆变体的典型呈现——以核心CORE: SELF为圆心向外依次嵌套控制圈、影响圈、关注圈颜色由内向外扩散配合箭头与图标强化中心向外辐射的亲疏层级此外仓库还提供了一张层级堆叠式技术栈分层的参考截图同样属于层级表达的可选形态文字排布层级信息的标注规范hierarchical-layers.md 对文字位置给出了 5 条明确规范标题置于顶部或侧边整张图的标题不与层级争抢视觉焦点固定在顶部或侧边层级名称放在每一层内部每层的名称直接标注在对应层级区域内简要描述放在层外每层的补充说明文字放在层级外侧如金字塔两侧、同心圆外环周围避免挤压层内主体如相关标注数量或百分比层级若涉及数量/占比如各层人数、资源占比以数字形式明确标出提供图例说明颜色含义当用颜色编码层级时必须配套图例确保颜色语义可被准确解读。这套规范可以在 structured-content-template.md 的For Hierarchy层级类内容章节模板中找到对应实现。该模板要求每个层级单独成一个 Section并严格输出PositionTop/Middle/Bottom该层在层级中的位置Priority该层的优先级Contains该层包含的要素Visual ElementType: layer/tier并说明该层相对其他层的 Size 与 PositionText Labels层标题Level title与描述Description的精确文案。这意味着在生成阶段每个层级的文案、位置、尺寸关系都会以结构化数据传入提示词而非让模型自由发挥。推荐风格搭配三类内容的组合建议hierarchical-layers.md 结尾给出了 3 组官方推荐搭配craft-handmade适合俏皮、亲切的层级概念如儿童向内容、科普层级corporate-memphis适合商业层级组织架构、优先级矩阵technical-schematic适合技术性 3D 金字塔系统架构层级、工程分解。三组搭配与 SKILL.md 的 Recommended Combinations 表相互印证——该表将Hierarchy类内容整体推荐为hierarchical-layerscraft-handmade同时 analysis-framework.md 也把 Hierarchy 类型的推荐风格列为craft-handmade, corporate-memphis三者完全一致。搭配时的风格语义可参考仓库中的风格定义文件craft-handmade.md默认风格手绘 纸张拼贴美学暖色调、有机且略带不完美的手绘线条适合教育内容与俏皮层级——注意它强调严格手绘不得出现写实或照片元素corporate-memphis.md扁平矢量人物 鲜艳几何填充紫、橙、青、黄无描边实色填充适合商务演示与组织架构technical-schematic.md工程制图精度主色蓝#2563EB 琥珀高亮#F59E0B支持 Blueprint蓝图与 Isometric等距 3D两个变体适合技术 3D 金字塔。实战集成如何让层级布局真正生成信息图hierarchical-layers 不是独立存在的一张示意图而是 baoyu-infographic 七步工作流中的一环。要实际产出一张层级信息图需要走完 SKILL.md 定义的核心流程Step 1 分析将源内容保存为source.md产出analysis.mdanalysis-framework.md 中的 Content Type Classification 会在此时识别内容是否为 Hierarchy 类型并给出hierarchical-layers的布局建议Step 2 结构化内容按 structured-content-template.md 的 For Hierarchy 模板把每个层级拆解为 Position / Priority / Contains / Text Labels写入structured-content.mdStep 3 推荐组合基于数据结构和内容语气推荐 35 组 layout×style 组合层级内容优先给hierarchical-layers 上述三种风格之一Step 4 确认按 Confirmation Policy 与用户确认组合、宽高比、语言与后端Step 5 生成提示词将布局定义即本 hierarchical-layers.md 的全文、风格定义、base-prompt.md 基础模板与结构化内容合并为prompts/infographic.md。在 base-prompt.md 中{{LAYOUT}}会被替换为hierarchical-layers{{LAYOUT_GUIDELINES}}会被替换为本布局文档的完整结构规则——也就是说本文介绍的每一条层级规则都会原样进入最终图像提示词Step 6 生成图片按 Image Generation Tools 规则解析后端如codex-imagegen调用图像生成后端输出infographic.png。若走 codex-imagegen.md 的路径可用baoyu-image-gen --provider codex-cli传入提示词文件与输出路径并可追加--ref参考图来约束构图宽高比按--aspect解析landscape→16:9、portrait→9:16、square→1:1或自定义如3:4。与其他层级类布局的边界为帮助你在实战中做出准确选择这里补充 hierarchical-layers 与画廊中两个相近布局的区分依据 SKILL.md 的 Layout Gallery 定义布局结构形态适用场景hierarchical-layers嵌套层/金字塔/同心圆强调核心→外围、重要性递减优先级、影响力、组织结构、利益相关者tree-branching树状分支自上而下展开类目分类体系、类目学taxonomiesstructural-breakdown分解视图、剖面爆炸图、横截面、组件拆解简单来说内容存在等级/优先级关系时选hierarchical-layers内容只是并列分类时选tree-branching内容是物理/结构拆解时选structural-breakdown。这三者对应 analysis-framework.md 中 Hierarchy、System/Structure 两类内容类型的差异化布局映射。小结hierarchical-layers是 baoyu-infographic 面向层级类内容的专用布局以37 层、核心到外围、层级边界清晰为结构骨架以Pyramid自上而下、强调数量与优先级和Concentric自内向外、强调影响力与亲疏为两种官方变体配套每层独立配色 层内标签 层外描述 图例的视觉与文字规范。配合craft-handmade、corporate-memphis、technical-schematic三种推荐风格它可以覆盖从教育科普、商业组织到技术架构的绝大多数层级表达需求而通过 baoyu-infographic 的七步工作流它最终会被完整注入 base-prompt.md 生成的提示词中交由图像后端产出成品信息图。【免费下载链接】baoyu-skills项目地址: https://gitcode.com/gh_mirrors/ba/baoyu-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 baoyu-infographic 层级分层布局（hierarchical-layers）实战指南：金字塔与同心圆信息图的设计与生成
baoyu-infographic 层级分层布局hierarchical-layers实战指南金字塔与同心圆信息图的设计与生成【免费下载链接】baoyu-skills项目地址: https://gitcode.com/gh_mirrors/ba/baoyu-skills本篇技术指南聚焦 baoyu-skills 仓库中 baoyu-infographic 技能的hierarchical-layers布局层级分层布局。该布局是 21 种信息图布局之一用于呈现重要性、影响力或亲疏程度的嵌套层级结构典型形态包括金字塔Pyramid与同心圆Concentric。读完本文你将掌握该布局的结构规则、两种变体的选择方法、视觉要素与文字排布规范、推荐风格搭配并了解它如何被整合进该技能的完整工作流从内容分析到提示词生成——实现选定布局 → 生成专业提示词 → 产出可发布信息图的闭环。布局定位什么是 hierarchical-layers在 baoyu-infographic 中每个信息图都由两个维度决定layout信息结构× style视觉美学任意 layout 与任意 style 都可以自由组合。hierarchical-layers正是布局画廊Layout Gallery中面向层级类内容的专门布局。在 SKILL.md 的 Layout Gallery 中它的定位被概括为hierarchical-layers— Pyramids, priority levels金字塔、优先级层级它与同画廊中的其他布局形成明确分工tree-branching负责分类/类目树hub-spoke负责中心概念辐射structural-breakdown负责分解视图而hierarchical-layers专攻由核心到外围、自上而下的嵌套分层。在 analysis-framework.md 的内容类型分类表中Hierarchy层级类型的内容被推荐使用hierarchical-layers或tree-branching布局配合craft-handmade、corporate-memphis风格——这说明该布局是内容分析框架中层级结构数据的官方首选映射。结构规则从核心到外围的嵌套分层根据 hierarchical-layers.md该布局的核心结构约束如下多层嵌套从核心延伸到外围整个信息图由多个层级构成从中心/顶部向外/向下逐层展开核心/顶层承载最重要、最中心的内容最重要的概念放在最核心金字塔顶部或同心圆中心的位置外层/底层重要性递减越往外围、越往底层内容的重要性或影响力依次降低典型层级数为 37 层太少无法体现层次感太多则视觉拥挤、可读性下降层级之间边界清晰每层必须有明确的视觉边界不能含糊地融在一起。这 5 条规则共同保证了信息架构的严谨性读者一眼就能判断出内容的相对优先级这正是层级类信息图的价值所在。两种核心变体Pyramid 与 Concentrichierarchical-layers.md 明确规定了该布局的两种官方变体二者在形状与视觉强调上截然不同变体形状视觉强调Pyramid金字塔三角形垂直自上而下的层级、数量关系Concentric同心圆圆环放射状自中心向外的影响力、亲疏程度Pyramid 变体采用下宽上窄的三角形堆叠底层最宽通常对应数量最多、最基础的要素顶层最窄数量最少但层级最高。它擅长表达基础 → 高层的递进关系与数量递减关系。最典型的应用就是马斯洛需求层次Maslows hierarchy生理需求在最底层最宽自我实现在最顶层最窄。Concentric 变体采用嵌套圆环最核心的圆环承载中心概念越往外环内容与核心的关系越疏远。它强调自中心向外的影响辐射与亲疏程度比如影响力圈层Circle of Control → Circle of Influence → Circle of Concern、利益相关者分析等。最佳适用场景哪些内容该用层级分层布局hierarchical-layers.md 给出了 5 类最适合该布局的内容马斯洛需求层次风格的概念多层递进、层层支撑的经典层级模型优先级与重要性分级需要明确区分核心/重要/次要的内容影响力圈层Spheres of influence以个人或组织为中心向外辐射影响范围组织结构公司、团队的层级结构从最高管理层到执行层利益相关者分析按对项目的影响程度/亲疏关系对相关方分级。在 analysis-framework.md 的视觉机会映射Visual Opportunity Mapping表中Hierarchies层级类内容对应的视觉处理方式被明确为Pyramids, layers, size differences金字塔、分层、尺寸差异——这与 hierarchical-layers 的视觉要素完全一致说明该布局正是把分析阶段的层级视觉机会落地的标准容器。视觉要素如何让层级一眼可辨hierarchical-layers.md 规定了 5 项核心视觉要素每个层级使用独立颜色不同层级用不同色相区分避免相邻层级撞色每层配图标或插画用图标强化每层内容的语义降低阅读负担尺寸表示重要性/数量层级的大小金字塔的宽度、圆环的半径与重要性或数量成正比标签放在层内或层旁层级名称可直接置于层内也可以放在层外一侧并辅以引线装饰性的顶端/中心元素金字塔顶部或同心圆中心可放置一个醒目的装饰元素如皇冠、核心图标强化焦点感知。下面两张来自仓库screenshots/infographic-layouts/的真实生成截图可以直观印证上述结构规则与视觉要素金字塔变体的典型呈现——底层最宽生理需求逐层收窄至顶层自我实现每层独立配色、层内居中放置大字号标题并辅以图标是自上而下层级 数量关系的教科书案例同心圆变体的典型呈现——以核心CORE: SELF为圆心向外依次嵌套控制圈、影响圈、关注圈颜色由内向外扩散配合箭头与图标强化中心向外辐射的亲疏层级此外仓库还提供了一张层级堆叠式技术栈分层的参考截图同样属于层级表达的可选形态文字排布层级信息的标注规范hierarchical-layers.md 对文字位置给出了 5 条明确规范标题置于顶部或侧边整张图的标题不与层级争抢视觉焦点固定在顶部或侧边层级名称放在每一层内部每层的名称直接标注在对应层级区域内简要描述放在层外每层的补充说明文字放在层级外侧如金字塔两侧、同心圆外环周围避免挤压层内主体如相关标注数量或百分比层级若涉及数量/占比如各层人数、资源占比以数字形式明确标出提供图例说明颜色含义当用颜色编码层级时必须配套图例确保颜色语义可被准确解读。这套规范可以在 structured-content-template.md 的For Hierarchy层级类内容章节模板中找到对应实现。该模板要求每个层级单独成一个 Section并严格输出PositionTop/Middle/Bottom该层在层级中的位置Priority该层的优先级Contains该层包含的要素Visual ElementType: layer/tier并说明该层相对其他层的 Size 与 PositionText Labels层标题Level title与描述Description的精确文案。这意味着在生成阶段每个层级的文案、位置、尺寸关系都会以结构化数据传入提示词而非让模型自由发挥。推荐风格搭配三类内容的组合建议hierarchical-layers.md 结尾给出了 3 组官方推荐搭配craft-handmade适合俏皮、亲切的层级概念如儿童向内容、科普层级corporate-memphis适合商业层级组织架构、优先级矩阵technical-schematic适合技术性 3D 金字塔系统架构层级、工程分解。三组搭配与 SKILL.md 的 Recommended Combinations 表相互印证——该表将Hierarchy类内容整体推荐为hierarchical-layerscraft-handmade同时 analysis-framework.md 也把 Hierarchy 类型的推荐风格列为craft-handmade, corporate-memphis三者完全一致。搭配时的风格语义可参考仓库中的风格定义文件craft-handmade.md默认风格手绘 纸张拼贴美学暖色调、有机且略带不完美的手绘线条适合教育内容与俏皮层级——注意它强调严格手绘不得出现写实或照片元素corporate-memphis.md扁平矢量人物 鲜艳几何填充紫、橙、青、黄无描边实色填充适合商务演示与组织架构technical-schematic.md工程制图精度主色蓝#2563EB 琥珀高亮#F59E0B支持 Blueprint蓝图与 Isometric等距 3D两个变体适合技术 3D 金字塔。实战集成如何让层级布局真正生成信息图hierarchical-layers 不是独立存在的一张示意图而是 baoyu-infographic 七步工作流中的一环。要实际产出一张层级信息图需要走完 SKILL.md 定义的核心流程Step 1 分析将源内容保存为source.md产出analysis.mdanalysis-framework.md 中的 Content Type Classification 会在此时识别内容是否为 Hierarchy 类型并给出hierarchical-layers的布局建议Step 2 结构化内容按 structured-content-template.md 的 For Hierarchy 模板把每个层级拆解为 Position / Priority / Contains / Text Labels写入structured-content.mdStep 3 推荐组合基于数据结构和内容语气推荐 35 组 layout×style 组合层级内容优先给hierarchical-layers 上述三种风格之一Step 4 确认按 Confirmation Policy 与用户确认组合、宽高比、语言与后端Step 5 生成提示词将布局定义即本 hierarchical-layers.md 的全文、风格定义、base-prompt.md 基础模板与结构化内容合并为prompts/infographic.md。在 base-prompt.md 中{{LAYOUT}}会被替换为hierarchical-layers{{LAYOUT_GUIDELINES}}会被替换为本布局文档的完整结构规则——也就是说本文介绍的每一条层级规则都会原样进入最终图像提示词Step 6 生成图片按 Image Generation Tools 规则解析后端如codex-imagegen调用图像生成后端输出infographic.png。若走 codex-imagegen.md 的路径可用baoyu-image-gen --provider codex-cli传入提示词文件与输出路径并可追加--ref参考图来约束构图宽高比按--aspect解析landscape→16:9、portrait→9:16、square→1:1或自定义如3:4。与其他层级类布局的边界为帮助你在实战中做出准确选择这里补充 hierarchical-layers 与画廊中两个相近布局的区分依据 SKILL.md 的 Layout Gallery 定义布局结构形态适用场景hierarchical-layers嵌套层/金字塔/同心圆强调核心→外围、重要性递减优先级、影响力、组织结构、利益相关者tree-branching树状分支自上而下展开类目分类体系、类目学taxonomiesstructural-breakdown分解视图、剖面爆炸图、横截面、组件拆解简单来说内容存在等级/优先级关系时选hierarchical-layers内容只是并列分类时选tree-branching内容是物理/结构拆解时选structural-breakdown。这三者对应 analysis-framework.md 中 Hierarchy、System/Structure 两类内容类型的差异化布局映射。小结hierarchical-layers是 baoyu-infographic 面向层级类内容的专用布局以37 层、核心到外围、层级边界清晰为结构骨架以Pyramid自上而下、强调数量与优先级和Concentric自内向外、强调影响力与亲疏为两种官方变体配套每层独立配色 层内标签 层外描述 图例的视觉与文字规范。配合craft-handmade、corporate-memphis、technical-schematic三种推荐风格它可以覆盖从教育科普、商业组织到技术架构的绝大多数层级表达需求而通过 baoyu-infographic 的七步工作流它最终会被完整注入 base-prompt.md 生成的提示词中交由图像后端产出成品信息图。【免费下载链接】baoyu-skills项目地址: https://gitcode.com/gh_mirrors/ba/baoyu-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考