/pm-brand-motion

name: pm-brand-motion
description: |
  Use when: 需要为品牌设计动效方向、制作 logo 动画 demo、定义品牌动效性格、从静态 logo 到动态展示的过渡
  Do NOT use when: 需要专业级动效交付（应交给设计师）、已有成品动效无需方向验证、仅需要文字描述不需要 demo
allowed-tools:
  - Agent
  - Read
  - Write
  - AskUserQuestion
  - Bash

Preamble (run first)

bash "$(dirname "${BASH_SOURCE[0]}")/../../check-update.sh" 2>/dev/null || true
# 检查方案设计目录
mkdir -p docs/02-方案设计

# 检查前置文档
echo "📊 正在检查前置文档..."

if [ -f "docs/02-方案设计/原型设计方案.md" ]; then
  echo "✅ 原型设计方案 - 已找到"
else
  echo "⏳ 原型设计方案 - 未找到"
fi

if [ -f "docs/02-方案设计/产品定位方案.md" ]; then
  echo "✅ 产品定位方案 - 已找到"
else
  echo "⏳ 产品定位方案 - 未找到"
fi

# 检查 logo 文件
echo ""
echo "🎨 正在检查 logo 文件..."
for ext in svg png jpg webp; do
  if ls logo.*.$ext 2>/dev/null | head -1 > /dev/null 2>&1; then
    echo "✅ logo 文件 (.$ext) - 已找到"
  fi
done
echo "⏳ 如果没有 logo 文件，将在步骤中引导您提供"

---

前置门禁

**必需文档**（至少满足一项）：

• 原型设计方案（`docs/02-方案设计/原型设计方案.md`）
• 产品定位方案（`docs/02-方案设计/产品定位方案.md`）

**可选文档**：

• 需求调研报告
• MVP方案

**Logo 文件**（至少满足一项）：

• SVG 格式 logo（优先）
• PNG/JPG/WebP 格式 logo 图片

如果必需文档均不存在：

⚠️ 未找到前置文档

品牌动效设计需要了解产品的视觉定位和品牌性格。

您可以选择：
A) 执行 /pm-position 生成产品定位方案
B) 执行 /pm-proto 生成原型设计方案
C) 手动输入品牌信息（快速模式）

是否继续？

---

跨 Agent 交互规则

当流程要求与用户交互时：

1. 如果当前环境支持 AskUserQuestion，使用 AskUserQuestion（最佳体验）。 2. 如果当前环境不支持 AskUserQuestion，必须用普通聊天消息提出同样问题。 3. 一次只问一个问题。 4. 提问后必须停止当前回合，等待用户回答（STOP and WAIT）。 5. 不得在用户回答前生成文档、写入 docs。 6. 已有 docs 文件不能替代本轮用户回答。

---

执行流程

步骤 1: 确定动效范围

使用 AskUserQuestion 询问：

> 您需要设计哪种类型的品牌动效？ > > A) Logo 开场动画（splash / 品牌展示页） > B) 加载状态动画（loading / 等待提示） > C) 交互微动效（hover / 点击反馈） > D) 页面过渡动画（转场 / 切换） > E) 其他（请手动输入） > > 💡 提示： > - 新品牌首发 → 推荐开场动画 > - 已上线产品 → 推荐交互微动效 > - 需要全面规划 → 可以多选，先做开场动画

记录到变量 `MOTION_SCOPE`

---

步骤 2: 读取前置数据

根据动效范围读取相应文档：

**从产品定位方案提取**：

• 品牌性格描述
• 目标用户画像
• 品牌视觉风格

**从原型设计方案提取**：

• 设计规范建议（色彩、字体）
• 页面布局结构
• 交互流程

**读取 Logo 文件**：

• 优先读取 SVG 格式（可直接用于动画）
• 如果只有图片格式，使用 Read 工具查看图片，理解 logo 的视觉结构

**读取失败处理**：

如果 logo 文件不存在：

⚠️ 未找到 logo 文件

品牌动效需要基于 logo 进行设计。

您可以选择：
A) 提供 logo 文件路径（我将读取分析）
B) 描述 logo 的视觉结构（文字描述模式）
C) 先完成动效方案文档，后续再制作 demo

是否继续？

---

步骤 3: 定义品牌动效性格

3.1 确定性格词

使用 AskUserQuestion 询问：

> 品牌的动效性格是什么？请选择最符合的 3 个词： > > A) 精准·专业·可靠（克制稳定，适合金融/企业/医疗） > B) 活力·大胆·进取（有力冲击，适合运动/科技/创业） > C) 温暖·友好·亲切（柔和包容，适合教育/社交/生活） > D) 优雅·精致·高端（流畅从容，适合奢侈品/设计/艺术） > E) 其他组合（请手动输入，如"沉稳·厚重·权威"） > > 💡 提示： > - 性格词决定动效的节奏、力度和编排方式 > - 可以从 logo 的视觉语言推导：几何感 → 精准，有机感 → 温暖，极简 → 优雅 > - 如果有产品定位方案，优先参考其中的品牌性格描述

记录到变量 `BRAND_PERSONALITY`

3.2 性格词 → 动效风格映射

根据性格词组合，映射到动效风格参数：

