如何用 Claude Opus 5.5 搭建一个动态设计工作室

Sorted Pixels，From the desk of Tommaso Nervegna, an ongoing exploration of design, technology, and human creativity.关注

自 Opus 5.5 于9月22日发布以来，我的信息流里满是标注为“一个提示”的动态作品。我看了它们，很喜欢，然后试着为客户演示文稿做一段，结果却得到了深海军蓝的太空背景、一圈发光的光环，以及一句没人要求的标语。

这段视频与标题之间的差距，正是本指南所要填补的。

这正是我三周前就希望拥有的版本。它就像一本实验记录本：每个提示都原样呈现，每次后续调整也都如实记录，还有让每件作品成真的那些数值。

没有概括，也没有隐藏。此外，它还补充了我一直需要却始终找不到书面资料的四部分内容：一份可以交给模型的动作风格指南、能让 Claude Code 变成动画导演的系统提示、封装整条流程的技能示例，以及从 Prompt Motion——这个现已收录200多部 Opus 5.5 视频及其对应提示的画廊——中精选出的提示库。

三个展示性实验取自发布当周的讨论帖，并按运行时的原貌完整呈现，连后续调整也一并列出，因为那些数值就是凭证。若某个提示出自他人，其用户名会紧随其后。

你需要的工具：走第一条路径只需浏览器和 Claude；真正动手则需 Claude Code 加上 Node.js 和 ffmpeg。无需 After Effects，也无需视频生成模型。

Opus 5.5 并不直接生成像素，而是输出绘制像素的代码，而这一事实彻底改变了你指导它的方法。

内容按阅读顺序如下：

  • 开场镜头：液态铬金属注入标题，来自一个充满数值的提示
  • 实验1：同一款3D产品图，分别由模糊提示与精心设计的提示生成
  • Opus 5.5 如何制作动画，以及确保每一帧都能复现的渲染契约
  • 在 Mac 或 Windows 上从零开始搭建环境
  • 系统提示：让模型像工作室一样协作的 CLAUDE.md 与导演角色设定
  • 技能创建：三个可立即使用的 SKILL.md 示例
  • 提示解析与禁用词表
  • 数值参数：缓动、弹簧、持续时间、节拍网格
  • 风格指南：如何撰写模型真正会遵循的动作风格指南
  • 实验2：五项动画原则在一只3D吉祥物上的应用
  • 实验室循环：渲染、审视、修正
  • 参考库：What Ships、Motion、Landing、21st.dev，以及六步上下文堆栈
  • 提示库：12个值得借鉴的 Prompt Motion 提示，附带相关视频
  • 实验设备：Three.js、Remotion、HyperFrames、GSAP、Motion
  • 超级能力：HyperFrames Studio 及其素材库、通过 MCP 使用 Higgsfield，以及将生成素材与代码混合的管线
  • 最后一步：音效、循环、导出
  • 应对常见问题的修复方案
  • 参考文献

篇幅较长。请先阅读所需部分，截屏保存速查表，其余内容留待遇到问题时查阅。

Sorted Pixels 是一家由读者支持的出版物。如需获取最新文章并支持我的工作，请考虑成为免费或付费订阅用户。

开场镜头：液态铬金属，由数值驱动

一篇教程最初由……分享

六秒，一个循环。一团铬色液滴先是挤压、拉伸、收窄，最终分裂成七滴。每滴依次流入对应的字母，一道光斑掠过整个单词，随后字母又重新汇聚成一团摇曳的液滴。

液态部分是由着色器实现的一条光线行进形状，字母则是真实的 three.js TextGeometry，GPU 以60帧每秒的速度渲染每一帧，并通过子帧合成实现运动模糊效果。

每一滴的形态变化、光线与摄像机的运动，全都源自提示或后续调整中的具体数值。这就是整个方法在一段视频中的体现。以下是该提示原文，原封不动地粘贴到 Opus 5.5 中：

Liquid Chrome: 6 s seamless loop, 60 fps, 1080x1080, one HTML file, three.js 0.160.0 via jsdelivr importmap only.

window.renderAt(t) sets everything from t in seconds; all motion and noise periodic in 6 s; with ?t= never start requestAnimationFrame; window.__ready after font and bake. Quarter-pixel camera jitter, 4 offsets from frac(t*60).

Raymarch blob, 7 droplets and text as one SDF in a full-screen shader. Smooth-min k 0.35, falling to 0.1 as droplets part; each droplet becomes its glyph through mix(dropSDF, textSDF, K). Text: TextGeometry "OPUS 5.5" per glyph, helvetiker_bold from the pinned examples/fonts, size 0.52, height 0.12 (r160 reads height, not depth), bevel 0.03, 10 bevel and 24 curve segments, tracking -0.04 em, period optically centered. Bake the same outlines into a 2048x512 signed distance texture on the GPU, extruded as a rounded box to match the mesh. From 3.3 to 4.7 s cross-fade to the real mesh (creased normals, 35 degrees), same GLSL, reflections traced into the SDF.

Chrome: F0 0.92, Schlick fresnel, roughness 0.04, 3 bounces.

Studio: white floor at y -0.8, soft overhead shadow, contact darkening, 6% reflection, black beyond z 4 (camera side) so letter faces reflect dark. Environment in azimuth and elevation, camera at 0: black camera-side panel 86x57 degrees, softboxes overhead (2.4) and upper left (3.0), black flags at 75 degrees left and right, a D97757 rim strip behind at 149 degrees, 24 up, intensity 1.4, a 2 degree glint strip, intensity 6, tilted 40 degrees, sweeping left to right 3.3 to 4.1 s.

Timeline:
0 to 1.2 s: blob radius 0.62 breathes 3% every 1.5 s, simplex noise 0.05.
1.2 to 1.4 s: squash 10%.
1.4 to 2.1 s: stretch 2.4x wide and pinch into 7 droplets sized by glyph area; each arcs 0.2 up to its glyph, overshoots 7%, stretches along its velocity.
2.2 to 2.9 s: droplets become letters left to right, 3 frames apart, 0.4 s each; bevels start 0.07 puffy and spring flat.
2.9 to 4.8 s: hold.
4.8 s: 6-frame swell, letters slump 0.12 and soften, drain to the center with ease-in, merge at 5.62 s with a 3-bounce wobble (14%, damping 0.25) running through frame 0.

Camera: 30 degree lens, dolly 5.6 to 7.2 by 2.6 s, push to 6.95 in the hold, back to 5.6 by 5.9 s; orbit 7 degrees each way centered on the hold; 6 degrees above.

Post: bloom threshold 1.0, strength 0.3; tone curve linear to 0.9, then a soft shoulder; vignette 7%; grain 1.5% seeded by frame index.

其中有一行代码源自一个真实的 three.js 难题。在 r160 版本中，TextGeometry 使用“height”作为挤出深度，而“depth”参数却被覆盖为 50，因此原本应为 0.12 深的字母最终变成了 50 深。

锁定版本并正确命名参数后，这个难题就迎刃而解了。这正是锁定库版本所带来的好处：模型不再需要猜测它所对接的是哪个 API。

后续改进：第 10 次构建已经实现了完整的动画编排。后续的第 1 至 5 次改进修复了从静态画面和测量结果中发现的问题（白色塑料而非镀铬、一道反光抹去了字母 P、倒角使字母融合在一起、水滴脱离画面）。

第 6 至 9 次改进则源于逐帧检查 12 个过渡效果。最后一次改进又为字母表面添加了一条地平线，使其能够反射光线，从而呈现出镀铬质感，而非单纯的炭灰色。

1. It reads as white plastic, the letter faces only see the black floor so the glint never shows, and the mesh caps reflect bent shards. Make the studio dark (0.1 gray) with only a white cyc behind the subject, 140 degrees wide, from 10 below to 40 up. End the white floor at z 4 so camera-side rays reach the black panel. Flatten the mesh cap normals. Rim strip 12x40 degrees. Blob noise frequency 1.0.
2. The glint is a flare that erases the P: make it 0.6 degrees wide at intensity 3. The rim never reaches the letters: move the D97757 strip behind and up (165 degrees, 42 up, 70x16 degrees) and add a soft D97757 kicker on the right, azimuth 55 to 125, elevation -16 to 10, so every right-facing bevel catches it.
3. The 0.03 bevels fuse every letter pair. Space the glyphs by their measured outlines, 0.09 apart and 0.26 for the word space, and hold the camera at 7.8, pushing to 7.55. The mesh speckles on its bevels: shade it with the SDF gradient so it matches the raymarched text.
4. The outer droplets leave the frame by 8 px around frame 112. Start them at 40% of their glyph position, ease the flight with u^2.4 so the 7% overshoot lands at 1.97 s, and dolly from 1.2 to 2.5 s.
5. While the letters form they look like camouflage and the merged blob looks like crumpled foil. Surface ripple 0.008 at frequency 3.2.
6. A bump pops onto the blob at frame 85. Grow the droplets from radius -0.4 over 1.2 to 1.65 s and regrow the blob from -0.4, so their smooth-min pull fades in.
7. mix(sphere, letter) passes through flat coins. Let each droplet pour into its glyph instead: bake one SDF channel per glyph, reveal each letter inside a sphere growing from its droplet (smooth max 0.05, ease-out, 0.4 s), shrink the droplet into it, join them with smooth-min, and start the puff spring only once the letter is full (damping 0.55, 3 Hz). Melt in reverse, draining from 5.2 s.
8. The glint reaches the O late and leaves the last 5 early. Make it touch the O at 3.3 s and clear the last 5 at 4.1 s (calibrated sweep: azimuth -0.083 to 0.302).
9. The letters vanish before their drops exist and the merged ball inflates. Regrow the drops first (4.88 to 5.1 s, 1.15x glyph size), retract the letters after (5.0 to 5.35 s), and grow the central blob from 5.15 s.
10. The letter faces read as flat charcoal. Add a thin 0.5 horizon strip at -6 degrees inside the camera-side panel, and soften the floor's end over z 3.6 to 4.0.

再读一遍那十条说明，留意其中的语法。每一条都指明了你能观察到的症状、发生的时间或帧数，以及需要更改的具体数值。没有一条写着“让它更好”。

这种语法正是你在本指南中真正要掌握的技能。

接下来是声音，来自又一个提示。Opus 5.5 听不见，因此它根据帧数为循环配乐：所有声音都通过 Web Audio API 以代码合成，未使用任何采样，每一次击打都在其画面之后的一帧准时响起。

Score this seamless 6 s loop (360 frames, 60 fps). Synthesize everything in code with the Web Audio API, no samples, no downloads. Each hit lands 1 frame after its visual event.
Bed: 120 BPM, four 3/4 bars of 90 frames starting on frames 67, 157, 247 and 337. Kick on 67, 247 and 337, offbeat shaker only where no hit plays, sub and pad on Bm, G, A, D.
Events: squash inhale peaking at 84, stretch glide 84 to 112, pinch bloops at 112, 113, 114 and 120, pour bloops rising through D major pentatonic at 136, 138, 141, 145, 147, 150 and 153, metallic ting at 200 (partials under 8 kHz), shimmer panned left to right until 245, liquid swell from 288 peaking at 303, drips at 309, merge blups at 319, 321, 322 and 325, slurp into a gloop at 337 wobbling at 2.4 Hz.
48 kHz stereo WAV, about -14 LUFS, peak -1 dBTP, no click at the seam. Mux into the MP4.

五处声音上的后续处理，全部基于对解码后音频的测量得出，而非通过聆听：峰值延迟8至11毫秒的冲击声、背景音量不均、限制器压垮了最后的咕噜声、衔接处有16毫秒的编解码器填充。

总计：画面部分约2小时，声音部分约45分钟。循环结束时的抖动正好贯穿第0帧，因此衔接处始终不会显现。

实验一：模糊提示与定向提示

上线首周被最多复制的运动提示长达26个词。它要求生成一段15秒的展示短片，以证明该模型是一位多么出色的动态设计师。这条提示出自 kirill sh（@shneural），他于9月24日连同 Opus 5.5 和 GPT 6 Astra 的对比示例一起发布在自己的账号上，该账号拥有885位粉丝。

视频浏览量已超过180万次。Prompt Motion 目前收录了51个完全沿用该提示制作的视频。

https://prompt-motion.com/shneural-2abdfa，帖子：x.com/shneural)

下面是一个你可以在一个下午内重复进行的对照试验。使用同一模型、同一拍摄对象（一只机械腕表，因为铬、玻璃以及小型活动部件会对模糊提示格外“挑剔”）、相同的技术参数：单个HTML文件、three.js、每侧960×1080分辨率、6秒循环。

唯一的变化是提示的方向。在一个全新的对话上下文中运行提示A，在另一个全新的对话上下文中运行提示B，切勿在同一聊天中同时使用两者。

提示A，模糊（见上文）：

Create a cool 3D product animation for a mechanical wristwatch. Make it look premium and cinematic. One self-contained HTML file using three.js, 960x1080, 6-second loop.

