企业官网建设流程全解析

• CLI
• AI 应用
• MCP 服务

Cosmic Neon（深空霓虹）是 OfficeCLI morph-ppt 技能视觉风格库（reference/styles/）中的一款暗色科幻风格：以近黑星空为画布，用紫色与青色双霓虹光晕做装饰，配合 Morph 跨页动画完成"光晕漂移、圆环生长、卡片显隐"的连续叙事。本文以dark--cosmic-neon风格的 style.md 为骨架，结合其完整可运行的 build.sh 脚本逐行拆解设计令牌、五页叙事结构与 Morph 编排原理，读完你可以复刻这套"时间旅行"主题的科幻演示，并把其中的调色、签名图形与编排手法迁移到自己的 morph 演示中。

风格定位：它适合什么场景

dark--cosmic-neon在 INDEX.md 中被归类为 Dark Palette，风格名为Cosmic Neon，主色三元组为#050510 / #8A2BE2 / #00FFFF（背景 / 前景强调 / 点缀强调）。style.md 对它的定位是：

• 适用场景：科学演讲、未来主义议题、物理讲座、宇宙主题
• 情绪：科幻、神秘、未来、霓虹
• 基调：近黑背景 + 紫色与青色霓虹

它由双霓虹光晕（紫色 + 青色）作为主装饰元素，在近黑画布上叠加星空点缀，营造出适合科学与技术演讲的宇宙氛围。在 SKILL.md 的 Quick Lookup 中，它和dark--space-odyssey、dark--cyber-future一起被推荐给 "Sci-Fi / Space / Futuristic" 类主题，说明这套风格的核心价值是把"深空神秘感"与"霓虹科技感"同时落在暗色底上。

设计令牌：配色与字体体系

style.md 给出了完整的色板与字体约定，这是复刻这套风格的第一手资料。

色彩面板

在 build.sh 中，这些令牌被落地为 shell 变量，与 style.md 一一对应：

BG=050510 PURPLE=8A2BE2 CYAN=00FFFF CARD=111122 WHITE=FFFFFF GRAY1=AAAAAA GRAY2=CCCCCC OFFSCREEN=36cm

其中OFFSCREEN=36cm是 Morph 编排的关键令牌：画布宽 33.87cm，把形状放到x=36cm即将其"幽灵化"（ghost）到画布右侧之外。整个五页的形态切换都靠"把形状从 36cm 移入可视区 / 从可视区移回 36cm"完成。

字体体系

一个值得注意的实现细节：build.sh 的演示内容为中文时间旅行主题，实际命令中标题与正文统一使用了font="Arial"（在#s1-title、!!statement-text、!!pillar-*-desc等形状上），而 Slide 4 的大数据数字!!evi-data（"38 微秒"）使用了font="Montserrat"以强化数据排版。这印证了 style.md 的字体意图：标题级文字用几何感强的无衬线（Montserrat 风格）承担装饰性，正文用阅读性好的黑体承担信息传递。关于字体组合的更细规则可参考 pptx-design.md 中的"Recommended Combinations"表：英文标题 + Inter 正文、中文使用思源黑体、中英混排用 Montserrat + Source Han Sans。

设计手法：六种签名元素

style.md 列出了这套风格的核心设计技术：

1. 双霓虹光晕（紫色 + 青色）作为主要装饰元素——对应 build.sh 中的!!bg-glow1（紫色椭圆）与!!bg-glow2（青色椭圆），均以opacity=0.15、15cm 见方的大尺寸椭圆垫在背景层；
2. 不同透明度叠加的星空装饰——!!star1（青色五角星star5）与!!star2（紫色五角星），opacity=0.5，尺寸 1~1.5cm，散落在画布上下两侧营造纵深；
3. 圆环（donut）点缀——!!ring使用preset=donut、fill=none、line=$CYAN、lineWidth=2，是贯穿全篇的宇宙感签名图形；
4. 霓虹高亮卡片背景——Slide 3 三张支柱卡片!!pillar-N-bg使用preset=roundRect、fill=$CARD、opacity=0.6，形成内容区块的暗靛蓝衬底；
5. 大号数据排版——Slide 4 的!!evi-data使用 80pt 加粗青色数字，强化"证据型"页面；
6. 宽行距——正文普遍设置lineSpacing=1.3（卡片描述）或lineSpacing=1.5（陈述与证据段落），保证深色底上的可读性。

这些手法全部可以迁移到任意暗色科幻 deck：背景光晕负责氛围，星星与圆环负责签名，霓虹卡片负责内容分区，大字号数据负责证据页张力。

页面结构：五页叙事

style.md 给出了五页的完整叙事框架，每页 25 个元素（实际 build.sh 在 Slide 1 上创建了恰好 25 个形状，随后通过克隆 + 移动复用同一批形状）：

