Communitygithub.com

2D 旗艦動畫提示詞

引導對話產出一個超棒的 Claude Fable 5(或其他全項目模型)的 2D 瀏覽器動畫提示詞,涵蓋生成式循環、動態設計、解說、動態字體、網頁與 UI 特效、角色場景、2D 玩具與樂器、資料動畫及著色器作品,並提供技術選擇(Canvas 2D、SVG、CSS/WAAPI、著色器、PixiJS、p5.js、GSAP)及可選輸出為影片、GIF、Lottie 或 SVG。

2D 旗艦動畫提示詞 是什麼?

此技能旨在幫助使用者將模糊的視覺概念,轉化為一個結構完整、可立即執行於瀏覽器的 2D 動畫提示詞。它支援 Claude Fable 5 等全項目模型,並引導使用者透過一系列決策階段(表單、技術、風格、動態、導出等)來產出提示詞。技能的核心價值在於強制提示詞包含所有關鍵細節,確保模型能產出高品質成果,而不需自行做重要決策。此技能適用於多種動畫形式,如生成式循環、動態字體、角色場景等,並提供 Canvas 2D、SVG、CSS/WAAPI、著色器、PixiJS、p5.js、GSAP 等多種技術選項。最終產出的提示詞可導出為影片、GIF、Lottie 或 SVG,滿足不同使用場景。

相容平台✓Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/hretheum/animation-prompt/tree/HEAD/skills/motion2d-prompt

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

旗艦 2D 動畫提示詞

此技能將一個模糊的構想轉化為提示詞,之後模型預設不做任何重要決定:形式、技術、畫框與格式、風格法則、標誌性動作、以影格為單位的時機、節拍或循環長度、互動、導出、必保留清單。它是 threejs-world-prompt 的姊妹技能。骨架相同,但在 2D 中,「驚艷」來自構圖、動畫工藝和形狀語言,而非相機與真實感。

參考檔案:何時閱讀

  • references/forms.md:總是,一旦形式確定。 10 種形式各自的必備章節。
  • references/tech.md:總是在第 0 輪。 形式→技術矩陣、每種技術的限制、固定版本的樣板、導出及其後果。
  • references/anatomy.md:總是在撰寫前。 共享區塊與層級(微 / 中 / 大 / 規格)。
  • references/craft.md:動畫工藝詞彙表:程式碼中的動畫原則、緩動與彈簧、影格時機、編舞、轉場、動態字體、循環、紋理、構圖。在第 2–4 輪閱讀。
  • references/patterns.md:可選模組(節拍、標誌性動作、物件連續性、變形、圖層視差、游標作為演員、聲音同步、海報影格、衛生)。
  • references/examples.md:三個合成校準提示詞(生成式循環最大、動態字體中等、角色場景最大)。閱讀與形式相符的那個。不要複製其內容。

如何進行對話

覆蓋規則:使用者擁有願景,你擁有知識。提出具體決定(色板、字型、緩動、循環長度、技術)並詢問是否合適。不要問你可以自行解決的事。每輪:總結已決定的事項,提出預設值,詢問 1–3 個你真正不知道的問題。對於封閉式選擇,如果工具可用,使用可點擊選項。「下一步 / 你決定」= 接受提議。跳過使用者已回答的輪次。目標:在草稿前進行 2–5 次交流。

第 0 輪:形式、層級、交付、技術

  • 形式(forms.md):生成式循環 / 無盡生成作品 / 動態設計影片或解說 / 動態字體 / 頁面或 UI 特效 / 2D 玩具或樂器 / 動畫資料 / 角色場景 / 微(標誌開場、載入器)/ 著色器作品。形式可以組合;一個是主要的。
  • 層級:微(約 80–150 字)、中(約 350–600)、大(約 1000–1800)、規格(工程格式)。
  • 交付:線上頁面 / 導出(MP4、WebM、GIF、PNG 序列、Lottie、SVG)/ 兩者。現在就確定導出,因為它限制了技術:每次導出都需要動畫是時間的純函數,而 Lottie 需要從第一行程式碼就使用形狀和關鍵影格建構(tech.md)。
  • 畫框格式:全響應式視口 / 16:9 / 9:16 / 1:1 / 4:5 / 嵌入式元件。對於導出,給出解析度和 fps。
  • 技術:你自己從 tech.md 的矩陣中提出,並用一句話證明其合理性。僅當使用者有約束條件(網站技術棧、專案中已有的庫)時才詢問。

第 1 輪:鉤子、開場、核心概念

  • 鉤子:讓人們在前一秒內不會忽略的原因。
  • 開場策略:海報影格(第一影格已是最佳圖像)/ 屏息 → 點火 / 錨點 → 轉變(例如一個正常頁面開始表現不同)/ 從中間開始。
  • 核心概念:一句話,所有內容圍繞此展開。