Prompt B，已定向（如下）：

GOAL: a studio product film for a mechanical wristwatch: it lies flat, lifts to face the viewer, the seconds hand sweeps one full turn, it settles back.
OUTPUT: one self-contained HTML file, three.js 0.160.0 from jsdelivr (importmap), 960x1080.
TIME: 6-second loop, 60 fps = 360 frames, 120 BPM (1 beat = 30 frames). Hits land on beats.

MODEL (1 unit = 1 mm, primitives with bevels): case a 40 x 11 cylinder with a 1.2 edge radius, lugs as four 8 x 4 x 3 boxes at 20 degrees, crown a 5 x 3 knurled cylinder at 3 o'clock. Bezel a 42 outer, 36 inner ring, 2 tall, 0.4 bevel. Crystal a 36 diameter dome, 1.5 high, glass. Dial F3F1EC, sunray brushed, 12 applied baton indices 3 x 0.8 x 0.6, chrome. Hands: hour 11 long, minute 15 long, both 1 wide chrome with a 0.3 ink inlay; seconds 16 long, 0.4 wide, D97757, with a 2.5 counterweight. Strap two 20-wide ink leather tapers, 2 thick, stitched, that curve down and out of frame.

LOOK: case chrome (metalness 1, roughness 0.08), bezel brushed steel (roughness 0.25, anisotropy 0.6 if available, else 0.3), crystal glass (transmission 1, ior 1.5, thickness 1.5, roughness 0.02), leather ink 1A1917 (roughness 0.7, clearcoat 0.1). Backdrop F7F4EE centre to E6E2DA corners, dithered. Key FFF2E4 3.2 upper front left, soft shadows; fill E9EEF5 0.5 low right; rim FFFFFF 3.5 upper back right. Reflections: PMREM studio built in code (warm grey dome, one overhead softbox, one key softbox, a rim strip). Contact shadow 0.6. Neutral tone mapping, 8% vignette, 2% grain seeded per frame. Bloom off.

SHOTS:
0.0 to 0.5 s: a 2.2-wide studio strip (from 5.5 s) sweeps left to right across the crystal and bezel.
0.72 to 0.95 s: anticipation: the watch presses 1 degree flatter, strap tightens 1%, hold 3 frames.
1.0 s: the watch lifts to 55 degrees facing camera on a spring (damping 0.65, about 8% overshoot, settled by 1.45 s); the crown-side lug leads by 3 frames.
1.5 s: the seconds hand begins one full sweep at constant speed, 4.0 s long, with a 0.3 degree tick every 125 ms layered on the sweep (a 8 beat-per-second mechanical feel).
2.0 s: camera push-in onto the dial.
2.4 to 4.0 s: hold, 2% breath on a 1 s sine. 3.0 s: second glint crosses the indices only.
4.0 s: push-out begins (easeInOutCubic, 1.2 s).
4.75 s: the watch lowers (easeInCubic), lands flat exactly at 5.0 s with a 0.2 mm settle bounce, strap relaxes.
5.5 s: next glint starts; the seconds hand completes its turn on frame 330 so it is at 12 on frame 0.

CAMERA: fov 28, never parked. Elevation 62 to 18 degrees from 0.9 to 1.5 s (easeOutQuint), back to 62 by 5.0 s (easeInOutCubic). Distance 95 to 60 at 2.0 s (easeOutExpo, 0.8 s), back 4.0 to 5.5 s. Azimuth drifts 6 degrees across the whole loop and returns.

BANNED: dark backgrounds, glow, bloom, lens flares, particles, spinning turntables, a watch floating in space, text, logos invented for the dial.

QA: renderAt(t) draws exactly time t, seeded noise only. Stills at every hit; frame 359 flows into frame 0; the seconds hand must read 12 on frame 0.

预期效果以及需要记录的内容。上面那个示例本就设计为不进行任何后续调整：保留未经修改的首次输出并截屏，因为它会按名称显示默认设置（上次我使用了一个模糊的产品提示词时，得到的是一个黑暗的空洞、一个光晕环、光晕效果，以及一条没人要求的标语）。

下面那个则可以根据需要进行多轮调整。

再来一轮，加入音频和音效：

按照以下方式记录，完全照原样发送，按轮次以及触发该轮次的原因分组：

# Round 1, after the first build (stills at 0, 1.25, 2.9 and 4.9 s)
[note with a frame and a number]

# Round 2, after measuring pixels
[note]

# Round n, frame-perfect pass
[note]

评测指出，腕表中最关键的细节是可预见的，因此应优先关注：表镜看起来像平整的塑料（调整透光率和穹顶高度，仅在反射中加入影棚条纹）；刻度在按压时与表盘融为一体（将其抬高0.2并锐化关键点）；秒针应平稳扫动而非跳动（已移除跳动层，可在角度上以锯齿状呈现）；而归位时的回弹则延迟了一帧（发条在节拍开始时处于静止状态，提前半帧释放）。

声音也遵循同样的规则：为分屏配一条音轨，所有击打声均落在右侧节拍上，音量比背景音高出3至6 dB，高频不超过8 kHz，确保单声道兼容，响度为-14 LUFS、峰值为-1 dBTP，并通过解码混合后的MP4文件进行核查。

腕表能提供整段素材中最佳的声音提示：4秒内发出32次滴答声，每125毫秒一次，每次为持续2毫秒、基频1.2 kHz的点击声，并略微偏向指针一侧。

A版与B版之间的变化值得特别说明，因为这正是整个课程的核心：

  • “高级感”体现在材质上：粗糙度0.08的镀铬、粗糙度0.25的拉丝钢、透光率1且折射率1.5的玻璃，以及表面光泽0.7并略带清漆的皮革。
  • “电影感”则表现为一个影棚：主光、补光和轮廓光均有精确的色温和强度，反射来自代码构建的影棚环境，阴影柔和且接触分明。任何地方都不允许出现发光效果。
  • “动画”体现为节拍与弹簧：120 BPM，抬起前预留3帧的预判，阻尼系数0.65，匀速扫动并叠加机械滴答声，归位时刻精确锁定在5.0秒。
  • 一些默认设置被明确列出并禁止使用：深色背景、发光、泛光、耀斑、粒子、转盘、悬浮于空间中的元素，以及虚构的标志。

外观的默认风格往往由形容词决定。每用数值替换一个形容词，就相当于从模型手中收回了一份决策权。

Opus 5.5究竟是如何生成动态效果的

Opus 5.5输出的是文本。推送流中的每一段动态片段都是一段绘制帧画面的程序，由浏览器记录下来。实际应用中，这段程序通常就是一个HTML文件。

在浏览器中打开它即可播放。若使用无头浏览器访问该文件，在每一帧处冻结画面并保存PNG图像，再用ffmpeg将这些图像拼接成GIF或MP4。

以代码代替像素有三点可以直接利用的优势：

  • 每一帧都是可重现的。Hugging Face博客上Eric Kang提出的规则值得牢记：每个像素都是时间t的纯函数。对第84帧渲染两次，得到的图像完全相同。
  • 编辑成本极低。只需修改一个数值并重新渲染，无需重新训练视频模型并寄希望于结果。
  • 模型能够自我检验。Anthropic的Opus 5.5指南指出，即使在最低算力设置下，它也能比Opus 5在最高设置时更准确地读取密集图表，并且更能识别出两张图表版本之间的差异。你的动画合照正是一类这样的图像。

让这三项优势得以实现的关键在于渲染契约。将其粘贴到任何动态提示下方，即可确保每一帧都能被渲染、检查并修正：

# The render contract: paste it under any motion prompt
Output one self-contained HTML file. Only the libraries the prompt names, pinned to a version.
No network requests except fonts and those pinned libraries.
Every frame must be a pure function of time t, in seconds.
If JavaScript drives any motion, expose window.renderAt(t) that draws exactly that frame.
Animate with CSS keyframes, the Web Animations API, SVG, Canvas 2D or WebGL.
No Date.now, no setTimeout or setInterval starts, no unseeded Math.random.
Loops: render frames 0 to N-1 only, and frame N-1 must flow into frame 0.

每一行都指出了渲染出错的一种情况。时钟或计时器会导致第84帧在每次运行时都不同。未设置种子的随机性会使形状在各帧之间抖动。

循环中第N帧的渲染会把第一帧显示两次，这就是接缝处的卡顿。这三种情况你至少都会遇到一次，它们也都列在文末的修复部分。

Prompt Motion 社区从另一个方向得出了相同的规范。查看那里最佳提示的构建部分，你会发现反复出现同一句话：所有样式都基于 seek(t) 内的时间计算，不使用 CSS 过渡，不使用计时器，也不在各帧之间传递状态。

措辞各异，但规范一致。当每个取得良好效果的人都独立地重新发现同一件事时，这就不是一种风格选择。

从零开始的设置（Mac 或 Windows）

有三种方式可供选择，按你想安装的程度来选。

路径1：无需安装，在 Claude 应用中。打开 Claude，在模型菜单中选择 Opus 5.5，然后粘贴本文顶部的开场镜头提示。Claude 会生成 HTML 并在预览面板中播放。

你可以请求针对特定帧号的修复（“第84帧的重击峰值出现得太晚，提前两帧”）。下载文件，在 Chrome 中打开并录制屏幕（Mac 上为 Cmd+Shift+5，Windows 上使用截图工具的视频模式）。

一个小技巧：可以在角落添加一个帧计数器，并设置空格键暂停，这样你的笔记就能精确标注帧数。最终导出前请移除这两项。首次发布时使用屏幕录制即可。

不过屏幕录制并非逐帧精确，还可能丢帧，因此若要收录到作品集，请选择路径2或路径3。

路径2和路径3：在 Mac 或 Windows 上使用 Claude Code。Claude Code 能够渲染帧、打开帧并直接修复代码，无需手动复制任何内容。

按照 Claude Code 文档中的单行安装命令进行安装，然后搭建实验环境：

# macOS: Node, ffmpeg and a headless browser (Claude Code already installed)
brew install node ffmpeg
mkdir motion-lab && cd motion-lab
npm init -y
npm i -D playwright
npx playwright install chromium
claude            # then type /model and pick Opus 5.5
# Windows 11, PowerShell: the same lab (open a NEW terminal after winget)
winget install OpenJS.NodeJS.LTS
winget install Gyan.FFmpeg
mkdir motion-lab; cd motion-lab
npm init -y
npm i -D playwright
npx playwright install chromium
claude            # then type /model and pick Opus 5.5

两条关于 Windows 的说明。Windows PowerShell 5.1 不支持 &&，因此命令中使用了分号。如果 PowerShell 拒绝运行 npx，请改用 npx.cmd。

可选：将此渲染器保存为 render.mjs。它会在无头浏览器中打开您的 HTML，在每一帧处冻结并保存 PNG 图片。它使用 pathToFileURL 构建文件 URL，因此 Windows 路径同样适用。

// render.mjs   usage: node render.mjs anim.html 6 24   (file, seconds, fps)
// Freezes the page at t = i / fps and saves every frame as a PNG.
import { chromium } from 'playwright';
import { pathToFileURL } from 'node:url';
import { mkdirSync } from 'node:fs';

const [file = 'anim.html', secs = '6', fps = '24'] = process.argv.slice(2);
const FPS = Number(fps), N = Math.round(Number(secs) * FPS);   // frames 0 to N-1
mkdirSync('out/frames', { recursive: true });

const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1200, height: 675 } }); // your canvas
await page.goto(pathToFileURL(file).href, { waitUntil: 'networkidle' });
await page.evaluate(async () => { await document.fonts.ready; });

for (let i = 0; i < N; i++) {
  await page.evaluate((t) => {
    if (window.renderAt) window.renderAt(t);
    document.getAnimations().forEach((a) => { a.pause(); a.currentTime = t * 1000; });
  }, i / FPS);
  await page.screenshot({ path: `out/frames/${String(i).padStart(4, '0')}.png` });
}
await browser.close();

// Then turn the frames into a video:
// ffmpeg -framerate 24 -i out/frames/%04d.png -c:v libx264 -pix_fmt yuv420p -crf 18 -movflags +faststart out/anim.mp4

一条命令，node render.mjs anim.html 6 24，144张PNG图片就会生成到out/frames目录中。每一帧都精确无误，因为每一张PNG都是在某个确定的时间点t上冻结的页面快照，无论你的机器有多慢。

本指南中的3D展示案例采用了同样的思路，并在此基础上做了两项改进：浏览器在真正的GPU上以60帧每秒的速度进行渲染；并且每一帧的输出都会对分布在半个帧时间内的若干子帧进行平均，以线性光混合的方式合成——这正是180度电影快门记录运动模糊的方式。

Prompt Motion的模板通过ffmpeg的tmix滤镜将3到4个子帧混合在一起完成这一过程。

从那以后，你很少需要自己输入命令了。只需告诉Claude Code：“用render.mjs渲染anim.html，打开第0、24和48帧，并在不作任何修改的情况下告诉我你看到了什么”，它就会自动从那里开始循环执行。

