企业官网建设流程全解析

• CLI
• AI 应用
• MCP 服务

本文围绕 OfficeCLImorph-ppt技能 52 风格视觉库中的light--fluid-gradient（Fluid Gradient）风格展开，系统拆解其设计语言（渐变背景、射线扇、半调点阵、轨道环、移动亮点），并结合morph-ppt的跨页 Morph 动画机制给出可运行的 OfficeCLI 命令级实现方案。读完本文，你将掌握：如何读懂并复用风格库文档、如何把该风格的每一项设计技巧落到officecli的add / set命令上、以及如何用命名规则与交付门禁保证 Morph 动画正确呈现。

一、风格总览：什么是 Fluid Gradient

原风格文档 light--fluid-gradient/style.md 对该风格的定义非常凝练：

Smooth gradient backgrounds with fan of rotated rays, halftone dots, and orbital ellipses. Modern tech aesthetic.

即：平滑渐变背景 + 旋转射线构成的扇形 + 半调（halftone）点阵 + 轨道椭圆装饰，整体呈现现代科技审美。在 52 风格库目录中，它被归类为Light Palette（浅色调色板），与light--isometric-clean、light--firmwise-saas同属"科技 / AI / SaaS"推荐梯队（见 reference/styles/INDEX.md 的 Quick Lookup 表）。

需要说明的是：该风格目录当前仅包含style.md一份文档，style.md末尾提示的build.py完整构建脚本并未随仓库快照附带（INDEX.md 主色 hex 列对它的标注同样是-，表示无构建脚本可提取）。因此本文的所有实现示例均基于仓库内真实存在的morph-helpers.py、SKILL.md与pptx-design.md规则独立推导，可作为该风格的可运行复刻蓝本。

二、场景、情绪与色调定位

风格文档明确给出了三组定位信息，这是选用该风格时判断是否匹配的第一依据：

在 Morph 语境下，"动态"（dynamic）一词具有双重含义：既指视觉上渐变与射线带来的动势，也指这些装饰元素本身可以成为跨页 Morph 动画的场景演员（Scene Actor）——这正是本风格与morph-ppt技能结合最紧密的地方。

三、五项核心设计技巧逐项拆解

原文档列出的 Design Techniques 共五项，每一项都可映射为一类 OfficeCLI shape 属性组合：

3.1 Gradient backgrounds（渐变背景）

渐变背景通过--prop background=设置。在morph-ppt的浅色舞台规则下（见 reference/pptx-design.md 第 1 节），渐变背景属于"Mixed / gradient background"类：必须为文字加半透明衬底块（opacity=0.3-0.6），不能指望渐变自行"平均"出对比度。这是该风格最容易翻车的一处——浅色渐变上放浅色文字，投影环境下会直接消失。

3.2 Rotated thin rects（ray fan，旋转细矩形射线扇）

"扇形射线"是一组preset=rect的细长矩形，通过--prop rotation=以不同角度辐射排布：

# 以 slide 1 为例，三条射线，角度递进 20° officecli add "$FILE" /slide[1] --type shape --prop 'name=!!scene-ray-1' \ --prop preset=rect --prop x=2cm --prop y=2cm --prop width=10cm --prop height=0.15cm \ --prop fill=7B3FF2 --prop opacity=0.12 --prop rotation=20 officecli add "$FILE" /slide[1] --type shape --prop 'name=!!scene-ray-2' \ --prop preset=rect --prop width=10cm --prop height=0.15cm \ --prop fill=7B3FF2 --prop opacity=0.12 --prop rotation=40

注意：preset的合法取值（ellipse | rect | roundRect | triangle | diamond | star5 | hexagon等）以officecli help pptx shape为准；该风格中的射线是"整页装饰"，按pptx-design.md的层次规则应把opacity压到≤ 0.12，避免与内容竞争视觉焦点。

3.3 Dot-grid halftone（半调点阵）

半调点阵即按网格散布的小圆点，每个点是一个preset=ellipse、1–2cm 的小形状。它们是典型的小尺寸（1-2cm）点缀元素，适合在首页一次性布置，后续各页通过 Morph 复用同一批命名形状制造"相机平移"感。点阵数量多时务必用batchheredoc 批量提交（<<'EOF' | officecli batch "$FILE"），既省命令数又避免逐条 shell 转义。

3.4 Orbital ring decoration（轨道环装饰）

轨道环是大尺寸椭圆/圆形描边装饰，属于风格中的"大锚点"（5-8cm）。它们通常是!!scene-*场景演员的骨干：

