「拿香腸也能滑手機」
製作流程與提示詞
這支科普動畫照實際製作的順序分成七步,每一步都附上當時給 AI 的提示詞
黃志弘 Leo
2026-10-24 發佈 · 2 人看過
這頁整理 IG 影片「拿香腸也能滑手機?」的製作流程。影片長約 44 秒,香腸、手、湯匙這些物件是 ChatGPT 生的圖,手機、網格、電荷光點和所有動態,是 Claude Code 用 HyperFrames 寫程式做出來的,旁白用 Gemini 的語音模型錄製。
每段提示詞上方都標了來源。標「原文」的,就是當時真的送給 AI 的內容;標「整理版」的,是事後把當時的要求整理成可以直接貼的一段,沒有再重跑一次。

第一步:用 crv 拆解參考片
這支的參考片是一支 61 秒、講觸控螢幕原理的 Reels。開始寫之前,先用 crv(claude-real-video)處理參考片,它會抓出關鍵影格、聯絡表和帶時間軸的逐字稿,Claude 讀完就能整理出每一句旁白配了什麼畫面。
安裝 crv,分析一支影片指令照 claude-real-video 官方說明,加上 --grid 會把關鍵影格排成聯絡表
pip install "claude-real-video[whisper]"
crv "https://www.instagram.com/reel/影片代碼/" --grid這支當時用的是付費版 crv Pro,指令多加 --mode creator --ocr --motion --breakdown,會再算出分鏡、剪接節奏、鏡頭運動和每秒的畫面文字。只想知道每一句配什麼畫面,用免費版就可以。
整理版:crv 跑完後貼給 Claude
我用 crv 分析了一支解說動畫,結果在 crv-out 資料夾。請先把 MANIFEST.txt 從頭讀到尾,再看 grids 資料夾裡的聯絡表,整理成一張表:
1. 每一句旁白的開始秒數和原句
2. 講到這一句時,畫面上出現什麼、怎麼動
3. 這一句跟下一句之間怎麼轉場
最後另外列出這支片的配色和構圖。我要做同一個主題的影片,旁白和畫面都會換成自己的寫法和設計,這張表只用來看他怎麼一句配一個畫面。第二步:寫旁白,每一句附出處
Reels 版總共 17 句旁白,每一句都配一個畫面。開場用一個少見的現象:「拿香腸也能滑手機?」,第 2 句接 2010 年的韓國新聞,第 3 句只有一句「為什麼?」。後段再回到香腸,講它為什麼滑得動,最後一句請觀眾留言「香腸」。
旁白講到的每件事都要找得到出處。這支做了一份出處表,一句旁白對一個網址,例如「手指一靠近,底下那幾個點的電就被你帶走一些」,對的是 Apple 的多點觸控專利;「香腸又濕又有鹽分,也會導電」,對的是 TED-Ed 的課程影片和 BBC 的節目片段。2010 年韓國的香腸觸控筆新聞有人懷疑是炒作,所以旁白只說新聞報過,不把話說死。
整理版:依這支旁白實際用到的規則整理,【主題】換成你的題目
幫我寫一支約 50 秒的直式科普短片旁白,主題是【主題】,觀眾是一般大眾。
1. 一行一句,總共 15 到 18 句。句子要短、完整、口語,一口氣念得完
2. 每一句只講一件事,而且配得出一個畫面,在句子後面用括號寫這句的畫面
3. 第 1 句用一個多數人沒注意過的現象開場,第 3 句單獨問「為什麼?」
4. 後段再回到開場的那個物件,解釋它為什麼做得到
事實查核:每一句附一個可靠出處的網址,例如官方文件、專利、維基百科或大型媒體。查不到的句子標「待查」,不要硬寫;有爭議的說法改成保守的寫法,例如「新聞報過」。
不要用先否定再翻轉的轉折句,不要用破折號。這支的旁白全文在下一步的配音提示詞裡。
第三步:用 Gemini TTS 配音
配音排在動畫之前,因為動畫的每個動作都要對齊旁白的時間點。這支最後用 Gemini API 的語音模型 gemini-3.8-flash-tts,聲音選 Charon,17 句一次錄完。
送出去的文字先用英文寫念法:語速快一點、台灣口音、句子之間停頓短,後面再接完整旁白。
原文:2026-10-24 送給 gemini-3.8-flash-tts(聲音 Charon)的內容,「糧」和「二零一零」是刻意的寫法
Speak at a brisk, steady conversational pace, a little faster than normal speech, in a clear Taiwanese Mandarin accent, friendly and confident, like telling a friend something surprising. Very short pauses between sentences; after the question "為什麼?" pause briefly before answering:
拿香腸也能滑手機?
二零一零年韓國新聞真的報過,有人冬天就這樣用。
為什麼?
因為手機在糧的,是你身上的電。
玻璃底下有一張看不見的網格,橫線跟直線交錯。
每個交叉點都存著一點電,手機一秒鐘來回檢查上百次。
你的身體大部分是鹽水,會導電。
手指一靠近,底下那幾個點的電就被你帶走一些。
手機看哪幾點變少了,就知道你碰在哪。
每個點都分開糧,所以兩根手指也分得出來。
放大縮小就是這樣來的。
香腸又濕又有鹽分,也會導電,握在手上就等於把手指接長了。
換成金屬湯匙也一樣,可是手一放開,電沒人帶走,螢幕就不理它。
塑膠筆跟一般手套不導電,再用力壓也沒用。
下雨天螢幕亂跳,是因為水珠也導電,被當成了手指。
觸控手套是在指尖織進導電的線,把你接到玻璃上。
留言「香腸」,我把做這支動畫的提示詞傳給你。錄好的原檔 54.68 秒。加速到 1.15 倍,句子之間的停頓壓到 0.3 秒,「為什麼?」後面留約 0.5 秒,最後是 43.05 秒。每一句旁白和關鍵詞出現的秒數另外存成一份檔案,例如第 13 句的「放開」在 29.82 秒,畫面上的手就在這一刻放開湯匙。
整理版:這支用的錄音程式和參數整理成一段
幫我用 Gemini API 錄旁白,API key 在環境變數 GEMINI_API_KEY。
1. 送出前先改 tts.txt:破音字換成同音字(例如念 liáng 的「量」寫成「糧」),年份寫成國字(2010 寫成「二零一零」)
2. 模型用 gemini-3.8-flash-tts,聲音 Charon。先送一句 6 個字以內的短句,確認額度還能用
3. 把 tts.txt 整份送出去,存成 raw.wav
4. 用 ffmpeg 把 raw.wav 加速成 1.15 倍(atempo=1.15)
5. 0.35 秒以上的停頓都壓到 0.3 秒,「為什麼?」後面留 0.5 秒,存成 vo.wav
6. 用 Whisper 把 vo.wav 轉回文字,跟旁白逐句比對,列出對不上的地方
7. 把每一句的開始、結束秒數,和幾個關鍵詞的秒數存成 timing.json,之後做動畫要用第四步:逐句設計畫面
動畫開工前,先把整支片會長什麼樣子寫成一份設計文件,包含一句話的視覺概念、配色、每一句旁白要配的畫面,還有哪些東西生圖、哪些直接用程式畫。
這支的畫面是一張淡灰白的桌面,上面放著手機和幾樣真實質感的物件。整支片只有「電」是亮藍色,哪裡亮起來,就代表手機正在量哪裡。手、湯匙、塑膠筆、兩種手套、水珠、香腸、軟排線和觸控晶片用生圖;手機、網格、電荷光點、掃描線、數字和字幕用程式畫。
整理版:依這支影片給 AI 的製作規格整理
下面是一支直式 1080x1920 科普動畫的旁白。請幫我寫整支的視覺設計:
1. 一句話的視覺概念
2. 配色:底色、文字色,再加一個強調色,強調色只用在這支最重要的那個東西上
3. 逐句列出畫面:講到哪個詞,畫面上出現什麼、怎麼動,每一句都要有對應的動畫
4. 分工:手、物品這類插圖用生圖模型做;網格、粒子、數字、掃描線這類圖形用程式畫
5. 整支在同一個場景裡一路變形,不切黑畫面、不換卡片、不放章節標題
旁白:
(貼在這裡)第五步:在同一個對話裡生出所有物件
物件插圖用 ChatGPT 網頁版的生圖功能做,10 張全部在同一個對話裡接著生。第一張先把風格寫完整,後面九張都用「Same …」開頭,讓它沿用同一套風格、光線和鏡頭角度。
提示詞裡寫了 no blue tones,因為藍色要留給畫面上的電。每張都要求透明背景,才能一個物件一層做動畫。第 2 張只留湯匙,第 3 張只留空手,位置都跟第一張一樣,生完再用程式對齊、疊在一起,就能做出手放開、湯匙留在螢幕上的動作。
第一張原本要的是柔和的 3D 插畫,ChatGPT 生出來比較像寫實棚拍。後面幾張也都是這個質感,彼此一致,整支就沿用這個風格。