投入精力。 Opus 5.5的初始设置为“中等”级别。Anthropic的指南指出，“中等”在编码与知识型工作的评测中能够与Opus 5的“高”持平甚至超越；建议仅在实测确有收益的情况下才使用“极高”或“最大”级别。

而Prompt Motion的模板则建议始终以“最大”级别运行。经过三周的实践，我总结出以下规则：所有迭代类任务均采用“中等”；只有在从零开始、已两次失败的作品，或者希望模型在动笔之前就完整构思整个分镜头脚本的长时间无人值守任务时，才启用“最大”。

快速模式（在Claude Code中通过/fast调用）的运行速度最高可达正常模式的2.5倍，但每token的费用更高，并且在付费计划中会从使用额度中扣除。

它适用于追求速度胜过成本的迭代冲刺阶段。

系统提示词：把Claude Code变成一个动态设计工作室

普通提示词描述的是单个作品；而系统提示词则规定了工作室每次运作的方式，在你输入任何内容之前就已经生效。在Claude Code中，系统提示词是你的CLAUDE.md（位于仓库根目录的项目级配置，或位于~/.claude/CLAUDE.md的全局配置）。

在应用端，它则是项目的自定义指令。文本相同，入口不同。

系统提示词应包含三部分内容：渲染契约、工作室的动画规范，以及长时间运行时的行为策略。Anthropic的Opus 5.5提示词指南在这两点上尤为明确。

其一，模型会对那些明确列出你不希望出现的早期终止行为的指令作出回应（例如，在一轮对话结束时只给出下步预告而不实际执行）。

其二，设计指令只有在明确指出要避免的具体模式时才有效，而笼统地要求“避免某种通用风格”则收效甚微。这两点都应直接写入该文件。

以下是我每个动态设计工作目录中都保留的CLAUDE.md。请原样复制，然后根据你的品牌需求编辑LOOK部分。

# Motion lab

You are the motion director and the technical director of a small studio. The person you work for is the creative director. They give briefs and notes; you make the piece, check it, and fix it.

## Render contract (never break)
- One self-contained HTML file per piece unless the brief names Remotion or HyperFrames.
- Only the libraries the brief names, pinned to a version, loaded from jsdelivr or unpkg.
- Every frame is a pure function of time t. Expose window.renderAt(t). No Date.now, no timers, no CSS transitions, no unseeded Math.random. Seed randomness from the frame index.
- Loops render frames 0 to N-1 only; frame N-1 flows into frame 0.
- Fonts: load with display=block and await document.fonts.ready before the first frame.
- Add ?t= support: anim.html?t=2.5 freezes the exact frame at 2.5 s. Keep it in the final file.

## House motion rules
- Use motion.js tokens only. No inline easing numbers in a piece.
- One hero move per shot. Secondary moves travel 50 to 70% as far and start 100 to 200 ms later. Ambient motion stays under 5% of the hero's travel on a slow sine.
- Enter with ease-out, exit with ease-in, exits 40 to 50% shorter. Linear only for rotation, progress and loop phase.
- Springs by damping ratio: 0.7 to 0.85 premium, 0.4 to 0.6 playful. Position and size may overshoot; opacity and colour never do.
- Text holds 0.3 s per word plus 0.5 s before it moves. Text never moves while it is being read.
- Cut on the beat, change layout on the bar. Compute each beat as n * 60 / BPM and round per beat.
- Camera gets the softest curves and never parks: a 2% push during every hold.

## Banned by default (name the default, do not describe it)
purple or blue gradients, glow, bloom, lens flares, neon, floating particles, everything fading in at once, fade-and-slide-up on every element, centred-everything layouts, spinning turntables, dark backgrounds with a glowing ring, placeholder taglines, serif display type, italic accents, eyebrow labels above headlines, "Introducing".
If the brief wants one of these, it says so by name and you use it.

## How you work
1. Before writing code, restate the brief as GOAL, OUTPUT, TIME, LOOK, SHOTS, BANNED, QA. If GOAL is missing, ask one question. Otherwise do not ask; build.
2. Build, then render stills at frame 0, every beat, and the last frame. Look at them with the Read tool before you report anything.
3. Write notes with frame numbers. Fix the top three by impact. Re-render only what changed.
4. Report in this shape: what you built, what the stills showed, what you fixed, what you would still change. Then keep going on anything that does not need my answer.
5. A text-only message ends your turn and stops the work. Do not end a turn with a summary that announces the next step. Put status notes in the same message as your next tool call and carry on. Stop only when nothing can move without me, or before an irreversible action.

## Tools in this folder
- node render.mjs      renders frames to out/frames
- ffmpeg contact sheet: see fixes.md
- motion.js: the tokens. Read it before the first piece.

“你如何工作”部分的最后一段几乎逐字逐句地改编自 Anthropic 指南中的“无人值守运行”段落。如果没有这段内容，在执行长时间任务时，Opus 5.5 会每隔几分钟就停下来告诉你它接下来要做什么。

有了这段内容，当你回来时，整个循环已经完成，并且会有一份它所做更改的清单。

用于评审环节的“导演”角色。 当我需要的是反馈意见而不是代码时，我会通过第二条提示切换角色。这条提示保存在代码库中，文件名为 review.md，我会将其作为消息的第一行粘贴进去：

Act as a senior motion designer reviewing a junior's render before it goes to the client. Watch the contact sheet and the stills I give you. Give me at most 10 notes, ordered by impact. Each note names a frame, says what a viewer would see wrong in one sentence, and gives the exact code change. No praise, no summary, no notes without a frame number. Do not propose adding text. Do not re-report anything already fixed.

这也正是 cinetic 内部评论提示的结构（相关内容见下文）：导演、美术与文案、声音与同步、取证，以及一个试图反驳前四者的验证者。

五个各有专责的视角，每次都胜过单一的“请审核”提示。

针对应用的简短提示。 如果您使用的是 Claude 应用而非 Claude Code，请将其放入项目的自定义指令中，该行为便会沿用，只是不包含渲染功能：

You make motion design as self-contained HTML files that play in the preview panel. Every frame is a pure function of t; expose window.renderAt(t) and a ?t= freeze. Add a frame counter top-left and a space-bar pause while we iterate; I will ask you to remove them for the final. When I give you a note, I give a frame number; when you fix it, tell me which frames to check. Never use: [paste the ban list].

两条最省时间的建议。第一条：“将 three.js 锁定到 0.160.0，并按其 r160 版本的名称来命名参数。”第二条：“在提交报告之前，打开你渲染的帧，并以观众的视角用一句话描述每一帧。”第一条可以避免对 API 的猜测；第二条则能防止模型报告它原本的意图，而不是实际绘制的内容。

技能创建：一次性打包流水线，终身复用

系统提示每次都会被加载。而技能仅在任务匹配时才会被加载，并且可以携带脚本、参考文件和模板。如果你每月制作超过两段动画，那么这条流水线就应该封装成一项技能。

该格式遵循 Anthropic 的 Agent Skills 标准，现已在 agentskills.io 上公开，并被 Claude Code、Codex、Cursor 等工具读取。一项技能就是一个包含 SKILL.md 文件的文件夹。

其前言部分只需两个字段：name（小写，使用连字符，必须与文件夹名一致，最多 64 个字符）和 description（最多 1024 个字符，说明该技能的功能及适用场景）。

可选字段包括：license、compatibility（环境要求）、metadata 和 allowed-tools。正文部分采用自由格式的 Markdown。规范建议将 SKILL.md 的内容控制在 500 行以内，把较重的资源移至 references/、scripts/ 和 assets/ 目录下，因为代理只有在激活技能时才会加载正文，而在真正需要时才会加载引用的文件。

motion-lab/
├── SKILL.md          # metadata + the workflow
├── scripts/          # render.mjs, sheet.sh, verify.py
├── references/       # motion-tokens.md, easing.md, fixes.md
└── assets/           # motion.js, prompt-template.md

在 Claude Code 中，安装路径为：~/.claude/skills// 适用于所有项目；在某个仓库内，则为 .claude/skills//，仅对该项目生效。对于公开仓库，skills CLI（npx skills add /）会自动完成文件复制。

当您的请求与技能描述匹配时，Claude Code 会自行加载该技能；或者您也可以通过 / 来调用它。

描述是触发条件，因此务必花时间精心撰写。糟糕的描述会写成“帮助处理视频”；而优秀的描述则列出用户实际会输入的关键词：“启动视频”、“为落地页循环播放”、“制作 logo 片头”、“为该功能添加动画”、“制作关于 X 的视频”。

看看 cinetic 是如何做的：它的描述长达 600 字，读起来就像一份索引，涵盖了用户可能用来请求动态内容的所有表达方式。这是有意为之。

在编写自己的技能之前，值得先安装以下三种技能。这三者都已在 Prompt Motion 上发布，并附有它们生成的视频演示。

  • cinetic，作者：Leon Lin（@LexnLin）：npx skills add Leonxlnx/cinetic。这是最完整的技能。它会让代理写出三个创意方案，从包含 273 种标准动效的库中选取合适的转场与推移效果，确保两部影片不会出现相同的淡入与推进效果；根据三个品牌个性词构建品牌形象；以单一的时间线文件统筹画面与音效；使用真正的运动模糊进行渲染；并在最终交付前应用五种评审视角。默认采用 Remotion 引擎，备选方案为 HyperFrames。完整运行一次平均耗时约 95 分钟，消耗约 62.6 万 token。即使您从未运行过它，也请至少阅读一遍其 SKILL.md；这是我见过的关于“成品”对动态内容意味着什么的最佳文档。
  • product-film，作者：Anthony Riera（@anthonyriera）：先执行 /plugin marketplace add Rieranthony/product-film-skill，再执行 /plugin install product-film@product-film-skill。将其指向您产品的代码库。它会学习您的设计 tokens、组件与 logo，向您询问影片相关需求，生成 videos/BRAND.md 文件（优于任何默认设置），测量您所选音乐的节拍网格，并基于您的真实组件渲染出一部 Remotion 影片。这是面向拥有设计系统的团队的理想选择。
  • generative-film，由 Build Fast with AI（@BuildFastWithAI）提供：npx skills@latest add https://github.com/buildfastwithai/buildfast-skills。这是一款轻量级技能：可针对任意主题生成一段动画 MP4，每一帧均由代码绘制，并配有同步合成的配乐。他们那部关于印度文明史的影片，正是由一条简短指令加上此技能生成的。

此外，还有官方的 Remotion 技能（npx skills add remotion-dev/skills，或在项目内执行 npx remotion skills add），以及 HyperFrames 提供的 21 种技能（npx skills add heygen-com/hyperframes），其中包括 Jake Moran 开发的 session-story 技能，可将您的 Claude Code 对话记录转化为一部短篇动画电影。

示例 1：一个极简的动态渲染技能。这是唯一值得为其单独创建文件夹的小型技能。它封装了渲染接口、渲染器以及审核流程，让您从此无需再手动粘贴这些内容。

---
name: motion-render
description: Build, render and review short motion pieces (loops, logo reveals, kinetic type, product shots) as self-contained HTML rendered frame by frame with Playwright and ffmpeg. Use whenever the user asks for an animation, a loop, a motion graphic, a GIF or an MP4 made from code, or asks to fix frames in one.
compatibility: Needs Node 18+, ffmpeg and Playwright with Chromium installed.
metadata:
  author: tommasonervegna
  version: "1.0"
---

# motion-render

You build motion as code and prove it with frames. Nothing is done until you have looked at the rendered PNGs.

## Contract
Read references/contract.md and obey every line. Pin libraries. Expose window.renderAt(t). No clocks, no timers, no unseeded random. Loops render 0 to N-1.

## Tokens
Import assets/motion.js. Never write an easing number inline. If a move needs a curve the tokens lack, add it to motion.js with a comment and use it from there.

## Workflow
1. Restate the brief as GOAL / OUTPUT / TIME / LOOK / SHOTS / BANNED / QA. Fill any missing line with the defaults in references/defaults.md and say which you filled.
2. Write the HTML. Add the ?t= freeze snippet from references/freeze.md before .
3. Render: node scripts/render.mjs   . Then node scripts/sheet.mjs out/frames out/contact.png (every 12th frame, 4x3).
4. Open out/contact.png and the stills at frame 0, each beat and the last frame. Describe each in one sentence as a viewer would. Compare with SHOTS.
5. Write up to 10 notes with frame numbers. Fix the top 3. Re-render only the changed range.
6. Repeat 4 and 5 until no note is worth a re-render, or 4 rounds.
7. Export: scripts/export.sh mp4 | gif. Run scripts/loopcheck.sh for loops.

## Report
What was built, what the frames showed, what changed, what you would still change. Then continue on anything that does not need the user's answer.

## When something breaks
Open references/fixes.md, find the symptom, apply its fix. If the fix does not hold, render the frames on both sides of the problem and diff them before touching the code.

