怎麼用 AI 把知識內容做成會動的圖卡？完整 Prompt 公開，7 幕敘事弧結構讓你的文章自動變成動畫故事

這篇是 <怎麼用 Gemini Nano Banana 做出日系專業設計師等級的課程 Banner> 系列文的第三篇，上一篇是 <怎麼用 Gemini 幫你製作日系高質感的知識圖卡？> ，若還沒看過可以先回去看一下。

前兩篇我們解決了兩件事：

• 第一篇教你怎麼用 Gemini 做出有日系質感的課程 Banner
• 第二篇教你怎麼把知識型文章轉化成一套有敘事邏輯的知識圖卡

這一篇的靈感，來自我某天刷到的一個網站。

這位作者叫 Ralph Ammer，他的網站是 ralphammer.com。他寫的每一篇文章都會搭配自己製作的動態 Motion 插圖，用簡單的線條動畫把抽象的概念視覺化。一段文字配上一個動畫，整篇文章的閱讀感覺完全不一樣，你會不自覺地一直往下滑。

但問題是…

要做出這樣的動畫需要有一定的動畫製作能力 (熟悉 Motion 動畫製作工具)，不是每個人都有時間去學。

所以我開始想：有沒有辦法用 AI 模仿類似的效果？

這一篇就是我研究出來的答案，下面是示範效果：

在這篇文章中，我們將使用 Claude 進行實作。

備註：Gemini 和 ChatGPT 也可以製作一樣的效果 (但品質相當不穩定)，如果你想使用 Gemini/ChatGPT 的話…在文末我會補充具體作法。

這個 Prompt 讓 Claude 變成一個 Motion Design 工程師

你只要丟一段知識性文字給，它會做 3 件事。

1. 重新設計文案： 它不會直接把你的文字拿去用，而是依照一套七幕敘事弧結構重新撰寫每一幕的文案。包含了…開場懸念、問題深化、問題具體化、轉折行動、行動深化、結果呈現、結果收束。每一幕之間都有連結詞，串起來讀像一篇完整的短文。
2. 規劃視覺設計：每一幕配一個 icon，只用 stroke-only 的線稿風格集合，進場動畫用描線效果，像在看手繪一樣有生命感。每一幕的文字還會自動抽取關鍵詞加粗，形成深灰和淡灰的視覺層次。
3. 直接輸出可以執行的 HTML 檔案： 最終成果是一個打開瀏覽器就能跑的動畫，完整的 GSAP 動畫邏輯、icon SVG 全部內嵌在裡面，不需要安裝任何東西。

如果你需要附在文章中的話，可以使用如 ScreenToGif 用錄影的方式來製作 .gif 檔案並貼在文章中即可。(使用教學可以參考 此網頁)

七幕敘事弧，是這個 Prompt 最核心的設計

這個 Prompt 對每一幕的文案都有非常精確的要求。

• 第一幕必須是疑問句，從觀眾自己可能遭遇的困境出發，製造「這說的是我」的共鳴
• 第二幕說清楚問題的本質
• 第三幕用具體場景讓問題更有畫面感
• 第四幕帶出轉折，一個行動、一個改變
• 第五幕說清楚怎麼做
• 第六幕展示結果
• 第七幕收束整個故事，帶出核心洞見。

而且每一幕文案寫完之後，Prompt 還要求做一個「組合測試」。

Claude 把所有幕的文字依序排列默讀一遍，如果能組合成一段有起伏的短文就通過，如果讀起來像條列清單就要重寫。這個機制保證了動畫的敘事品質。