officecli add "$FILE" /slide[1] --type shape --prop 'name=!!scene-ring' --prop preset=ellipse \ --prop fill=7B3FF2 --prop opacity=0.3 --prop x=5cm --prop y=3cm --prop width=8cm --prop height=8cm

3.5!!orb（bright ellipse）travels（移动的亮点）

这是本风格最标志性的设计技巧：一个高亮椭圆（bright accent，opacity=0.8-1.0）跨页移动，承担整场演示的"视线牵引"。!!orb是风格文档给出的命名样例，符合morph-ppt的!!actor-*命名约定——它属于"内容级演员"，必须有明确的出场与退场计划。它的移动效果完全由 Morph 引擎驱动：相邻两页同名形状、不同坐标，PowerPoint 即自动插值。

四、从风格到 Morph：让渐变装饰"动"起来

Fluid Gradient 是流动风格，天然适合 Morph。将上述五项技巧接入 morph-ppt SKILL.md 的三前缀命名系统：

关键机制（来自 SKILL.md "What is Morph?" 一节）：

1. 同名绑定：PowerPoint Morph 只对相邻两页名字完全一致的形状做插值，否则退化为静默淡入淡出。
2. transition=morph：只有携带该属性的页面才会触发 Morph。创建时--prop transition=morph，或事后officecli set "$FILE" "/slide[N]" --prop transition=morph。
3. ghost 纪律：!!actor-*与#sN-*退场一律移动到画布右缘外x=36cm（画布宽 33.87cm），绝不删除——删除会打断配对，动画消失。
4. 空间变化阈值：相邻页至少 3 个配对形状各自在{x, y, width, height, rotation, fill, opacity}中变化，且位移 ≥ 5cm 或旋转 ≥ 15°，否则 Morph 无物可插值、静默退化为 fade。
5. shell 引用：!!与#在 bash/zsh 中需单引号包裹：--prop 'name=!!scene-ring'；价格类文本（如$9/mo）务必单引号，防止 shell 吞掉$9。

五、可运行示例：一个两页的 Fluid Gradient Morph 对

以下命令完整复刻"渐变背景 + 射线扇 + 亮点移动"的跨页动效，可直接在已安装officecli的环境执行（$FILE="deck.pptx"）：

FILE="deck.pptx" officecli create "$FILE"; officecli open "$FILE" # ---- Slide 1：锚点构图 ---- officecli add "$FILE" / --type slide --prop layout=blank --prop background=0A84FF # 高亮 orb（内容级演员，从 5cm 处出发） officecli add "$FILE" /slide[1] --type shape --prop 'name=!!orb' --prop preset=ellipse \ --prop fill=FFFFFF --prop opacity=1.0 --prop x=5cm --prop y=3cm --prop width=3cm --prop height=3cm # 射线扇 + 轨道环（场景演员，整场保留） officecli add "$FILE" /slide[1] --type shape --prop 'name=!!scene-ray' --prop preset=rect \ --prop fill=FFFFFF --prop opacity=0.12 --prop x=2cm --prop y=8cm --prop width=10cm --prop height=0.15cm --prop rotation=25 officecli add "$FILE" /slide[1] --type shape --prop 'name=!!scene-ring' --prop preset=ellipse \ --prop fill=none --prop line=FFFFFF --prop opacity=0.3 --prop x=20cm --prop y=2cm --prop width=10cm --prop height=10cm # 首页标题（每页内容） officecli add "$FILE" /slide[1] --type shape --prop 'name=#s1-title' \ --prop text="Fluid Gradient" --prop x=4cm --prop y=12cm --prop width=26cm --prop height=3cm \ --prop font=Montserrat --prop size=54 --prop bold=true --prop color=FFFFFF --prop align=center --prop fill=none # ---- Slide 2：orb 移动 + 射线旋转，新内容接管 ---- officecli add "$FILE" / --type slide --prop layout=blank --prop background=0A84FF --prop transition=morph officecli add "$FILE" /slide[2] --type shape --prop 'name=!!orb' --prop preset=ellipse \ --prop fill=FFFFFF --prop opacity=1.0 --prop x=28cm --prop y=12cm --prop width=4.5cm --prop height=4.5cm officecli add "$FILE" /slide[2] --type shape --prop 'name=!!scene-ray' --prop preset=rect \ --prop fill=FFFFFF --prop opacity=0.12 --prop x=2cm --prop y=8cm --prop width=10cm --prop height=0.15cm --prop rotation=60 # ghost 首页标题（命名路径在 morph 自动加 !! 前缀后仍可解析） officecli set "$FILE" "/slide[2]/shape[@name=#s1-title]" --prop x=36cm 2>/dev/null || true officecli add "$FILE" /slide[2] --type shape --prop 'name=#s2-body' \ --prop text="Smooth motion for modern software." --prop x=4cm --prop y=6cm --prop width=28cm --prop height=2cm \ --prop font=Inter --prop size=24 --prop color=FFFFFF --prop fill=none officecli close "$FILE"; officecli validate "$FILE"