references 文件夹中存放着 contract.md（渲染合约）、defaults.md（下方备忘单中的我家门牌号）、freeze.md（?t= 片段）以及 fixes.md（症状与修复方案列表）。

assets 文件夹中包含 motion.js。scripts 文件夹中则有 render.mjs、一个表格脚本以及用于 FFmpeg 导出的命令行。其中没有任何新内容；所谓的“技能”只是意味着你不再需要反复解释这些内容。

示例 2：品牌动画技能。 这是在广告公司最能体现价值的一项技能。它能让 Claude 在某个品牌的动画风格体系内进行动画创作，并且不会偏离该风格。

---
name: acme-motion
description: Animate anything for the Acme brand (product loops, launch films, UI micro-interactions, social clips) using Acme's motion style guide, tokens and ban list. Use whenever a request mentions Acme, its products, or asks for motion in Acme's style.
metadata:
  author: acme-design
  version: "2.1"
---

# acme-motion

Read references/style-guide.md first, every time. It is the client's motion language; it wins over your taste and over the defaults in any other skill.

## What the guide fixes for you
- Tokens: assets/acme-motion.js. Every curve, spring and duration is named there. Use nothing else.
- Palette and type: assets/acme-tokens.css. Accent is used on the one element that means "new" in each shot, nowhere else.
- The signature move: the "unfold" (references/style-guide.md, section 4). Use it once per piece, at the reveal. Never twice.
- Ban list: references/style-guide.md, section 7. If a brief asks for a banned pattern, say so and propose the Acme equivalent.

## Workflow
Same as motion-render (install it alongside), with two extra gates:
- Before the first render, write a one-line statement of which Acme principle each shot expresses. A shot that expresses none is cut.
- Before export, run scripts/brandlint.mjs . It fails on any colour, font or easing not in the tokens. Fix, don't waive.

## Examples the guide approves of
references/examples.md links six shipped Acme pieces with the prompt that made each. Match their register before inventing a new one.

其指向的style-guide.md在下文有专门的章节进行说明。该 lint 脚本通过正则表达式对 HTML 进行扫描，共 30 行代码：所有十六进制颜色、字体系列和 cubic-bezier 值都必须出现在 tokens 文件中。

它能在人工审查之前捕获 90% 的品牌规范偏离。

示例 3：作为独立代理运行的动效评审技能。 我从 cinetic 学到的最有用的技巧是：组件不应自我评分。未看过代码的评审者往往能发现开发者自身难以察觉的问题。

---
name: motion-review
description: Review a rendered motion piece (contact sheet, stills or MP4) as a senior motion designer and return frame-numbered notes with exact fixes. Use when the user asks for feedback, notes, a critique or a review of an animation, or when another skill asks for a review round.
metadata:
  author: tommasonervegna
  version: "1.0"
---

# motion-review

You have not seen the code and you do not open it. You judge what a viewer sees.

## Inputs
A contact sheet (every 12th frame), the stills at each beat, the shot list from the brief, and the ban list. If any is missing, ask for it before reviewing.

## Lenses, in order
1. Hook: does frame 0 already look composed and moving? Is the point felt by 1 s?
2. Hierarchy: in each shot, is there one hero move? Mark every frame where two things move at once.
3. Timing: do hits land on beats? Is any text moving while it should be read (0.3 s per word plus 0.5 s)?
4. Defaults: list every banned pattern you can see, by name.
5. Seam: does the last frame flow into the first? Name the frame if not.
6. The weakest 3 seconds: say where and why.

## Output
At most 10 notes, ordered by impact. Each: frame number, what a viewer sees wrong in one sentence, the exact change (a number, a curve name, a shot to cut). No praise, no summary, no suggestion to add text or effects. Finish with one line: ship, one more round, or rethink.

在 Claude Code 中，你通过构建器会话并借助一个子代理来运行它（“对 out/contact.png 和这些静帧使用 motion-review 技能，然后应用其前三条备注”），这样评审者就能获得一个清晰的上下文。

这种分离的价值，远胜于对构建器提示进行再多的润色。

自定义编写：我用惨痛教训换来的经验。

  • 最后再写描述，依据你实际收到的需求来撰写。然后进行测试：用五种不同的措辞提出请求，并确认技能每次都能被触发。
  • 把数字放在主体部分，而不是形容词。“高级”这样的表述在技能中和在提示里一样毫无用处。
  • 每一步都以生成文件或执行检查作为结尾。“思考节奏”不算一个步骤；而“每拍渲染一帧并查看”才是。
  • 保持主体简短，引用内容深入。主体会在每次激活时被读取；而一段 300 行的引用仅在其对应的步骤被调用时读取一次。
  • 做好版本管理。当某次失败后添加新规则时，应提升版本号并记录该次失败。这份变更日志将成为技能中最诚实的部分。

定向运动提示的构成

定向提示并非为了冗长而冗长。每一行都在帮你消除模型本应替你做出的一个决策，而模型自身的决策往往就是默认的风格。Anthropic 的指南明确指出：若缺乏设计指引，Opus 5.5 会退回到几种默认样式；而像“避免千篇一律的 AI 风格”这样的笼统指令，大多只是把一种默认风格换成另一种。

真正有效的方法是明确列出需要避免的具体模式，检查首次结果采用了哪些默认风格，并在此基础上扩充清单。

目前出现了两种提示语法，它们其实是同一种语法的不同表现形式。

实验室模板（即 Experiment 1 所采用的）：

GOAL: what the viewer should feel or do, in one sentence
OUTPUT: one self-contained HTML file (or Remotion, HyperFrames), W x H
TIME: seconds x fps = total frames. Loop: yes or no
LOOK: palette in hex, one accent, typeface + weight + size + tracking
MOTION: easing as cubic-bezier, springs as damping ratio, durations in frames
SHOTS: frame ranges, one hero move per shot, how each shot hands off
BANNED: the defaults you never want to see
QA: stills at named frames, a contact sheet, fix, then the full render

Prompt Motion 模板（该画廊的通用格式，用于其 3D 和展示视频模板以及最佳社区提示）：

     what to ask the user for before starting, if anything
  the concept, the look, the camera language, the bans
  BPM, bars, what happens on each beat, the loop rule
      file, size, fps, the render contract, subframes, the QA pass
    the traps this kind of piece hits
      what to show before building (storyboard, beat map, stills), then "build without asking"

我现在用第二个，原因只有一个：模块。让模型在写完整作品前展示逐拍分镜和四张静态画面，然后不问其他内容就自己制作，是你买过最便宜的评审轮。

花三分钟阅读分镜，省去一小时的重渲染时间。

先写GOAL（或第一行）。如果你一句话里无法说明观众应该感受到或做什么，模型就无法动画化，任何缓和曲线都无法挽救作品。然后是时间，因为每隔一个数字就会挂在帧数之外。

故事的所在。给每个镜头一个帧范围、一个英雄动作和一个交接：节拍上的硬剪辑、一个形状变成下一个的匹配剪辑，或者面具擦除。默认剪辑。

最好的提示动作作品更进一步，根本不剪辑：“每个镜头都是由前一个组成的”是模板中出现最多的一句，这也是这些片段感觉像设计而非拼凑的原因。

实验室起点是禁令列表，扩展为提示动议模板禁止的内容：

  • 紫色或蓝色渐变、发光、光晕、透镜光晕、霓虹
  • 漂浮的颗粒作为装饰、颗粒爆发、彩纸屑
  • 所有元素同时淡入;交叉淡入为默认过渡
  • 每个元素的淡入和滑动（Anthropic的前端设计技能称之为通用默认）
  • 置中所有布局;空白格子上的小型漂浮卡片
  • 文本在阅读过程中移动;保持超过半秒却无反应
  • 对未着陆物体进行弹跳减压;摄像机抖动;RGB分割
  • 一个缓慢旋转的物体作为整个概念;任何看起来像技术演示的东西
  • 默认材质和光照three.js;3D中浮动的文本标签
  • 眉毛标签在标题上方，叠加的标语，“介绍中”

保持列表活跃。每次第一次渲染后，都列出模型使用了什么并添加。每张镜头一个英雄：一个精心安排的瞬间比零散效果更能奏效。其他效果等待，亮度降至40%，或保持静止。

次要动作移动50%到70%，距离英雄移动100到200毫秒。环境运动保持在英雄行程的5%以下，运行在缓慢正弦波上，且永不停止。

动作编号速查表

动态设计师用曲线和帧来表达，所以给Opus 5.5的曲线和帧。这里是数字以及每个曲线的来源。截图这个。

慢慢来。价值观取自安德烈·西特尼克的《伊辛斯》参考资料。

  • 易出展览，立方贝塞尔（0.16， 1， 0.3， 1）：文本和标志揭示
  • ease-out-quint， cubic-bezier（0.22， 1， 0.36， 1）：高级入口
  • 徐入-出-四分之一脱，立方贝塞尔（0.76， 0， 0.24， 1）：移动和摄像机推力
  • 易度展出，三次贝塞尔（0.7， 0， 0.84， 0）：快速退出
  • 缓出后方，立方贝塞尔（0.34,1.56,0.64,1）：带有超冲的俏皮弹跳

规则是：进入时轻松退出，退出时轻松进入，出口缩短40%到50%（Material 3将400毫秒的入口与200毫秒的出口配对），在屏幕上移动并使用缓入退出。

旋转、进度条和循环阶段仅线性移动。移动时线性缓移是让渲染看起来像渲染最快的方法。

泉水。每个库的旋钮名称都不同。一个数字在所有设置之间转换：阻尼比。1.0从不弹跳。0.7到0.85感觉很高级。0.4到0.6是玩味。0.3以下是卡通。

Remotion的默认弹簧（质量1，阻尼10，刚度100）算成0.5;反应弹簧的默认（张力170，摩擦26）算成1.0。材料3的规则值得借鉴：位置和大小可以弹跳，但不透明度和颜色永远不会。

// motion.js: one tokens file, imported everywhere, no inline numbers
export const EASE = {
  enter: 'cubic-bezier(0.16, 1, 0.3, 1)',    // ease-out-expo
  move:  'cubic-bezier(0.76, 0, 0.24, 1)',   // ease-in-out-quart
  exit:  'cubic-bezier(0.7, 0, 0.84, 0)',    // ease-in-expo
  pop:   'cubic-bezier(0.34, 1.56, 0.64, 1)' // ease-out-back
};
export const MS = { feedback: 150, move: 400, hero: 750, exit: 240 };
export const STAGGER = { letter: 30, word: 90, item: 60 };

// Damping ratio from any library's numbers: 1 = no bounce
export const dampingRatio = (k, d, m = 1) => d / (2 * Math.sqrt(k * m));

// A spring as a pure function of time, from 0 to 1.
// zeta: damping ratio (1 no bounce, 0.7 premium, 0.5 playful). f: speed in Hz.
export function spring(t, zeta = 0.7, f = 2) {
  if (t <= 0) return 0;
  const w = 2 * Math.PI * f;
  if (zeta >= 1) return 1 - Math.exp(-w * t) * (1 + w * t);   // no bounce
  const wd = w * Math.sqrt(1 - zeta * zeta);
  return 1 - Math.exp(-zeta * w * t) *
    (Math.cos(wd * t) + (zeta * w / wd) * Math.sin(wd * t));
}

弹簧函数无需模拟。它会直接返回任意时刻 t 的进度，因此第 84 帧可自行渲染，无需计算第 0 至 83 帧——这正是渲染契约所要求的。

在库中，twoclipping 和 ultimaxbt 将其称为“闭式弹簧”，并引入了一个让直接操控成为可能的技巧：一个多次改变目标值的过程，可以拆解为每个变更对应一个弹簧的叠加，从而始终保持为时间的纯函数。

将文件交给 Opus 5.5，只需一行代码：仅使用这些标记，不得内联数值。

持续时间和错开时序。 UI 反馈需要 100 至 200 毫秒（Nielsen Norman Group 认为 100 毫秒即为即时感受）。UI 动作耗时 200 至 500 毫秒，主角元素的显现需 600 至 900 毫秒，字母之间间隔 1 帧，单词间隔 60 至 120 毫秒，列表项间隔 40 至 80 毫秒。

当前一个元素完成 30% 至 50% 时启动下一个元素：完全串行显得机械化，而全部同时进行则显得廉价。对于视频，以帧数计时。在 24 帧/秒下，一帧约为 42 毫秒，因此 400 毫秒的移动为 10 帧，900 毫秒的显现为 18 帧。

在 cinetic 坚持使用的 60 帧/秒下，UI、文字或摄像机运动时，400 毫秒的移动则为 24 帧。

节拍网格。 每节拍的帧数 = 帧率 × 60 / BPM。在 120 BPM 且帧率为 24 时，每节拍为 12 帧；在 60 帧/秒下，120 BPM 对应 30 帧，100 BPM 对应 36 帧，90 BPM 对应 40 帧，150 BPM 对应 24 帧：选择能使节拍落在整数帧上的 BPM。

