OfficeCLI Morph 风格实战：Neon Productivity 深色霓虹生产力演示模板全解析

• CLI
• AI 应用
• MCP 服务

本篇技术指南以 OfficeCLI 仓库中dark--neon-productivity视觉风格为绝对核心，系统拆解其设计哲学、7 色霓虹色板、7 页演示结构与 Morph 跨页动画的实现方式。你将在文中看到：该风格配套的 build.sh 如何用officecli create / add / batch / --from命令组合构建出一份带连续动画的.pptx，以及背景演员（scene actor）如何在页与页之间漂移、内容如何通过x=36cm幽灵位（ghost）实现退场。读完本文，你可以直接基于这套风格复刻或改造出自己的生产力类 Morph 演示。

一、风格定位：Neon Productivity 是什么

根据 style.md 的官方定义，Neon Productivity（霓虹生产力）是一套「充满能量的深色主题」（Energetic Dark Theme）：以深海军蓝画布为底，叠加多色霓虹点缀与有机流体感的 blob 形状元素，专为「信息密度较高、需要保持视觉活力」的整页演示而设计。

• 适用场景（Scenario）：生产力主题演讲（Productivity talks）、技术工作坊（tech workshops）、动机 / 自我提升内容、创业路演（startup pitches）。
• 氛围（Mood）：充满能量、现代、生产力导向、鲜艳活力。
• 基调（Tone）：深海军蓝底 + 多色霓虹点缀。

在 INDEX.md 的 52 套风格目录中，它被归入Dark Palette组，Quick Lookup 表中「Productivity / Motivation」场景的推荐条目正是dark--neon-productivity与dark--cyber-future，其索引登记的三原色三元组为bg / fg / accent = #0B0F1A / #2BE4A8 / #FFB020，与 style.md 的色板完全一致。

二、色板详解：深底 + 四色霓虹的系统化用法

style.md 给出了完整 7 色色板，这是整套风格的「颜色宪法」，务必逐项继承：

在成品构建脚本 build.sh 中可以看到这 7 色的具体落位（如background=0B0F1A、bg-blob-1填充2BE4A8、bg-blob-2填充FFB020、bg-slab填充5B6CFF、bg-dot填充FF4D6D），说明主色#2BE4A8承担约六成视觉重量，橙 / 蓝紫 / 粉三色只以低透明度（opacity 0.05–0.18）作为氛围层出现，正文一律#FFFFFF/ 次级文字#B9C6D6/ 弱文字#7F93AA（后两者是#B0B8C8的实战化变体）。

这套深色底 + 霓虹点缀的用法与 Morph 设计规范 pptx-design.md 中的对比度铁律相互印证：深色背景（亮度 < 128）上正文亮度必须 ≥ 80%，该文件给出了可复算的亮度公式Brightness = (R × 299 + G × 587 + B × 114) / 1000——#0B0F1A亮度极低，因此正文必须用#FFFFFF、#CADCFC这类高亮色，这正是本风格正文全部为白色的底层原因。同时，pptx-design.md 规定了 morph 舞台风格的三层颜色层级：

背景填充 → 场景演员 → 内容（文字 / 数据 / KPI） （最弱） （中等） （最强）

配套的透明度区间也直接对应到 build.sh 的取值：≤ 0.12用于全片装饰（本风格背景 blob 的 0.05–0.10 正属此类）、0.3–0.6用于证据 / 数据背板。注意 build.sh 中eviA-bg / eviB-bg / eviC-bg三个证据卡使用了#102A2C / #2C2310 / #2C1020三个低亮度色相底 + 对应霓虹描边（line=2BE4A8 / FFB020 / FF4D6D），属于在深色画布上再叠一层深色卡片的处理，靠描边而非填充来传达色彩信息。

三、字体方案

style.md 的字体表非常简洁，中文环境使用单一字体家族：

