十年匠心定制 · 商业建站与技术教学双线并行 咨询热线:400-886-1026 service@lmnt.cn
ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

OfficeCLI 打造工程蓝图风 Morph 演示:dark--blueprint-grid 风格从设计规范到可运行脚本

OfficeCLI 打造工程蓝图风 Morph 演示:dark--blueprint-grid 风格从设计规范到可运行脚本 人工智能AI 应用AI 技能CLIMCP 服务【免费下载链接】OfficeCLIOfficeCLI 是首款也是最佳的专为 AI 代理设计的命令行工具可用于读取、编辑和自动化处理 Word、Excel 和 PowerPoint 文件。它免费、开源仅包含一个二进制文件无需安装 Office 套件。项目地址https://gitcode.com/iOfficeAI/OfficeCLI点击查看免费下载本篇技术指南围绕 OfficeCLI 的 morph-ppt 技能中 52 种视觉风格库reference/styles之一的dark--blueprint-grid工程蓝图网格风格展开先解读其设计规范文档 style.md 中的配色、构图与排版原则再对照同目录下的完整可运行构建脚本 build.sh 逐条拆解officecli命令如何落地这些原则最后说明如何把它套用到你自己的 Morph 演示技术规划、系统架构类 PPT中。读完你将掌握蓝图风格的四色体系、网格线与坐标标记的绘制参数、以及如何把!!scene-*场景角色与 Morph 过渡结合生成一套连续动画的工程风格演示。一、风格定位什么是 Engineering Blueprint Griddark--blueprint-grid是 morph-ppt 技能 52 风格库中dark 暗色调系列的一员INDEX.md 中记录其主色三元组为#1B3A5C / #4A90D9 / #FFFFFF。它在快速查找表中被明确推荐给Developer / Technical场景风格描述为适用场景Scene技术规划Technical planning、工程蓝图engineering blueprints、系统架构system architecture气质Mood精确、专业、工程导向Precise, professional, engineering-oriented色调Color Tone深蓝底 白色网格线 金色点缀Deep blue white grid gold accents从设计哲学上讲它模拟的是工程制图时的蓝图图纸blueprint graph paper质感深色底作为图纸均匀的网格线作为坐标纸圆点/圆环作为坐标系上的关键节点。这与 morph-ppt 技能强调的场景演员Scene Actors机制天然契合——网格、标记点这类装饰性元素恰好适合以!!scene-*前缀命名、跨页保持同名以驱动 Morph 插值动画见 SKILL.md §What is Morph?。二、四色配色体系与使用规范style.md给出了严格的四色体系每一色都有明确用途分工这是整套风格最核心的可复用资产色名Name十六进制Hex用途UsageDeep Blue深蓝1B3A5C背景BackgroundBright Blue亮蓝4A90D9高亮色、标题Highlight color, titlesWhite白FFFFFF网格线、正文Grid lines, body textGold Warning金色警示E8C547警示标记、CTA 按钮Warning markers, CTA buttons在 build.sh 的实际实现中配色体系被进一步扩充为五个变量构成了暗色舞台上完整的三层色彩层级# Colors BG1B3A5C # 深蓝背景 BLUE4A90D9 # 亮蓝网格主线、标题、数据强调 WHITEFFFFFF # 白正文、网格线 LIGHT_BLUEB8D0E8 # 浅蓝次级说明文字比主蓝更柔和的辅助层 OVERLAY2C5F8A # 叠加色卡片/数据块底色配合低透明度使用这套结构呼应了 pptx-design.md §1 中的三层色彩深度原则背景填充最弱→ 场景演员中→ 内容文字/数据/KPI最强。注意OVERLAY这一辅助色在style.md的官方四色表中没有出现但它是实现低透明度叠加块的关键——style.md要求的所有形状使用低透明度叠加以保持蓝图层次正是通过它配合opacity参数实现的。对比度校验由于蓝图风格采用深色背景#1B3A5C按 pptx-design.md §1 的亮度公式Brightness (R × 299 G × 587 B × 114) / 1000计算其亮度约为 46 128判定为暗背景因此正文必须使用高亮度色#FFFFFF、#B8D0E8均满足正文亮度 ≥ 80%的硬性要求而金色#E8C547只用于警示标记和 CTA 按钮这类点缀性元素避免大面积高亮破坏蓝图底色。三、四项核心设计技法Design Techniquesstyle.md用四条原则概括了该风格的全部视觉手段build.sh为其提供了逐条可运行的命令级佐证1. 用 rect 绘制等距网格线模拟蓝图坐标纸style.md原文要求Use rect to draw evenly spaced horizontal/vertical grid lines (opacity 0.25), simulating blueprint graph paper。在 build.sh 中网格线用细长矩形实现横向网格线宽 34cm、高 0.02cm纵向网格线宽 0.02cm、高 19.05cm正好等于画布高度画布为 morph-ppt 统一的 33.87 × 19.05cm见 SKILL.md §Grid math。以首屏横向网格线为例officecli add $OUTPUT /slide[1] --type shape \ --prop name!!grid-h1 \ --prop fill$WHITE \ --prop opacity0.25 \ --prop x0cm --prop y4cm --prop width34cm --prop height0.02cm四个横向网格线!!grid-h1~!!grid-h4的 y 坐标依次为 4cm、8.5cm、13cm、17.5cm四根纵向网格线!!grid-v1~!!grid-v4的 x 坐标依次为 6cm、12cm、22cm、28cm形成近似等距的坐标纸密度。这些网格线全部以!!前缀命名是典型的!!scene-*场景装饰角色——按 SKILL.md 的三前缀命名系统它们属于跨整份演示持续存在、极少被 ghost的装饰层。2. 用 ellipse 做定位标记点暗示坐标系关键节点style.md要求Use ellipse as positioning marker points, suggesting key nodes in a coordinate system。build.sh实现了两类椭圆标记实心圆点dotspresetellipsefill$BLUEopacity0.70.5cm × 0.5cm如!!dot1、!!dot2、!!dot3散布在网格交叉点附近如首屏!!dot1位于 x5.75cm, y3.75cm紧贴!!grid-v1与!!grid-h1的交点扮演坐标系上的数据节点空心圆环ringspresetellipsefill$BGline$WHITElineWidth0.75ptopacity0.61.2cm × 1.2cm如!!ring1、!!ring2是比圆点更高一级的结构锚点。# 圆点填充亮蓝半透明模拟坐标节点 officecli add $OUTPUT /slide[1] --type shape \ --prop name!!dot1 \ --prop presetellipse \ --prop fill$BLUE \ --prop opacity0.7 \ --prop x5.75cm --prop y3.75cm --prop width0.5cm --prop height0.5cm # 圆环镂空底填充 白色描边模拟工程图上的结构锚点 officecli add $OUTPUT /slide[1] --type shape \ --prop name!!ring1 \ --prop presetellipse \ --prop fill$BG \ --prop line$WHITE \ --prop lineWidth0.75pt \ --prop opacity0.6 \ --prop x11.4cm --prop y12.4cm --prop width1.2cm --prop height1.2cm3. 低透明度叠加维持蓝图层次All shapes use low transparency overlay to maintain blueprint hierarchy。build.sh中透明度被刻意分为三档与 pptx-design.md §1 的场景演员透明度规范完全对齐元素opacity 取值语义网格线!!grid-*0.2 ~ 0.25整页装饰最弱层级绝不与内容抢注意力主线!!major-h/!!major-v0.45 ~ 0.5比普通网格略重划分版面主次圆点!!dot*0.7坐标节点需清晰可见卡片/数据块背景#s3-box*-bg/#s4-bg*0.12 ~ 0.4内容衬底0.12 用于多栏卡片0.3~0.6 用于数据证据块此外还有一类**主线major lines**元素值得注意!!major-h34cm × 0.04cm与!!major-v0.04cm × 19.05cm以亮蓝$BLUE填充比白色网格更粗更醒目充当版面分割线或坐标轴主线是网格层与内容层之间的过渡层级。4. 等宽字体 粗体无衬线字体强化工程制图感style.md要求Typography uses monospace or bold sans-serif fonts to reinforce engineering drafting aesthetic。build.sh中贯彻为两套字体分工Courier New等宽字体用于标题、数据数字、CTA——包括#s1-title56pt bold、#s2-statement48pt bold、#s4-num172pt bold数据 10,000、#s5-title52pt bold。等宽字体的每个字符等宽视觉上像机器打印/工程标注是制图感的主要来源Inter无衬线用于次级说明文字——#s1-tag、#s2-desc、各卡片描述、数据标签保证长文本的可读性。注意build.sh 中的字号56/48/36/22/18/16pt同时满足 morph-ppt 的舞台级字号下限正文不低于 13pt、标题 54~72pt 档见 pptx-design.md §2说明风格脚本与技能的视觉交付底线是兼容的。四、从 style.md 到成品五页脚本逐屏拆解style.md在 Reference Script 一节明确指出Full build script available inbuild.sh并建议重点阅读Slide 1hero网格线绘制方法与布局间距和Slide 3pillars多栏布局 网格对齐排版两页来理解核心技法。以下对照 build.sh 完整梳理五页结构Slide 1 — Hero 封面页页面骨架layoutblankbackground$BG的空白深蓝画布然后按网格线 → 主线 → 圆点/圆环 → 文字内容的固定顺序添加形状这个顺序也决定了每个 slide 内 shape 的索引顺序符合 pptx-design.md §5 的 Shape Index 机制。内容层采用左对齐排布主标题#s1-titleAI Agent PlatformCourier New 56pt bold 白色x2.4cm, y4.8cm、副标题#s1-subtitle亮蓝 36pt、标签行#s1-tag浅蓝 18pt。文字框均fillnone不与网格线争抢层次。officecli add $OUTPUT / --type slide --prop layoutblank --prop background$BG officecli add $OUTPUT /slide[1] --type shape \ --prop name#s1-title \ --prop textAI Agent Platform \ --prop fontCourier New \ --prop size56 \ --prop boldtrue \ --prop color$WHITE \ --prop alignleft \ --prop valignmiddle \ --prop fillnone \ --prop x2.4cm --prop y4.8cm --prop width24cm --prop height3cmSlide 2 — Statement 观点页在add新 slide 之后立刻officecli set $OUTPUT /slide[2] --prop transitionmorph开启 Morph 过渡。关键手法是所有!!前缀场景角色网格线、主线、圆点、圆环在第二页以同名重新添加但坐标全部改变——例如!!grid-v1从 x6cm 移到 x4cm!!dot1从 (5.75, 3.75) 移到 (9.75, 6.25)!!ring1从 (11.4, 12.4) 移到 (3.4, 14.9)。这正是 SKILL.md §What is Morph? 的核心机制Morph 引擎按相邻两页间完全相同的name配对形状并插值其位置/尺寸/填充。网格线整体平移产生了图纸视角移动的连续动画感。内容层则使用新的#s2-*前缀#s2-statement居中 48pt bold、#s2-desc18pt 浅蓝形成场景连续、内容翻新的节奏。Slide 3 — Pillars 三支柱页style.md 推荐的必读页这一页演示了多栏布局 网格对齐排版。三张卡片以等宽布局横向排开officecli add $OUTPUT /slide[3] --type shape \ --prop name#s3-box1-bg \ --prop fill$OVERLAY \ --prop opacity0.12 \ --prop x1.2cm --prop y4.2cm --prop width9.8cm --prop height12.6cm # box2-bg: x12.2cmbox3-bg: x23.2cm三卡宽度均 9.8cm间距 1.2cm三张卡片 x 坐标分别为 1.2 / 12.2 / 23.2cm宽度均 9.8cm间距恒定 1.2cm完全符合 morph-ppt 继承自 pptx v2 的网格数学col (33.87 − 2·margin − (N−1)·gap) / N见 SKILL.md §Inherited from pptx v2。每张卡片由三层形状叠加-bg衬底OVERLAY 色 opacity0.12→-titleCourier New 22pt bold 亮蓝→-descInter 16pt 浅蓝lineSpacing1.5的项目符号列表。注意这一页的网格线 opacity 降为 0.2比 hero/statement 页更淡——因为多栏内容需要更强的可读性装饰层进一步退后。Slide 4 — Evidence 数据页不对称双数据块布局左侧大块#s4-bg113×14.5cmopacity0.4承载两组大数字#s4-num110,000 72pt 白、#s4-num299.95% 52pt 亮蓝右侧小块#s4-bg214×6cmopacity0.3承载两组小数据#s4-num33.2x 48pt、#s4-num460s 44pt。数据数字全部使用 Courier New bold且关键数据用亮蓝$BLUE强调99.95%、60s次要数据用白色——这是金色警示之外的数据层级用法符合 pptx-design.md §1 中证据/数据衬底 opacity 0.3~0.6的建议区间。Slide 5 — CTA 收尾页回归居中构图#s5-title52pt bold 白、#s5-actionsCourier New 22pt 亮蓝行动项、#s5-urlInter 16pt 浅蓝。场景角色!!grid-*、!!major-*、!!dot*、!!ring*再次以新坐标出现如!!grid-v1x7cm、!!dot2(26.75, 11.75)保持整份演示从第一页到最后一页的视觉连续性。补充说明style.md四色表中的Gold Warning#E8C547在 build.sh 中并未实际用于文本或 CTACTA 使用了亮蓝$BLUE它更多是作为该风格的扩展弹药存在——当你需要警示标记如审计告警、风险提示或真正的高亮 CTA 按钮时可在自己的版本中启用。这是从 style.md 与 build.sh 的对照中可以观察到的细节。五、Morph 视角这套脚本如何驱动连续动画把build.sh放进 morph-ppt 的框架里看它的动画设计非常有代表性全部装饰元素都是跨页同名配对!!grid-h1~!!grid-v48 个、!!major-h/!!major-v2 个、!!dot1~!!dot33 个、!!ring1/!!ring22 个共 15 个!!scene-*场景角色在全部 5 页中以同名反复出现、逐页改变坐标。这满足 SKILL.md §Spatial variety rule 的相邻页位移 ≥ 5cm要求——例如!!dot1在 Slide 1→2 从 (5.75, 3.75) 移至 (9.75, 6.25)位移超过 5cm内容层使用#sN-*前缀逐页刷新#s1-*、#s2-*…#s5-*每页独立命名Morph 对它们不做配对文字内容每页都变配对无意义以交叉淡入淡出呈现网格整体平移制造镜头跟随效果所有横纵网格线在页与页之间同步换位如 Slide 1 纵线在 6/12/22/28cmSlide 2 变为 4/10/20/30cm观感上如同一张蓝图在镜头下被平移查看——这正是 SKILL.md §Morph Recipes 模式 (b) 描述的场景角色重定位 镜头摇移camera pan效果。如果你想把这套脚本改造成连续多页动画的更长演示建议参考 morph-helpers.py 提供的clone/ghost/verify/final-check四个命令用克隆上一页 → ghost 掉旧#s(N-1)-*内容 → 添加新内容的节奏来扩展避免手写 60 条命令。六、如何把该风格套用到你自己的演示正确用法style.md所在的 52 风格库在 SKILL.md §Style library lookup workflow 中被明确定义为按需查阅的设计参考design inspiration而非可直接复制的模板。将其落地到你自己的项目时请遵循以下流程选风格先在 INDEX.md 的主色 hex 列扫一遍确认dark--blueprint-grid#1B3A5C / #4A90D9 / #FFFFFF与你的主题气质或品牌色最接近读哲学阅读 style.md 理解设计意图本文已完整展开看技法打开 build.sh仅提取技法——四色/五色变量、网格线 rect 参数、圆点/圆环 ellipse 参数、等宽字体选择在自己的画布上重建用 pptx v2 的网格数学 视觉交付底线标题 ≥ 36pt / 正文 ≥ 18pt、边距 ≥ 1.27cm、块间距 ≥ 0.76cm、留白 ≥ 20%重新排布只借用色板与标志性手法绝不照抄坐标。关于第 3、4 步有一条重要警告INDEX.md第 5-11 行明确说明风格库中的build.sh坐标是针对各自演示内容手工调校的存在文字重叠、排版错位等已知问题——dark--blueprint-grid的 build.sh 演示了AI Agent Platform这一特定内容直接把它套到内容长度不同的演示上必然产生重叠。这也是为什么 style.md 只让你skim 2-3 页代表性的 slide理解技法而不是照抄整份脚本。套用时的最小改动清单把蓝图风格搬到你的技术架构演示背景--prop layoutblank --prop background1B3A5C网格层8 根!!grid-*rect横向 34×0.02cm、纵向 0.02×19.05cmopacity0.25间距约 4.5~6cm坐标在每页微调以获得 Morph 位移节点层2~3 个!!dot*椭圆0.5cmopacity0.7 1~2 个!!ring*圆环lineFFFFFFlineWidth0.75pt放在网格交叉点附近文字层标题/数据用fontCourier New bold正文用fontInter标题亮蓝或白、正文浅蓝B8D0E8每页add新 slide 后记得officecli set $OUTPUT /slide[N] --prop transitionmorphSlide 2 起否则 Morph 会静默退化为淡入淡出。七、落地运行与验证构建与验证流程与其他 morph 演示完全一致# 1. 创建并构建build.sh 内部完成 create / add / set / validate 全流程 bash skills/morph-ppt/reference/styles/dark--blueprint-grid/build.sh # 2. 结构级验证脚本末尾已执行 officecli validate dark__blueprint_grid.pptx # 3. 大纲检查 officecli view dark__blueprint_grid.pptx outline如需在自己的演示中做 morph 专用验证同名配对、ghost 泄漏、位移量检查可参考 SKILL.md §Delivery Gate 的 5b-morph-1~4 检查循环或直接使用 morph-helpers.py 的verify与final-check后者还会检测 x≥34cm 的 ghost 形状堆积。另外提醒Morph 动画属于运行时特性需在 PowerPoint 365 / Keynote / WPS 中查看LibreOffice 与多数 Web 查看器只会显示静态或普通淡入淡出详见 SKILL.md §Renderer honesty。结语dark--blueprint-grid风格文档虽然短小但它把工程蓝图这一美学意象压缩成了高度可复用的四条技法与四色体系深蓝背景、白色网格、亮蓝主线、等宽字体。通过与 build.sh 的对照你可以清楚看到每一条设计原则如何翻译为一条具体的officecli命令以及这些!!前缀场景角色如何天然适配 Morph 的跨页同名配对机制。掌握了这套读 style.md 取哲学、读 build.sh 取技法、在自己的画布上重建的工作流你就能为任何技术规划、系统架构类演示快速产出专业且带连续动画的工程蓝图风格 PPT。赞分享人工智能AI 应用AI 技能CLIMCP 服务【免费下载链接】OfficeCLIOfficeCLI 是首款也是最佳的专为 AI 代理设计的命令行工具可用于读取、编辑和自动化处理 Word、Excel 和 PowerPoint 文件。它免费、开源仅包含一个二进制文件无需安装 Office 套件。项目地址https://gitcode.com/iOfficeAI/OfficeCLI点击查看免费下载相关推荐OfficeCLI Morph-PPT 风格实战用 dark--architectural-plan 打造建筑蓝图式演示文稿OfficeCLI Morph PPT 风格实战用 dark architectural plan 打造建筑蓝图式演示文稿 导读 本文讲解 OfficeCL人工智能AI 应用AI 技能CLIMCP 服务OfficeCLI Morph-PPT 深海军蓝风格dark--premium-navy设计规范与实现指南OfficeCLI Morph PPT 深海军蓝风格dark premium navy设计规范与实现指南 本篇技术指南以 OfficeCLI 仓库中 mor人工智能AI 应用AI 技能CLIMCP 服务用 OfficeCLI Morph-PPT 打造 dark--circle-digital 暗色数字创意 Agency 风格演示用 OfficeCLI Morph PPT 打造 dark circle digital 暗色数字创意 Agency 风格演示 本指南以 skills/morp人工智能AI 应用AI 技能CLIMCP 服务创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表