要点：!!orb与!!scene-ray在两页间同名且坐标/尺寸/旋转不同，满足 ≥ 5cm 位移规则，Morph 会插值出亮点沿对角线滑行、射线扇缓慢摆动的流动感；#s1-title按#sN-*约定在下一页 ghost 到x=36cm。

六、浅色风格的对比度红线

Fluid Gradient 属于 Light Palette，但实现时最容易出错的是"浅上加浅"。pptx-design.md给出的亮度公式与部署规则是本风格的硬约束：

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

• 浅色背景（brightness ≥ 128）→ 正文文字亮度 ≤ 20%（如#000000、#333333）。
• 渐变背景 → 文字必须垫opacity=0.3-0.6的半透明衬底块。
• 场景演员层次：整页装饰 ≤ 0.12，数据衬底 0.3–0.6，只有承载信息的演员才允许 0.8–1.0。

字体方面，morph 舞台字号整体比 pptx 基线放大一档（Hero 54–72pt、正文 18–24pt，最小不低于 13pt）；英文优先 Montserrat + Inter，中文用思源黑体（Source Han Sans）。文字框宽度宁宽勿窄——morph 插值过程中换行基线会导致文字在过渡中"倾斜"，这是该风格制作跨页标题时必须提前规避的。

七、如何检索与复用本风格

morph-ppt的"风格库查找"是四步工作流（见 SKILL.md 的 Style library lookup workflow 一节）：

1. 浏览 INDEX：reference/styles/INDEX.md 按调色板与情绪分组全部 52 个风格，Light Palette 表第 55 行即light--fluid-gradient（Style Name: Fluid Gradient，Best For: AI/tech products, SaaS platforms, modern software，Mood: Fluid, tech-forward, dynamic）。若 brief 指定了品牌色，可先扫描 Quick Lookup 表匹配最近的 hex 三件套。
2. 读哲学：打开本文所述的style.md理解设计意图。
3. 看技巧：本风格无build.sh，可参考同目录其他含build.sh的风格文件只取配色与签名手势；按 INDEX.md 的声明，这些脚本坐标是为演示内容手工调校的，禁止照抄坐标（"learn the approach, do not copy the code"）。
4. 自建画布：用自己的网格数学（33.87 × 19.05cm 画布、边缘留白 ≥ 1.27cm、负空间 ≥ 20%）实现本风格的渐变 + 射线 + 点阵 + 轨道环构图。

八、验证与交付：让流动感真正"流动"起来

Morph 动画只在运行时存在，静态截图无法验证。交付前必须执行 SKILL.md 的 Delivery Gate 流程：

• Gate 1–5a（继承 pptx v2）：schema 白名单、token 泄漏检查、暗底暗字对比等，逐项打印 OK。
• Gate 2 morph 增补：检查$9/mo类价格 token 是否被 shell 吞成/mo或孤立句点。
• Gate 5b-morph-1..4：
  • !!actor-*是否泄漏回可视区（应x ≥ 33.87cm）；
  • 相邻页是否至少 3 个!!形状有实质空间差异（防止"假 morph"）；
  • 相邻页是否共享 ≥ 2 个完全一致的!!名字（配对是否成立）；
  • #s(N-1)-*是否仍残留在第 N 页。

多页长弧（5+ 页）建议直接使用 reference/morph-helpers.py 的clone/ghost/verify/final-check四个子命令，其中final-check还会检查 M-2 ghost 累积（shape[x>=34cm]数量超过max(50, 总页数×4)即拒绝）。最后务必在PowerPoint 365 / Keynote / WPS中实测一遍跨页过渡——LibreOffice 与多数网页查看器会把 morph 渲染成普通淡入淡出，这是运行时限制而非脚本缺陷。

九、小结

Fluid Gradient 风格的核心是一套"静中有动"的视觉语法：渐变与点阵奠定科技底色，射线扇与轨道环提供结构性装饰，而!!orb的高亮移动则把整场演示串成一条流动的视线。借助 OfficeCLI 的transition=morph、三前缀命名系统与x=36cmghost 纪律，这套浅色流动风格可以稳定复现为真正的跨页平滑动画。实践时请始终记住风格库的三条铁律：取设计逻辑、不抄坐标；先算对比度、再选配色；先画配对表、再写命令。

• CLI
• AI 应用
• MCP 服务