五页讲述的是一条完整叙事弧：从"时间旅行是科学还是幻想"的设问（hero），到"时间是可以被弯曲的维度"的论点（statement），再到三种物理可能：虫洞理论、光速飞行、宇宙弦（pillars），然后用 GPS 卫星每天 38 微秒的时钟误差这一真实观测数据佐证（evidence），最后以"未来，我们会在过去相遇吗"收束（cta）。这正是 morph-ppt 技能强调的"叙事脊梁"——Morph 弧线必须建立在叙事线上，否则只是"会动的幻灯片"。

从 style.md 到可运行脚本：build.sh 实现详解

style.md 末尾注明"Complete build script available inbuild.sh"，即 build.sh。这份脚本是理解本风格全部实现细节的关键，值得逐段拆解。

第一步：Slide 1 一次性创建全部 25 个形状

build.sh 的策略是在 Slide 1 上把整副 deck 的全部形状一次建完：6 个场景演员（!!bg-glow1、!!bg-glow2、!!ring、!!line-top、!!star1、!!star2）+ 8 个本页内容（#s1-title、#s1-subtitle）+ 17 个预置在x=36cm的后续页内容（statement 2 个、pillars 10 个、evidence 3 个、cta 2 个，共 17 = 9~25 号形状）。

officecli add "$OUTPUT" '/' --type slide --prop layout=blank --prop background=$BG # 场景演员：霓虹光晕 officecli add "$OUTPUT" '/slide[1]' --type shape \ --prop 'name=!!bg-glow1' --prop preset=ellipse \ --prop fill=$PURPLE --prop opacity=0.15 \ --prop x=0cm --prop y=0cm --prop width=15cm --prop height=15cm

核心思路是**"先离屏预置，后按页显隐"**：所有后续页的内容形状在 Slide 1 就以x=36cm创建，之后每页只需用officecli set把它"搬"到目标位置即可，无需每页重新add。这是比逐页新建更省命令的批量编排模式，也正是 morph-ppt 技能里 clone + ghost 工作流的另一种等价实现。

第二步：克隆建页 + 开启 Morph 过渡

从 Slide 2 起，每一页都由克隆前一页生成，并打上transition=morph：

officecli add "$OUTPUT" '/' --from '/slide[1]' officecli set "$OUTPUT" '/slide[2]' --prop transition=morph

--from是 CommandBuilder.Add.cs 提供的"从已有元素复制"选项（Copy from an existing element path），使用它时不能同时带--prop，修改属性要后续用set完成——build.sh 的编排方式完全遵循这一约束。Slide 3、4、5 分别--from '/slide[2]'、'/slide[3]'、'/slide[4]'逐级克隆，每次都重新set --prop transition=morph。

这里正是 Morph 动画的触发条件：只有目标页（Slide N+1）携带transition=morph，PowerPoint 才会根据相邻两页中同名形状的位置 / 尺寸 / 旋转 / 填充 / 透明度差异做插值。五页脚本对第 2~5 页全部设置了 morph，因此全片保持连续运动。

第三步：按页编排"移入 / 移出"（Choreography）

每页的编排都是三段式：移动场景演员 → 幽灵化上一页内容 → 展示本页内容。以 Slide 2（statement）为例：

# 移动场景演员（光晕漂移 + 圆环生长，产生 Morph 插值） officecli set "$OUTPUT" '/slide[2]/shape[1]' --prop x=10cm --prop y=2cm --prop width=14cm --prop height=14cm officecli set "$OUTPUT" '/slide[2]/shape[2]' --prop x=5cm --prop y=5cm --prop width=10cm --prop height=10cm officecli set "$OUTPUT" '/slide[2]/shape[3]' --prop x=15cm --prop y=10cm --prop width=8cm --prop height=8cm # ... 星星位置微调 ... # 幽灵化 hero 内容（标题移到 36cm 之外） officecli set "$OUTPUT" '/slide[2]/shape[7]' --prop x=${OFFSCREEN} --prop y=0cm officecli set "$OUTPUT" '/slide[2]/shape[8]' --prop x=${OFFSCREEN} --prop y=1cm # 展示 statement 内容 officecli set "$OUTPUT" '/slide[2]/shape[9]' --prop x=2cm --prop y=6cm officecli set "$OUTPUT" '/slide[2]/shape[10]' --prop x=4cm --prop y=13cm

注意 build.sh 用形状序号（/slide[N]/shape[K]）而非名称寻址，因为克隆后形状顺序稳定。六个场景演员每一页都在移动：Slide 2 光晕扩大漂移、Slide 3 光晕对角换位 + 圆环缩小、Slide 4 光晕变成卡片衬底（fill=$CARD、opacity=0.6）、Slide 5 光晕回到接近初始位置——每次位移都超过 5cm 或尺寸变化超过 30%，满足 Morph "空间差异"的硬性要求，避免退化成无声淡入。

第四步：校验

脚本末尾执行officecli validate "$OUTPUT"和officecli view "$OUTPUT" outline，前者跑 schema 校验，后者输出大纲确认结构。这是 morph-ppt 技能"Delivery Gate 1（schema）"的落地实践。

