如何用 Opus 5.5 搭建动态设计工作室（完整教程）

# 1. 运行时环境：Node 22+、ffmpeg、用于音频分析的 Pythonbrew install node ffmpeg python          # macOS 使用 brew；Linux 请使用 apt installpip install numpy librosa soundfile# 2. 创建干净的项目目录并安装无头浏览器mkdir motion-studio && cd motion-studio && npm init -ynpm i -D playwright && npx playwright install chromium# 3. 框架技能包（可选，对应路线 B）npx skills add remotion-dev/skills       # 提供 /remotion-create, /remotion-render 等指令npx skills add heygen-com/hyperframes    # 提供 /hyperframes 路由 + GSAP 技能# 4. 手绘风格插件（可选）：Node Canvas 骨骼绑定、画笔、程序化合成音效claude plugin marketplace add buildwithhanif/claude-animation-skillclaude plugin install claude-animation@claude-animation-skill# 5. 启动 Claude Code，挂载 Opus 5.5 并开启高推理强度（High effort）claude --model claude-opus-5-5> /model   # 选择 Opus 5.5，单次生成设为 xhigh，旗舰级作品设为 max

# Motion studio rules (动态设计工作室规范)## Render contract (渲染契约)- 每部短片都必须是时间的纯函数：`window.seek(t)` 负责绘制第 `t` 秒的画面帧。- 在渲染模式下，严禁使用 CSS transitions、`setTimeout`、`requestAnimationFrame`，严禁在帧与帧之间传递可变状态。- 仅允许使用带种子的伪随机噪声（如 `mulberry32`），严禁使用 `Math.random()`。- 使用 `node render.mjs` 进行渲染，编码格式为 H.264 `yuv420p`，画质参数 `CRF 16`。## Look (视觉规范)- 严禁使用的默认套路：渐变背景上的居中标题、所有元素单纯淡入淡出、角落标签与画面边框、UI 组件上的发光特效（Glow）、廉价的通用粒子爆炸。- 字体限制：一款展示字体（Display face），一款界面字体（UI face）。- 配色限制：除非简报另有说明，否则全局只使用一种强调色（Accent color）。- 节奏要求：每 2 到 4 秒，画面上必须发生新的视觉变化。## Sound (音频规范)- 除非提供了现成音轨，否则配乐与音效（SFX）均需在代码中程序化合成。- 音效打击点必须严格对齐测算出的节拍网格（`beats.json`）。响度标准化为 `-14 LUFS`。## Loop before you show me anything (交付前的自检循环)1. 按每个节拍渲染一帧画面，拼接成缩略图样片（Contact sheet）并亲自审视它。2. 在以下维度按 1-10 分进行打分：前 2 秒的吸睛度（Hook）、手机端尺寸下的可读性、运动质感、画面多样性、品牌还原度、音画同步率。3. 修复最严重的 3 个问题。重复此过程，直到所有维度的得分均达到 8 分以上。4. 只有通过上述检验后，才允许执行完整渲染。

make a dynamic 15-second motion graphics video that shows what an incredible motion designer you are, like it's your showreel for a résumé. go all out.（制作一段动态的 15 秒动态图形视频，展示你是一位多么出色的动态设计师，就像这是你简历的作品集展示卷宗一样。全力以赴。）

# 1. 更长篇幅 + 高阶音效要求（源自 @kloss_xyz 的 90 秒钢琴作品集模式）make a dynamic 16:9, 60-second motion graphics showreel that shows your real creative limits.S-tier sound design, no generic synth pads. Compose an original piano score and sync everycut to it. Export 1080p MP4.# 2. 防 AI 劣质感を护栏（源自 @1littlecoder 的模式）make a dynamic 10-second motion graphics video that introduces who you are as Opus 5.5.Avoid frames and text in the corners, the usual giveaways of AI-made video.# 3. 叙事导向而非单纯炫技（源自 @sonnylazuardi 的模式）use your showreel energy, but tell a story: the history of [TOPIC] from [START] to today,surprise me with the storyboard. 45 seconds, vertical 9:16.# 4. 精品设计工作室人设make a 30-second showreel as if you were a niche branding studio for startup founders.Create every graphic from scratch. One accent color. Every shot is a different technique.

