企业官网建设流程全解析

• 人工智能
• AI 应用
• AI 技能
• CLI
• MCP 服务

导读

Sage Grain 是 OfficeCLI Morph-PPT Skill 内置的 52 套视觉风格参考之一（目录skills/morph-ppt/reference/styles/dark--sage-grain/），面向创意机构、精品咨询、有机品牌与健康类公司，主打暗绿灰背景 + 胶片颗粒噪点 + 十字星光元素 + 白色圆角卡片的「有机 × 精致 × 手作感」气质。本文以该风格的style.md为骨架，结合 morph-ppt Skill 主文档 的 Morph 核心机制（shape-name 跨页绑定、三前缀命名、ghost 纪律、Delivery Gate 5b-morph 四重校验）与 officecli-pptx 基础规则，讲解如何用 officecli 命令把这套视觉语言真正落到可交付的.pptx上——读完你将掌握：风格色板与设计参数的精确落地、噪点/星光等装饰元素的生成命令，以及让卡片跨页平滑移动缩放的 Morph 编排方法。

一、风格定位：Sage Grain 适合谁，传达什么

style.md开篇即明确了该风格的三要素：

• Scenario（适用场景）：Creative agencies、design studios、boutique consultancies、organic brands、wellness companies——即所有强调「手工感、质感、非工业化」气质的机构型客户。
• Mood（氛围）：Organic（有机）、sophisticated（精致）、grounded（沉稳落地）、artisanal（手作）。
• Tone（色调）：暗鼠尾草灰（dark sage-grey）打底，白色与暖色点缀。

在 风格索引 INDEX.md 的 Quick Lookup 表中，dark--sage-grain被归类到Creative Agency / Studio用色分组，与之并列的有mixed--bauhaus-blocks、dark--circle-digital、vivid--bauhaus-electric等。索引中给出的主色三元组为#1E2720 / #FFFFFF / #D9B88F（背景 / 前景 / 强调色），可用于在动手前快速比对客户品牌色。

设计决策上遵循 pptx-design.md 的「morph-stage register」原则：深底版面（背景亮度 < 128）下正文亮度必须 ≥ 80%，因此该风格的白卡片（#FFFFFF）承担了主要文字载体，保证投影仪下的可读性；而标题的暖金色（#D9B88F）与鼠尾草绿（#6B7F69）只做点睛强调。

二、色彩系统：六色色板与语义分工

style.md给出完整色板，共 6 个角色，是整篇风格唯一必须原样继承的硬数据：

落地到 officecli 时，底色通过 slide 的background属性设置，卡片用preset=roundRect+fill=FFFFFF，文字直接指定color：

FILE="sage-agency.pptx" officecli create "$FILE"; officecli open "$FILE" # 封面：暗鼠尾草底 + 白色极粗标题 officecli add "$FILE" / --type slide --prop layout=blank --prop background=1E2720 officecli add "$FILE" /slide[1] --type shape --prop text="Atelier North" \ --prop x=2cm --prop y=7cm --prop width=29.87cm --prop height=4cm \ --prop font=Montserrat --prop size=60 --prop bold=true --prop color=FFFFFF --prop align=center

色彩语义建议：Background 撑住全局底色（60–70% 视觉权重），White 承载内容，Warm/Gold 只做单点强调，Sage 用于次级结构（小节标签、图表系列），Dim 用于脚注/辅助文字。这与 officecli-pptx 的「一主色 + 一辅助 + 一强调」原则一致——暖金与哑光金择一为主强调即可，不要在同一页里让四种彩色同时抢眼。

三、设计技术拆解：五件套的 officecli 实现

style.md的 Design Techniques 一节定义了该风格的 5 个签名元素，下面逐一给出命令级实现。

3.1 颗粒噪点纹理（Grain noise texture）

做法是「散布低透明度小椭圆」，透明度控制在0.02–0.03，营造模拟胶片/纸张的颗粒感。在 officecli 中即大量小ellipse预设形状，逐颗设置opacity=0.02：

