非官方指南,與 Meta 無關。

最後更新:

Opus 5.5 影片:爆紅提示詞與製作教學

Claude Opus 5.5 推出後,許多人紛紛分享只用一則提示詞就讓它做出的動態圖像短片、解說動畫、3D 場景,甚至小遊戲。光是 awesome-opus5-5-videos 這份清單就收錄了 475 支。以下整理最熱門作品背後的提示詞,以及自己動手做的步驟。

一句話說明原理: 你給 Opus 5.5 一則提示詞,它會寫出一個播放動畫的網頁(canvas、SVG、GSAP 或 Three.js),你再錄下螢幕或渲染成 MP4。它靠的是程式碼,不是 Sora 那樣的影片模型,所以特別擅長動態圖像、文字動態、圖解和 3D,也不會產生真人實拍畫面。

掀起這波風潮的提示詞

第一波作品大多使用同一句提示詞。清單中有 58 支用的就是它,或幾乎一模一樣的版本:

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.

常見的改法是把主題換成你自己的產品或網站、加上長度(10、15 或 40 秒),或指定 1080×1080 這類社群平台格式。

依類型看作品與提示詞

以下是清單中的真實提示詞,照原作者發布的原文引用。點開原始貼文即可觀看影片。

動態圖像

清單中有 288 支。作品集短片、產品宣傳、文字動態。

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.

作者 @ajith_io · Canvas · 觀看影片

Make a dynamic 15-second motion graphics video that shows why [your product] is the best at [what it does], like a showreel. Go all out: 1080×1080, 1s hook, loop.

作者 @Ishaaqahamed · Canvas · 觀看影片

4 seasons passing outside a train window, a cozy carriage, a cup of coffee on the table, Grand Budapest Hotel style

作者 @itsolelehmann · Canvas · 觀看影片

create a motion design video of a poster breaking out of its own frame.

作者 @pankajkumar_dev · Canvas · 觀看影片

解說動畫

清單中有 62 支。概念、歷史、運作原理。

A video explaining recursion, where every explanation about recursion has a radically different video style, make this self-referential & clever & fast moving.

作者 @emollick · Canvas · 觀看影片

make a video highlighting key moments in the history of AI.

作者 @kloss_xyz · Canvas, SVG, CSS · 觀看影片

请用Manim给我制作一个导数概念学习的视频,要求通俗易懂,并且有例子,引人思考。配音使用edge-tts

作者 @LinearUncle · SVG, audio · 觀看影片

3D 場景

清單中有 55 支。Three.js 與著色器。

Make a 2-minute sand animation that tells the story of 250 years of U.S. history. Keep it lively, engaging, and tasteful. Add appropriate background music and sound design.

作者 @Michaelzsguo · Shader, Canvas · 觀看影片

Show me what goes on inside an AI data centre.

作者 @mdaman010 · Three.js, Shader, SVG · 觀看影片

遊戲與互動

清單中有 70 個。在瀏覽器裡就能玩。

can you make a 3d game where you walk around and spot cats inside of a van gogh painting? we can start with stary night and its town

作者 @MandelDuck · Three.js, Shader · 觀看影片

Create a 1-on-1 card game like Hearthstone. Just make it. As best you can. In pixel art style.

作者 @aisongman · Canvas, pixel art · 觀看影片

來源: GitHub 上的 awesome-opus5-5-videos

三步驟做出你自己的影片

  1. 開啟 Claude(App 或 claude.ai,需付費方案)並選擇 Opus 5.5,或在 Claude Code 中使用 Opus 5.5。
  2. 貼上上面任一則提示詞,再加上一句:「做成單一個獨立的 HTML 檔案。」
  3. 在瀏覽器中開啟結果並錄製螢幕。想要乾淨的 MP4 檔案,請使用下方的方法。

「Opus 5.5 影片」是怎麼做出來的

  1. 分鏡:Opus 5.5 先寫一份鏡頭表,標出每個場景的時間。
  2. 程式碼:每個場景寫一個渲染器,每一格畫面都是時間 t 的純函式。
  3. 畫格:無頭 Chrome 依序推進 t,每一格存成一張圖片。
  4. 編碼:ffmpeg 把畫格合成 H.264 的 MP4,第二輪還能加上旁白和字幕。

