Communitygithub.com

assafkip/claude-video-editor

使用 Manim Community Edition 製作數學與技術動畫的專業生產管線。能產出 3Blue1Brown 風格的解說影片、演算法視覺化、方程式推導、架構圖與資料故事。

claude-video-editor 是什麼?

這個技能建立了一套完整的 Manim 動畫生產管線,專注於教育與技術內容的視覺化。它不僅僅是一個程式碼模板,更是一套結合了敘事設計、視覺設計準則與技術實作的創作框架。技能內建了多種創作模式,包括概念解說、方程式推導、演算法視覺化、資料故事、架構圖、論文解說與 3D 視覺化,並為每種模式提供了對應的參考文件。其核心設計哲學強調「幾何先於代數」與「首次渲染即達標」,從色彩調色盤、動畫速度、字體層級到場景變化的視覺節奏,都提供了明確的規範。使用者只需撰寫單一 Python 腳本,即可透過 Manim 引擎渲染高品質動畫,並利用 ffmpeg 進行片段拼接與音訊合成。此技能支援所有主流平台(Linux、macOS、Windows),並在 SKILL.md 中提供了詳盡的參考文件索引,涵蓋動畫技巧、視覺設計、方程式處理、圖表繪製、3D 場景等多個層面。

相容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/assafkip/claude-video-editor/tree/HEAD/skills/video-use/skills/manim-video

在你喜歡的 AI 中提問

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

說明文件

Manim 影片生產管線

創作標準

這是教育電影。每一幀都在教學。每一個動畫都揭示結構。

在撰寫任何程式碼之前,先闡明敘事弧線。它要修正什麼錯誤觀念?「頓悟時刻」是什麼?什麼樣的視覺故事能帶領觀眾從困惑走向理解?使用者的提示是起點——用教學野心來詮釋它。

幾何先於代數。 先展示形狀,再展示方程式。視覺記憶的編碼速度比符號記憶更快。當觀眾在看到公式之前先看到幾何圖案時,這個方程式就顯得理所當然。

首次渲染即達標是無妥協的。 輸出必須在視覺上清晰且美學上一致,無需修改回合。如果某個東西看起來雜亂、時間控制不佳,或像「AI 生成的幻燈片」,那就是錯的。

不透明度分層引導注意力。 永遠不要以全亮度顯示所有內容。主要元素為 1.0,上下文元素為 0.4,結構元素(軸線、網格)為 0.15。大腦會分層處理視覺顯著性。

呼吸空間。 每個動畫之後都需要 self.wait()。觀眾需要時間來吸收剛出現的內容。永遠不要急著從一個動畫進入下一個。在關鍵揭示之後暫停 2 秒絕對不會浪費。

一致的視覺語言。 所有場景共用相同的色彩調色盤、一致的排版大小、匹配的動畫速度。一個技術正確但每個場景使用隨機不同顏色的影片是美學上的失敗。

先決條件

執行 scripts/setup.sh 來驗證所有依賴項。需要:Python 3.10+、Manim Community Edition v0.20+(pip install manim)、LaTeX(Linux 上為 texlive-full,macOS 上為 mactex)以及 ffmpeg。參考文件基於 Manim CE v0.20.1 進行測試。

模式

模式輸入輸出參考文件
概念解說主題/概念附有幾何直覺的動畫解說references/scene-planning.md
方程式推導數學表達式逐步動畫證明references/equations.md
演算法視覺化演算法描述附有資料結構的逐步執行references/graphs-and-data.md
資料故事資料/指標動畫圖表、比較、計數器references/graphs-and-data.md
架構圖系統描述元件逐步建立與連線references/mobjects.md
論文解說研究論文關鍵發現與方法動畫化references/scene-planning.md
3D 視覺化3D 概念旋轉曲面、參數曲線、空間幾何references/camera-and-3d.md

技術棧

每個專案使用單一 Python 腳本。不需要瀏覽器、Node.js 或 GPU。