底层原理：morph-ppt 的三前缀命名与幽灵纪律

理解这套风格为什么能"动"起来，需要看它背后的 morph-ppt SKILL.md。OfficeCLI 的 Morph 实现不依赖任何私有扩展，而是完全遵循 PowerPoint Morph 的原生机制：Morph 引擎按形状name=的精确匹配，在相邻两页之间插值位置、尺寸、旋转、填充与透明度——名字不匹配就没有动画，只会静默淡出。

技能定义了三条命名前缀纪律（build.sh 全部在用）：

build.sh 的实现与 SKILL.md 的标准流程略有差异但等价：它没有"每页新建#sN-*再 ghost"，而是在 Slide 1 把所有内容预置到x=36cm，随后每页只做移入/移出。这本质上是把 Enter / Exit 两类 Morph 行为都用"离屏预置 + 位移"统一实现——x=36cm就是幽灵位（ghost position），它是技能钦定的 off-canvas 坐标（画布右缘 33.87cm 之外）。

关键陷阱也必须知晓（SKILL.md Known Issues）：

• M-1：一旦给某页设置transition=morph，该页所有形状名字会被 CLI 自动加!!前缀，但@name=路径选择器仍然容错解析，不需要改路径；
• M-2：!!actor-*幽灵化不会跨页继承——每页是独立画布，忘记重新 ghost 就会在后续页"复活"。build.sh 因为每页都显式set了所有旧内容到x=36cm，天然规避了这个问题；
• 渲染器限制：Morph 运动只在 PowerPoint 365 / Keynote / WPS 中呈现，LibreOffice 与多数 Web 预览器会退化为静态或普通淡入，属于运行时特性而非脚本缺陷。

如何把 Cosmic Neon 用到你自己的演示里

style.md 和 INDEX.md 都强调：这套风格是"设计参考"而非"可直接复制的模板"。INDEX.md 明确警告 build.sh 的坐标是为该演示的特定内容长度手工调校的，直接复制到内容不同的 deck 会产生重叠与错位——"学方法，不抄代码"。正确的四步查找流程（来自 SKILL.md 的 Style library lookup workflow）：

1. 浏览 INDEX：按色系与情绪选风格；若用户给定了品牌色，直接对照 INDEX 的"Primary hex"三列找最近的色组；
2. 读 style.md：理解配色逻辑、字体配对与签名元素（即本文上文内容）；
3. 瞄 build.sh：只看签名形状、色号与编排思路，不要复制坐标；
4. 在自己画布上重排：用 pptx 底层的 12 列网格数学（33.87×19.05cm、边距 ≥1.27cm、块间距 ≥0.76cm）重新布局。

应用时注意 morph 特有的纵深规则（pptx-design.md）：

• 透明度分层：全片装饰（光晕、星空）opacity ≤ 0.12；证据/数据衬底（KPI 卡片）0.3~0.6；作为内容的!!actor-*才允许0.8~1.0。build.sh 中光晕 0.15、卡片 0.6，完全落在规范区间；
• 对比度先行：深色底上正文亮度需 ≥ 80%（#FFFFFF/#EEEEEE级别），可先用Brightness = (R×299 + G×587 + B×114)/1000计算再定色；
• 字号放大一档：morph 舞台风格把 hero 标题推到 54~72pt、章节标题 28~40pt、正文 18~24pt、脚注不低于 13pt。build.sh 的 56pt 标题、44pt 引言、80pt 数据字正是这套标尺的体现；
• 多行与跨页：5 页以上的长弧线建议直接用 morph-helpers.py（clone/ghost/verify/final-check）替代手写set，可省约 40% 命令并内置校验。

最后，交付前记得跑 Delivery Gate：除了常规的 token / schema / 超链接检查，还要用officecli view "$FILE" html做视觉审计，并用 Gate 5b-morph 系列命令确认没有!!actor-*滞留可视区、相邻页至少 3 个!!形状存在可感知位移。Cosmic Neon 的这份 build.sh 本身就是一个通过全部约束的完整范例：配色统一、签名元素贯穿、每页 25 个形状按 index 精确显隐、五页 morph 全部达标——把它当作"暗色霓虹 + 连续运动"的范式来研读，是最快的上手路径。

参考文件

• 风格定义文档——配色、字体、设计手法与五页结构的权威来源
• 完整构建脚本——本风格全部实现细节
• 成品示例——构建产物，可在 PowerPoint 365 / Keynote / WPS 中直接查看 morph 运动
• 风格索引——52 套风格的查找表与"学方法不抄代码"告诫
• morph-ppt 技能说明——三前缀命名、ghost 纪律、Delivery Gate 与 Known Issues
• Morph 设计要点——对比度、透明度分层与字号标尺
• Python 辅助工具——长弧线 deck 的 clone / ghost / verify / final-check
• 克隆命令实现——--from复制元素选项的源码依据

• CLI
• AI 应用
• MCP 服务