| 性格词组合 | 动效风格 | 时间感 | 缓入缓出 | 编排节奏 | |-----------|---------|--------|---------|---------| | 精准·专业·可靠 | 克制、稳定 | 中速 1000-1500ms | 微弱，几乎无 overshoot | 依次展开，不跳跃 | | 活力·大胆·进取 | 有力、冲击 | 快速 600-900ms | 明显 overshoot + 回弹 | 爆发式，多部件同时 | | 温暖·友好·亲切 | 柔和、包容 | 中慢 1200-1800ms | 轻微 overshoot | 渐次浮现，像打招呼 | | 优雅·精致·高端 | 流畅、从容 | 慢速 1500-2500ms | 极轻微，丝滑过渡 | 逐层展开，有仪式感 | | 轻快·灵动·创意 | 跳跃、惊喜 | 快速 500-800ms | bounce 回弹 | 交错出现，有节奏感 | | 沉稳·厚重·权威 | 缓慢、坚定 | 慢速 1800-3000ms | 几乎无 overshoot | 从中心向外扩散 |

如果用户选择了"其他组合"，AI 根据性格词的含义自行推导动效参数。

---

步骤 4: 规划编排方案

4.1 识别 logo 部件

基于 logo 分析，识别语义部件：

> 🎨 根据您的 logo，我识别出以下动效部件： > > | 部件 | 类型 | 动效角色 | 说明 | > |------|------|---------|------| > | {部件名} | mark/wordmark/装饰 | 主角/配角/点缀 | {描述} | > > 是否需要调整部件划分？ > > A) 部件划分合理，继续编排 > B) 需要合并/拆分部件 > C) 其他调整（请手动输入）

4.2 选择编排模式

使用 AskUserQuestion 询问：

> 品牌动效的编排模式是什么？ > > A) 逐层浮现 — 部件从底层到顶层依次出现（适合优雅/高端） > B) 中心绽放 — 从中心点向外扩散（适合沉稳/权威） > C) 笔迹描绘 — 像用笔画出来（适合有手写/书法元素） > D) 弹跳入场 — 部件弹跳进入画面（适合活力/年轻） > E) 拼图组装 — 部件从不同方向飞入拼合（适合科技/创意） > F) 渐显定格 — 从模糊到清晰，最终定格（适合专业/可靠） > G) 其他（请手动输入） > > 💡 提示： > - 编排模式应与性格词匹配 > - {根据性格词推荐最合适的模式}

记录到变量 `CHOREOGRAPHY_MODE`

4.3 规划时间分配

基于性格词映射的时间参数，规划三段式时间分配：

**通用原则**：预备(20%) → 动作(50%) → 收尾(30%)

> 🕐 基于您的品牌性格"{性格词}"，建议时间分配： > > | 阶段 | 占比 | 时长 | > |------|------|------| > | 预备 | 20% | ~{计算值}ms | > | 动作 | 50% | ~{计算值}ms | > | 收尾 | 30% | ~{计算值}ms | > | **总计** | 100% | **{总时长}ms** | > > 部件编排顺序： > 1. {主角部件}（0ms 开始，{时间}ms 完成） > 2. {配角部件}（{偏移}ms 开始，{时间}ms 完成） > 3. {点缀部件}（{偏移}ms 开始，{时间}ms 完成） > > 是否需要调整？ > > A) 时间分配合理，开始制作 demo > B) 调整总时长 > C) 调整编排顺序 > D) 其他调整

---

步骤 5: 生成方向性 demo HTML

5.1 准备 SVG 内容

**如果用户提供了 SVG 文件**：

• 使用 Read 工具读取 SVG 内容
• 在 SVG 中为每个部件添加语义 id（`mark`、`wordmark`、`dot` 等）
• 确保每个动效部件是独立的 `<g>` 或 `<path>` 元素

**如果用户只有图片格式 logo**：

• 使用 Read 工具查看图片
• AI 根据图片视觉结构，手写简化版 SVG
• 简化版 SVG 只保留核心形状，不追求像素级还原
• 在文档中注明"SVG 为简化方向版，设计师需基于原始 logo 精修"

**如果用户没有 logo 文件**：

• 根据前置文档中的品牌描述，生成概念性 SVG
• 在文档中注明"SVG 为概念示意，需替换为实际 logo"

5.2 编写 demo HTML

使用 Write 工具生成 `docs/02-方案设计/品牌动效demo.html`。

**⚠️ 视觉品质硬性规则（踩坑总结，必须遵守）**：

生成 demo HTML 时必须遵守以下规则，详细说明见下方"Demo HTML 视觉品质硬性规则"章节：

1. **绝对居中** — html/body 设 width/height 100%，body 用 flex 居中，所有子元素 align-items center 2. **SVG 视觉重心居中** — 手绘 SVG 时形状围绕 viewBox 中心分布 3. **文字用 HTML 而非 SVG** — wordmark/tagline 用 `<span>`，不用 SVG `<text>` 4. **Mark 尺寸 ≥ 120px** — 太小缺乏冲击力 5. **主角动画 ≥ 3 阶段 keyframes** — 入场→overshoot→settle，体现 bounce-back 6. **配色有对比度** — 渐变填充（≥2色），背景光晕 ≥500px + blur ≥100px 7. **造型精致** — mark 用流畅曲线而非直线拼接，眼睛有高光，装饰有细节，边缘有微光 8. **间距有层次** — mark→wordmark 20-24px，wordmark→tagline 10-12px，递减

**demo HTML 基本结构**：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{产品名称} 品牌动效 Demo</title>
<style>
  :root {
    --spm-duration: {总时长}ms;
    --spm-speed: 1; /* 速度倍率，1=正常，0.5=慢放，2=快放 */
    --spm-accent: {主色};
    --spm-accent2: {辅色};
    --spm-bg: {背景色};
    --spm-text: {文字色};
    --spm-text2: {辅助文字色};
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body { width: 100%; height: 100%; }

  body {
    background: var(--spm-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
  }

  /* 背景光晕 — 至少 500px + blur 100px */
  .bg-glow { ... }

  /* 主舞台 — flex column + align-items center */
  #logo-root {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-con