企业官网建设流程全解析

• CLI
• AI 应用
• MCP 服务

导读

dark--cyber-future是 OfficeCLI 项目 Morph-PPT 技能（skills/morph-ppt）中 52 个视觉风格之一，定位于"赛博朋克 2050"主题的演示风格：近黑背景 + 电光青色霓虹元素，配合发光的圆形主视觉与几何装饰，营造沉浸式科幻氛围。本文以该风格的规范文档skills/morph-ppt/reference/styles/dark--cyber-future/style.md为主体，结合其完整构建脚本build.sh与 Morph 动画底层机制，系统讲解该风格的配色系统、字体规范、五页叙事结构与可复用的源码级构建流程。读完本文，你将掌握如何阅读风格库规范、理解场景演员（Scene Actor）与 Morph 配对原理，并能够把这一赛博朋克风格迁移到自己的演示文稿中。

风格定位：技术主题下的沉浸式赛博朋克视觉

dark--cyber-future的风格规范（Style Overview）将自身定位为：

• 场景（Scenario）：未来感主题、科技愿景、赛博朋克美学、AI/机器人主题演示；
• 情绪（Mood）：未来感、赛博朋克、沉浸、科幻；
• 基调（Tone）：近黑背景 + 电光青色与青绿色。

它属于 Morph-PPT 风格库中dark--*系列的一员。在skills/morph-ppt/reference/styles/INDEX.md的快速查找表中，dark 系风格按 16 个目录组织，覆盖科技 / 金融科技等深色舞台场景。这与skills/morph-ppt/reference/pptx-design.md中的风格选择决策路径一致：技术 / 金融科技类主题优先倾向dark--*系列——跨页面的 Morph 动画会放大色彩带来的情绪，深色底 + 高亮霓虹的组合尤其适合舞台投影环境。

一个重要的使用前提：根据skills/morph-ppt/SKILL.md的说明，风格库的价值在于设计逻辑而非模板坐标——52 个风格的build.sh中的坐标均为演示内容手工调校（INDEX.md明确标注），直接照抄会产生重叠与错位。正确做法是借鉴其调色板、标志性图形与编排手法，在自己的画布上应用 pptx v2 的网格数学与视觉基线。

色彩系统：近黑画布上的电光青霓虹

六色调色板

style.md定义了完整的六色调色板，每个颜色都配有明确的用途分工：

在build.sh中，这些颜色被定义为脚本变量，贯穿全部 31 个形状的创建：

BG=0B0C10 CYAN=66FCF1 GRAY=1F2833 TEAL=45A29E WHITE=FFFFFF GRAY2=C5C6C7

为什么是"近黑 + 电光青"：对比度计算依据

Morph 舞台场景下，深色背景对文本与数据对比度有严格要求。pptx-design.md给出的判定公式为：

Brightness = (R × 299 + G × 587 + B × 114) / 1000

按此公式计算本风格的两个底色：#0B0C10（R=11, G=12, B=16）亮度约为 12，远低于 128 的暗色阈值；#1F2833（R=31, G=40, B=51）亮度约为 39，同样属于暗色。因此部署规则要求：暗色背景（亮度 < 128）下，正文文本亮度 ≥ 80%（#FFFFFF、#C5C6C7等浅色），图表系列填充与图标描边也必须满足同一底线。这正是本风格将白色与浅灰作为文本色、电光青作为数据高亮色的原因——所有前景元素都清晰跳脱于近黑画布之上。

build.sh对亮度的运用还有一个细节：!!cta-btn（CTA 按钮）使用color=$BG（近黑文字）+fill=$CYAN（电光青底），在亮底上放置暗文字，与pptx-design.md中"亮色背景用暗色文字"的规则互为印证。

字体系统：Montserrat + 思源黑体的中英双轨

style.md的字体规范如下：

这符合pptx-design.md的推荐组合：英文标题用 Montserrat，中文用思源黑体（标题 + 正文通用），中英混排则采用 Montserrat + Source Han Sans。规范还特别提醒：避免在 Morph 幻灯片上使用 Georgia / Times 等衬线字体作为正文——衬线字体的字脚（terminal）会在形状插值过程中消失，衬线体应保留给无过渡运动的普通 pptx。

在build.sh的实际实现中可以看到字号的分层使用：大标题!!hero-title使用 64pt 加粗白色，副标题!!hero-sub为 36pt 浅灰，!!hero-tag为 16pt 电光青加粗，KPI 大数字!!ev-num高达 96pt。这一分布满足pptx-design.md的 morph-stage 字号底线（主标题 54–72pt、正文 18–24pt、脚注不低于 13pt）。英文元素（时间戳、CTA 按钮、英文标语）统一使用 Montserrat，中文内容使用 Arial 回退，验证了"两种字体最多"的字体纪律。