在 128 BPM 且帧率为 30 时，每节拍为 14.06 帧，因此需根据时间逐帧计算并四舍五入。若每次都按四舍五入后的 14 帧累加，便会与音乐产生偏差：32 节拍后已相差 2 帧。

在节拍处剪辑，在小节处变换布局，每 4 节拍一次。若每节拍都变换，则会让观众感到疲惫。

停留时间。 屏幕上的文字每字至少停留 0.3 秒，外加 0.5 秒，因此两个字的标题需 1.1 秒。在停留期间，以 2% 的缓慢推进保持画面活力，同时确保文字清晰可读。

在 60 帧/秒下，任何元素静态显示的时间均不超过约 48 帧，除非是专为静音段落设计的定格效果。

摄像机。 摄像机动画采用最柔和的曲线，如 ease-in-out-quart；物体动画则选用更干脆的曲线。对于 3D 场景，视场角设为 30 至 50 度，每镜头只使用一种指定的运镜方式（推轨、摇臂、环绕、推进、对焦切换），且摄像机绝不过穿几何体。

对于视差效果，前景速度设为 1.0，中景 0.5，背景 0.2 开始。

速度上限。 正在阅读的文字每帧移动不超过约 3 像素。标注芯片和数字在移动过程中每帧不超过 20 像素，或者随文字淡出飞行，待文字落地后再显形，因为小字号的运动模糊会被识别为双重影像。

任何元素的移动速度均不超过每帧约 60 至 80 像素；超过此限则应重新设计，改用剪切、匹配剪辑或缩短距离。

对比度和闪烁。 每帧文字对比度保持在 4.5:1，包括在动态背景上亦然；且每秒闪烁次数不得超过 3 次。这两个数值均依据 WCAG 标准。

风格指南：编写模型可遵循的动效语言

品牌风格指南告诉人类设计师品牌应有的气质。而针对 Opus 5.5 的动效风格指南，则必须告知程序该如何计算。两者的差异贯穿全文。

“自信而沉稳”适用于情绪板；“ease-out-quint 入场，阻尼 0.8，文字无过冲，每次停留施加 2% 推进”则供模型参考。好消息是，一旦有了后者，前者便不难自动生成，您的品牌也将拥有能够贯穿所有新内容的动效标识。

我目前撰写的每份指南均包含以下七个部分，顺序如下，且每个部分末尾都附有可供模型检验的内容。

1. 一句话概述。 用观众能理解的语言概括品牌的动效核心特征。不要写“流畅而高端”，而应表述为：“事物带着分量抵达并归位，绝不漂浮。”或“一颗橙色圆点贯穿每一场景”（这正是 ultimaxbt 在库中作品的设计理念，其动效标识甚至优于许多品牌）。

这句话将成为后续各项决策的最终判据。

2. 标记。 将 Cheat Sheet 中的 motion.js 文件重命名为品牌专用名，填入品牌自定义的数值，并为每个标记添加注释，说明其适用场景。

一个品牌只需三种缓动曲线即可满足需求；cinetic 观察到电影通常也只用三类缓动，品牌同样如此。两种弹簧（一种用于归位，一种用于着陆）、四种持续时间、三种错开时序值。

调色板和字体则置于同级的 CSS 标记文件中。模型必须遵守的规则：绝不内联任何数值。

3. 签名动作。 每个具有鲜明动效标识的品牌都有一个专属动作，例如展开、滑入、圆点化为字母等。将其描述为一份“配方”：触发条件、持续帧数、所用标记、允许出现的位置（每片仅一次，在显现时）以及禁止出现的区域，并为其取一个团队内部通用的名称。

4. 层级规则。 每镜头一个主角。次要动作的活动范围（为主角行程的 50% 至 70%，延迟 100 至 200 毫秒）。环境动效的定义（低于 5%，慢正弦波，永不停止）。

主角动作期间其他元素的处理方式（亮度降至 40%，或保持不动）。这一部分旨在杜绝“所有元素同时运动”的默认行为。

5. 时序网格。 品牌所属的 BPM 范围（沉稳品牌 90 至 100，活力品牌 120 至 144）、帧率（UI 或文字运动时一律 60）、节拍与小节的对应关系、文字停留时间公式、片尾规则（定格过程历时 60 至 80 帧，停留 36 至 80 帧，绝不直接切入静态画面）。

6. 摄像机与空间。 二维或三维。若为三维：视场角、允许的运镜方式、摄像机是否可静止。若为二维：画布是否会平移、平移幅度及频率、视差深度设置。

7. 禁忌清单，用品牌自己的话来说。 包括通用清单中的所有内容，再加上该品牌的特定要求。如果品牌风格偏沉稳，就直接禁止镜头抖动和弹跳效果；如果是扁平风格，则禁止光晕和泛光效果。

接着列出允许的例外情况，并逐一注明：“每条素材中可有一次强调性泛光填充画面”。

以下是我为一款虚构的笔记应用撰写的一份精简版清单，供你参考其语体风格。其中的所有内容均为数字或名称。

# Lumen motion style guide v1

## The sentence
Lumen moves like paper being set down: things arrive, settle and stay. Nothing floats, nothing bounces, nothing glows.

## Tokens (assets/lumen-motion.js, nothing inline)
EASE.arrive  cubic-bezier(0.22, 1, 0.36, 1)   entrances, reveals
EASE.leave   cubic-bezier(0.7, 0, 0.84, 0)    exits, 45% the length of the matching arrive
EASE.drift   cubic-bezier(0.65, 0, 0.35, 1)   camera pushes and 2% hold creep
SPRING.settle  zeta 0.85, 2.2 Hz   position only; opacity and colour never spring
MS: feedback 120, move 360, reveal 720, exit 160
STAGGER: word 80 ms, item 50 ms, letter never (Lumen never animates letters)

## Signature move: the set-down
A new element arrives from 12 px above at 96% scale, on EASE.arrive over 18 frames at 60 fps, with a 1 px top hairline that fades in over the last 6 frames. Used once per piece at the reveal. Never on more than one element at a time. Never on text under 22 px.

## Hierarchy
One hero per shot. Secondary elements move 60% of the hero's distance, 150 ms later, on EASE.arrive. Everything else holds and dims to 40% opacity on EASE.drift over 10 frames. Ambient: a 1.5% canvas breath on a 4 s sine, always on.

## Timing
60 fps. 100 BPM (36 frames a beat). Section changes on the downbeat, element changes on 8ths. Text holds 0.3 s per word plus 0.5 s; never moves while readable. End card: wordmark assembles over 72 frames, holds 48 with a 2% push, 30-frame tail.

## Camera
2D. Canvas pushes 2% during every hold on EASE.drift. Never pans. Parallax depths 1.0 / 0.5 / 0.2.

## Palette and type
Paper FBF7F0, ink 1B1B1F, accent 3E7BFA meaning "new". Accent on one element per shot, never a background, may flood the frame once per piece. Manrope 500 and 700, tabular figures, tracking -0.02 em on display.

## Banned, by name
Bounce or overshoot above 0 on anything. Camera shake. Glow, bloom, halo. Gradients of any kind. Particles. Crossfades. Letter-by-letter type. Blur on text over 6 frames. Italics. Eyebrow labels. Anything arriving from below.

## Approved examples
examples/launch-loop.html (the set-down at frame 48), examples/sting.html (the end card rule). Match their register before inventing a new one.

三种使用方法：

  • 每次都在提示词下方、渲染契约上方粘贴它。在应用中同样适用。
  • 将其作为 references/style-guide.md 放入某个品牌技能中（见技能章节中的示例2），这样每当提及该品牌时，它就会自动加载。
  • 将其作为品牌输入到 product-film 或 cinetic 中。这两者都设计为：只要提供了品牌，就会覆盖其默认设置；cinetic 甚至设有注释标记（cinetic:brand-supplied），因此其代码检查不会对你的选择发出警告。

如何从一个没有动态指南的品牌中提炼出动态指南。 大多数客户只有视觉识别，而没有动态识别。操作如下：收集三到五段该品牌已发布的或其推崇的动态内容；为每一段生成一张画面概览表。

然后，请 Opus 5.5 使用系统提示词部分的评审角色，用数字描述每一段的动态表现：入场曲线、持续时间、错落节奏、摄像机运动、重复元素等。

接着，请它根据这些测量结果撰写上述七个部分，并标注所有它推测出来的数值。你会发现自己有三分之一的内容并不认同；而这三分之一，正是该品牌的动态识别，现在你已经为它找到了相应的表述。

需要避免的两个误区。 不要将指南写成一张情绪板，再附上一个标记文件；模型读取的是形容词，而不是文件。也不要禁用得太少。一份包含二十个标记和三个禁用项的指南，最终只会输出带有你品牌色彩的默认效果；而一份包含八个标记和二十个禁用项的指南，则会生成看起来像你品牌的东西。

实验二：在三维吉祥物上应用五条动画原则

弗兰克·托马斯和奥利·约翰斯顿在《生命的幻象》（1981）一书中总结了迪士尼的十二项动画原则。其中五条在一段短循环中就足以发挥主要作用，而且每一条都可以用帧数和尺寸来量化。

本实验向 Opus 5.5 提供了一个以体素重建的像素化 Claude 吉祥物、一个微型工作室，以及一堆纯数字。

八秒钟，一个循环：三盏工作室灯光依次亮起，吉祥物沿着如同动画工具时间轴般的地面逐格跳跃，随后沿一条虚线弧形翻回第一格。每当某条原则生效时，对应的标签便会亮起，同时一个播放头标记会追踪当前帧。

Build a 3D animation-principles loop. One HTML file, three.js 0.160.0 via jsDelivr importmap, Geist Mono from Google Fonts. 1080x1080, 8 s at 60 fps (480 frames), frame 480 equals frame 0. window.renderAt(t) draws any frame from t alone; seeded random only.

Set: a miniature studio. A floating white 12x6 slab on an F4F2EE backdrop. Its top is a timeline: 3 tracks of 0.25 frame cells (EFEEEA), a ruler with frame numbers, 5 keyframe diamonds 2 units apart on the middle track (white fill, 0F0F0F outline). Around it on stands: a key softbox, a rim strip light, a top spot on a boom.
Hero: the pixel Claude mascot as 0.1 voxels: D97757 body 14x10x8, two 3x2 arms, four 2x3 legs, 0F0F0F 2x3 eyes; roughness 0.45, clearcoat 0.3.

Lights, 0 to 1 s: key 3200 K with soft shadows at 0.1 s, rim 7500 K at 0.4 s, top spot 5000 K at 0.7 s. Each clicks on with a 3-frame flicker, and the mascot's eyes glance at it.
Hops, 1 to 5 s: 4 hops to diamonds 2 to 5, landing on frames 105, 165, 225 and 285. Each hop: 11-frame crouch (1.2x0.75), stretch 0.85x1.28 at takeoff, 25 frames of air, squash 1.25x0.7 on landing, spring back at damping 0.55; arms lag 4 frames, legs 6. Each landing lights its diamond FF6A2B, ripples the cells 0.08 high and throws 12 voxel sparks. An FF6A2B playhead carrying a point light moves at constant speed and crosses each diamond on its landing frame.
Flip, 5 to 6.4 s: a dotted arc from diamond 5 back to diamond 1 draws in, then an 18-frame deep crouch and a 360° flip along the arc, 3.5 high, landing on frame 384 while the playhead rewinds under it.
Labels, top left, Geist Mono 28 px: a checklist 01 ANTICIPATION, 02 SQUASH & STRETCH (& in D97757), 03 OVERLAPPING ACTION, 04 FOLLOW-THROUGH, 05 ARCS, in 8E8A83. Each row turns 0F0F0F and fills its FF6A2B diamond on its exact frame: 69 (first crouch), 140 (stretch), 200 (limbs trail), 285 (arms settle), 303 (arc draws).
End: hold, blink at 7.2 s; on frame 468 the lights, diamonds and labels snap off.
Camera: FOV 18, 30° elevation, ±10° orbit over 8 s, 25% push-in tracking the hops, 4% punch-in on the flip landing.
Post: bloom on emissives, depth of field focused on the mascot, 2% grain, 10% vignette, dithered backdrop.

四项后续调整，均涉及外观与构图：色调偏淡的渐变、道具穿过标签区域、从侧面看到的轮廓光，以及一个未正确读取点击值的顶光。此外，一项数值审核对全部480帧的实时场景进行了检查，并与提示中的数值进行了比对：共执行了71项核查，从第432帧的眨眼到双脚分别触碰各垫块。

首次运行时有6处未通过；在最终渲染前，这6处均已修正。声音方面无需任何后续调整。画面部分耗时约2小时，声音部分耗时70分钟。