在 build.sh 中，所有文本形状均显式声明"font":"PingFang SC"，并在每个形状上显式设置字号（hero 主标题 72pt、陈述页主句 56pt、章节标题 36–40pt、卡片标题 28pt、说明文字 16pt、弱注释 14pt），未依赖主题继承——这与 officecli-pptx 的「显式字阶，勿依赖主题默认值」要求一致（标题 ≥ 36pt、正文 ≥ 18pt、标题 ≥ 2×正文）。其中hero-title72pt /hero-subtitle36pt /hero-tagline18pt 恰好满足标题 ≥ 2×正文的视觉递进。若需中英混排，pptx-design.md 推荐 Montserrat + 思源黑体（Source Han Sans）作为形态舞台的备选方案。

四、设计技法清单

style.md 列出的设计技法可以逐条在 build.sh 中找到对应实现：

• Blob-shaped scene actors（流体 blob 场景演员）：bg-blob-1（preset=ellipse，14×14cm，2BE4A8）、bg-blob-2（12×12cm，FFB020）在每页以不同位置、尺寸、透明度出现，是「有机感」的来源。
• 多色霓虹点缀（绿、橙、蓝、粉）：2BE4A8 / FFB020 / 5B6CFF / FF4D6D四色贯穿全片背景与强调元素。
• Slab 与 chip 装饰块：bg-slab（roundRect，蓝紫，带rotation=10）与bg-chip（roundRect，橙色）提供硬朗几何对比。
• 7 页完整结构 + 时间线：第 4 页 timeline 是色彩编码系统的演示核心（详见第六节）。
• Ring 与 dot 小点缀：bg-ring（ellipse，fill=000000近透明 +line=2BE4A8霓虹描边）与bg-dot（1.4cm 粉色圆点）。
• 深色背景 + 霓虹高对比：整片#0B0F1A画布衬托霓虹色。

五、7 页页面结构：一页一型，节奏递进

style.md 明确规定了 7 页版式序列，每页 41 个元素（该数字为 style.md 记录的版本；build.sh 中各页因克隆继承与新增内容不同，实际 shape 数量在 51–56 之间递增）：

这一序列与 decision-rules.md 中problem_solution叙事结构（hero → statement → pillars → evidence → cta）高度吻合，实际又穿插了 timeline 与 quote 两页作为节奏调节。这套 7 页结构正好落在 decision-rules.md 推荐的「标准演示 5–8 页」区间内。

六、从 build.sh 看完整实现：Morph 演员系统与幽灵位机制

该风格配套的构建脚本 build.sh 是理解整套实现的关键。脚本整体流程为：officecli create建文件 → 第 1 页完整布局 → 后续每页officecli add --from '/slide[N]'克隆上一页 → 用officecli batch批量set重定位。其核心机制可归纳为三条：

1. 背景演员跨页漂移（Scene Actor 机制）

第 1 页的 8 个背景形状shape[1]–shape[8]（blob×2、slab、line×2、dot、ring、chip）在后续每一页都被set新的坐标、尺寸、填充与透明度。例如bg-blob-1从第 1 页的x=0cm, y=0cm, 14×14, fill=2BE4A8, opacity=0.10漂移到第 2 页的x=0cm, y=8cm, 16×16, fill=5B6CFF, opacity=0.08（对应shape[1]），再到第 3 页的12×12, opacity=0.06——这正是 Morph 的同名跨页配对插值：PowerPoint 依据相邻两页中name=完全一致的形状，自动插值其位置 / 尺寸 / 旋转 / 填充 / 透明度（参见 SKILL.md §What is Morph?）。第 6 页shape[5]与shape[8]被直接推到x=36cm，实现「退场」动画。

2. 内容预置幽灵位，逐页唤醒（Ghost 机制）