设计手法：六条可迁移的视觉原则

style.md总结了本风格的六条设计手法，它们正是把 Cyberpunk 2050 观感从"配色"推向"场景"的关键：

1. 发光圆形作为主场景元素（Glowing orb）——!!bg-orb以电光青填充、opacity=0.08 的低透明度椭圆充当背景光球，从第一页贯穿到最后一页；
2. 深色卡片背景进行内容分组——pillars 页的三张roundRect卡片（!!p1-bg等）以#1F2833+ opacity=0.4 承载三个时间节点的内容；
3. 电光青强调高亮与数据——时间戳、KPI 数字、英文标语全部使用#66FCF1；
4. 干净的几何场景演员（线条、圆点、边框）——!!frame细边框、!!accent-line青色细线、!!dot-1/!!dot-2装饰圆点；
5. Morph 过渡配合场景演员位移——每个相邻页之间场景演员持续移动、缩放、变色，而非淡入淡出；
6. 赛博朋克配色（暗色 + 霓虹青）——整个调色板严格限定在六个色值内。

其中第 4、5 条直接对应 Morph 动画的两大基石：场景演员（Scene Actor）与ghost 纪律。SKILL.md规定所有跨页动画都靠"相邻页中同名形状的插值"实现，场景演员使用!!scene-*（整页装饰、很少离屏）与!!actor-*（内容前景、退出页需 ghost）两类前缀。

五页叙事结构：hero → statement → pillars → evidence → cta

style.md给出了一套 5 页、每页 20 个元素的标准页面结构：

这一页面序列与skills/morph-ppt/reference/decision-rules.md中的problem_solution叙事结构（hero → statement → pillars → evidence → cta）完全吻合，是融资路演 / 销售 / 竞标类演示的标准叙事弧线。五种页面类型在pptx-design.md中均有明确的功能分工：

• hero：开场/收尾，大号居中标题 + 散布的场景演员；
• statement：关键信息与过渡，一句有力陈述 + 幅度 ≥ 8cm 的演员位移；
• pillars：多点结构，2–4 等分列，场景演员变身卡片背景（opacity 0.12 左右）；
• evidence：数据与统计，1–2 个大型非对称色块 + 支撑细节（opacity 0.3–0.6）；
• cta：号召行动，回归大胆的居中设计。

style.md特别推荐阅读Slide 1（hero）与Slide 4（evidence）来理解核心设计技巧：前者演示"发光圆 + 几何元素搭建赛博朋克氛围"，后者演示"深色卡片上的青色数据数字"这一霓虹强调手法。

源码级剖析：build.sh 如何构建 Cyberpunk 2050

关键设计模式：一次性预置全部演员，再逐页克隆定位

完整的可运行构建脚本位于skills/morph-ppt/reference/styles/dark--cyber-future/build.sh（产物为同目录下的dark__cyber_future.pptx）。该脚本采用了一个与SKILL.md中"逐页新增 + ghost 上一页内容"略有差异但同样自洽的模式：

Slide 1 一次性创建全部 31 个形状，其中只有前 9 个（!!bg-orb、!!bg-box、!!accent-line、!!frame、!!dot-1、!!dot-2、!!hero-title、!!hero-sub、!!hero-tag）位于可视区域，其余 22 个属于 slide 2–5 的内容全部以x=${OFFSCREEN}（即36cm）预置于画布右侧离屏位置——这正是 Morph 的 ghost 位置规范（x=36cm位于 33.87cm 画布右缘之外）。

Slide 2–5 采用"克隆 + 设置"而非"新增"：

officecli add "$OUTPUT" '/' --from '/slide[1]' # 克隆上一页全部形状 officecli set "$OUTPUT" '/slide[2]' --prop transition=morph # 启用 Morph 过渡

克隆后，每个后续页通过形状索引（shape[1]…shape[31]）精确控制：将上一页的内容演员set x=36cm（离屏隐藏），将本页的内容演员set到目标位置（从离屏移入可视区）。例如 slide 2 将 hero 文本（shape[7-9]）ghost 到离屏，把声明文本!!stmt-text（shape[10]）从x=36cm移到x=2.9cm；slide 4 将全部 12 个 pillars 演员（shape[12-23]）ghost，并把 6 个 evidence 演员（shape[24-29]）移入可视区。

场景演员的运动编排

以 slide 2 为例，场景演员的运动全部通过set实现：

officecli set "$OUTPUT" '/slide[2]/shape[1]' --prop x=20cm --prop y=8cm --prop opacity=0.05 --prop fill=$TEAL officecli set "$OUTPUT" '/slide[2]/shape[2]' --prop x=14cm --prop y=2cm --prop width=18cm --prop opacity=0.1 officecli set "$OUTPUT" '/slide[2]/shape[5]' --prop x=31cm --prop y=4cm officecli set "$OUTPUT" '/slide[2]/shape[6]' --prop x=3cm --prop y=16cm