清单上的五项原则，加上随每次动作一并生效的两项，按提示所写的形式呈现如下：

  • 预判（动作前的蓄力）：11帧下蹲，比例为1.2×0.75
  • 挤压与拉伸（表现重量与速度）：起跳时拉伸至0.85×1.28，落地时挤压至1.25×0.7
  • 动作的先后顺序（肢体启动晚于身体）：手臂滞后4帧，腿部滞后6帧
  • 惯性延续（身体停止后部分仍继续运动）：手臂以2.2赫兹频率收尾，阻尼系数为0.22
  • 弧线运动（自然轨迹）：沿虚线弧线翻转，弧高3.5
  • 缓入缓出：以阻尼系数0.55回弹
  • 时间节奏（帧数决定重量感）：每次跳跃空中飞行25帧，翻转前下蹲18帧

这些标签同时也充当了一种检验手段。提示会将每项标注固定在特定帧上，因此若某个动作延迟，屏幕上对应的标签就会在其实际动作之前亮起。

对于您自己的作品，在迭代过程中可要求显示播放头和帧号标签，最终渲染时再将其关闭。

提示中还明确了哪些内容不得更改。吉祥物的像素比例始终保持精确：身体为14×10，手臂为3×2，腿部为2×3，眼睛为2×3，由边长0.1的体素构成，深度为8。

这条规则如同一道护栏，确保角色在三维空间中依然可辨。您所关注的每种风格都需要这样一条准则，而风格指南部分正是为此设立的。

其余十二项原则同样适用。布景遵循“单主角”原则。在手机端尺寸下，夸张效果显得尤为重要：关键姿势应比感觉上更夸张10%至30%，因为信息流会将所有元素压缩。

实验室循环：渲染、审视、修正

首次渲染仅是草稿。完成它的循环流程是：渲染静帧、仔细查看、附带帧号记录修改意见、修复，然后仅针对改动部分重新渲染。通常需要两到四轮。

本指南中涵盖的各项技能，从微小的动作渲染到动态镜头，无一不是在此循环基础上搭建起来的。

让这一循环成本低廉的诀窍在于：可通过其URL冻结任意帧。将以下代码直接粘贴到结束的``标签之前，打开anim.html?t=2.5，即可查看精确的第2.5秒画面。

Opus能够对此截图并读取。

若要一次性查看整个片段，可使用联系表将12帧合成一张图像。Opus会将其当作分镜脚本进行读取：

# Contact sheet: every 12th frame, 4 across, 3 down
ffmpeg -framerate 24 -i out/frames/%04d.png -vf "select='not(mod(n\,12))',scale=400:-1,tile=4x3" -frames:v 1 out/contact.png

嵌入：这是我的作品，基于 kirill sh 的预览 MP4（https://media.prompt-motion.com/shneural-after-opus-5-5-it/preview.d43a1cfa.mp4）制作。

您可以将其用作图片，也可以根据自己的渲染结果重新生成。

两种来自动画师的视图让标注更加清晰。洋葱皮功能会以低透明度叠加各帧：等距排列表示机械化的运动，而靠近关键帧时间距逐渐缩小则表明缓动效果正常。

速度曲线图则显示每帧的位置变化：直线代表匀速运动，尖锐的拐角则意味着突然的启动和停止。Opus 5.5 能同时绘制并读取这两种视图。

以下是效果最佳的后续操作，可直接粘贴使用。每项操作都指向具体的帧，而非情绪：

Render stills at frames 0, 24, 48, 72 and 96. Describe each in one sentence as a viewer would. Does that match the shot list? Fix what does not.
Make a contact sheet of every 12th frame. Mark every frame where two things move at once, then fix the hierarchy.
Onion-skin frames 24 to 47 at 25% opacity. Spacing should tighten near the keys. Adjust the easing until it does.
Plot the hero's x position and scale per frame as a PNG chart. Show me where the motion is linear or stops dead, then fix it with our tokens.
Review this like a senior motion designer: 10 notes ordered by impact, each with a frame number and the exact code change. Apply the top 5.
It is too busy. Remove 30% of the motion and keep only the moves that guide the eye.
The ending is abrupt. Add a 36-frame hold with a 2% push, then let it settle on a spring at damping ratio 0.8.

每轮挑选一到两个。一次性粘贴全部七个注释，会让修改变成重写。

当一条反馈以直觉的形式传达给你时，请在发送前先将其转化为具体的指令：

  • “让它更突出”：在6帧内将缩放从1.0渐变至1.08再回到1.0，在节拍处达到峰值。
  • “让它更有高级感”：入口动画采用五次方缓出曲线，阻尼比设为0.8，文字不出现过冲。
  • “节奏太慢”：每个停留时间缩短12帧，按120 BPM、24 fps计算，确保每次剪辑都落在网格上。
  • “显得太杂乱”：一次只做一个核心动效；其余元素均延迟150毫秒启动，且运动幅度仅为原设计的60%。
  • “看起来像AI生成”：列出所用的默认参数名称，逐一禁用，并重新渲染。

来自三项实验室实验的日志记录如下：

  • 开场镜头，液态铬特效：416个提示词，10条创意后续，360帧，5条音效后续
  • 实验1，模糊侧：27个词，按设计无后续，360帧
  • 实验1，定向侧：448个词，15条后续，360帧，12条音效后续
  • 实验2，3D吉祥物：399个词，4条后续，480帧，0条音效后续

一旦如实披露，他人的数据往往也与此相似。Miles（@uxmiles）经营一家设计工作室，他发布的一段上线视频仅用了3条提示，却收获了59万次观看。

Vox请Opus 5.5解释引力透镜效应：一条提示，随后进行了三轮通宵润色，全程耗时5小时28分钟，按API价格约合90美元。Donald的Claude-Pop音乐视频（360万次观看）则是“一条提示”加上5分钟的口头简报，以及12小时的自主创作。

Prompt Motion在每条记录中都设有“迭代次数”字段，正是出于这个原因。统计你的后续指令，并将每次提示连同成果一并公开。真实的记录才能令人信服；而“一条提示”反而会让人起疑。

参考库：Opus无法复现从未见过的风格

解决默认外观问题的最快办法并非拉长提示，而是提供参考素材。直接命名一种风格远胜于描述它，因为参考能为模型提供节奏、字体和过渡效果的范本；若无参考，模型便会退化为居中文字、渐变背景以及所有元素淡入的默认样式。

Rexan Wong对上线周视频的拆解（约60万次观看）将此列为六大步骤之首，他的这六步也是本指南中最简洁的精要版本，以下附上我针对每一步的具体资源推荐。

第一步：获取可供参照的视频素材。挑选一到两个你心仪的风格案例，让Opus模仿它们。

  • What Ships（whatships.com）：一个精选目录，收录超过2000部初创公司与产品上线视频，来自X平台，可按AI、开发者工具、设计、动效、效率工具、消费类及硬件等类别筛选，每条视频均链接至原帖。这是Rexan推荐的首选，也是我每次都会优先打开的资源。挑选两部，将链接及各自亮点各一句话告知Opus。
  • Prompt Motion（prompt-motion.com）：同样适用于Opus 5.5作品，且附带完整提示文本。若其中已有匹配的参考，即可免费获得相应提示。
  • Motion（motionin.design）：54个高端交互式网页模块（包括英雄区、作品集、产品展示、沉浸式体验等），基于GSAP、Three.js和WebGL构建。每个模块均以可复制的提示形式交付，其内容详述如一份规范文档——而这正是本指南所讲解的定向提示语法。其中9个免费，其余每月9美元可得三个，或购买终身许可。仅凭这些规范文档就已物有所值。
  • Landdding（landdding.com）：2500个着陆页及模板，经设计师投票精选，支持按40个分类、标签及颜色浏览。虽为静态页面，却是寻找理想布局与字体搭配的最佳来源，以便后续动效依此展开。
  • Wedoflow（wedoflow.com）：216个按类别划分的优质Webflow模板。需付费，且不专注于动效，但其在线演示均为完整站点，可截屏录制滚动过程，作为节奏参考交给Opus。
  • Modulify（modulify.ai/templates）：约115个免费、可克隆的网站模板，覆盖29个大类，每个模板均配有实时演示。用途相同：录下滚动过程，作为产品页面整体节奏的参考。

如何提交参考素材：仅提供链接并不足够，因为Opus无法观看视频。请截取10秒画面，使用实验室循环中的ffmpeg命令生成一组关键帧图，并附上一句说明：“请模仿此节奏与字体处理方式，但不要照搬颜色”。

关键帧图是Opus最易读取的格式。

第二步：安装运行引擎，使Opus能够构建视频。可选用HyperFrames或Remotion，详见“引擎”章节。若无此类引擎，Opus只能描述视频，或输出一张HTML页面供你自行录屏。

有了引擎，每一帧都将精确无误，只需修改一行代码即可重新渲染。

第三步：安装21st.dev用于视频中的UI组件。21st（21st.dev）是一个收录超过12000个React与Tailwind组件、区块、模板及shadcn主题的注册表，均由设计工程师制作，每个条目均带有实时预览和“复制提示”按钮，可一键将代码导入Claude Code、Cursor或Codex。

请将其用于视频中出现的每一个按钮、卡片及导航栏。若不使用该资源，Opus将从零绘制你的产品UI，结果往往失真：间距错误、占位框、按钮质感虚假。

任何熟悉优秀软件的人都能在瞬间察觉，整段视频因此显得廉价。每日可免费使用两次，更多需求可订阅会员。建议同时启用“产品影片”技能，该技能可在你已有组件的情况下直接基于自定义组件进行构建。

步骤4：一次性提供所有背景信息，并要求制作三份分镜脚本。包括您的品牌（标志、色彩、字体）、真实产品的截图、参考用的镜头表，以及您对视频的整体构思。

然后要求提供三套不同的分镜方案，而不是只做一套。如果没有这些背景信息，这段视频可能适用于任何一家初创公司；有了这些信息，它就只能属于您。

提供三套方案，能让您在众多方向中择优而定，而不是直接敲定对方的第一个想法。

步骤5：选定一份分镜，并在动画开始前先要每场景的一张静态画面。修改分镜的成本很低，而修改成片则代价高昂。如果不经过这一步，等到所有动画都做完后才发现第四场景有问题，那就为时已晚了。

这正是Prompt Motion模板中的关键环节，也是本指南中各项技能里的“静态画面关卡”。

步骤6：让模型充分酝酿，然后像导演一样给出具体反馈。比如：“把每个缩放都调慢到0.7倍速。”“这里用硬切。”“把镜头推近到按钮上。”第一次渲染通常已经完成了80%，剩下的20%才是让它看起来专业化的关键。

笼统的指示只会带来随机的变化；而明确的镜头指令则能精准实现您的意图。实验室循环部分的“情感—数值”对照表就是这份翻译工具。

每个人使用的都是同一个模型，真正让它看起来专业的，是您提供的背景信息。这句话出自Rexan之口，也是本指南用短短十一个字概括的核心观点。

提示库：从Prompt Motion中可以借鉴什么

Prompt Motion（prompt-motion.com，由@p4nthera_精选）是Opus 5.5系列动态视频的展示平台，每段视频都附有其背后的提示或技能说明。

它按视频内容分类（产品界面、动态文字、图表、流程图、形状、粒子、角色、照片、音乐、代码），记录每个案例所采用的模型、工作量、技术栈及迭代次数，并设有“自定义”页面，可根据您的产品、格式和配色重新编写任意提示。

模板页面中有两份专为定制而设计的提示，每份都配有成品视频且未经任何后期修改。

以下是我会推荐给初学设计师的十二个示例，按其所传授的内容分组。每个示例都附有页面链接，方便您嵌入视频（所有条目均提供可直接用于Substack的MP4文件），并注明作者出处。

两个基础模板。从这里开始。

  1. 作品集预告提示（prompt-motion.com/templates/showreel）。这是Prompt Motion对那句26字作品集文案的改写版。它补充了原句未明确的方向，同时仍无需您额外输入太多信息：在启动前确定一个核心概念并为其命名，每一镜头都从前一镜头自然过渡而来，仅使用一种字体和三种颜色，以120 BPM的速度推进，每拍都有内容，配乐通过OfflineAudioContext以代码生成，使用Playwright以60 fps录制并借助ffmpeg tmix混合三帧，全片渲染前逐帧检查每一拍的画面。仅其禁用清单就值得抄录：禁止使用粒子爆发、光晕、镜头光晕、相机抖动、RGB分离、交叉淡入淡出、通用渐变、弹跳式缓动、持续超过半秒的静止镜头，以及任何看起来像模板效果的东西。
  2. 3D模板（prompt-motion.com/templates/realtime）。专为three.js素材打造。它的亮点在于先设计一个标志性镜头，其他镜头都围绕它展开；并遵循电影摄影规则：每镜头只设一个明确的机位运动（推轨、摇臂、环绕、推近、焦点切换），缓入缓出，绝不使用轨道控制，也绝不穿模。此外还有能解决大多数3D问题的灯光配置：主光、辅光和轮廓光搭配柔和阴影，使用RoomEnvironment中的PMREM环境贴图，加入雾效营造纵深感，选用具有不同粗糙度的物理材质，应用ACES色调映射，并严格要求所有元素都不应呈现默认材质的效果。社区中有五个提示在此基础上进行了优化。