層級工具用途
核心Manim Community Edition場景渲染、動畫引擎
數學LaTeX (texlive/MiKTeX)透過 MathTex 渲染方程式
影片 I/Offmpeg場景拼接、格式轉換、音訊混合
語音合成ElevenLabs / Qwen3-TTS (選用)旁白配音

管線

規劃 --> 編碼 --> 渲染 --> 拼接 --> 音訊 (選用) --> 審查
  1. 規劃 — 撰寫 plan.md,包含敘事弧線、場景列表、視覺元素、色彩調色盤、旁白腳本
  2. 編碼 — 撰寫 script.py,每個場景一個類別,各自可獨立渲染
  3. 渲染 — 草稿使用 manim -ql script.py Scene1 Scene2 ...,正式版使用 -qh
  4. 拼接 — 使用 ffmpeg 將場景片段串接成 final.mp4
  5. 音訊 (選用) — 透過 ffmpeg 加入旁白及/或背景音樂。詳見 references/rendering.md
  6. 審查 — 渲染預覽靜態圖,對照規劃檢查,進行調整

專案結構

project-name/
  plan.md                # 敘事弧線、場景分解
  script.py              # 所有場景集中在一個檔案
  concat.txt             # ffmpeg 場景列表
  final.mp4              # 拼接後的輸出
  media/                 # Manim 自動產生
    videos/script/480p15/

創作指導

色彩調色盤

調色盤背景主要次要強調色使用情境
經典 3B1B#1C1C1C#58C4DD (藍)#83C167 (綠)#FFFF00 (黃)一般數學/資訊科學
溫暖學術#2D2B55#FF6B6B#FFD93D#6BCB77平易近人風格
霓虹科技#0A0A0A#00F5FF#FF00FF#39FF14系統、架構
單色調#1A1A2E#EAEAEA#888888#FFFFFF極簡風格

動畫速度

情境run_time之後的 self.wait()
標題/開場出現1.5 秒1.0 秒
關鍵方程式揭示2.0 秒2.0 秒
變換/形變1.5 秒1.5 秒
輔助標籤0.8 秒0.5 秒
FadeOut 清理0.5 秒0.3 秒
「頓悟時刻」揭示2.5 秒3.0 秒

字體層級

角色字型大小用途
標題48場景標題、開場文字
標題36場景內的章節標題
正文30說明文字
標籤24註解、軸標籤
字幕20副標題、細則

字型

所有文字使用等寬字型。 Manim 的 Pango 渲染器在處理比例字型時,在所有尺寸下都會產生間距錯誤。完整建議請見 references/visual-design.md。

MONO = "Menlo"  # 在檔案開頭定義一次

Text("傅立葉級數", font_size=48, font=MONO, weight=BOLD)  # 標題
Text("n=1: sin(x)", font_size=20, font=MONO)              # 標籤
MathTex(r"\nabla L")                                        # 數學 (使用 LaTeX)

為確保可讀性,最小 font_size=18。

場景間的變化

永遠不要對所有場景使用相同的設定。對於每個場景:

  • 使用調色盤中的不同主色
  • 使用不同的佈局 —— 不要總是將所有內容置中
  • 使用不同的動畫入場方式 —— 在 Write、FadeIn、GrowFromCenter、Create 之間變化
  • 使用不同的視覺重量 —— 有些場景密集,有些稀疏

工作流程

步驟 1:規劃 (plan.md)

在任何程式碼之前,先撰寫 plan.md。完整的範本請見 references/scene-planning.md。

步驟 2:編碼 (script.py)

每個場景一個類別。每個場景都可獨立渲染。

from manim import *

BG = "#1C1C1C"
PRIMARY = "#58C4DD"
SECONDARY = "#83C167"
ACCENT = "#FFFF00"
MONO = "Menlo"

class Scene1_Introduction(Scene):
    def construct(self):
        self.camera.background_color = BG
        title = Text("為什麼這個方法有效?", font_size=48, color=PRIMARY, weight=BOLD, font=MONO)
        self.add_subcaption("為什麼這個方法有效?", duration=2)
        self.play(Write(title), run_time=1.5)
        self.wait(1.0)
        self.play(FadeOut(title), run_time=0.5)