Make a dynamic 20-second motion graphics video for [PRODUCT] ([URL]), with the energyof a motion designer's showreel. Go all out.Assets- Visit the site. Use real screenshots (Playwright), the real logo, real colors and fonts.  Save everything to ./assets and list what you found before you animate.- Never redraw the product UI from imagination. Crop and animate the real thing.Story (one beat each, 2 to 4 seconds)1. Hook: the problem in 5 words of huge kinetic type.2. The product appears, the UI assembles itself piece by piece.3. Three features, each as a UI moment with a cursor doing a real action.4. One number that proves it works: [METRIC].5. Logo lockup + [CTA].Sound- Original music, 120 BPM, synthesized in code. UI clicks and whooshes on the beat.Format: 1080x1920 (9:16) first, then 1:1 and 16:9 from the same timeline.Before the full render, show me a contact sheet of one frame per beat.

Reference: ./refs/launch.mp4 (and ./refs/frames/*.png)1. Extract one frame every 0.5s with ffmpeg. Study them.2. Write ./docs/style_guide.md: palette (hex), type (family, weight, tracking),   shot lengths, transition types, camera moves, texture/grain, how text enters and exits.3. Write ./docs/shotlist.md for a [DURATION]s video about [SUBJECT] in THAT style.   Take the grammar of the reference, never its content, logos or characters.4. Show me both files. Wait for my OK before any code.

<inputs>Ask me for: my product + URL, 8 to 12 UI states that tell its story, the real data shown ineach state, brand colors + fonts + one accent, a royalty-free track near 120 BPM, formats.</inputs><direction>Product-film UI motion. One container never cuts: every state is the same element changingsize, radius and fill while its content swaps behind a short blur. A cursor drives every change.Warm neutral canvas, one accent. Springs with at most a tiny overshoot.Banned: bouncy easing, glows, gradients on UI chrome, particle bursts, dead time.</direction><structure>120 BPM, 8 bars, something happens on every beat.logo → CTA button → email field (typed) → loader → success check → dashboard card→ chart draws itself → tooltip on hover → ⌘K palette → toast → logo.</structure><build>1. One HTML file, one canvas, window.seek(t). No CSS transitions, no timers, no carried state.2. Closed-form springs. A value with many targets = sum of one spring per change.3. Text inside a morphing container enters after the morph starts, leaves before the next one.4. Tab indicators: leading and trailing edges on different springs so they stretch.5. Beat grid from the track (numpy/librosa). Start on a downbeat. UI sounds on measured peaks.6. Render in headless Chrome at 60 fps, 4 subframes per frame, blended for motion blur.</build><gotchas>Never use will-change on anything the camera scales (blurry text).The last frame must equal the first, cursor position and velocity included.</gotchas><start>Ask for the inputs, then show me the state list on the beat grid before writing code.</start>

<style>html,body{margin:0;background:#141413}canvas{display:block}</style><canvas id="c" width="1080" height="1920"></canvas><script>const W = 1080, H = 1920, DUR = 15;const g = document.getElementById('c').getContext('2d');const clamp = (x, a = 0, b = 1) => Math.min(b, Math.max(a, x));// 闭式阻尼弹簧函数 (0 → 1)，时间的纯函数（第 08 节将详细拆解）function spring(t, k = 170, d = 26) {  if (t <= 0) return 0;  const w0 = Math.sqrt(k), z = d / (2 * w0);  if (z < 1) {    const wd = w0 * Math.sqrt(1 - z * z);    return 1 - Math.exp(-z * w0 * t) * (Math.cos(wd * t) + (z * w0 / wd) * Math.sin(wd * t));  }  return 1 - Math.exp(-w0 * t) * (1 + w0 * t);      // z >= 1 视为临界阻尼处理}// 带种子的伪随机数生成器（严禁使用 Math.random，确保每次运行渲染结果绝对一致）function rng(seed) {  return () => {    seed |= 0; seed = seed + 0x6D2B79F5 | 0;    let t = Math.imul(seed ^ seed >>> 15, 1 | seed);    t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;    return ((t ^ t >>> 14) >>> 0) / 4294967296;  };}const SCENES = [  { from: 0, to: 3, draw(t) {                        // 场景 1：动态大标题      const s = spring(t - 0.1, 220, 22);      g.save(); g.translate(W / 2, H / 2); g.scale(0.6 + 0.4 * s, 0.6 + 0.4 * s);      g.globalAlpha = clamp(t * 4);      g.fillStyle = '#F0EEE6'; g.font = '700 190px "Source Serif 4", serif';      g.textAlign = 'center'; g.fillText('MOTION', 0, 0);      g.fillStyle = '#D97757'; g.fillRect(-320 * s, 50, 640 * s, 18);      g.restore();  }},  { from: 3, to: 6, draw(t) {                        // 场景 2：错落弹出的方格矩阵      const r = rng(7);      for (let i = 0; i < 48; i++) {        const x = (i % 6) * 170 + 115, y = Math.floor(i / 6) * 170 + 360;        const s = spring(t - i * 0.03 - r() * 0.1, 260, 20);        g.fillStyle = i % 7 ? '#F0EEE6' : '#D97757';        g.fillRect(x - 60 * s, y - 60 * s, 120 * s, 120 * s);      }  }},  // ... 更多场景：Opus 会在此处继续追加，每个分镜对应一个对象];function draw(t) {  g.fillStyle = '#141413'; g.fillRect(0, 0, W, H);  for (const s of SCENES) if (t >= s.from && t < s.to) s.draw(t - s.from);}window.seek = (t) => { draw(t); return true; };// 在普通浏览器中打开时提供实时预览；无头渲染模式下自动关闭if (!navigator.webdriver) {  const t0 = performance.now();  (function loop() { draw(((performance.now() - t0) / 1000) % DUR); requestAnimationFrame(loop); })();}</script>

// 运行方式: node render.mjs --fps 60 --dur 15 --sub 4import { chromium } from 'playwright';import { spawn } from 'node:child_process';import { mkdirSync } from 'node:fs';const arg = (k, d) => { const i = process.argv.indexOf('--' + k); return i > 0 ? Number(process.argv[i + 1]) : d; };const FPS = arg('fps', 60), DUR = arg('dur', 15), SUB = arg('sub', 4);mkdirSync('out', { recursive: true });const browser = await chromium.launch();const page = await browser.newPage({ viewport: { width: 1080, height: 1920 }, deviceScaleFactor: 1 });await page.goto('file://' + process.cwd() + '/index.html');await page.evaluate(() => document.fonts.ready);       // 确保 Canvas 绘制文本前字体已完全加载// tmix 滤镜将连续的 SUB 个子帧进行平均混合以生成运动模糊；select 保留每组的最后一帧const vf = `tmix=frames=${SUB},select='eq(mod(n\\,${SUB})\\,${SUB - 1})',setpts=N/${FPS}/TB`;const ff = spawn('ffmpeg', [  '-y', '-f', 'image2pipe', '-framerate', String(FPS * SUB), '-i', '-',  '-vf', vf, '-r', String(FPS), '-c:v', 'libx264', '-crf', '16', '-pix_fmt', 'yuv420p', 'out/silent.mp4'], { stdio: ['pipe', 'inherit', 'inherit'] });const total = Math.round(DUR * FPS * SUB);for (let i = 0; i < total; i++) {  await page.evaluate((t) => window.seek(t), i / (FPS * SUB));  const png = await page.locator('#c').screenshot({ type: 'png' });  if (!ff.stdin.write(png)) await new Promise((r) => ff.stdin.once('drain', r));  if (i % (FPS * SUB) === 0) console.log(`rendered ${i / (FPS * SUB)}s / ${DUR}s`);}ff.stdin.end();await new Promise((r) => ff.on('close', r));await browser.close();

# 方案 1：Remotion (React) —— 最适合系列视频、可复用模板、数据驱动型视频npx create-video@latest launch-film && cd launch-filmnpx skills add remotion-dev/skillsclaude> /remotion-create a 20s 9:16 launch film for [PRODUCT], springs only, one accent colornpx remotion studio                 # 打开实时时间轴预览npx remotion render Main out/launch.mp4# 方案 2：HyperFrames (HTML + GSAP) —— 最适合习惯以网页思维做设计的人npx hyperframes init my-video && cd my-videonpx hyperframes skills updateclaude> Using /hyperframes, turn ./notes.md into a 45-second pitch video with kinetic captionsnpx hyperframes preview && npx hyperframes render

// keys: [[time, value], ...] 按时间排序的关键帧数组。返回任意时间点 t 的当前值。export function track(t, keys, k = 170, d = 26) {  let v = keys[0][1];  for (let i = 1; i < keys.length; i++)    v += (keys[i][1] - keys[i - 1][1]) * spring(t - keys[i][0], k, d);  return v;}// 具有拉伸弹性的 Tab 指示器：前缘（Leading edge）比后缘（Trailing edge）刚度更高export function indicator(t, stops) {             // stops: [[time, x], ...]  const lead  = track(t, stops, 320, 30);  const trail = track(t, stops, 140, 22);  return { left: Math.min(lead, trail), right: Math.max(lead, trail) + 120 };}// 变形容器内部的文本透明度控制：在容器变形开始后才淡入，在下一次变形开始前提前淡出export function swapAlpha(t, tIn, tOut) {  return Math.min(clamp((t - tIn - 0.08) / 0.12), clamp((tOut - 0.1 - t) / 0.1));}// 无缝循环辅助函数：将最后一帧锚定回第一帧export const loopT = (t, dur) => ((t % dur) + dur) % dur;

# 运行方式: python beats.py song.wav > beats.json (动画代码将直接读取此 JSON 文件)import sys, json, numpy as np, librosay, sr = librosa.load(sys.argv[1], sr=None, mono=True)tempo, frames = librosa.beat.beat_track(y=y, sr=sr, units="frames")beats = librosa.frames_to_time(frames, sr=sr).round(3).tolist()onset = librosa.onset.onset_strength(y=y, sr=sr)peaks = librosa.util.peak_pick(onset, pre_max=3, post_max=3, pre_avg=3,                               post_avg=5, delta=0.5, wait=10)json.dump({    "bpm": float(np.atleast_1d(tempo)[0]),    "beats": beats,                                   # 普通状态切换对齐此处    "downbeats": beats[::4],                          # 重大视觉转折对齐此处（强拍）    "hits": librosa.frames_to_time(peaks, sr=sr).round(3).tolist(),  # 音效（SFX）对齐此处}, sys.stdout, indent=1)

// 运行方式: node sfx.mjs cues.json out/sfx.wav   其中 cues 格式为: [{"t":0.5,"type":"click"}, ...]import { readFileSync, writeFileSync } from 'node:fs';const SR = 48000, cues = JSON.parse(readFileSync(process.argv[2], 'utf8'));const buf = new Float32Array(Math.ceil((Math.max(...cues.map(c => c.t)) + 2) * SR));let s = 42; const noise = () => (s = (s * 1664525 + 1013904223) >>> 0) / 2147483648 - 1;const VOICES = {  click:  [0.05, t => Math.sin(2 * Math.PI * 1800 * t) * Math.exp(-t * 90) * 0.5],  pop:    [0.15, t => Math.sin(2 * Math.PI * (600 + 900 * t) * t) * Math.exp(-t * 30) * 0.4],  thump:  [0.50, t => Math.sin(2 * Math.PI * (90 - 60 * t) * t) * Math.exp(-t * 9) * 0.9],  whoosh: [0.35, t => noise() * Math.sin(Math.PI * Math.min(1, t / 0.35)) * 0.25],};for (const c of cues) {  const [len, fn] = VOICES[c.type], start = Math.floor(c.t * SR);  for (let i = 0; i < len * SR && start + i < buf.length; i++) buf[start + i] += fn(i / SR);}const n = buf.length, b = Buffer.alloc(44 + n * 2);      // 编码输出 16-bit 单声道 WAV 文件b.write('RIFF', 0); b.writeUInt32LE(36 + n * 2, 4); b.write('WAVEfmt ', 8);b.writeUInt32LE(16, 16); b.writeUInt16LE(1, 20); b.writeUInt16LE(1, 22);b.writeUInt32LE(SR, 24); b.writeUInt32LE(SR * 2, 28); b.writeUInt16LE(2, 32); b.writeUInt16LE(16, 34);b.write('data', 36); b.writeUInt32LE(n * 2, 40);for (let i = 0; i < n; i++) b.writeInt16LE(Math.round(Math.max(-1, Math.min(1, buf[i])) * 32767), 44 + i * 2);writeFileSync(process.argv[3], b);

You are the director, animator, sound designer and render engineer for a [DURATION] filmmade in code. Treat this as a multi-session production. Don't rush to a final render.## The film in one line[LOGLINE. What the viewer should feel at the end.]## References and inputs- ./refs/ : [video / frames / image library]. Take the grammar, never the content.- ./audio/track.wav : use it unchanged. Measure beats with beats.py first.- Skills available: [/remotion-best-practices | /hyperframes | /claude-animation].- APIs in .env: [ELEVENLABS_API_KEY, FAL_KEY]. Budget: [$X]. Be economical.## Look[3-5 lines: palette, type, texture, camera language. Banned looks.]## Beat sheet0:00-0:02  hook: [the single most striking image]0:02-0:10  [act 1]...        a new visual payoff every 3-5 seconds[END]      the last frame sets up the first frame (loop)## Workflow, with gates1. Write docs/style_guide.md and docs/shotlist.md (every shot: frames, camera, text, SFX).   Show me the shot list. Then continue without waiting if I don't answer in 10 minutes.2. Build stills for every shot. Contact sheet. Critique.3. Animatic at 960x540 with placeholder audio. Fix pacing before polish.4. Full animation, polish pass, sound pass, final render.5. Split work across subagents per chapter. Write docs/ANIMATION_GUIDE.md first   so every subagent codes in the same style.## Critique loop (every shot, at least 3 rounds)Render 3-5 stills, score 1-10 on: hook, readability at 360px wide, motion, composition,depth, sound sync, polish. Log scores + 3 biggest problems in docs/review_log.md. Fix. Repeatuntil all are 8+.## Deliverablesout/final.mp4 · out/loop_check.mp4 · out/poster.png · out/contact.png · README.md

# 缩略图样片（Contact sheet）：每秒抽取 2 帧，按 6 列x5 行拼接成一张大图ffmpeg -i out/final.mp4 -vf "fps=2,scale=270:-1,tile=6x5" -frames:v 1 out/contact.png# 连续帧条带（Strip）：围绕 4.2 秒处的快速动作连续抽取 12 帧（专门抓画面闪烁、跳帧与图层重叠）ffmpeg -ss 4.1 -i out/final.mp4 -vf "scale=320:-1,tile=12x1" -frames:v 1 out/strip.png# 手机端可读性测试（Phone test）：将画面缩放到 360px 宽度，检验小屏下的文字清晰度ffmpeg -i out/final.mp4 -vf "fps=1,scale=360:-1,tile=5x3" -frames:v 1 out/phone.png# 循环接缝检查（Loop check）：将视频首尾相连播放两次，检查衔接处是否卡顿ffmpeg -stream_loop 1 -i out/final.mp4 -c copy out/loop_check.mp4# 确定性哈希校验（Determinism check）：重复渲染两次前 5 秒，对比 MD5 哈希值是否完全一致node render.mjs --dur 5 --fps 60 --sub 1 && md5 out/silent.mp4   # 运行两次并对比结果

Open out/contact.png, out/strip.png and out/phone.png and look at them properly.Be a harsh motion director, not a proud author.Score 1-10: hook in first 2s · readability at phone size · motion quality (springs,no dead frames) · variety (new thing every 2-4s) · composition · brand accuracy · sound sync.List the 3 biggest problems with timestamps. Hunt specifically for: text overlapping duringswaps, anything sliding instead of easing, corner labels and frame borders, centered-on-gradientshots, blurry scaled text, a dead beat with nothing happening, a stutter at the loop seam.Fix them, re-render only the affected seconds, show me the new contact sheet and new scores.

---name: motion-reeldescription: Make a product or showreel motion video rendered from code. Use when the  user asks for a launch video, showreel, product reel, animated explainer or motion ad.---# Motion reel## Inputs to collect firstProduct + URL, duration, formats (9:16 / 1:1 / 16:9), brand colors + fonts,a reference (frame, video or image folder), music (file or "synthesize").## Pipeline1. Gather assets from the URL with Playwright into ./assets. List them.2. If a reference exists, write docs/style_guide.md from it.3. Measure or synthesize music. beats.py → beats.json.4. Write docs/shotlist.md on the beat grid. Show it and wait for OK.5. Build index.html with window.seek(t) using lib/motion.js springs. Follow CLAUDE.md.6. Contact sheet → critique-pass (see prompts/critique-pass.txt) → fix. 3 rounds minimum.7. node render.mjs → sfx.mjs → mix to -14 LUFS → out/final.mp4, all formats.8. Deliver final.mp4, contact.png, poster.png. Say what you'd improve next.## Hard rules- Real product UI only. Never invent screens.- No Math.random, no timers, no CSS transitions in render mode.- Banned: corner labels, centered title on gradient, everything fading in.