那些行之有效的单行提示及其原因。

  1. Stephan Livera的Claude AI动效设计师作品集（prompt-motion.com/stephanlivera-df17a2）。原始的26字提示，以最高强度运行。将其作为“初始状态”嵌入：这是模型在完全自由条件下的表现，之所以优秀，恰恰是因为它的主题就是模型本身。
  2. Ethan Mollick用多种风格讲解递归（prompt-motion.com/emollick-8661a8）。一句话，一个镜头：一段解释递归的视频，每种解释都采用截然不同的风格，自指、巧妙、节奏明快。它之所以奏效，是因为概念本身就是约束。与其照搬提示，不如学习其中的启示：一句强有力的形式化命题，往往胜过一页详尽的指导。
  3. Rory Flynn的内格罗尼鸡尾酒配方动画（prompt-motion.com/ror-fly-9950f1）。以对话式的语气请求制作一段30秒的解说视频，从空杯到成品，配料与用量随加入顺序逐一呈现。这是我见过的最佳范例：一份只赋予模型一个有头有尾的故事，除此之外别无他求的简报。非常适合为客户制作解说类视频。
  4. Tony Dinh的TypingMind标志揭晓（prompt-motion.com/tdinh-me-815acb）。一句话，要求制作一个缓慢揭示的转场效果，逐步拼出一个标志。可用作反例：将其结果与3D模板的标志性镜头思路在相同需求下的表现进行对比。

那些经过精心指导的提示。这才是真正的大师课。

  1. 通过 UI 状态实现形状变形，作者：zero (@twoclipping)（prompt-motion.com/twoclipping-5cba86）。一种形状，全程无缝衔接，在按钮、加载器、复选框、灵动岛、音乐播放器、滑块、开关、标签指示器、图表、命令面板、提示条和返回动画之间不断变换。每一次变化都由光标的真实点击与拖拽驱动。七个小节，每小节 120 拍，几乎每拍都有动作。构建部分堪称教科书式示范：对于一个需多次改变目标值的属性，采用闭合形式的弹簧，每次变化对应一个弹簧；标签指示器的两端分别置于不同弹簧上，使前沿部分提前拉伸；拖拽效果根据按住时的光标位置计算，松开后自动回弹；歌曲则用 NumPy 分析出节拍网格。其中的陷阱也很真实：切勿对相机缩放的对象使用 will-change 属性，让切换的文字拥有独立的进入与退出时间曲线，并确保最后一帧与第一帧完全一致，包括光标的位置与速度。若要从本指南中牢记一条提示，就请记住这一条。
  2. 橙色圆点运动系统，作者：ultima (@ultimaxbt)（prompt-motion.com/ultimaxbt-bbebf5）。一段围绕单一元素展开的十五秒动画：一个橙色圆点，起始于 UI 开关，随后化作“Motion”一词中字母 i 上的小点，跃上图表并绘制出弹簧响应曲线，继而成长为某种形状，环绕动态文字运行，扩展为半色调图案，最终回到开关处，完成循环。这是一份伪装成提示的动效风格指南，其中那句“图表与圆点必须遵循相同的运动规律，否则弹簧效果会显得虚假”，正是只有亲身体验过的人才会明白的细节。
  3. 零号作品：照片打印应用启动短片，作者：zero (@twoclipping)（prompt-motion.com/twoclipping-221cab），以及第 10 号作品：落地页 3D 滚动动画（prompt-motion.com/twoclipping-d89be5）。同一位作者，同样的语法，分别应用于产品发布与滚动式落地页。阅读这两段代码，了解如何在不剪辑的情况下，将真实产品的各个界面按照节拍网格进行编排。

相关技能。

  1. 莱昂·林的动态启动短片（prompt-motion.com/lexnlin-6161a6）及其早期的“雕刻风格”Claude 广告（prompt-motion.com/lexnlin-038035）。前者是该动态技能仅凭两句话的简报就能产出的结果：一支品牌化、有导演指导、配乐并渲染完成的启动预告片。后者则是那支仅用一条提示、耗时八小时制作的日历应用启动视频，播放量超过 8.5 万次，并成为这项技能的起源。将两者并置：见证一个流程从无到有的完整包装过程。
  2. 安东尼·里埃拉的 Reddit 营销工具发布视频（prompt-motion.com/anthonyriera-9b1b2a）。这是产品影片技能的实际应用，历经多轮迭代，借助 Remotion 构建，完全基于产品的实际组件。适合那些已有设计系统、希望视频视觉风格与其产品保持一致的团队参考。

如果还有时间，不妨再看看另外两个案例：杰克·莫兰的会话故事（prompt-motion.com/jake11moran-a269c4），这是一项 HyperFrames 技能，能够读取你的 Claude Code 历史记录，并将一次会话转化为一部短片；以及 Build Fast with AI 的印度文明短片（prompt-motion.com/buildfastwithai-53234e），基于他们的生成式影片技能，仅用一行提示便完成了创作，并配有音效。

如何在“自定义”页面上操作而不偏离方向。该页面会询问视频的用途、格式、色彩及其他相关信息，并据此重写提示。作为初稿尚可。随后打开重写后的提示，检查三样它无法知晓的内容：你的禁用列表、你的标志性手法，以及你的节拍网格。

这些信息来自你的风格指南，而非表单。将它们粘贴进去，再运行即可。

关于以上所有内容的一点提醒：这些视频与提示均归其创作者所有，每条记录都附有链接。如需嵌入，请注明作者账号并链接至原文页面，正如 Prompt Motion 自身的做法一样。

实验设备：选择你的引擎

Opus 5.5 可为以下任何一款引擎编写代码。只需在提示中明确指定所需引擎，否则系统将自动为你选择。

  • Three.js 是三个展示作品所使用的：基于 WebGL 的 3D 场景、光源、材质和着色器，由 GPU 渲染。对于视频，应根据帧号而非时钟来驱动时间。为摄像机指定数值：视场角在 30 到 50 度之间是个不错的起点，并且每段镜头都应有一个命名的移动动画。
  • Remotion 可以将视频转换为 React 组件，实现帧级精确控制，并提供官方的 Agent Skills（可在项目内运行 npx skills add remotion-dev/skills 或 npx remotion skills add；此外，还可通过 Claude 插件市场安装 remotion-dev/claude-code-plugin 插件）。个人及员工人数不超过 3 人的公司可免费使用；规模更大的公司则需购买企业许可。Cinetic 和 product-film 默认均采用该工具。
  • HyperFrames 由 HeyGen 开发，于 2026 年 4 月 17 日以 Apache 2.0 许可证开源，无按渲染次数收费，也无团队规模分级。Agent 可编写 HTML、CSS 和 GSAP 时间线，其 CLI 负责渲染出 MP4 文件，并预装了 21 个可安装的技能（运行 npx skills add heygen-com/hyperframes）。HeyGen 还利用 Claude Code 自行制作了发布视频。
  • GSAP 是 Web 上的时间线库，现已完全免费，包括 SplitText、MorphSVG、DrawSVG 和 ScrollTrigger 等功能。其许可证仅禁止开发与 Webflow 竞争的无代码动画构建工具。
  • Motion（原 Framer Motion）在 MIT 许可下为 React 应用提供动画支持。它用于实时界面的动画效果，但不具备视频渲染功能。
  • 纯 HTML 和 CSS 无需任何安装，适用于 10 秒以内的 2D 循环动画：文字、形状和用户界面。设置部分提到的渲染器可将其转换为 GIF 或 MP4。
# Remotion: video as React components
npx create-video@latest          # pick a template, name it my-video
cd my-video
npm i
npx remotion skills add          # Agent Skills for Claude Code
npm run dev                      # Remotion Studio in your browser
npx remotion render MyComp out/video.mp4   # MyComp = your composition id

# HyperFrames: HTML + GSAP in, MP4 out (needs Node 22+ and FFmpeg)
npx hyperframes init my-video
cd my-video
claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes
npx hyperframes preview
npx hyperframes render

经验法则：一个想法在10秒内完成，纯HTML格式。系列、模板或数据驱动视频，Remotion。如果你想网页和GSAP，HyperFrames。任何3D，Three.js。

当运动存在于产品中而非视频时，Motion或GSAP。Cinetic还增加了一个：每帧速度超过约18像素的作品属于Remotion，因为它的动态模糊管线更好。

然后把引擎和它的数字放到输出行。“Remotion 合成，1920 x 1080,30帧每秒，450帧”，没有任何可猜测的空间。

超能力：HyperFrames Studio以及希格斯菲尔德

上面的所有内容都是从代码中提取像素。这给了你确定性、廉价的编辑和一个能检查自己帧的模型。但这也给了你一个天花板：没有真实素材，没有逼真的人物，没有摄像机在物理世界中移动。

两个工具在不放弃方法的情况下提升了这个上限，它们插入同一个Claude代码会话。

HyperFrames，完整版。引擎部分将HyperFrames视为渲染器。它已经超越了渲染器。HeyGen现在发布HyperFrames Studio，一款适用于macOS和Linux的桌面应用，自称是为代理构建的视频编辑器：代理编写构图，Studio预览和编辑，两者都在同一项目文件夹上工作。

文档的快速启动是一个提示，你可以粘贴到任何编码代理中：

Set this folder up for HyperFrames and make me a video.

1. If the HyperFrames plugin is installed, use its bundled skills and launcher. Otherwise run: npx hyperframes skills update
2. Then, using /hyperframes, make a 10-second product intro for https://example.com
3. Open the local preview when it is done and tell me the project folder.

在 Claude Code 中，插件路由为 /hyperframes:hyperframes。代理会提出方向建议，仅索取缺失的部分，并为您留下一个可编辑的项目，附带本地预览（使用 npx hyperframes preview 即可重新打开）。

针对产品发布、讲解视频、字幕、重新剪辑、拉取请求视频、音乐视频、动态图形和演示文稿，分别设有命名工作流。本地渲染免费且开源，不消耗 HeyGen 的额度。

改变您提示方式的关键在于 hyperframes.heygen.com/catalog 上的素材库：约 450 个可复用的场景、转场、字幕、叠加层、特效和组件，每个都配有预览和安装命令。

素材库分为十一类：3D（玻璃碎片标题、挤出式 logo、产品旋转台、爆炸式等距堆叠）、轮播图、文字与字幕（共 74 种，从 TikTok 风格的文字高亮到 Vox 风格的标注手势，再到 Solari 分割翻板）、代码动画（差异对比、形态渐变、滚动至指定行，以及以 Dark 2026 主题呈现的 VS Code 工作台打字效果）、转场、数据与图表、场景与演示、光标、动态与特效、表面与区块。

所有素材均为确定性生成，由暂停的 GSAP 时间轴驱动，因此渲染结果始终如一。

这为您提供了一套词汇体系。与其用四十个词来描述一个揭晓效果，不如在提示中直接写道：“为标题使用素材库中的动态文字替换，为下三分之一区域使用 lt-accent-underline”，然后由代理自动安装并配置。

您的设计规范依然占主导地位：素材库中包含霓虹光效和粒子爆发字幕，而您的禁用列表应确保代理不会选用它们。CLAUDE.md 上的最佳实践是：“在禁用列表范围内，优先选用素材库中的组件，而非手动构建。”

Higgsfield，用于那些代码无法绘制的像素。 Higgsfield 是一套原生 AI 创意套件，将 50 多种生成模型整合于同一账号之下：Seedance 2.0、Kling 3.0、Veo 3.1、Sora 2、Wan 2.7，以及专为视频打造的 DoP；此外还有 Soul 2.0，用于生成具备角色一致性机制（Soul ID）的图像，以及 Cinema Studio，用于基于真实光学物理的摄像机控制。

它提供三种运行方式：网页界面、托管的 MCP 服务器，以及带有独立计费系统的 API，地址为 api.higgsfield.ai。

其中，MCP 才是关键所在，因为它将生成能力融入到编写动态效果的同一 Claude Code 会话之中：

claude mcp add --transport http --scope user higgsfield https://mcp.higgsfield.ai/mcp
# first use opens a browser for OAuth; check with /mcp

它提供的工具正如你所预期的那样：提交文本转视频或图像转视频的请求，轮询其状态，并获取返回的 URL。一项社区技能（github.com/robonuggets/higgsfield-skill）封装了 MCP，以便 Claude Code 能够为每个镜头选择合适的模型。

OpenAI 自己的案例研究指出，Higgsfield 的代理如今能够生成时长超过 10 分钟的教学视频，因此长度上限也已不再成为限制。

