baoyu-infographic 技术示意图风格指南用 technical-schematic 打造工程级信息图【免费下载链接】baoyu-skills项目地址: https://gitcode.com/gh_mirrors/ba/baoyu-skills本指南以 baoyu-skills 仓库中baoyu-infographic技能的technical-schematic风格定义样式定义为核心系统讲解该风格的配色系统、Blueprint/Isometric 两种变体、视觉元素与排版规范并结合仓库中的布局定义、推荐组合与完整工作流说明如何在架构图、系统图、工程规格与数据可视化场景中落地使用。读完本文你将掌握该风格的完整设计参数、与其最匹配的布局组合以及如何通过--style technical-schematic在 baoyu-infographic 的七步工作流中稳定复现工程级信息图。上图是仓库screenshots/infographic-styles/目录下的风格样例截图展示了以深蓝底色、白色线条、全大写标注与尺寸线构成的典型蓝图风格信息图。风格定位工程精确性与干净几何technical-schematic技术示意图是 baoyu-infographic 的 22 种视觉风格之一其核心定位写在样式定义的开篇Technical diagrams with engineering precision and clean geometry具备工程精确性与干净几何的技术图表。这意味着该风格追求的不是装饰性的视觉表现而是图纸感——让信息图看起来像一张可以直接交付给工程师的技术文档。所有视觉决策线条、网格、标注、字体都服务于一个目标让结构与数据清晰、准确、可测量地呈现。在 SKILL.md 的 Style Gallery 中该风格被描述为 Blueprint, engineering蓝图、工程与ui-wireframe灰度界面线框、subway-map交通线路图同属类工程制图风格家族但侧重点不同ui-wireframe模拟软件界面原型subway-map强调拓扑线路而technical-schematic直接模拟工程图纸的精确制图语言。配色系统冷色基底 高亮点缀样式定义给出了明确的配色规则包含三组颜色角色颜色角色取值用途主色Primary蓝色系#2563EB、青色teals、灰色、白色线条图形主体、结构线条、信息分区背景Background深蓝#1E3A5F、白色、或带网格的浅灰三种可选画布蓝图深底、白底、浅灰网格底强调色Accents琥珀色高亮#F59E0B、青色标注cyan callouts关键部件、重点数据、提示性标注这套配色遵循工程制图的两条惯例蓝底白线深蓝背景配合白色/浅色线条复刻传统晒图blueprint的视觉效果是所有变体中最具辨识度的组合高亮对比琥珀与青色在蓝灰冷色基底上具有极高的对比度适合用于突出关键部件、异常值或需要引导视线的重要标注视觉模型对该风格样例截图的描述也印证了这一点——画面中关键区域如气缸缸径用高饱和色块强调其余结构保持统一的冷色线条。两种变体Blueprint 与 Isometric样式定义定义了该风格下的两种变体Variants分别对应二维图纸与三维空间两种呈现方式变体聚焦点视觉强调Blueprint蓝图工程示意图白线配蓝底、尺寸标注、网格背景Isometric等轴测三维空间呈现30° 角块体、干净填充色Blueprint 变体这是最经典的设计蓝图形态在深蓝或白底上绘制网格用等宽的白色/深色线条勾勒物体轮廓配以尺寸标注线与测量值。它的本质是把信息画成一张带标注的图纸。Isometric 变体采用等轴测视角典型为 30° 轴夹角将对象以三维块体呈现配合干净的纯色填充与浮动标签。这一变体与仓库中 isometric-map 布局 的一致等轴测角度30°约定完全同构——该布局文档同时将isometric-3d列为推荐搭配风格说明 isometric-map 布局天然适合承载等轴测类的三维示意。两种变体的选择取决于信息维度二维结构关系选 Blueprint空间布局与三维对象关系选 Isometric。视觉元素清单一套可复用的制图词汇样式定义列出六项核心视觉元素它们是该风格区别于其他 21 种风格的关键判据全图几何精度Geometric precision throughout——所有图形严格对齐、对称、按比例绘制网格背景或等轴测角度Grid pattern or isometric angle——画布必须有可参照的度量结构尺寸线与测量标注Dimension lines and measurements——像工程图纸一样标注长度、直径、角度技术符号与注释Technical symbols and annotations——使用箭头、基准线、截面符号、部件代号等制图语言干净的矢量形状Clean vector shapes——避免渐变、纹理、手绘笔触保持纯色与描边一致的描边粗细Consistent stroke weights——同类元素线宽统一营造仪器绘制的机械感。这套元素与 structural-breakdown 布局 的视觉要求高度互补该布局要求带引出线的标注标签Callout lines with dots/arrows、端点的标签框、编号部件、图层边界——技术示意图风格的尺寸线与技术符号恰好能把拆解图升维成一张带规格的部件图。排版规范全大写标注语言样式定义对文字的处理有明确约定字体技术模板字体technical stencil或干净的无衬线字体标签全大写All-caps labels模拟工程图纸的标注习惯测量注释尺寸、公差等以测量注释形式呈现等轴测浮动标签在 Isometric 变体中标签以浮动形式悬浮于块体上方。风格样例截图中可以直观验证这套规范标题 HOW ENGINES WORK、循环阶段 INTAKE / COMPRESSION / POWER / EXHAUST、系统名 FUEL INJECTION SYSTEM / IGNITION SYSTEM / LUBRICATION 全部采用全大写缸径 CYLINDER BORE 88.0mm、行程 STROKE 80.0mm 等以测量注释的形式直接标注在图形上。文字即图纸的一部分这是技术示意图风格最重要的排版原则。最佳适用场景样式定义在 Best For 一节明确了五类典型场景技术架构Technical architecture系统图System diagrams工程规格Engineering specs产品拆解Product breakdowns数据可视化Data visualization这些场景的共同特征是内容本身包含结构、部件、层级、测量值或精确数据需要以可读图、可对照的方式呈现。布局 × 风格推荐组合何时选 technical-schematictechnical-schematic的最佳落地方式是与合适的布局搭配使用。仓库中的多个权威来源给出了可交叉印证的推荐组合来自 SKILL.md 的 Recommended Combinations 表内容类型推荐组合Technical技术类structural-breakdowntechnical-schematicStep-by-steplinear-progressionikea-manual来自 analysis-framework.md 的内容分类推荐内容类型最佳布局最佳风格Process/Tutorial流程/教程linear-progression、winding-roadmapikea-manual、technical-schematicData/Metrics数据/指标dashboard、periodic-tablecorporate-memphis、technical-schematicCycle/Loop循环/回路circular-flowcraft-handmade、technical-schematicSystem/Structure系统/结构structural-breakdown、bento-gridtechnical-schematic、ikea-manual综合来看technical-schematic在仓库中承担的是严肃技术内容风格角色的定位推荐组合覆盖以下典型搭配structural-breakdowntechnical-schematic官方首推组合用于产品拆解、系统组件、设备解剖——用蓝图式的部件拆分 引出线标注呈现内部结构structural-breakdown 布局文档 也把technical-schematic列为第一个推荐配对isometric-map 等轴测风格三维空间关系、系统架构地图与 Isometric 变体天然契合布局定义dashboardtechnical-schematicKPI、性能指标等数据快照用制图语言的精确性承载数值布局定义linear-progressiontechnical-schematic分步流程、工作流文档用编号节点与流程线呈现时序逻辑布局定义。在 baoyu-infographic 工作流中启用该风格technical-schematic并非独立工具而是 SKILL.md 定义的 22 种风格之一通过标准参数在七步工作流中启用1. 命令行参数启用直接指定风格可在提问时通过参数传入--style technical-schematic配合布局与画幅--layout structural-breakdown --style technical-schematic --aspect landscape其中--aspect支持命名预设landscape (16:9)、portrait (9:16)、square (1:1)也支持自定义比例如3:4、2.35:1。2. 通过偏好配置固化默认值在EXTEND.md中将风格设为默认配置查找优先级与完整 schema 见 first-time-setup.md 与 preferences-schema.md--- version: 1 preferred_layout: structural-breakdown preferred_style: technical-schematic preferred_aspect: landscape language: zh preferred_image_backend: auto custom_styles: [] ---注意偏好配置只影响 Step 3 的推荐与 Step 4 的默认值永远不会绕过 Step 4 的确认环节见 SKILL.md 的 Confirmation Policy。3. 风格在提示词组装中的位置工作流 Step 5 会将四部分拼装为最终提示词并写入prompts/infographic.md布局定义references/layouts/layout.md、风格定义references/styles/style.md、基础模板base-prompt.md与第二步生成的结构化内容。technical-schematic的配色、变体、视觉元素与排版规范正是在此时以{{STYLE_GUIDELINES}}的形式注入基础模板## Image Specifications - Type: Infographic - Layout: {{LAYOUT}} - Style: {{STYLE}} - Aspect Ratio: {{ASPECT_RATIO}} - Language: {{LANGUAGE}} ... ## Style Guidelines {{STYLE_GUIDELINES}}基础模板还要求遵循统一的核心原则——严格按照布局结构组织信息架构、全图一致应用风格美学、保持信息简洁并突出关键词、留白充足、保持清晰视觉层级——这些原则与 technical-schematic 的干净几何要求相互强化。实战范例拆解一张发动机工作原理蓝图仓库screenshots/infographic-styles/technical-schematic.webp的风格样例恰好是 technical-schematic 各要素的完整示范。以它为蓝本可以拆解出一张合格技术示意图信息图应该具备的要素标题顶部中央全大写主标题如 HOW ENGINES WORK醒目且符合技术文档格式过程分区左侧用四幅小图两行两列呈现四冲程循环 INTAKE → COMPRESSION → POWER → EXHAUST活塞、连杆、曲轴的相对运动用线条动态呈现核心部件剖视中央为气缸剖视图直接标注 CYLINDER BORE 88.0mm、STROKE 80.0mm 等尺寸关键区域用强调色块突出系统回路右侧分别绘制燃油喷射系统、点火系统、润滑系统用简洁线条表示油路与电路连接统一标注语言所有标签全大写、字体一致、线条描边粗细统一深蓝网格底贯穿全图。这套结构直接印证了本文前面所有章节网格背景视觉元素、尺寸标注视觉元素 排版、全大写标签排版、高亮色块配色强调、多系统分区工程规格内容组织。实践要点与质量自检基于样式定义与SKILL.md 的输出规范落地使用该风格时建议对照以下清单配色约束主色限定在蓝/青/灰/白体系背景从深蓝、白色、浅灰网格三选一强调色仅用于琥珀与青色标注避免引入与工程图纸语境冲突的高饱和渐变几何纪律所有图形保持精确对齐与统一描边粗细使用网格或 30° 等轴测角度建立度量参照标注规范标签一律全大写尺寸值以测量注释形式直接标注等轴测变体使用浮动标签文字可读性提示词与生成图必须保证标签、标题、数值清晰可读若出现文字拼写错误、乱码或视觉过弱不得用代码修补位图应重写提示词文件并以新输出路径重新生成保留瑕疵候选用于对比后处理仅限裁剪、缩放、压缩与格式转换见 SKILL.md 的 Text correction policy数据保真风格负责怎么画数据完整性由工作流保证——analysis-framework.md 要求所有统计、引用与关键事实逐字保留如 88.0mm 不可写成 约 88mm技术术语不得简化替换。延伸阅读风格定义原文technical-schematic.md技能总入口22 种风格、21 种布局、完整工作流SKILL.md官方首推的拆解类布局structural-breakdown.md与 Isometric 变体匹配的空间布局isometric-map.md提示词组装基础模板base-prompt.md内容分析与风格决策方法论analysis-framework.md偏好配置首次设置流程first-time-setup.md【免费下载链接】baoyu-skills项目地址: https://gitcode.com/gh_mirrors/ba/baoyu-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考