第 2 輪:風格法則與可讀性

你自己提出:形狀語言(幾何 / 有機 / 剪紙 / 墨水 / 像素 / 平面向量 / 工程圖)、線條(粗細、端點、晃動)、填充與紋理(顆粒、紙張、網點、RISO、印刷錯位)、一組 3–6 種含十六進位色值的命名色彩、字體排印(一個 Google Fonts 字型、其角色、可變字軸)、構圖(網格、安全邊距、注意力點層級、空白空間)、3–4 個反模式,以及一個可讀性規則(每個影格一瞥可讀;文字在動態速度下可讀)。

第 3 輪:主角、標誌、機制

  • 主角:承載整個作品的元素或系統(線條、粒子、字母、角色、網格、流體)。
  • 標誌性動作:此作品可被識別的一個動作(craft.md)。
  • 機制:主角互動(游標、滾動、點擊、拖曳、聲音)或帶有節拍的時間線。
  • 主題影格:一個總結整個作品的影格,用於海報。

第 4 輪:動態與時間

節奏(BPM 或每拍秒數)、關鍵動作的影格時機、緩動與彈簧作為命名值、編舞(交錯、串聯、重疊)、轉場、循環長度或帶時間碼的鏡頭列表,大形式中 >=5 個獨立動態系統。從 patterns.md 中選擇模組。

第 5 輪:互動、效能、可及性、導出

控制項(最小化)、prefers-reduced-motion(總是,包含具體的簡化版本)、該技術的效能預算、導出細節(控制、格式、解析度、fps、長度、無縫性)、必保留清單。提示詞語言:預設為英文。

撰寫提示詞

  1. 骨架:來自 anatomy.md 的共享區塊 + 來自 forms.md 的形式章節 + 來自 tech.md 的技術樣板 + 來自 patterns.md 的模組。#### 標題命名概念。
  2. 祈使語氣、密集。用數字描述動態:影格、毫秒、曲線(cubic-bezier(.2,.8,.2,1))、彈簧(剛度/阻尼)、以毫秒為單位的交錯、BPM。顏色用十六進位,字型用名稱。
  3. 大和規格層級以一個驗收標準段落結束,然後一句話「一句話總結:…」。
  4. 執行檢查清單、修正、以程式碼區塊傳遞(如果較長或應要求,可作為 .md 檔案)。在其下方,用 2–3 句話說明代表使用者所做的決定。

傳遞前檢查清單

  • 第一句:形式 + 技術 + 一個包含 4–6 個具體動態細節的主角圖像。
  • [ ]「不要構建…」(3–4 個 2D 反模式,例如現成動態模板、PowerPoint 淡入、五彩紙屑螢幕保護程式、剪貼畫)和一個「構建…」重新框架;「核心概念:」。
  • 技術已命名並證明其合理性,包含來自 tech.md 的固定版本樣板。
  • 畫框格式、解析度和 fps(如果導出)、調整大小時的行為。
  • 開場符合策略;海報影格和第一秒測試。
  • 風格法則:形狀、線條、紋理、含十六進位色值的色板、含其角色的字型。
  • 可讀性規則,包括動態中文字的閱讀速度。
  • 標誌性動作用數字描述;緩動和時機作為命名值。
  • 循環:以影格為單位的長度和無縫規則;影片:帶時間碼和節拍的鏡頭列表。
  • ≥5 個獨立動態系統(最大);凍結影格測試。
  • 每個提及的功能是可見的、在移動的或可觀看的。
  • 範圍蔓延禁令;如果主題敏感,校準語氣。
  • prefers-reduced-motion 包含具體的簡化版本。
  • 導出(如果有):動畫作為時間的純函數、逐影格渲染、格式、控制;僅在相容子集中使用 Lottie。
  • 效能:該技術的預算、DPR ≤ 2、離屏暫停、必保留清單(「…永遠不會被捨棄」)。
  • 驗收標準(大/規格)和「一句話總結:…」。
  • 形式要求的章節已存在;長度在層級範圍內。

邊界

  • 參考檔案和 examples.md 中的範例用語絕不會原樣進入提示詞。採用結構和決定,並用自己的語言撰寫每個句子,包括技術公式和驗收標準段落。
  • 沒有已知角色、吉祥物、標誌或可識別的受版權保護專案,包括「以…風格」的特定角色。運動或時代的風格(包浩斯、浮世繪、瑞士、世紀中期剪紙形式作為通用語言)是可以的;提出原創角色和標記。
  • 除非使用者提供自己的字型,否則僅使用 Google Fonts 或系統字型。
  • 提示詞必須可在瀏覽器中執行。如果願景超出技術限制(例如 SVG 中的一百萬個向量形狀),則更改技術或技巧,並在提示詞中命名。

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

相關技能