# 单颗颗粒：0.1cm 小圆，透明度 0.02，散布在角落装饰区 officecli add "$FILE" /slide[1] --type shape --prop 'name=!!scene-grain-01' --prop preset=ellipse \ --prop fill=FFFFFF --prop opacity=0.02 --prop x=3cm --prop y=2cm --prop width=0.1cm --prop height=0.1cm

实际构建时用batchheredoc 一次性铺 15–30 颗（位置遵循安全区，避免落入内容核心区x=2~28cm, y=3~16cm）。关键纪律来自 morph-ppt SKILL.md 的 Scene-actor spatial rule：噪点是!!scene-*装饰，透明度 ≤ 0.12，绝不能与内容竞争。0.02 的透明度也意味着它的作用是「质感」，不是「图案」。

3.2 十字星光元素（Sparkle cross）

style.md规定为4 线十字形（4-line cross），线粗0.08cm，作为贯穿全片的装饰母题。用 4 条细长rect组成十字即可（两条横竖主线 + 两条对角短线的 4-line 变体）：

# 竖线 + 横线组成一个十字，线粗 0.08cm officecli add "$FILE" /slide[1] --type shape --prop 'name=!!scene-sparkle-01' --prop preset=rect \ --prop fill=D9B88F --prop line=none --prop x=27cm --prop y=2cm --prop width=0.08cm --prop height=2cm officecli add "$FILE" /slide[1] --type shape --prop 'name=!!scene-sparkle-01' --prop preset=rect \ --prop fill=D9B88F --prop line=none --prop x=26cm --prop y=2.5cm --prop width=2cm --prop height=0.08cm

注意这里故意让两根线共用同一个name=!!scene-sparkle-01——在 Morph 中同名的两组形状会同名配对，形成「一个十字整体移动」的效果（详见第四节 Morph 关键模式）。

3.3 极粗标题 + textFill 渐变褪色

style.md要求标题56–64pt，并用textFill 渐变做褪色（fade）处理。officecli 中设置字号 + 粗体：

officecli add "$FILE" /slide[1] --type shape --prop text="Crafted by hand" \ --prop x=2cm --prop y=8cm --prop width=29.87cm --prop height=4cm \ --prop font=Montserrat --prop size=64 --prop bold=true --prop color=FFFFFF --prop align=center

textFill 渐变是字体级渲染特性（运行时由 PowerPoint 呈现），与 Morph 的跨页插值叠加时，标题字号变化属于pptx-design.md提示的「跨渲染器可靠性」范畴：size插值在 PowerPoint 365 可靠，在 Keynote/WPS 可能退化为交叉淡入。因此建议在改变字号的同时同步改变width/height或x/y，保证空间位移兜住动效可见性。

3.4 白色卡片面板（White card panels）

内容区块一律用圆角矩形白卡，悬浮在暗底上，形成「卡片 + 投影仪强对比」的阅读结构：

officecli add "$FILE" /slide[2] --type shape --prop 'name=!!actor-card-01' --prop preset=roundRect \ --prop fill=FFFFFF --prop line=none --prop x=3cm --prop y=6cm --prop width=13cm --prop height=7cm # 卡片上的文字（正文 18-24pt，符合 morph-stage 字号地板） officecli add "$FILE" /slide[2] --type shape --prop text="Brand strategy for growing studios" \ --prop x=3.5cm --prop y=6.8cm --prop width=12cm --prop height=1.5cm \ --prop font=Inter --prop size=20 --prop color=1E2720

白卡默认不透明（opacity=1），与噪点层的 0.02 透明度形成明确分层，正好对应 pptx-design.md 的三层深度模型：背景填充 → 场景演员 → 内容，白卡属于内容层，是最强视觉层。

3.5 小节标签 + 交替布局节奏

• 小节标签：9–10pt 大写字母（uppercase），color=6B7F69（Sage）或8A9088（Dim），用于层级提示；
• 交替布局：dark-full（全暗）→ white-card（白卡）→ stat-hero（数据大字）的轮换制造节奏感。对应 pptx-design.md 的 Page Types 体系——hero（全暗封面）、evidence（白卡承载数据）、statement（大字英雄数字），每页换一种版式，避免连续同构。