來源: OrcaRouter:「規劃一支影片」實際會產出什麼

匯出真正的 MP4 檔案

快速發文的話,螢幕錄影就夠了。想要逐格精準、影格率固定的乾淨 MP4,就要把動畫渲染出來。有三種做法:

方法一:在 Claude Code 中使用 ClaudeAnimationBase(最簡單)

ClaudeAnimationBase 是 John Heibel 開源的入門套件(MIT 授權):p5.js 加上 p5.brush、能演出 31 種情緒的 Clawd 角色,以及一份教模型怎麼做動畫的指南。作者所有的測試影片都是用 Claude Code 中 xhigh 推理強度的 Opus 5.5 製作的。

  1. 安裝 Node.js、Google Chrome、ffmpeg,以及 Claude Code(需要 Claude 付費方案或 API 金鑰)。
  2. 複製(clone)套件並完成安裝,然後在該資料夾中啟動 Claude Code:
    git clone https://github.com/JohnHeibel/ClaudeAnimationBase.git
    cd ClaudeAnimationBase
    npm install
    claude            # start Claude Code, pick Opus 5.5 with /model
  3. 把 README 中的第一則提示詞交給 Opus 5.5:
    Read ANIMATION_GUIDE.md, then make a 15-second video of Clawd trying to catch a butterfly.
  4. Opus 5.5 會先寫分鏡,再寫各場景的程式碼。完成後渲染影片:
    node render.mjs --clip --out=out/video.mp4
  5. 開啟 out/video.mp4,或用 Chrome 開啟 studio.html 拖曳檢視。想修改就直接用口語說(「跳躍慢一點」「天空改成粉紅色」),再重新渲染一次。

沒有獨立顯示卡的話,每一格要渲染好幾秒。README 建議在內建顯示晶片上避免使用水彩填色。

來源: GitHub 上的 ClaudeAnimationBase

方法二:一個 HTML 檔案加一支渲染腳本(任何風格皆可)

動態圖像、片頭字卡或資料動畫都不需要套件。請 Opus 5.5 依照一個簡單的約定寫出單一 HTML 檔案,再用下面的腳本渲染。

寫一個獨立的 HTML 檔案,1920x1080,在 <canvas> 上畫一段 10 秒的動畫。
設定 window.DURATION = 10,並定義 async window.seek(t),畫出第 t 秒的那一格畫面。
每個像素都只能由 t 決定:不要用 Date.now()、不要用 requestAnimationFrame 迴圈、
不要用 CSS 轉場、不要用沒有固定種子的 Math.random()。
畫面內容:[在這裡描述你的場景、配色和動態風格]

把檔案存成 scene.html,放在這支腳本旁邊,然後執行:

// capture.mjs: node capture.mjs scene.html 30
import { chromium } from 'playwright';
import { mkdirSync } from 'node:fs';
import { resolve } from 'node:path';
import { pathToFileURL } from 'node:url';
import { execFileSync } from 'node:child_process';

const [file, fpsArg = '30'] = process.argv.slice(2);
const fps = Number(fpsArg);
mkdirSync('frames', { recursive: true });
const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1920, height: 1080 } });
await page.goto(pathToFileURL(resolve(file)).href);
const total = Math.round((await page.evaluate(() => window.DURATION)) * fps);
for (let i = 0; i < total; i++) {
  await page.evaluate((t) => window.seek(t), i / fps);
  await page.screenshot({ path: `frames/${String(i).padStart(5, '0')}.png` });
}
await browser.close();
execFileSync('ffmpeg', ['-y', '-framerate', String(fps), '-i', 'frames/%05d.png',
  '-c:v', 'libx264', '-pix_fmt', 'yuv420p', 'out.mp4'], { stdio: 'inherit' });
npm init -y
npm install playwright
npx playwright install chromium
node capture.mjs scene.html 30   # writes out.mp4