背景光球!!bg-orb（shape[1]）从x=0,y=0位移到x=20,y=8并改变填充色与透明度；装饰点!!dot-1、!!dot-2分别移动到画面不同角落。这些位移全部超过SKILL.md要求的 5cm 最小位移量，且同一对相邻页之间有 ≥ 3 个形状的属性发生变化，满足"至少改变 {x, y, width, height, rotation, fill, opacity} 中 3 项"的可见运动判据，也满足 Delivery Gate 5b-morph-2 的硬性校验。

透明度分层与内容分类

build.sh 的透明度使用与pptx-design.md的三层 opacity 体系完全一致：

• ≤ 0.12：整页装饰——!!bg-orbopacity=0.08、!!bg-boxopacity=0.3（作为背景柱）；
• 0.3 – 0.6：数据/证据衬底——!!ev-bgopacity=0.3、!!ev2-bgopacity=0.5、三张 pillar 卡片 opacity=0.4；
• 0.8 – 1.0：承载内容本身的高亮——!!cta-btn以实心青色呈现号召按钮。

场景演员的命名也遵循SKILL.md的前缀体系：背景元素用!!bg-*（对应!!scene-*的持久装饰语义），标题/声明/卡片用!!hero-*、!!stmt-*、!!p1-*、!!ev-*、!!cta-*（对应!!actor-*的内容语义），且全库无重名——避免了!!scene-card与!!actor-card混淆的经典陷阱。需要注意 shell 中!!前缀必须单引号包裹（--prop 'name=!!bg-orb'），否则会被 bash/zsh 的历史展开吃掉。

构建收尾与验证

脚本以officecli validate "$OUTPUT"与officecli view "$OUTPUT" outline收尾，对应SKILL.md交付流程中"关闭文件 + Delivery Gate 1 校验通过"的要求。SKILL.md还强调 morph 演示必须在 PowerPoint 365 / Keynote / WPS 中查看才能看到插值运动，LibreOffice 与多数网页查看器只会呈现静态或普通淡入（属渲染器能力限制，而非构建缺陷）。

如何在你的演示中复用这套风格

根据SKILL.md的"风格库查询工作流"，复用dark--cyber-future的正确路径是：

1. 浏览 INDEX：在skills/morph-ppt/reference/styles/INDEX.md的快速查找表中按调色板类别与情绪定位风格（dark--cyber-future= 未来 / 赛博朋克），若用户指定了品牌色，可扫描各风格的主色三元组就近匹配；
2. 阅读哲学：打开skills/morph-ppt/reference/styles/dark--cyber-future/style.md，理解其字体配对、色彩逻辑与标志性元素（发光圆、细边框、装饰点）；
3. 借鉴手法：打开build.sh只看技法（签名形状、色值、编排思路），不要照抄坐标——其坐标是为演示内容长度手工调校的；
4. 自建画布：按照 pptx v2 的网格数学（画布 33.87×19.05cm、边缘留白 ≥ 1.27cm）与视觉基线，套用本风格的调色板与标志性手法搭建自己的 Morph 演示。

对于需要逐页规划 Morph 配对的场景，可先阅读skills/morph-ppt/reference/decision-rules.md生成brief.md叙事规划，再结合skills/morph-ppt/reference/pptx-design.md的场景演员机制与skills/morph-ppt/reference/morph-helpers.py（或.sh）的克隆/ghost/校验辅助函数完成 5+ 页连续动画的搭建。

小结

dark--cyber-future是一套完整度极高的 Morph 舞台风格：六色赛博朋克调色板、中英双轨字体规范、五页标准叙事结构，以及一套可以直接运行的 31 形状构建脚本。其核心价值在于——通过低透明度场景演员（发光圆、几何装饰）提供连续视觉锚点，通过x=36cm离屏 ghost 纪律实现内容轮换，通过 morph 位移/缩放/变色让整场演示呈现"镜头移动"般的沉浸感。掌握这套风格的配色逻辑与构建模式后，你可以将其视觉语言迁移到任意科技愿景、AI 或机器人主题的演示中，同时满足 Morph 动画的底层配对与校验要求。

参考文件

• 风格规范：style.md
• 完整构建脚本：build.sh
• 演示产物：dark__cyber_future.pptx
• 风格库索引：INDEX.md
• Morph 设计要点：pptx-design.md
• Morph 技能总纲：SKILL.md
• 叙事规划：decision-rules.md

• CLI
• AI 应用
• MCP 服务