以下 10 段都是原文,2026-10-24 依序送進同一個 ChatGPT 對話
Create one image: a clean 3D illustration for a science explainer animation.
Subject: a right hand holding a stainless steel teaspoon like a pen, seen from directly above (top-down view, camera looking straight down at a flat surface). The hand and a short light-gray knit sleeve cuff enter from the bottom-right corner of the frame. The thumb and index finger pinch the end of the handle; the spoon points diagonally toward the upper left, and the back of its bowl touches the surface.
Style: soft matte 3D render, gently stylized like a premium tech product illustration; smooth simplified skin in a muted warm beige; satin brushed silver spoon with soft neutral reflections; soft diffused studio light from the top left; a subtle soft shadow under the spoon and fingers. Low-saturation palette only: no blue tones, no bright colors.
Background: completely transparent (PNG with alpha channel). Isolated object only: no table, no phone, no text, no border.Same style, lighting, scale and top-down camera as the previous image. Now show only the teaspoon by itself, lying in exactly the same position and orientation (bowl at the upper left, handle running diagonally down to the bottom right), with no hand. Transparent background (PNG with alpha), isolated, nothing else.Same style, lighting, scale and top-down camera. Now show only the same hand and sleeve in exactly the same pose and position as in the first image, with the thumb and index finger still slightly pinched but holding nothing (the spoon is gone). Transparent background (PNG with alpha), isolated, nothing else.Same style, lighting and top-down camera as the hand images above: now only a right index finger pointing down at the surface, seen from directly above, the finger entering from the bottom-right edge of the frame (show the finger up to the second knuckle and the start of the hand; the rest is cropped by the frame edge). The fingertip is at the upper left. Transparent background (PNG with alpha), isolated, nothing else.Same style, lighting and top-down camera: a plain white plastic ballpoint pen with a matte plastic body and a plastic tip (no metal parts), lying diagonally with the tip pointing to the upper left, seen from directly above. Transparent background (PNG with alpha), isolated, nothing else.Same style, lighting and top-down camera: a hand wearing a thick gray knitted winter glove, index finger pointing down at the surface, seen from directly above, entering from the bottom-right edge of the frame, fingertip at the upper left. Transparent background (PNG with alpha), isolated, nothing else.Same style, pose and camera as the previous gloved hand, but now a touchscreen glove: the same gray knitted glove, except the index fingertip is knitted with a clearly visible patch of dark silver conductive thread. Transparent background (PNG with alpha), isolated, nothing else.Same style, lighting and top-down camera: three clear water droplets of different sizes resting on a flat surface, seen from directly above, with soft highlights and subtle shadows, no color tint. Transparent background (PNG with alpha), isolated, nothing else.Same style, lighting and top-down camera as the very first image: the same right hand, same pose and position, but now holding a cooked sausage like a pen instead of the spoon; the sausage points diagonally toward the upper left and its tip touches the surface. Transparent background (PNG with alpha), isolated, nothing else.Same photographic style and soft top-left light, straight top-down hardware close-up: a short flexible printed circuit cable made of pale amber polyimide with fine copper traces, a small black touch controller chip mounted on it, and a row of gold contact pads at one end. Photorealistic product photo, muted colors, no blue. Transparent background (PNG with alpha), isolated, nothing else.第六步:用 HyperFrames 做動畫
HyperFrames 是 HeyGen 開源的影片工具(Apache-2.0 授權),畫面用 HTML 寫,再輸出成 MP4,附有給 AI 程式助手用的技能包。這支的動畫是 Claude Code 照設計文件寫的,時間軸用 GSAP,香腸彎成問號這種形狀變形用 flubber。
電腦要先裝 Node.js 22 以上和 FFmpeg,再到專案資料夾裝技能包、建立直式專案:
npx skills add heygen-com/hyperframes
npx hyperframes@latest init my-video --resolution portrait指令依 HyperFrames 官網和 CLI 說明;這支專案當時用的版本是 0.8.191
整理版:依這支影片給 Claude Code 的製作規格整理,先做樣張再做整支
用 HyperFrames 做一支直式 1080x1920、30fps 的科普動畫,開工前先讀 hyperframes 技能。
素材:
- 旁白音檔 vo.wav,每一句和關鍵詞的秒數在 timing.json
- 畫面設計在 design.md,照裡面逐句的畫面做
- 去背插圖在 art 資料夾,一個物件一層做動畫,插圖不要用程式畫的幾何圖形代替
動態:
- 元素連續變形、轉場一氣呵成,用 GSAP 加 flubber 做整個畫面的變形,插圖不要只放在卡片裡晃
- 網格、電荷、粒子、數字、掃描線用程式畫
字幕:繁體中文,一句一則,跟聲音逐句對齊,放在 y 1180 到 1260。重要內容放在 y 250 到 1400 之間,左右各留 120px 以上。畫面不放章節目錄或編號小標。
先只做開場第 1 到 4 句當樣張,跑 npx hyperframes check,再用 npx hyperframes snapshot 每 1 秒截一格給我看。我確認畫風之後,再做完整支。這支的畫面分成三段:開場(第 1 到 5 句)、感應層(第 6 到 16 句),和 Reels 版的結尾(拉回手機、跳出「香腸」留言泡泡)。看過樣張後改過一次:網格原本是灰色細線,改成真實觸控面板的樣子,保護玻璃、觸控感應層、顯示面板三層往上下拉開,感應層畫成互容式的菱形圖樣,上方接軟排線和觸控晶片。
開場改成香腸時,畫面重排過一次。之後配音換模型整段重錄,就用逐句起訖和約 35 個關鍵詞,把每個動作的時間換算到新配音上,畫面不用重做。
第七步:輸出 Reels、Shorts、YouTube 三個版本
三個版本共用同一套場景檔,只換尺寸、字幕位置和結尾:
- Reels:1080x1920,44.3 秒,結尾是留言「香腸」的邀請
- Shorts:1080x1920,42.3 秒,第一格是 0.4 秒的直式封面,結尾停在第 16 句
- YouTube:1920x1080,41.9 秒,橫式重新排版,結尾停在第 16 句
另外做兩張封面:Reels 封面用片中香腸滑手機那一格,加上一行大字「拿香腸也能滑手機?」;YouTube 縮圖是 1280x720。Shorts 第一格放封面,是為了讓 YouTube 選縮圖時選得到它。
整理版:依這支影片第二階段的製作規格整理
同一套場景再輸出三個版本,場景檔共用,只換尺寸、字幕位置和結尾:
1. Reels:1080x1920,結尾加上留言關鍵字那一句
2. Shorts:1080x1920,第一格放 0.4 秒的直式封面,結尾停在最後一句知識,不放留言邀請
3. YouTube:1920x1080 橫式,重新排版,手機畫面置中放大,字幕一行放在 y 930 到 1000,不放留言邀請
另外做 Reels 封面(1080x1920)和 YouTube 縮圖(1280x720,縮到 320x180 標題還要看得清楚)。生圖和配音卡關時的處理
生出來的風格跟提示詞寫的不一樣?
看後面幾張跟第一張一不一致。這支第一張要柔和的 3D 插畫,ChatGPT 給的是寫實棚拍,接著生的幾張都是同一種質感,整支片看起來是同一套風格,所以就沿用了。
配音回 429 錯誤?
429 代表額度用完了。2026-10-24 這天,gemini-3.8-flash-tts 的免費層是每天 10 次。這支製作途中就遇到過一次,當時先改用同樣有 Charon 聲音的 gemini-3.1-flash-tts-preview,兩個模型的音高不太一樣;最後的成品是兩個小時後用 gemini-3.8 整段重錄的。
怎麼確認配音沒有念錯字?
用 Whisper 把配音轉回文字,跟旁白逐句比對,對不上的地方再用耳朵聽。這支用 gemini-3.1 錄的那一版,兩個「量」都被聽成「亮」;改成送「糧」、換 gemini-3.8 重錄之後,聽出來是同音的「涼」才對。加了配樂的成品裡「鹽水」被聽成「眼水」,同一段配音單獨轉寫是對的,這種情況要自己聽過才能確定。
用到的工具
crv(claude-real-video),把影片轉成關鍵影格和逐字稿給 AI 讀,免費開源;crv 中文說明。
Claude Code,Anthropic 的 AI 程式助手,這支動畫的程式由它寫。
HyperFrames,用 HTML 寫畫面、輸出成影片的開源工具,原始碼在 GitHub。
Gemini 語音生成說明,模型名稱、聲音清單和 API 用法(英文)。
ChatGPT,物件插圖用網頁版的生圖功能。
Whisper,OpenAI 開源的語音轉文字模型,用來檢查配音有沒有念錯。