我們用 Playwright 1.56 和 ffmpeg 6 在測試場景上跑過這支腳本:它會把每一格存成 PNG 放進 frames/,最後產生 out.mp4。

來源: Hugging Face:Opus 5.5 影片的確定性渲染流程

方法三:較長的影片用 Remotion 或 HyperFrames

Remotion · HyperFrames

來源: Apiyi:用 Opus 5.5 寫程式做影片

更多提示詞範本

每則提示詞都要求先寫分鏡,這一步對成果影響最大。

產品宣傳片(15 秒)

先為 [產品] 寫一份 15 秒宣傳片的分鏡:4 個場景、粗體大字、一個強調色、快速剪接。等我確認後,再做成一個 HTML canvas 檔案,包含 window.DURATION 和 window.seek(t)。

附字幕的解說動畫(30 秒)

用 5 個場景做一段 30 秒的 [主題] 解說動畫。用 SVG 畫簡單的扁平圖示,畫面底部逐句顯示字幕,節奏平穩。先寫分鏡,再寫程式碼。

資料動畫

把這份資料做成 20 秒的長條圖競賽動畫:[貼上 CSV]。每一格都重新排序長條,在角落顯示年份,所有變化都加上緩動。每一格畫面都只能由 t 決定。

卡通短片(ClaudeAnimationBase,README 原文)

Read ANIMATION_GUIDE.md, then make a 15-second video of Clawd trying to catch a butterfly.

省時間又省 token 的技巧

Opus 5.5 做影片能做什麼、不能做什麼

能做不能做
撰寫分鏡,並為每個場景寫動畫程式碼自行輸出 MP4 或任何影片檔案
讀取靜態圖片,因此能檢查自己渲染出的畫格和縮圖總覽接收影片檔案作為輸入,或觀看參考片段
用程式碼繪製動態圖像、解說動畫、圖表、片頭字卡和 2D 卡通產生 Sora、Veo 那樣的寫實畫面
撰寫字幕時間軸和旁白稿產生配音或音樂;這需要另外的 TTS 或音訊工具

來源: Claude Opus 5.5 模型概覽(Anthropic)

費用與價格

Opus 5.5 價格與規格 用計算機比較費用

作品範例與延伸閱讀

有兩個地方收集了這些影片和提示詞:GitHub 上的 awesome-opus5-5-videos 收錄 475 支(可在 skillry.dev 瀏覽);Claude Video(claudevideo.org)收錄 1,235 支,其中 457 支附有作者的完整提示詞。兩者都與 Anthropic 無關。

來源: skillry.dev

來源: Claude Video 作品庫

來源: explainx:爆紅的 Opus 5.5 卡通是怎麼做的

常見問題

爆紅的 Opus 5.5 影片用的是什麼提示詞?

大多數用的是這一句:「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.」 很多人再把主題換成自己的產品、網站或話題。

Claude Opus 5.5 能產生影片嗎?

無法直接產生。它只輸出文字。你看到的影片,是 Opus 5.5 寫出動畫程式碼,由瀏覽器逐格渲染,再由 ffmpeg 編碼成 MP4。

Opus 5.5 能觀看或分析影片嗎?

不能。它只接受文字和圖片。你可以從影片匯出靜態畫格或縮圖總覽,再交給它。

做 Opus 5.5 影片一定要用 Claude Code 嗎?

這是最簡單的方式,因為 Opus 5.5 能自己寫檔案、執行渲染、檢視畫面。也可以用 API 或 Claude 應用程式,再自己執行渲染腳本。

用 Opus 5.5 做影片免費嗎?

工具(ClaudeAnimationBase、Playwright、ffmpeg)都是免費的。但 Opus 5.5 不在 Claude 免費方案中,需要付費方案或 API 額度。

哪種風格效果最好?

動態圖像、解說動畫、圖表和扁平 2D 卡通。能用圖形和文字畫出來的都很適合,寫實畫面則不行。

本站為獨立指南,與 Anthropic 無任何關聯。價格為 Anthropic 的美元牌價。