Preamble (run first)
# 检查方案设计目录
# 检查前置文档
echo "📊 正在检查前置文档..."
if [ -f "docs/02-方案设计/原型设计方案.md" ]; then
echo "✅ 原型设计方案 - 已找到"
else
echo "⏳ 原型设计方案 - 未找到"
fi
if [ -f "docs/02-方案设计/产品定位方案.md" ]; then
echo "✅ 产品定位方案 - 已找到"
else
echo "⏳ 产品定位方案 - 未找到"
fi
echo "" echo "🎨 Checking the logo file..." for ext in svg png jpg webp; do if ls logo.*.$ext 2>/dev/null | head -1 > /dev/null 2>&1; then echo "✅ logo file (.$ext) - found" fi done echo "⏳ If there is no logo file, you will be guided to provide one in the steps"
---
## 写入时边界
只讨论时不写文件，启动检查不创建目录。用户要求保存产物时，先确认当前产品、精确输出路径及已有文件的覆盖/追加选择；确认后**仅在实际 Write 前**创建该输出文件的父目录。完整安装可参见 `skills/_shared/artifact-policy.md`，单独安装本 skill 也按本段执行。
---
## 前置门禁
**必需文档**（至少满足一项）：
- 原型设计方案（`docs/02-方案设计/原型设计方案.md`）
- 产品定位方案（`docs/02-方案设计/产品定位方案.md`）
**可选文档**：
- 需求调研报告
- MVP方案
**Logo 文件**（至少满足一项）：
- SVG 格式 logo（优先）
- PNG/JPG/WebP 格式 logo 图片
如果必需文档均不存在：
```markdown
⚠️ 未找到前置文档
品牌动效设计需要了解产品的视觉定位和品牌性格。
您可以选择：
A) 执行 /pm-position 生成产品定位方案
B) 执行 /pm-proto 生成原型设计方案
C) 手动输入品牌信息（快速模式）
是否继续？
Cross-Agent Interaction Rules
When the process requires interaction with the user:
- If the current environment supports AskUserQuestion, use AskUserQuestion (best experience).
- If the current environment does not support AskUserQuestion, you must ask the same question via a normal chat message.
- Ask only one question at a time.
- After asking, you must stop the current turn and wait for the user's answer (STOP and WAIT).
- You must not generate documents or write to docs before the user answers.
- Existing docs files cannot replace the user's answer in this round.
Execution Flow
Step 1: Determine the motion scope
Use AskUserQuestion to ask:
Which type of brand motion do you need to design?
A) Logo opening animation (splash / brand showcase page) B) Loading state animation (loading / waiting indicator) C) Interaction micro-motion (hover / click feedback) D) Page transition animation (transition / switch) E) Other (please enter manually)
💡 Tip:
- New brand launch → opening animation recommended
- Already-launched product → interaction micro-motion recommended
- Need comprehensive planning → multiple selections are allowed; start with the opening animation
Record to variable MOTION_SCOPE
Step 2: Read the prerequisite data
Read the corresponding documents according to the motion scope:
Extract from the product positioning plan：
- Brand personality description
- Target user profile
- Brand visual style
Extract from the prototype design plan：
- Design specification suggestions (color, font)
- Page layout structure
- Interaction flow
Read the Logo file：
- Prefer reading the SVG format (can be used directly for animation)
- If only an image format is available, use the Read tool to view the image and understand the logo's visual structure
Handling read failures：
If the logo file does not exist:
⚠️ 未找到 logo 文件
品牌动效需要基于 logo 进行设计。
您可以选择：
A) 提供 logo 文件路径（我将读取分析）
B) 描述 logo 的视觉结构（文字描述模式）
C) 先完成动效方案文档，后续再制作 demo
是否继续？
Step 3: Define the brand motion personality
3.1 Determine the personality words
Use AskUserQuestion to ask:
What is the brand's motion personality? Please choose the 3 words that fit best:
A) Precise · Professional · Reliable (restrained and stable, suitable for finance/enterprise/healthcare) B) Energetic · Bold · Enterprising (powerful impact, suitable for sports/tech/startups) C) Warm · Friendly · Approachable (soft and inclusive, suitable for education/social/lifestyle) D) Elegant · Refined · High-end (smooth and composed, suitable for luxury/design/art) E) Other combination (please enter manually, e.g. "steady · weighty · authoritative")
💡 Tip:
- Personality words determine the rhythm, intensity, and choreography of the motion
- They can be derived from the logo's visual language: geometric feel → precise, organic feel → warm, minimalist → elegant
- If there is a product positioning plan, prioritize referring to the brand personality description in it
Record to variable BRAND_PERSONALITY
3.2 Personality words → motion style mapping
Based on the combination of personality words, map to motion style parameters:
| Personality word combination | Motion style | Sense of timing | Ease in/out | Choreography rhythm |
|---|---|---|---|---|
| Precise · Professional · Reliable | Restrained, stable | Medium speed 1000-1500ms | Subtle, almost no overshoot | Unfold in sequence, no jumping |
| Energetic · Bold · Enterprising | Powerful, impactful | Fast 600-900ms | Obvious overshoot + rebound | Explosive, multiple components simultaneously |
| Warm · Friendly · Approachable | Soft, accommodating | Medium-slow 1200-1800ms | Slight overshoot | Gradually emerge, like greeting |
| Elegant · Refined · High-end | Smooth, unhurried | Slow 1500-2500ms | Extremely subtle, silky transition | Unfold layer by layer, with a sense of ceremony |
| Light · Agile · Creative | Jumping, surprising | Fast 500-800ms | bounce rebound | Appear staggered, with a sense of rhythm |
| Steady · Weighty · Authoritative | Slow, firm | Slow 1800-3000ms | Almost no overshoot | Spread from center outward |
If the user selects "other combination", the AI derives the motion parameters on its own based on the meaning of the personality words.
Step 4: Plan the choreography scheme
4.1 Identify logo components
Based on the logo analysis, identify semantic components:
🎨 Based on your logo, I have identified the following motion components:
Component Type Motion role Description {component name} mark/wordmark/decoration lead/support/accent {description} Do the component divisions need adjustment?
A) The component divisions are reasonable, continue choreography B) Need to merge/split components C) Other adjustments (please enter manually)
4.2 Choose choreography mode
Use AskUserQuestion to ask:
What is the choreography mode for the brand motion?
A) Layer-by-layer emergence — components appear in sequence from bottom layer to top layer (suitable for elegant/high-end) B) Center bloom — spread outward from the center point (suitable for steady/authoritative) C) Stroke drawing — as if drawn with a pen (suitable for elements with handwriting/calligraphy) D) Bounce entrance — components bounce into the frame (suitable for energetic/young) E) Puzzle assembly — components fly in from different directions and assemble (suitable for tech/creative) F) Fade-in freeze — from blurry to clear, finally freezing (suitable for professional/reliable) G) Other (please enter manually)
💡 Tip:
- The choreography mode should match the personality words
- {recommend the most suitable mode based on the personality words}
Record to variable CHOREOGRAPHY_MODE
4.3 Plan time allocation
Based on the time parameters mapped from personality words, plan a three-stage time allocation:
General principles: preparation (20%) → action (50%) → ending (30%)
🕐 Based on your brand personality "{personality word}", the suggested time allocation is:
Stage Proportion Duration Preparation 20% ~{calculated value}ms Action 50% ~{calculated value}ms Ending 30% ~{calculated value}ms Total 100% {total duration}ms Component choreography order:
- {lead component} (starts at 0ms, completes at {time}ms)
- {supporting component} (starts at {offset}ms, completes at {time}ms)
- {accent component} (starts at {offset}ms, completes at {time}ms)
Does it need adjustment?
A) The time allocation is reasonable, start making the demo B) Adjust the total duration C) Adjust the choreography order D) Other adjustments
Step 5: Generate the directional demo HTML
5.1 Prepare SVG content
If the user provides an SVG file：
- Use the Read tool to read the SVG content
- Add a semantic id to each component in the SVG (
mark、wordmark、dot, etc.) - Ensure each animated component is an independent
<g>or<path>element
If the user only has a logo in image format：
- Use the Read tool to view the image
- Based on the image's visual structure, the AI hand-writes a simplified SVG
- The simplified SVG only retains the core shapes and does not pursue pixel-level reproduction
- Note in the document that "the SVG is a simplified directional version, and the designer needs to refine it based on the original logo"
If the user has no logo file：
- Generate a conceptual SVG based on the brand description in the preceding document
- Note in the document that "the SVG is a conceptual indication and needs to be replaced with the actual logo"
5.2 Write the demo HTML
Use the Write tool to generate docs/02-方案设计/品牌动效demo.html。
⚠️ Hard rules for visual quality (summary of pitfalls, must be followed)：
The following rules must be followed when generating the demo HTML. For detailed explanations, see the "Hard Rules for Demo HTML Visual Quality" section below:
- Absolutely centered — set html/body width/height to 100%, center body with flex, and align all child elements with align-items center
- SVG visual center of gravity centered — when hand-drawing SVG, distribute shapes around the center of the viewBox
- Use HTML for text instead of SVG — use
<span>for wordmark/tagline, not SVG<text> - Mark size ≥ 120px — too small lacks impact
- Lead animation ≥ 3-stage keyframes — entrance→overshoot→settle, reflecting bounce-back
- Color scheme has contrast — gradient fill (≥2 colors), background glow ≥500px + blur ≥100px
- Refined styling — use smooth curves rather than straight-line拼接 for the mark, eyes have highlights, decorations have details, edges have a subtle glow
- Spacing has hierarchy — mark→wordmark 20-24px, wordmark→tagline 10-12px, decreasing
Basic structure of the 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-content: center;
z-index: 1;
}
/* 动画通过 .animate class 触发，初始状态隐藏 */
#mark, #wordmark, #tagline, #line { opacity: 0; }
/* .animate 类激活时才播放动画 */
.animate #mark {
animation: mark-in calc(var(--spm-duration) / var(--spm-speed)) cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes mark-in {
0% { opacity: 0; transform: translateY(30px) scale(0.8); }
50% { opacity: 1; transform: translateY(-4px) scale(1.03); }
75% { transform: translateY(1px) scale(0.99); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
.animate #wordmark {
animation: wordmark-in calc(1000ms / var(--spm-speed)) cubic-bezier(0.25, 0.1, 0.25, 1) both;
animation-delay: calc({偏移}ms / var(--spm-speed));
margin-top: 24px;
}
@keyframes wordmark-in {
0% { opacity: 0; transform: translateY(18px); }
100% { opacity: 1; transform: translateY(0); }
}
.animate #tagline { ... margin-top: 12px; }
.animate #line { ... margin-top: 20px; }
/* 控制面板 — fixed + left 50% + translateX(-50%) */
#controls {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
...
}
/* 无障碍 */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
opacity: 1 !important;
transform: none !important;
}
}
</style>
</head>
<body>
<div class="bg-glow bg-glow--1"></div>
<div class="bg-glow bg-glow--2"></div>
<div id="logo-root">
<!-- Mark — SVG，视觉重心居中于 viewBox -->
<div id="mark">
<svg width="140" height="140" viewBox="0 0 140 140" fill="none">
<!-- 渐变填充（至少2色） -->
<!-- 身体用 C 曲线，圆润饱满 -->
<!-- 眼睛有高光点 -->
<!-- 脊线用小三角 -->
<!-- 边缘微光 -->
</svg>
</div>
<!-- Wordmark — HTML span，不用 SVG text -->
<div id="wordmark">
<span style="font-family: ...; font-size: 38px; ...">
<span style="color: var(--spm-accent);">super</span>
<span style="color: var(--spm-text);">PM</span>
</span>
</div>
<!-- Tagline — HTML span，text-align: center -->
<div id="tagline">
<span style="text-align: center; display: block; ...">产品经理技能包</span>
</div>
<div id="line"></div>
</div>
<div id="controls">
<button onclick="replay()">▶ 重播</button>
<label>速度 <input type="range" ...></label>
<span id="speed-label">1x</span>
</div>
<script>
// 重播：移除动画 class → reflow → 重新添加，触发 CSS 动画重播
function replay() {
const root = document.getElementById('logo-root');
root.classList.remove('animate');
void root.offsetWidth; // 强制 reflow
root.classList.add('animate');
// 背景光晕同理
document.querySelectorAll('.bg-glow').forEach(el => {
el.classList.remove('animate');
void el.offsetWidth;
el.classList.add('animate');
});
}
// 速度：通过 CSS 变量缩放所有动画时长
function setSpeed(val) {
document.documentElement.style.setProperty('--spm-speed', val);
document.getElementById('speed-label').textContent = val + 'x';
}
</script>
</body>
</html>
Key rules：
- CSS variables use
--spm-*prefix (super-pm prefix) @keyframesinsideanimation-timing-functionmust be written as literalcubic-bezier(...), cannot usevar()(Chromium will silently degrade to linear)- Animation only uses
transformandopacity(best performance) - Must include
prefers-reduced-motionhandling - Demo title notes "Direction Validation Demo"
- Animation is triggered via
.animateclass (initial state opacity:0, plays after adding class), replay uses class toggle (remove→reflow→add) - Speed is controlled via
--spm-speedCSS variable +calc(duration / speed), without JSgetAnimations().playbackRate - Does not depend on any external tools or scripts(pixel2motion, Playwright, headless Chrome, etc.), the demo is pure HTML + CSS + inline JS
5.3 Demo Positioning Statement
After generating the demo, clearly inform the user:
✅ Directional demo generated!
📄 File path:
docs/02-方案设计/品牌动效demo.html🌐 How to view: Open the file directly in a browser⚠️ Important notes：
- This demo isdirection validation, not a final deliverable
- The SVG may be a simplified version; designers need to refine it based on the original logo
- Easing curves and choreography details require professional tuning by designers
- The value of the demo is to let the team reach consensus on the motion direction
Step 6: Output the brand motion solution document
Use the Write tool to create docs/02-方案设计/品牌动效方案.md：
# {产品名称} 品牌动效方案
## 文档信息
- **产品名称**: {从前置文档提取}
- **动效范围**: {开场动画/加载状态/交互微动效/页面过渡}
- **创建时间**: {当前时间}
- **设计工具**: super-pm
---
## 一、动效定位
### 1.1 品牌性格词
{3个性格词}
### 1.2 动效风格
{性格词映射的动效风格描述}
| 参数 | 值 |
|------|-----|
| 总时长 | {时长}ms |
| 缓出曲线 | {cubic-bezier值} |
| 缓入缓出曲线 | {cubic-bezier值} |
| overshoot程度 | {描述} |
| 编排节奏 | {描述} |
### 1.3 使用场景
{场景描述}
---
## 二、编排方案
### 2.1 部件识别
| 部件 | 类型 | 动效角色 | 说明 |
|------|------|---------|------|
| {部件1} | mark | 主角 | {描述} |
| {部件2} | wordmark | 配角 | {描述} |
| {部件3} | 装饰 | 点缀 | {描述} |
### 2.2 编排模式
{编排模式名称和描述}
### 2.3 时间分配
| 阶段 | 占比 | 时长 |
|------|------|------|
| 预备 | 20% | ~{值}ms |
| 动作 | 50% | ~{值}ms |
| 收尾 | 30% | ~{值}ms |
| **总计** | 100% | **{值}ms** |
### 2.4 部件编排顺序
1. {主角}（0ms 开始，{值}ms 完成）
2. {配角}（{偏移}ms 开始，{值}ms 完成）
3. {点缀}（{偏移}ms 开始，{值}ms 完成）
---
## 三、动效原则
基于 Disney 12 动画原则，本方案重点应用：
- **{原则1}**：{具体应用说明}
- **{原则2}**：{具体应用说明}
- **{原则3}**：{具体应用说明}
（其他原则根据性格词选择性应用）
---
## 四、方向性 Demo
- **demo 文件**: `docs/02-方案设计/品牌动效demo.html`
- **demo 定位**: 方向验证，非最终交付品
- **查看方式**: 浏览器直接打开
### 4.1 demo 与成品的差距
| 维度 | 当前 demo | 设计师交付品 |
|------|----------|-------------|
| SVG 精度 | 简化方向版 | 原始 logo 精确矢量 |
| 缓动曲线 | 通用曲线 | 精确调校 |
| 编排细节 | 基础编排 | 专业级编排 |
| 自交叉处理 | 不处理 | 专业技法处理 |
---
## 五、设计师精修指引
### 5.1 精修方向
- {基于 demo 指出需要精修的具体点}
- {缓动曲线需要从通用值调校到品牌专属值}
- {编排衔接需要更流畅的过渡}
### 5.2 推荐工具
- After Effects + Lottie（专业动效 + Web 导出）
- Principle（快速动效原型）
- Figma Motion（设计工具内动效）
- SVG 动画专业工具
### 5.3 精修重点
1. 缓动曲线精确调校（从通用值到品牌专属值）
2. 部件间衔接细节（消除机械感）
3. 自交叉路径处理（如有书法/∞形元素）
4. 最终帧必须与静态 logo 完全一致
5. loading 循环动画需无缝衔接（首帧 = 尾帧）
---
## 六、下一步建议
1. **/pm-tech** - 评估动效技术实现可行性（推荐）
2. **/pm-data** - 定义动效相关数据指标
3. **/pm-proto** - 将动效融入原型设计
---
**文档状态**: 品牌动效方案完成
**生成时间**: {时间戳}
**生成工具**: super-pm
Step 7: Output completion prompt
Use AskUserQuestion to provide next-step options:
✅ Brand motion solution generated!
📄 Solution document:
docs/02-方案设计/品牌动效方案.md🎬 Demo file:docs/02-方案设计/品牌动效demo.html🎯 Suggested next steps:
A) Run /pm-tech - Technical handoff (recommended) B) Run /pm-data - Data metrics design C) Run /pm-proto - Integrate into prototype design D) Open the demo in a browser to view the effect
Fallback mechanism
Scenario 1: Prerequisite document does not exist
⚠️ 未找到前置文档
品牌动效设计需要了解产品的品牌定位。
您可以选择：
A) 执行 /pm-position 生成产品定位方案
B) 执行 /pm-proto 生成原型设计方案
C) 手动输入品牌信息（快速模式）
是否继续？
Scenario 2: No logo file
⚠️ 未找到 logo 文件
品牌动效 demo 需要基于 logo 制作。
您可以选择：
A) 提供 logo 文件路径
B) 描述 logo 视觉结构（文字模式）
C) 先完成方案文档，后续再制作 demo
是否继续？
Scenario 3: User is unsure about the motion direction
Guide the user to think:
🤔 Unsure about the motion direction?
I can help you: A) Automatically recommend a choreography mode based on brand personality B) Show a comparison of the effects of different choreography modes C) Reference the motion style of similar products D) Derive motion personality from the logo's visual language
Notes
- Direction validation rather than delivery: the demo is directional, clearly marked as "not a final deliverable"
- Personality-word driven: all motion parameters are derived from personality words, not invented out of thin air
- Semantic parts: each SVG part has an independent id, making it easy for designers to refine later
- Performance first: animation only uses transform and opacity
- Accessibility required: prefers-reduced-motion handling cannot be omitted
- keyframes easing must be literal：
@keyframesCSS variables cannot be used as timing-function inside - Does not depend on external tools: demo is pure HTML + CSS + inline JS, with no dependency on pixel2motion, Playwright, headless Chrome, or any external scripts. Animation control uses CSS class toggle + CSS variables, not JS DOM rebuilding or
getAnimations().playbackRate
Hard rules for Demo HTML visual quality (pitfall summary, must be followed)
The following rules come from actual testing pitfalls,violating any one = demo unqualified：
Centering rules
- html, body must be set to
width: 100%; height: 100%— otherwise flex centering does not take effect and content is offset - body uses
display: flex; align-items: center; justify-content: center— this is the only reliable centering method - Text inside SVG uses
text-anchor="middle"+x="50%"— SVG<text>defaults to left-aligned, not centered - HTML text uses
text-align: center; display: block— inline elements are not centered - Control panel uses
position: fixed; left: 50%; transform: translateX(-50%)— fixed elements do not participate in flex centering
SVG visual center-of-gravity rules
- The visual center of gravity of SVG content must be near the center of the viewBox — when hand-drawing SVG, all shapes are distributed around the viewBox center (50%, 50%). If the dinosaur body leans right, the tail must extend left to balance the visual center of gravity.Visual offset within the viewBox = unqualified
Text rendering rules
- Brand text uses HTML
<span>for rendering, not SVG<text>— SVG<text>— font rendering is inconsistent across different systems and alignment is uncontrollable. HTML<span>is cross-platform consistent and typography is controllable.Using SVG<text>for brand text = unqualified
Size rules
- Mark SVG size at least 120px — a mark that is too small lacks impact on screen and cannot convey a sense of brand.mark smaller than 100px = unqualified
Animation layering rules
-
The protagonist animation must include at least 3 keyframe stages — a simple opacity 0→1 + translateY fade-in is too mechanical. It must include the three stages entrance → overshoot → settle (such as
scale(0.8) → scale(1.03) → scale(0.99) → scale(1)), reflecting a bounce-back breathing feel.A simple fade-in with only 2 keyframes = unqualified -
There must be orchestrated offsets between parts (150-250ms) — all parts starting animation at the same time is the first source of mechanical feel. mark → wordmark → tagline appear in sequence, with increasing offsets.All parts having the same animation-delay = unqualified
Color rules
-
On a dark background, the mark and wordmark must be bright enough — on a dark background (such as #0c0c14), the primary color must be at least at the brightness level of #4f8cff. Overall dark and dull = hard to see = unqualified
-
SVG fill uses gradients (at least 2 colors), not solid colors — solid-color fill lacks richness. Use
<linearGradient>a gradient from primary color to secondary color.SVG using solid-color fill = unqualified -
Background glow at least 500px + blur 100px — if the glow is too small or the blur is too light, the atmosphere is insufficient. The glow spreads from the center, creating a brand atmosphere.Glow smaller than 400px or blur smaller than 80px = unqualified
Shape rules (applicable to all marks)
-
Mark uses smooth curves (round and full), not straight-line assembly (rough geometry) — Bezier curves must use
CDraw smooth curves with commands; do not useLcommands to draw straight-line segments.mark body has straight-line segments = unqualified -
Eyes/focal point must have a highlight dot — if the mark has eyes or a visual focal point, use a large white circle + black pupil + small white highlight dot (opacity 0.6) to make the focal point lively.Flat eyes with only black and white layers = unqualified
-
Use characteristic shapes for decorative details, not generic arcs — dinosaur ridges use small triangles
<path>(e.g.M72 50 L74 44 L76 50), flames use sharp points, water droplets use curved arcs. Decorative shapes should match the mark's semantic characteristics.Generic arcs used for decoration = unqualified -
Edges have a subtle glow highlight — add a
stroke="#fff" opacity="0.15"stroke to the mark outline to increase refinement.No edge highlight = unqualified
Spacing rules
- mark → wordmark spacing 20-24px, wordmark → tagline 10-12px, tagline → decorative line 18-20px — decreasing spacing reflects information hierarchy (protagonist > supporting role > accent).Chaotic spacing or all the same = unqualified
Total duration rules
- Total duration must match the personality words — "precise · professional · reliable" requires a composed rhythm (1200-1500ms), "energetic · bold · enterprising" requires a fast rhythm (500-800ms).Total duration contradicts the personality words = unqualified
Output files
- Brand motion plan →
docs/02-方案设计/品牌动效方案.md - Directional demo →
docs/02-方案设计/品牌动效demo.html
Output quality comparison
✅ Good example：
- 性格词明确：「精准·专业·可靠 → 克制稳定风格，总时长 1000ms」
- 编排有逻辑：「mark 先动（主角），wordmark 后动（配角），偏移 150ms」
- demo 可感知方向：「浏览器打开能看到动效节奏和编排顺序」
- 明确标注定位：「方向验证 demo，设计师需精修缓动曲线和衔接细节」
❌ Bad example：
- 性格词模糊：「动效要好看、有感觉」
- 编排无逻辑：「所有部件同时出现」
- demo 无法感知方向：「只有闪烁，看不出编排意图」
- 混淆定位：「demo 就是最终交付品」
Common pitfalls / Red Flags — STOP
If any of the following occurs, stop immediately and backtrack:
| Pitfall | Correct approach |
|---|---|
| html/body does not have width/height 100% set | Must set width: 100%; height: 100%, otherwise flex centering will not work |
| Content is not centered (offset left/up) | body uses display: flex; align-items: center; justify-content: center |
| Text inside SVG is left-aligned | Use text-anchor="middle" + x="50%" |
Brand text uses SVG <text> |
Use HTML <span>, consistent across platforms |
| mark SVG is smaller than 100px | At least 120px, otherwise it lacks impact |
| Protagonist animation has only 2 keyframes | Must have at least 3 stages (entrance → overshoot → settle), reflecting bounce-back |
| All parts have the same animation-delay | Must have choreographed offsets (150-250ms), mark→wordmark→tagline in sequence |
| SVG uses a single-color fill | Use <linearGradient> gradient fill (at least 2 colors) |
| Background glow is too small (<400px) | At least 500px + blur 100px |
| Content is hard to see on a dark background | Primary color must be at least as bright as #4f8cff |
| Mark body has straight-line segments | Use C curves to draw rounded arcs, not L straight-line segments |
| Eyes/focal point have only black and white layers | Add a white highlight dot (opacity 0.6) |
| Decoration uses generic arcs | Use characteristic shapes (dinosaur→triangle, flame→sharp corner, water drop→arc) |
| No edge highlight | Add stroke="#fff" opacity="0.15" stroke |
| Spacing is chaotic or all identical | mark→wordmark 20-24px，wordmark→tagline 10-12px，tagline→line 18-20px |
| Total duration contradicts the personality words | "Precise·Professional·Reliable"→1000-1500ms, "Energetic·Bold·Progressive"→600-900ms |
@keyframes use var() as timing-function |
Must write literal cubic-bezier |
| Omit prefers-reduced-motion | Accessibility handling cannot be omitted |
| Deliver the demo as a finished product | Clearly label "direction validation, not final delivery" |
| Animation uses layout properties (width/height/margin) | Use only transform + opacity |
| Rely on pixel2motion scripts or tools | The demo must be pure HTML+CSS+inline JS, without relying on any external tools |
| Replay uses cloneNode/replaceChild or JS DOM rebuilding | Use CSS class toggle (remove→reflow→add) |
Speed uses JS getAnimations().playbackRate |
Use CSS variables --spm-speed + calc(duration/speed) |
Output Quality Check / Verification Checklist
Process Check：
- Prerequisite dependencies are satisfied (positioning plan or prototype plan has been read)
- Personality words are determined and mapped to motion parameters
- Choreography plan is laid out (parts, patterns, timing)
- Plan document has been generated to
docs/02-方案设计/ - Both the demo and the document are labeled as "direction validation"
- 2-3 follow-up skills have been recommended
Demo Visual Quality Check (confirm item by item after opening in the browser)：
- Content is fully centered (not offset to the left/top)
- mark SVG ≥ 120px, visually impactful
- Brand text uses HTML
<span>(not SVG<text>） - The main animation has 3+ keyframe stages (entrance→overshoot→settle)
- There is choreography offset between parts (150-250ms)
- SVG fill uses gradients (not solid color)
- Background glow ≥ 500px + blur ≥ 100px
- Content is clearly legible on a dark background
- Mark shape is rounded (C curves, no straight segments)
- Eyes/focal point have highlight dots
- Decorations use characteristic shapes (matching the mark semantics)
- Edges have a subtle glow highlight stroke
- Spacing has hierarchy (decreasing)
- Total duration matches the personality words
- prefers-reduced-motion is handled
-
@keyframesthe timing-function is a literal cubic-bezier - Does not rely on any external tools (pixel2motion, Playwright, etc.)
- Replay uses CSS class toggle, not cloneNode/JS DOM rebuilding
- Speed uses CSS variables
--spm-speed, not JSgetAnimations().playbackRate
⚠️ If any item fails → complete it before marking as done.