四、Key Morph Patterns：三个跨页动效范式

style.md的 Key Morph Patterns 是风格与动效的结合点，恰好对应 morph-ppt SKILL.md 的三大机制。

4.1 白卡片跨页移动/缩放（White panels morph in size and position）

这是 SKILL.md 的Single-element morph / Multi-element coordinated morph范式的直接应用：同一张卡片在两页用完全相同的!!actor-*名字，只改x/y/width/height，PowerPoint 的 Morph 引擎就会自动插值：

# Slide 2：卡片居中偏左，13cm 宽 officecli add "$FILE" /slide[2] --type shape --prop 'name=!!actor-card-01' --prop preset=roundRect \ --prop fill=FFFFFF --prop line=none --prop x=3cm --prop y=6cm --prop width=13cm --prop height=7cm # Slide 3：同一名字，缩小移动到右上，承接 stat-hero 区域 officecli add "$FILE" / --type slide --prop layout=blank --prop background=1E2720 --prop transition=morph officecli add "$FILE" /slide[3] --type shape --prop 'name=!!actor-card-01' --prop preset=roundRect \ --prop fill=FFFFFF --prop line=none --prop x=24cm --prop y=2cm --prop width=7cm --prop height=5cm

两个硬约束不能忘（来自 SKILL.md）：

• Slide 3 必须带transition=morph（创建时--prop transition=morph，或事后officecli set "$FILE" "/slide[3]" --prop transition=morph），否则静默退化为淡入淡出；
• 空间差异必须明显：位移 ≥ 5cm 或旋转 ≥ 15° 或尺寸变化 ≥ 30%，本示例 13cm→7cm 宽度变化约 46%，满足 Gate 5b-morph-2 的三形状硬门槛。

4.2 噪点纹理保持连续（Grain stays consistent）

颗粒作为!!scene-*装饰全片保持（same name、same position），不做任何插值——它提供的不是动效，而是「视觉连续性」：观众在跨页切换时感知到的是同一质感层。这正是 SKILL.md 中!!scene-*（persistent decoration，rarely ghosted）的角色定位。连续页克隆时，reference/morph-helpers.py的clone命令会把上一页全部形状带过来，颗粒自动延续。

4.3 十字星光重新定位（Sparkle crosses reposition）

十字作为装饰母题，在相邻页之间改变位置形成点缀动效：

# Slide 1：十字在右上 #（见 3.2 节，name=!!scene-sparkle-01，x=26-27cm 区域） # Slide 2：同一名字移动到左下，grain 层不变 officecli add "$FILE" /slide[2] --type shape --prop 'name=!!scene-sparkle-01' --prop preset=rect \ --prop fill=D9B88F --prop line=none --prop x=1.5cm --prop y=15cm --prop width=0.08cm --prop height=1.5cm officecli add "$FILE" /slide[2] --type shape --prop 'name=!!scene-sparkle-01' --prop preset=rect \ --prop fill=D9B88F --prop line=none --prop x=0.7cm --prop y=15.4cm --prop width=1.5cm --prop height=0.08cm

位移约 25cm，远超 5cm 门槛；两组线共用名字使「十字」作为整体被插值移动。需要强调的是：任何!!前缀形状一旦出现，就持续存在于后续每张 morph 页，若某页不需要它，必须显式 ghost 到x=36cm（画布右缘外），否则会出现 M-2 ghost 累积（详见第五节）。

五、命名纪律与 Ghost 生命周期（风格落地的前提）

Sage Grain 风格里「白卡 + 十字 + 噪点」三个元素分属三个生命周期角色，必须按 SKILL.md 的三前缀系统命名：

两个最容易踩的坑（均为 SKILL.md 明示的 M-1/M-2）：

• transition=morph自动加前缀：设置后每个形状名被自动加!!（#s1-title读回为!!#s1-title）。@name=选择器仍能解析（/slide[N]/shape[@name=#s1-title]可用），但 jq 过滤时不要用裸startswith("!!")，要精确写startswith("!!actor-")或startswith("!!scene-")。
• Ghost 累积：每张新页都是独立画布，上一页的!!actor-*不重新 ghost 就会「复活」在可见区。构建循环里应每加完新内容就立刻把旧演员设为x=36cm：