關鍵模式:

  • 每個動畫加上字幕:在 self.play() 上使用 self.add_subcaption("text", duration=N) 或 subcaption="text"
  • 在檔案頂部定義共用色彩常數 以確保跨場景一致性
  • 在每個場景中設定 self.camera.background_color
  • 乾淨的場景結束 —— 在場景結尾使用 self.play(FadeOut(Group(*self.mobjects))) 淡出所有物體

步驟 3:渲染

manim -ql script.py Scene1_Introduction Scene2_CoreConcept  # 草稿
manim -qh script.py Scene1_Introduction Scene2_CoreConcept  # 正式版

步驟 4:拼接

cat > concat.txt << 'EOF'
file 'media/videos/script/480p15/Scene1_Introduction.mp4'
file 'media/videos/script/480p15/Scene2_CoreConcept.mp4'
EOF
ffmpeg -y -f concat -safe 0 -i concat.txt -c copy final.mp4

步驟 5:審查

manim -ql --format=png -s script.py Scene2_CoreConcept  # 預覽靜態圖

關鍵實作注意事項

LaTeX 原始字串

# 錯誤:MathTex("\frac{1}{2}")
# 正確:
MathTex(r"\frac{1}{2}")

邊緣文字 buff >= 0.5

label.to_edge(DOWN, buff=0.5)  # 永遠不要小於 0.5

取代文字前先 FadeOut

self.play(ReplacementTransform(note1, note2))  # 不要直接在上面 Write(note2)

永遠不要動畫尚未加入的物體

self.play(Create(circle))  # 必須先加入
self.play(circle.animate.set_color(RED))  # 然後進行動畫

效能目標

品質解析度FPS速度
-ql (草稿)854x48015每場景 5-15 秒
-qm (中等)1280x72030每場景 15-60 秒
-qh (正式版)1920x108060每場景 30-120 秒

始終在 -ql 下進行迭代。僅在最終輸出時渲染 -qh。

參考文件

檔案內容
references/animations.md核心動畫、速率函數、組合、.animate 語法、時間模式
references/mobjects.md文字、形狀、VGroup/Group、定位、樣式、自訂物體
references/visual-design.md12 項設計原則、不透明度分層、佈局範本、色彩調色盤
references/equations.mdManim 中的 LaTeX、TransformMatchingTex、推導模式
references/graphs-and-data.md軸、繪圖、BarChart、動畫資料、演算法視覺化
references/camera-and-3d.mdMovingCameraScene、ThreeDScene、3D 曲面、相機控制
references/scene-planning.md敘事弧線、佈局範本、場景轉換、規劃範本
references/rendering.mdCLI 參考、品質預設、ffmpeg、旁白工作流程、GIF 匯出
references/troubleshooting.mdLaTeX 錯誤、動畫錯誤、常見錯誤、除錯
references/animation-design-thinking.md何時動畫化 vs 顯示靜態、分解、節奏、旁白同步
references/updaters-and-trackers.mdValueTracker、add_updater、always_redraw、基於時間的更新器、模式
references/paper-explainer.md將研究論文轉化為動畫——工作流程、範本、領域模式
references/decorations.mdSurroundingRectangle、Brace、箭頭、DashedLine、Angle、註解生命週期
references/production-quality.md編碼前、渲染前、渲染後檢查清單、空間佈局、色彩、節奏

創意發散 (僅在使用者要求實驗性/創意性/獨特輸出時使用)

如果使用者要求創意性、實驗性或非傳統的解說方法,請在設計動畫之前選擇一個策略並進行推理。

  • SCAMPER —— 當使用者想要對標準解說進行全新詮釋時
  • 假設反轉 —— 當使用者想要挑戰某個主題的傳統教學方式時

SCAMPER 轉換

對標準的數學/技術視覺化進行轉換:

  • 替代 (Substitute):替換標準的視覺隱喻(數線 → 蜿蜒路徑,矩陣 → 城市網格)
  • 結合 (Combine):合併兩種解說方法(代數 + 幾何同時進行)
  • 反轉 (Reverse):反向推導 —— 從結果開始,解構到公理
  • 修改 (Modify):誇大某個參數以顯示其重要性(10 倍的學習率,1000 倍的樣本量)
  • 消除 (Eliminate):移除所有標記 —— 僅透過動畫和空間關係進行解說