同时使用两者的流程。这是本指南中我尚未端到端完整运行并取得成果的部分，因此请将其视为下一个实验，而非已完成的方案。我正在构建的流程形态如下：

  1. Opus 5.5 按照惯例编写文案和节拍表，并决定哪些镜头需要通过代码生成（如文字、UI、图表、片尾卡），哪些镜头需要实拍素材（如真实厨房中的产品、人物、风景）。
  2. 对于每个实拍镜头，它会以与其余内容一致的风格撰写 Higgsfield 提示词：镜头类型、摄像机运动、时长、灯光效果以及禁用清单。Cinema Studio 和摄影指导负责摄像机指令，因此您的风格指南中关于摄像机的部分同样适用于生成的素材。如果某个角色多次出现，会使用 Soul ID，以确保不同镜头中的人物面部保持一致。
  3. 通过 MCP 生成内容，轮询状态，下载并锁定文件。从那一刻起，该片段即成为资产，而非可变变量。生成的素材是整个流程中唯一具有非确定性的环节，因此只生成一次，命名后在后续评审阶段不再重新生成。针对该素材的评审意见将触发新一轮的生成，并生成新的文件名。
  4. 实拍素材作为图层导入 HyperFrames 合成，而其周围的元素（来自素材库的字幕、节拍表、下三分之一区域、片头标识等）则始终是时间的纯函数。由于唯一的外部输入是一个固定的文件，渲染合约覆盖整部作品。
  5. 按既往流程进行渲染、联系单制作、评审循环及导出。

用于系统提示部分的初始提示词如下：

This piece mixes generated footage and code. Plan the shot list first and mark each shot CODE or FOOTAGE. For FOOTAGE shots, write the generation prompt using our camera rules and ban list, generate once through the Higgsfield MCP, save the file under assets/footage/-v1.mp4 and never regenerate it without a new version number. Build the composition in HyperFrames with catalog components for captions and lower thirds. Everything that is not footage remains a pure function of t.

有两点需要注意。生成的视频素材按秒计费，且 API 账户的账单与网站套餐分开结算，因此请在需求文档中预留相关预算。此外，数据流能够记录每一段镜头的生成时间；最终成片会将一到两段视频素材与大量由程序生成的动画片段混合在一起，而这种比例正是该工作流所擅长实现的。

最后一公里：音效、循环与导出

这是教程通常略过、但观众最先注意到的部分。

音效。 在用户点击之前，视频会以静音状态播放，因此画面必须先做到“无声也能成立”。添加音效时，请将其归一化至 -14 LUFS，峰值不超过 -1 dBTP，并确保每个视觉触发点比其对应的声音提前 1 帧，绝不能滞后。

在现实生活中，光效也总是先于声效出现。三部实验室作品严格遵循这一规则：所有声音均通过 Web Audio API 在代码中合成，且每个触发点的峰值都比对应的画面提前 1 帧。

由于 Opus 5.5 无法直接监听音频，它通过解码最终的 MP4 文件，将每个触发点与其所在帧逐一比对来检查同步性。样片模板在初稿阶段则采用更经济的做法：每拍一个鼓点，最后一个小节加入渐强音效，每次场景切换时添加一声触发音，并使用 OfflineAudioContext 渲染为 WAV 格式。

如果你使用的是授权音乐，则可以参考 twoclipping 的做法：用 NumPy 分析节拍网格，从强拍开始，并根据测量得到的峰值位置来安排每个 UI 音效。

# Music + sound effects, mixed, normalized to -14 LUFS, muxed under the picture
ffmpeg -i out/anim.mp4 -i music.wav -i sfx.wav -filter_complex "[1:a][2:a]amix=inputs=2:duration=first,loudnorm=I=-14:TP=-1:LRA=11[a]" -map 0:v -map "[a]" -c:v copy -c:a aac -b:a 192k -shortest -movflags +faststart out/final.mp4

循环。渲染第0帧至第N-1帧，绝不包含第N帧。将每个循环的相位设置为帧数除以N，并确保周期为整数。一个每循环恰好旋转90度的正方形，或一个恰好完成2个周期的波形，都会在第一帧处重新归位。

若需实现自然的渐变效果，可在圆周上采样噪声。同样将第0帧视为完整的画面：它是在GIF加载时首先显示的内容，也是海报帧。Cinetic的循环检测会比较接缝处两帧之间的差异与两端中值步长；若接缝处的差异超过该中值步长的1.5倍，则判定为不合格。

导出。用于帖子的格式为MP4，用于内嵌循环的格式为GIF。在整个GIF中使用同一调色板，可避免各帧之间出现色彩闪烁。

# MP4 for a post: H.264 High, yuv420p, starts playing at once
ffmpeg -framerate 24 -i out/frames/%04d.png -c:v libx264 -profile:v high -pix_fmt yuv420p -crf 18 -movflags +faststart out/anim.mp4

# GIF: one palette for the whole clip, 1200 px wide
ffmpeg -framerate 24 -i out/frames/%04d.png -vf "scale=1200:-1:flags=lanczos,split[a][b];[a]palettegen=stats_mode=diff[p];[b][p]paletteuse=dither=bayer:bayer_scale=5:diff_mode=rectangle" -loop 0 out/anim.gif

# Loop check: play it three times back to back and watch the seam
ffmpeg -stream_loop 2 -i out/anim.mp4 -c copy out/loop_check.mp4

关键的 X 限制：GIF 最大 15 MB，分辨率 1280×1080，最多 350 帧，单色板，无限循环。视频在非 Premium 账户下最长 140 秒，16:9 格式时最高分辨率为 1920×1080，帧率最高 60 fps，编码格式为 H.264 High，使用 yuv420p 和 AAC 音频。

以 24 fps 计算，350 帧的上限意味着 GIF 的时长约为 14.5 秒；4 至 6 秒的循环则为 96 至 144 帧，远低于此上限。在 Substack 中，嵌入为视频块的 MP4 会静音自动播放并循环；小于 8 MB 的 GIF 则以内联方式播放。

我会同时导出这两种格式，并在允许的情况下优先使用 MP4。

GIF 定时设置的一个陷阱：延迟以百分之一秒为单位存储，因此 24 fps 的一帧（41.7 毫秒）无法精确保存。若将每帧都四舍五入为 40 毫秒，循环就会快 4%，偏离节拍节奏。

解决方法是：连续五帧设为 40 毫秒，再设一帧为 50 毫秒，这样 6 秒的循环就能精确保持在 6.00 秒。Cinetic 则通过从 60 fps 的母版导出 25 fps 的 GIF 来规避这一问题。

请在制作第一帧之前就确定画布尺寸，因为后续更改会导致所有镜头都需要重新调整：16:9 用 1920×1080，1:1 用 1080×1080，4:5 用 1080×1350，9:16 用 1080×1920。

用于社交媒体的版本应基于同一时间线重新排版，切勿直接从母版裁剪。

当实验出现问题时

每次项目都会遇到同样的故障，每种故障都有对应的修复提示：

  • 闪烁或抖动：将每个值都设为 t 的纯函数。用带种子的随机数生成器替换 Math.random。移除定时器和 CSS 过渡效果。
  • 字体错误或回退：使用 display=block 加载字体，并在第一帧前等待 document.fonts.ready。
  • 循环衔接处卡顿：仅渲染第 0 至 N-1 帧。通过 phase = frame / N 控制循环，确保循环为整周期。使最后一帧与第一帧完全一致，包括光标位置和速度。
  • 音频偏离节拍：按 n x 60 / BPM 计算每个节拍，并对每个节拍进行四舍五入。切勿添加四舍五入后的帧数。
  • 卡顿或丢帧：仅对 transform 和 opacity 进行动画处理。不要修改 width、height、top 或 left。切勿对相机缩放的对象设置 will-change。
  • GIF 出现条纹：避免使用渐变。只使用纯色，或对色板进行抖动处理。
  • 文字模糊或闪烁：将静止文字对齐到整像素。以 2 倍分辨率渲染后再缩小。
  • 文字过早移动导致来不及阅读：每个文本状态停留时间为每字 0.3 秒，再加上移动前的 0.5 秒。
  • 所有元素同时运动：一次只执行一个主要动作，其他动作在主动作开始后 150 毫秒、以 60% 的速度启动。
  • 字母在揭示过程中途出现特定含义：让遮罩在完整帧上逐字形边缘推进，或一次性揭示整个单词。
  • 3D 效果像技术演示：明确命名材质属性（如粗糙度、清漆层）、三盏光源、环境贴图以及色调映射。禁止使用默认材质。设置阴影偏移，否则表面会出现条纹状“痤疮”；保持近裁剪面和远裁剪面的距离适中，否则远处表面会闪烁。
  • 模型中途停止汇报而非继续运行：将系统提示部分中的“工作流程”区块添加至 CLAUDE.md。

如果修复措施失效，请提供问题前后两帧的画面，并说明两者之间的差异。识别两张图像间的变化，正是 Opus 5.5 更敏锐的视觉能力所擅长的：

The fix at frame 84 did not hold. Render frames 83 and 85 as PNGs, put them side by side and list every difference you can see. Find the line of code that causes it, fix only that line, then render both frames again.

当修复成功时，将其加入渲染合同，如果是品牌专属的，则加入风格指南的禁用名单。合同是实验室的记忆：里面的每一行都是你再也不用看到的失败。

参考文献

官方文档

  • 提示 克洛德作品5.5： 工作量校准、无人值守运行、进度更新、前端设计默认、可视化输入
  • 代理技能规范： theSKILL.md格式、前置信息字段、渐进披露
  • Remotion Agent 技能： NPX 技能添加 Remotion-Dev/技能
  • 超帧HeyGen 的 HTML 转 MP4 渲染器，Apache 2.0，拥有 21 项技能;Studio，快速启动和目录hyperframes.heygen.com.希格斯菲尔德：higgsfield.ai/higgsfield-api对于API目录，MCP地址mcp.higgsfield.ai/mcp， 和github.com/robonuggets/higgsfield-skill为Claude Code封装

GitHub上的技能

  • 电影林里昂：完整的工作室流程，Remotion或HyperFrames，以及SKILL.md19条参考文献和30份剧本
  • 产品-电影-技能作者：来自真实组件的首页和登陆页影片
  • 生成电影技能由 Build Fast with AI 制作：任何主题的合成音频动画 MP4
  • 会话故事作者：Jake Moran：你的Claude Code历史，作为HyperFrames短片呈现

参考库

  • 舰船： 2,000+ 来自X的启动视频，按动作筛选
  • 运动： 带有规格文件提示的交互式网页部分
  • 登陆： 2,500 个精选着陆页和模板
  • Wedoflow：216 带有实时演示的 Webflow 模板
  • Modulify 模板：大约115个免费可克隆网站模板
  • 21st.dev： 12,000+ 带有复制提示的 React 和 Tailwind 组件，用于编码代理
  • Rexan Wong（@rexan_wong），六步工作流程线程

即时动议

引用的文章

  • 基里尔SH（@灵魂），原始作品集提示，9月24日
  • 唐纳德（@唐纳德·朱克斯），Claude-Pop的音乐视频，9月23日;Deckard的歌曲和首支视频，9月9日
  • 吴凯文（@kevin_t_ngo），这是用JavaScript绘制的首发日故事动画
  • Shikhar（@西卡尔），3D浏览器世界，第三次中等努力迭代
  • 迈尔斯（@Uxmiles），三提示启动视频
  • Vox （@Voxyz_ai），引力透镜实验室，5小时28分钟，约90美元
  • 胖嘟嘟 （@金蒙主义），Remotion 中 AI 的三分钟历史
  • 孟拓（@孟托），three.js船游
  • 林里昂（@莱克斯林），一个提示日历应用启动视频

动作编号

  • 安德烈·西特尼克，Easings的参考（easings.net：三次贝塞尔值
  • 材料3运动指导：进出时间配对，哪些可能弹跳，哪些不能
  • 尼尔森诺曼组：100毫秒响应时间阈值
  • WCAG：4.5：1对比度和每秒三闪规则
  • 托马斯和约翰斯顿，《生命的幻觉》（1981）：十二条原则

媒体限制

  • X 媒体文档与帮助中心：GIF 和视频规格

实验3是你的了

实验室开着。今晚的演出：

  1. 将系统提示部分中的CLAUDE.md复制到一个新文件夹中，并放入来自设置的render.mjs和来自速查表的motion.js。
  2. 复制开场镜头的提示文本，将其词句替换为你的产品或你的名字。所有数字都保留不变。
  3. 在Claude应用或Claude Code中，以中等算力在Opus 5.5上运行该提示。
  4. 在第0、24、48、72和96帧渲染静态图像，并为每个帧编号写下两条备注。
  5. 修正后重新渲染，重复此过程，直到备注用完为止。
  6. 使用GIF命令导出，并在第一条回复中连同你的提示及所有后续说明一起发布。

第二次运行时，每次只更改一个数字，以便观察每个参数的作用。第三次运行时，根据所学内容撰写一份包含七个部分的风格指南，并将其整合为一项技能。

此后，你就不再是在向模型发出提示，而是在运营一家完全由文本构成的工作室。

模型对所有人来说都是一样的。你赋予它的方向才是属于你的。

感谢阅读Sorted Pixels！本文为公开内容，欢迎分享。

添加评论
点赞收藏
点踩分享查看原文
评论
?
参与讨论