baoyu-infographic bridge 布局实战用“跨桥结构”可视化问题到解决方案的转变【免费下载链接】baoyu-skills项目地址: https://gitcode.com/gh_mirrors/ba/baoyu-skills导读在 baoyu-infographic 技能Claude/Agent 环境下的信息图生成器位于 skills/baoyu-infographic/SKILL.md的 21 种布局Layout体系中bridge跨桥布局专用于呈现“从问题/现状到解决方案/目标”的跨越式叙事画面左侧是当前状态与问题右侧是期望状态与方案中间由一座带有支撑与踏板的桥横跨“鸿沟”把挑战转化为可逐步跨越的路径。读完本文你将掌握 bridge 布局的结构五要素、适用场景、视觉与文字编排规范、三种推荐风格搭配以及它在 baoyu-infographic 七步工作流内容分析 → 结构化内容 → 组合推荐 → 确认 → 提示词 → 出图 → 汇报中的完整落地方式。上图是仓库screenshots/infographic-layouts/中 bridge 布局的真实渲染示例画面以“FROM PROBLEM TO SOLUTION: BRIDGING THE GAP”为主题左侧是“CURRENT PROBLEM STATE”问题与混乱元素右侧是“DESIRED SOLUTION STATE”清晰、协作与成功元素中间一条索桥横跨标注着“Knowledge gaps / Resource constraints / Resistance to change / Technical hurdles”等挑战的峡谷桥面木板被编排成五步行动阶梯Discovery Research → Strategy Planning → Development Testing → Implementation → Monitoring Optimization直观展示了“桥面 方法步骤、峡谷 障碍挑战”的双重隐喻。布局定位bridge 在 21 布局矩阵中的角色baoyu-infographic 采用“布局信息结构× 风格视觉美学”两个正交维度任意布局可与任意风格自由组合见 SKILL.md。在 Layout Gallery 表格 中bridge被标注为Problem-solution问题—方案类型布局与linear-progression线性流程、binary-comparison二项对比、funnel漏斗等布局并列每个布局的完整定义存放在references/layouts/layout.md下bridge 的定义即 references/layouts/bridge.md。从文档定义看bridge 的核心定位是Gap-crossing structure connecting problem to solution or current to future state.一种跨越间隙的结构将问题连接到解决方案或将当前状态连接到未来状态。与binary-comparison的“左右并排对照”见 references/layouts/binary-comparison.md不同bridge 的左右两侧不是平行对比关系而是由一座物理化的“桥”在中间建立起因果转化关系——读者视线必须沿着桥从左走到右天然获得“从 A 到 B 需要过程与路径”的阅读顺序。结构五要素左右岸、桥体与鸿沟bridge.md 将布局拆解为五个组成部分它们是任何 bridge 信息图的信息架构骨架要素内容承担的角色左岸Left sidecurrent state / problem当前状态/问题叙事的起点、痛点呈现区右岸Right sidedesired state / solution期望状态/方案叙事的目的地、价值呈现区桥体Bridge element横跨间隙的主体结构连接两岸的视觉通道鸿沟Gapchallenge / obstacle挑战/障碍强调“跨越的必要性与难度”桥面元素Bridge elementssteps / methods步骤/方法将抽象方案具象为可执行路径这五要素对应到上文示例图中一一可验证左岸的乱麻、断齿轮、问号小人、堆积文件与雷雨云代表“混乱与低效”右岸的太阳、笑脸小人、握手与金宝箱代表“清晰与成功”中间的绳索桥是“桥体”桥下的峡谷与湍流是“鸿沟”五块彩色踏板则是“桥面元素”——每块木板就是一个方法步骤。建议内容组织者把每个方法论步骤浓缩为 36 个踏板踏板过多会挤占两岸空间破坏“两岸—桥”的层次对比。适用场景五类典型的“跨越式叙事”bridge.md 明确列出该布局的五个最佳应用方向Problem to solution journeys问题到解决方案的旅程——先罗列痛点再用方案路径逐一回应Current vs future state现状与未来对比——例如“现状手工流程 → 未来自动化平台”Gap analysis差距分析——识别当前能力与目标能力之间的鸿沟并给出弥合措施Transformation bridges转型桥梁——组织/业务/技术转型路线图Strategic initiatives战略举措——将战略目标拆解为有先后的执行阶梯。结合 references/analysis-framework.md 的内容类型分类表bridge 最匹配Process/Tutorial过程/教程与Journey/Narrative旅程/叙事两类素材凡是由“起点状态 → 方法步骤 → 终点状态”构成的线性因果内容都优先考虑该布局。若素材是纯双项并列对比如“A 产品 vs B 产品”应改用binary-comparison若是带里程碑的时间旅程winding-roadmap更合适。视觉元素规范两岸、鸿沟与桥的“画法”bridge.md 给出了五条可执行的美术指令Two distinct platforms/sides左右两侧必须是视觉上截然不同的“平台/岸”用底色、构图密度或色调区分“混乱的问题岸”与“明亮的方案岸”Visible gap or chasm两岸之间必须留出肉眼可见的间隙或深渊它不能只是一条分隔线而应具有“深度”让跨越显得有意义Bridge structure with supports桥体需要带支撑结构绳索、桥塔、立柱强化“工程感”与“稳固性”Icons representing each side每岸使用图标组表达语义左侧用警示、碎片、风暴类图标右侧用阳光、对勾、协作类图标Stepping stones or bridge planks桥面表现为踏脚石或木板每个元素承载一个步骤/方法。这些规范与 references/structured-content-template.md 中“Visual Element视觉元素— Type/Subject/Treatment”三字段描述方式直接对应生成结构化内容时应为每个章节明确写出“视觉元素类型icon/illustration/diagram、描绘对象如‘绳索桥跨过峡谷’、呈现方式如‘五个彩色踏板从左至右编号’”提示词工程阶段再把这些描述注入桥体结构指令。文字排版规范标题、两岸标签与鸿沟说明bridge.md 规定了文字在画面中的固定落位建议在生成提示词时原样保留Title at top主标题居中置于画面顶部如示例图 “FROM PROBLEM TO SOLUTION: BRIDGING THE GAP”Left labelFrom / Problem / Current左岸顶部给出状态标签如“Current Problem State / 现状问题”Right labelTo / Solution / Future右岸顶部给出目标标签如“Desired Solution State / 目标方案”Bridge elements labeled桥面每个踏板都要有独立文字标签步骤名 序号Gap description below鸿沟下方书写对挑战的文字描述如示例图中的 “Knowledge gaps / Resource constraints / Resistance to change / Technical hurdles”。文字数量上遵循 references/base-prompt.md 的通用约束信息保持精炼、突出关键词与核心概念、保留充足留白、维持清晰的视觉层级。两岸可用“段落式描述 若干关键词”桥面则用“短标签”避免在踏板上书写长句导致排版拥挤。风格搭配三种推荐组合与样式落地bridge.md 给出三组推荐风格推荐组合适用气质落地建议cartoon-hand-drawnFriendly journeys友好的旅程当前仓库样式目录未收录同名字文件可用同为手绘卡通风的默认风格craft-handmade见 references/styles/craft-handmade.md暖色蜡笔画、轻微不完美线条、纸艺质感替代示例图即此路线corporate-memphisBusiness transformations商务转型仓库已收录见 references/styles/corporate-memphis.md扁平矢量人物、高饱和紫/橙/青/黄、无描边实色填充适合企业战略与商业叙事isometric-3dTechnical transitions技术转型当前仓库样式目录未收录同名字文件可考虑用technical-schematic蓝图工程风或claymation3D 黏土风做近似落地需要说明的是bridge 文档中cartoon-hand-drawn、isometric-3d两个风格名并未出现在 SKILL.md 的 Style Gallery 22 种样式表 与references/styles/目录中可推断为早期命名或别名实际出图时应以当前样式库中可用的 22 个风格名为准。这些组合属于“推荐建议”并不会绕过确认流程——按 Confirmation PolicyAgent 在任何情况下都应在 Step 4 与用户确认组合、宽高比、语言与后端后才开始出图除非用户在请求中显式声明--no-confirm/“直接生成”等跳过确认措辞。实战工作流从素材到 bridge 信息图的完整链路在 baoyu-infographic 的七步工作流见 SKILL.md中bridge 布局的落地路径如下Step 1 分析与偏好加载检查 EXTEND.md项目 → XDG → 用户目录优先级并把源素材保存为source-{slug}.{ext}、分析结果写入analysis.md。按 analysis-framework.md 的内容类型分类把素材判定为“Process/Tutorial 或 Journey/Narrative”即可把 bridge 列入 Step 3 候选同时按 preferences-schema.md 支持preferred_layout: bridge来提升其在推荐中的优先级。Step 2 生成结构化内容按 structured-content-template.md 把每个目标拆成“Key Concept Content原文保留 Visual Element Text Labels”四字段桥面步骤按“Step N: [标题]”编号数据与引用必须逐字保留。Step 3 推荐组合对 bridge 布局给出 35 组布局×风格组合例如bridge corporate-memphis商务转型、bridge craft-handmade友好旅程、bridge technical-schematic技术过渡。Step 4 确认批量询问组合、宽高比landscape 16:9 / portrait 9:16 / square 1:1 或自定义如 3:4、语言与图像后端。Step 5 生成提示词将 bridge 布局定义上述结构/视觉/文字规范、风格定义与 base-prompt.md 模板合并写入prompts/infographic.md把{{ASPECT_RATIO}}解析为实际比例字符串模板要求遵循布局结构精确组织信息架构全篇保持风格一致性涉及敏感或受版权保护人物时创作风格化替代。Step 6 出图按 Image Generation Tools 规则 解析后端运行时原生工具优先如 Codeximagegen、CursorGenerateImage其次baoyu-image-gen多后端并存时询问用户失败自动重试一次已有infographic.png时先改名备份。注意禁止用 SVG/HTML 等代码渲染替代位图生成也禁止后期用程序覆盖画面文字。Step 7 汇报输出主题、布局、风格、宽高比、语言、后端、输出路径与生成文件清单。输出目录结构约定为infographic/{topic-slug}/source-{slug}.{ext}、analysis.md、structured-content.md、prompts/infographic.md与最终infographic.png见 Output Structure其中提示词文件是“可复现记录”便于日后切换后端而无需重写提示词。命令行选项与速查与 bridge 布局配合的 CLI 选项定义于 SKILL.md Options 表--layout bridge显式指定桥接布局默认bento-grid--style name从 22 种风格中选择默认craft-handmade--aspect landscape|portrait|square|W:H宽高比如16:9、9:16、1:1或自定义3:4--lang zh|en|ja|ko画面文字语言--no-confirm跳过 Step 4 确认仅当用户当前请求显式要求直接出图时使用--ref files...参考图按direct/style/palette三种模式影响出图。实操上凡遇到“现状 → 差距 → 方法步骤 → 目标”型内容技术债治理路线、系统迁移方案、个人/团队成长路径、战略落地拆解把--layout bridge作为首选推荐并按内容气质匹配合适风格即可快速产出专业、可发布的信息图。小结bridge 布局的核心价值在于把抽象的“问题—方案”关系空间化两岸承担状态陈述鸿沟具象化挑战的规模桥面把方案转化为有顺序、有数量的执行步骤。结合 baoyu-infographic 的分析框架、结构化内容模板与提示词模板它能够稳定生成“问题清晰、路径明确、目标可感”的高密度可视化作品。参考实现与全部定义文件位于 references/layouts/bridge.md完整布局体系见 SKILL.md。【免费下载链接】baoyu-skills项目地址: https://gitcode.com/gh_mirrors/ba/baoyu-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