假設反轉

  1. 列出這個主題的「標準」視覺化方式(從左到右、2D、離散步驟、正式符號)
  2. 選出最根本的假設
  3. 反轉它(從右到左推導、將 2D 概念嵌入 3D、用連續形變取代步驟、零符號)
  4. 探索這個反轉揭示了哪些標準方法所隱藏的東西

Individual skills in this repo

This repo contains 9 individual skills — each has its own dedicated page.

assafkip/claude-video-editor

Build videos from stills when there is nothing to cut — narration first (ElevenLabs v3 with audio tags), then still keyframes from ANY source (AI image tools, screenshots, photos, HyperFrames-rendered HTML), animated deterministically with the animate-stills recipe (HyperFrames camera moves + GSAP atmosphere). Use when the user wants an explainer, documentary-style video, or any video built from generated or collected visuals instead of recorded footage.

assafkip/claude-video-editor

GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labels, nesting, playback), and performance (transforms, will-change, quickTo). Use when writing GSAP animations in HyperFrames compositions.

assafkip/claude-video-editor

HyperFrames CLI tool — hyperframes init, lint, preview, render, transcribe, tts, doctor, browser, info, upgrade, compositions, docs, benchmark. Use when scaffolding a project, linting or validating compositions, previewing in the studio, rendering to video, transcribing audio, generating TTS, or troubleshooting the HyperFrames environment.

assafkip/claude-video-editor

Install and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add, installing a block or component, wiring an installed item into index.html, or working with hyperframes.json. Covers the add command, install locations, block sub-composition wiring, component snippet merging, and registry discovery.

assafkip/claude-video-editor

Create video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML. Use when asked to build any HTML-based video content, add captions or subtitles synced to audio, generate text-to-speech narration, create audio-reactive animation (beat sync, glow, pulse driven by music), add animated text highlighting (marker sweeps, hand-drawn circles, burst lines, scribble, sketchout), or add transitions between scenes (crossfades, wipes, reveals, shader transitions). Covers composition authoring, timing, media, and the full video production workflow. For CLI commands (init, lint, preview, render, transcribe, tts) see the hyperframes-cli skill.

assafkip/claude-video-editor

Beginner-friendly end-to-end video creator for HyperFrames. Use when the user says "make a video", "create a video", "new video", "build a video", "video from scratch", "I want to make a video", "help me create a video", or when someone who's never used HyperFrames before arrives with a concept, script, or rough idea and wants a finished MP4. Interviews the user in one pass, then builds the full video with mandatory preview and visual-verification gates.

assafkip/claude-video-editor

Build and iterate short-form vertical (9:16) videos in Hyperframes — TikTok/Reels/Shorts style. Use when Nate says "short-form video", "vertical video", "TikTok/Reels/Shorts", "make a short", "talking-head + motion graphics", or when the target is a 1080x1920 composition with face video + synced scene overlays + karaoke captions. Encodes the full May Shorts 19 playbook: face-mode choreography, audio-synced scene timing, karaoke captions, and the 10-rule quality checklist.

assafkip/claude-video-editor

Edit any video by conversation — the orchestrator for the bundled video pipeline. Use when the user wants to edit, cut, caption, grade, or add motion graphics to footage; drops a folder of clips and says "edit this"; or asks to make a promo/teaser/tutorial/short. Routes to video-use (the cut engine) and HyperFrames (motion-graphics overlays), with a motion-craft library for taste.

assafkip/claude-video-editor

Capture a website and create a HyperFrames video from it. Use when: (1) a user provides a URL and wants a video, (2) someone says "capture this site", "turn this into a video", "make a promo from my site", (3) the user wants a social ad, product tour, or any video based on an existing website, (4) the user shares a link and asks for any kind of video content. Even if the user just pastes a URL — this is the skill to use.

相關技能