所有内容形状（标题、陈述、支柱卡片、时间线、证据、引言、CTA）在第 1 页创建时坐标全部预置为x=36cm（画布右缘之外，即幽灵位）。克隆到后续页后，仅把「本页需要的内容」set回可见区域。例如statement-main（shape[12]）从x=36cm唤醒到第 2 页的x=3.2cm, y=7.2cm，而第 3 页再把它推回x=36cm；同理pillars三栏（shape[14]–[23]）在第 3 页被唤醒，第 4 页全部推回x=36cm。这种「先幽灵、后唤醒」的模式就是 SKILL.md 强调的ghost discipline——不删除形状，而是移到画布外，让退场动画依然可播放。

3. 顺序索引 + 批量操作（Index Mechanics）

克隆页继承上一页全部形状后，新增内容从下一个索引号继续编号。第 4 页时间线的step1-num / step2-num / step3-num / step4-num分别填充2BE4A8 / FFB020 / 5B6CFF / FF4D6D四种霓虹色圆点（前两个内部文字0B0F1A，后两个FFFFFF），配合横向 4 栏标题与描述，演示了「色彩编码步骤」这一技法。第 5 页证据页则是eviA-bg（19.2cm 大卡 + 64pt 数字「≤20 次/天」）与eviB-bg / eviC-bg（两个 11.1cm 半高卡）的非对称布局，符合 pptx-design.md 中 evidence 页「1 大 + 1 中，opacity 0.3–0.6 允许用于数据背板」的版式规范。每页set前先{"command":"set","path":"/slide[N]","props":{"transition":"morph",...}}，即每页都显式挂上transition=morph——没有这一项，动画会静默退化为淡入淡出。

脚本末尾通过python3 ../../morph-helpers.py final-check "$OUT"做结构校验，即 morph-helpers.py 提供的final-check命令（统计x ≥ 34cm的幽灵形状数量，超过阈值则报 REJECT），整条链路可以一键重跑。

七、实操：如何复刻与改造这套风格

style.md 明确指出：完整构建脚本见build.sh，并建议重点阅读Slide 1（hero）——霓虹 blob 场景演员奠定活力有机美学；Slide 4（timeline）——横向流程 + 色彩编码步骤演示多色点缀系统。

改造四步法（依据 SKILL.md §Style library lookup workflow）：

1. 先读 style.md 获取设计意图（色板、字阶、技法）；
2. 需要品牌色快速匹配时，查阅 INDEX.md 的 Quick Lookup 十六进制列；
3. 参考 build.sh 学习技法（配色逻辑、演员编排、幽灵位节奏）；
4. 在自己的画布上按 pptx-design.md 的网格数学（33.87×19.05cm、边距 ≥ 1.27cm、间距 ≥ 0.76cm）重新排版。

关键注意事项：

• 不要照抄 build.sh 的坐标。据 INDEX.md 的公开说明，各风格 build.sh 的坐标是为各自 demo 内容手工调优的，存在文字重叠、布局错位等排版问题，官方建议「学习思路，不要复制代码」。
• 保留幽灵位纪律：每个!!前缀形状一旦出现就会持续存在于后续所有 morph 页，除非显式推到x=36cm；内容形状务必「前一页的推到画布外，本页的新内容才唤醒」。
• 渲染器限制：Morph 动画是运行时特性，需在 PowerPoint 365 / Keynote / WPS 中查看；LibreOffice 与多数网页预览器只会渲染为静态或淡入淡出，属渲染器限制而非脚本缺陷。
• Shell 引号：批量操作推荐使用cat <<'JSON' | officecli batch的单引号 heredoc 形式，避免$、!!、#被 shell 展开；本风格 build.sh 即采用该写法，是最安全的批处理范式。

按照以上方法，你可以把「深海军蓝 + 四色霓虹 + blob 有机演员 + 幽灵位节奏」这套设计语言迁移到任意生产力、工作坊或创业路演主题的 Morph 演示中，而 7 页 hero → statement → pillars → timeline → evidence → quote → cta 的节奏骨架也可直接复用为内容大纲。

• CLI
• AI 应用
• MCP 服务