for ACTOR in "!!actor-card-01" "!!actor-card-02"; do officecli set "$FILE" "/slide[$N]/shape[@name=$ACTOR]" --prop x=36cm || true done

六、参考脚本与完整构建流程

style.md结尾声明「Complete build script available inbuild.py（Python with officecli）」，指向用 Python + officecli 构建的风格演示脚本（当前仓库该目录仅含style.md描述文档）。无论脚本采用 Python 还是 Bash，构建节奏都应遵循 morph-ppt SKILL.md 的 Morph Recipes：

1. 规划先行：在brief.md中先写 Morph Pair Planning 表（Pair / Slide A / Slide B / Actors / Ghosts），确定所有!!名字后再写命令——中途改名是 ghost 累积的头号诱因；
2. 逐页构建：create → open → add slide（layout=blank + background=1E2720 + transition=morph）→ 加 scene 装饰 → 加 actor 卡片 → 加 #sN- 内容 → ghost 上页遗留；
3. 5+ 页连续叙事用 helpers：reference/morph-helpers.py 提供clone（克隆上一页并自动设置transition=morph）、ghost（按索引批量 ghost 到 x=36cm）、verify（校验 transition + 未 ghost 内容）、final-check（全片校验 + M-2 ghost 累积检查，ghost 数超过约 50 即 REJECT）；
4. shell 转义：!!与$一律单引号包裹（--prop 'name=!!scene-grain-01'），zsh/bash 的历史展开会吃掉未加引号的!!；批量多形状优先用<<'EOF' | officecli batch。

七、交付验证：Gate 5b-morph 四重检查

风格做得再准，Morph 配对错了也是静默失败。SKILL.md 的 Delivery Gate 5b-morph 扩展在基础 Gate 1–5a 之上增加了四条针对 Morph 的硬校验，Sage Grain 风格交付前必须全部通过：

• 5b-morph-1（actor 泄漏）：所有应退场的!!actor-*必须x ≥ 33.87cm（画布右缘），用get --depth 1 --json | jq startswith("!!actor-")循环过滤，任何可见区命中即 REJECT；
• 5b-morph-2（假 Morph）：每个 morph 页对至少 3 个不同!!形状各变化 ≥ 1 项{x, y, width, height, rotation, font-size}——本风格的白卡/十字/噪点恰好是天然的三形状样本，但噪点常被固定，因此动效配额主要靠卡片与十字承担；
• 5b-morph-3（名字错配）：相邻页必须共享至少 2 个完全一致的!!名字（注意读回带前缀），零共享 = 纯淡入；
• 5b-morph-4（#sN 残留）：#s(N-1)-*内容必须已在第 N 页 ghost 到 x=36cm。

校验脚本模式统一用「COUNT 后 if/else」，避免 grep 空结果误报。最后用officecli validate过 schema，并在 PowerPoint 365 / Keynote / WPS 中实际播放确认动效——LibreOffice 与多数网页查看器只渲染静态帧，这是运行时渲染器限制（SKILL.md 归为[RENDERER-BUG]），不是风格缺陷。

结语

Sage Grain 的完整落地链路可以概括为：色板照抄（六色表）→ 质感拼装（噪点/十字/白卡/极粗标题）→ 角色命名（scene/actor/#sN）→ 跨页插值（同名 + transition=morph）→ 幽灵清理（x=36cm）→ 四重门禁验收。风格目录本身是「设计灵感库」而非模板——INDEX.md 明确警告各风格的坐标是手调演示值，切勿整段复制，应把「暗绿灰 + 颗粒 + 星光 + 白卡」的设计逻辑应用到自己的 12 栏网格（33.87 × 19.05cm）计算中。更多 Morph 机制细节见 morph-ppt SKILL.md，版式与对比度地板见 officecli-pptx SKILL.md。

• 人工智能
• AI 应用
• AI 技能
• CLI
• MCP 服务