# 策展 · X (Twitter) 🔥🔥

> 📖 本站完整內容索引（documentation index）：[llms.txt](/llms.txt)

> 作者：Agent成峰 (@chengfeng240928) · 平台：X (Twitter) · 日期：2026-06-23

> 原始來源：https://x.com/chengfeng240928/status/2068932528317071404

## 中文摘要

# 大更新！Codex × 剪輯 Skills，一句話剪影片，免費開源

我之前做過一個 2000+ Star 的剪輯 Skills。

![這是一張 GitHub 儲存庫頁面的截圖，顯示名為「chengfeng-videocut-skills」的專案檔案列表與相關資訊。](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/7cdf32cc1c29746a.jpg)

<details class="chart-data"><summary>展開畫面重點</summary><div class="me-note">畫面為 GitHub 儲存庫頁面，專案名稱為「chengfeng-videocut-skills」。
右側 About 區塊說明：「用 Claude Code Skills 做的影片剪輯 Agent」。
授權資訊：Apache-2.0 license。
統計資料：2k stars, 8 watching, 295 forks。
檔案列表包含：
- bin (Merge subtitle generation into rough cut skill)
- 剪口播 (Add cut completion watcher)
- 口播成片 (Rename videocut skills package)
- 自進化 (Rename videocut skills package)
- .env.example (feat: 補充開源歸屬並加入口播成片 skill)
- .gitignore (Update public README for videocut skills)
- .npmignore (Rename videocut skills package)
- CITATION.cff (Rename videocut skills package)
- LICENSE (chore: 切換開源協議為 Apache-2.0)
- NOTICE.md (Rename videocut skills package)
- README.md (Add cut completion watcher)
- package.json (Rename videocut skills package)
貢獻者顯示為「claude」。</div></details>

這次接上 Codex，大升級：它可以接手後續流程，繼續做分鏡、動畫和合成。

已經幫我產出好幾條千讚影片。

![這張圖展示了使用 AI 工具為文章自動配圖的流程優化，強調從傳統的「複製內容至外部工具」轉變為在單一環境內完成插圖生成。](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/9f2f14cbebb87ca3.jpg)

<details class="chart-data"><summary>展開畫面重點</summary><div class="me-note">圖中左側為流程示意圖，標題為「以前：要繞出去」。
流程圖顯示：
1. 「文章」區塊：包含「正文位置」。
2. 箭頭指向「外部工具」區塊，標註「複製」與「提示詞」、「重新解釋」。
3. 「外部工具」區塊內包含「出圖」與「生圖軟體」。

右側為社群貼文內容：
- 帳號名稱：AI產品自由
- 標題：Codex+image2 自動給文章配專業插圖
- 內文：我用 Codex+image2，給文章自動配了一套專業插圖。以前寫文章，還要把內容搬到外部生圖工具裡重新解釋。現在文章本來就在 Codex 上下文裡，它能讀標題、大綱、正文，再判斷哪裡該配圖、應該畫什麼關係。
- 核心流程：寫完文章、用插圖 Skill 找圖位、先插入 ASCII 草圖、確認邏輯、讓 image2 替換成正式插圖。提醒：不要一上來就生圖，先讓 Codex 畫草圖對齊邏輯。
- 結語：AI 讓文章從線性閱讀，變成文字 + 影象的雙通道閱讀。
- 標籤：#codex #claudecode #插圖 #image2 #AI生圖 #REDSkillS #Skill
- 互動資訊：猜你想搜 codex裡怎麼使用image2、編輯於 06-10 浙江、共 46 條評論。
- 評論區：使用者「慢養四時」留言「codex裡面預設就有image2嗎 我記得是另外一個名字的生圖工具」。
- 影片下方字幕：「寫完文章還得去寫一堆提示詞」。</div></details>

以前做影片，要先打開剪映。

現在裝好 Skills，把影片和文字稿丟給 Agent，它就能把整條片子跑完。

## 我是怎麼做的？

第一步，讓 Agent 安裝剪輯 Skills。

提示詞很簡單：

> 幫我安裝或更新 chengfeng-videocut-skills 這個剪輯 Skills。安裝位址是 https://github.com/Agentchengfeng/chengfeng-videocut-skills

Agent 會先跟你確認，然後自己去跑安裝。裝好以後，本地就能呼叫這套剪輯 Skills。

![這是一張關於「剪輯Agent」功能規劃與工作流建議的清單截圖。](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/8d9fa091a0a3898a.jpg)

<details class="chart-data"><summary>展開畫面重點</summary><div class="me-note">圖片標題為「我們應該在剪輯Agent中做些什麼？」。下方為一個列表介面，包含以下專案：
- Chengfeng Videcut Skills: 安裝 環境準備。安裝依賴、配置 API Key、驗證環境。觸發詞：安裝、環...（剪輯Agent）
- Chengfeng Videcut Skills: 口播 口播影片轉錄和口誤識別。生成審查稿和刪除任務清單。觸發詞：...（剪輯Agent）
- Chengfeng Videcut Skills: 口播 口播影片轉錄和口誤識別。生成審查稿和刪除任務清單。觸發詞：...（剪輯Agent）
- Chengfeng Videcut Skills: 自進化 自進化 skills。記錄使用者反饋，更新方法論和規則。觸發詞：更新...（剪輯Agent）
- Chengfeng Videcut Skills: 自進化 自進化 skills。記錄使用者反饋，更新方法論和規則。觸發詞：更新...（剪輯Agent）
- Chengfeng Videcut Skills: 口播成片 口播影片成片 Skill。把文章/口播稿/SRT、剪後影片和 HTML/圖...（剪輯Agent）
- Chengfeng Videcut Skills: 匯入字幕 影片轉錄 + AI校對 -&gt; 一鍵生成帶花字的剪映草稿（預設）/ 或導...（剪輯Agent）
- 點子 統一的 idea 工作臺 - 記錄 + 翻看 + 探討三合一。所有 idea 存到 Mac Mini TodoHub 的 ideas 表，不...（個人）
- 抽象之梯 寫作表達的兩層能力。底層：先命名（回到物件本身，找到那個"對了!"的名字）。上層：抽象之梯...（個人）
- 文件標準 文件架構與原子化拆分。觸發場景：- 整理文件、文件規範、專案結構、README模板、自指架構...（個人）
- Codex 呼叫 Codex CLI (OpenAI 的 AI 程式設計工具) 作為協作隊友，支援持續多輪對話。觸發詞："讓 Codex ...（個人）

介面頂部輸入框顯示「/chengfen」，右側顯示「5.5 超高」以及語音輸入與傳送圖示。</div></details>

## 生成剪輯後的影片與字幕

第二步，先把原始口播整理成基礎素材包。

![這是一張展示「基礎素材包生成」流程的作業流程圖。](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/6ad011945cb6e8b4.jpg)

<details class="chart-data"><summary>展開畫面重點</summary><div class="me-note">圖片標題為「基礎素材包生成」。流程由左至右分為四個階段：
1. 輸入端：包含「口播影片」與「文字稿」兩個來源。
2. 處理端：進入「剪口播 Skill」進行處理。
3. 審核端：進入「審核頁確認」步驟。
4. 輸出端：最終產出「剪後影片 + 字幕檔案」。</div></details>

我們把口播影片和文字稿交給「剪口播」Skill，就能拿到剪輯後的影片和字幕檔案。

口播影片不用錄得很複雜。我通常直接對著文字稿唸一遍。如果中間涉及到具體操作，就切換畫面，把操作過程錄進去。

直接在專案裡輸入斜線指令：

> /剪口播 + 影片位址 + 口播稿位址

接到指令後，Agent 會先生成審核頁。

![該圖展示了一款影片剪輯工具的介面，透過文字轉錄與 AI 輔助功能實現高效的影片編輯流程。](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/da8abf081b78a271.jpg)

<details class="chart-data"><summary>展開畫面重點</summary><div class="me-note">畫面為一個影片編輯軟體的 UI 介面，主要分為左側的影片預覽與剪輯控制區，以及右側的文字轉錄編輯區。
右側文字轉錄內容如下：
「Codex 的 IMAGE2 生圖能力實在變得太強了，我現在每篇文章都會生圖，方便文章更好的被閱讀。最近評論區有人問我，我文章的配圖是怎麼做的，我線上下分享過很多次，PPT 做得再精美，不如螢幕上出現一個複雜好看又能講清邏輯的圖，這個更能讓大家拍照。文章也是一樣，很多內容被分享走，最後只有是一張圖，一張好圖會改變內容的傳播形態。它存在於文章裡面，成為了可以被截圖收藏轉發的內容單元。我現在一整套寫作邏輯都是用 Codex 去完成的，因為它正好能把寫作跟深土放到同一條工作流裡面。以前沒有 Codex 的話，我寫文章可能會用 code code 或者說其他的軟體，那麼生圖我覺得什麼生圖我就得用另一套軟體去實踐，寫完文章還得去寫一堆提示詞，然後把提示詞搬過去。但現在 Codex 裡面有一面就 2 這個模型配合 Schills，它就能夠把寫作和生圖直接串起來，寫文章配圖的整個過程，就從軟體搬運變成了同一條工作流。codec 才有一條特別重要的優勢，在於它能拿到整篇文章的內容，標題、大綱、正文都在裡面，所以它判斷的就不是我們一張圖該怎麼畫，而是這個圖應不應該畫、應該怎麼畫，它都能夠去進行判斷。我舉個例子來說我是怎麼去升圖的，我在這裡說一下我的流程，第一步會有一個插圖的 Scude，你可以...」

介面重點：
- 右上角提供「1.0x」倍速選項、「字幕」開關及「執行剪輯」按鈕。
- 左側顯示影片預覽視窗，下方有「剪輯預覽」資訊（05:49 -&gt; 02:50，節省 51%）。
- 左下角列出「AI 建議」功能，包含靜音、語氣詞、卡頓、重說的偵測統計。
- 最下方提供「快捷鍵」說明：Space（播放/暫停）、D（雙擊選中）、←/→（跳 1 秒）、Shift+←/→（跳 5 秒）。</div></details>

Agent 會把停頓、口誤、重說的部分先整理出來。我要做的，就是確認這些刪除項是否正確。

確認沒問題後，我點「執行剪輯」。

這一步跑完後，Agent 直接輸出剪輯後的影片和字幕檔案。得到的字幕與剪輯後的影片，在時間上是對齊的。

## 按字幕生成分鏡頁面

素材包準備好以後，在專案裡輸入斜線指令，喚醒「口播成片」Skill。

> /口播成片

Agent 會生成一個 HTML 分鏡核對頁。

![這是一份關於長文本資料處理與持續追問功能的教學簡報截圖。](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/730bd968ea9deea3.jpg)

<details class="chart-data"><summary>展開畫面重點</summary><div class="me-note">畫面左側為「分鏡目錄」，列出了從 01 到 13 的教學章節，目前選中「06. 追問、寫回，讓資料頁...」。中間展示了一張示意圖，包含「148萬字資料」、「1M上下文」處理器，以及右側標註「主線」、「層級」、「關係」的結構圖，下方標示「繼續回答追問」。右側為「追問、寫回，讓資料頁繼續工作」的詳細說明，包含字幕時碼（00:57.20-01:04.10）、畫面任務、素材來源、鏡頭動作及完整口播內容：「這份資料它能一直用，並且能繼續回答我的追問，也能把後面的追問寫到我們的HTML裡面去。」</div></details>

左邊是 Agent 生成的畫面，右邊是字幕、畫面任務、素材來源和鏡頭動作。

這個 Skill 在分鏡頁裡實際做三件事：

![這張流程圖展示了「分鏡頁面生成邏輯」的處理步驟，從字幕拆解到畫面來源判斷與生成。](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/83b3edac8765868a.jpg)

<details class="chart-data"><summary>展開畫面重點</summary><div class="me-note">該圖表描述了將影音內容轉換為分鏡頁面的自動化邏輯流程，包含以下步驟：
1. 字幕時間軸：作為輸入基礎。
2. 按句拆段：將內容進行切割。
3. 判斷畫面來源：透過系統進行分析。
4. 最終生成三種輸出形式：
   - 保留原影片
   - 使用截圖 / 產品頁 / 結果頁
   - 生成 HTML 動畫畫面</div></details>

它會先按字幕時間軸拆段，再根據每一段內容選擇畫面來源。

每一句話，到底保留原影片，還是換成截圖、產品頁面、結果頁，或者做一個 HTML 動畫，Agent 都會在這裡一次處理掉。

如果某一段不滿意，直接告訴 Codex 第幾段哪裡不對。改起來也非常快。

比如：

> 05 這一段動畫改一下。箭頭指向標題，圈出右側結果。

Codex 的 Computer Use 可以打開頁面，看左邊畫面和右邊口播，再回去改 HTML 畫面或標註。

我的動作從「自己排分鏡」，變成「看分鏡，提修改一鍵執行」。

## 檢查時間軸預覽

分鏡頁面確認後，就可以進入時間軸預覽。

![這是一張關於「RoughJS 找路圖結果幀」的影片編輯與內容規劃介面截圖。](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/956d48bd39e7a40b.jpg)

<details class="chart-data"><summary>展開畫面重點</summary><div class="me-note">該畫面為一個影片製作或指令碼編輯工具的介面，主要分為三個區塊：
1. 左上角為「RoughJS 找路圖結果幀」的預覽圖，顯示一疊標示「148萬字資料」的紙張，透過放大鏡指向一個標示「1M上下文」的電腦，並連結至右側的「主線」、「層級」、「關係」圖表，下方標註「繼續回答追問」、「寫回 HTML」。
2. 右側為詳細的指令碼編輯區，標題為「可繼續用」，時間軸為「00:57.20-01:04.10」。內容包含：
   - 提示文字：「不用原影片，也不切方法流程圖。」
   - 字幕：「21-23」
   - 畫面型別：「RoughJS 找路圖結果幀」
   - 鏡頭動作：「RoughJS 高亮結果側，並手繪出現繼續追問/寫回 HTML。」
   - 完整口播：「這份資料它能一直用，並且能繼續回答我的追問，也能把後面的追問寫到我們的HTML裡面去。」
   - 分鏡備註：「記錄這一段需要核對的畫面點...」
3. 下方為影片的時間軸控制列，顯示目前進度為「01:01.76 / 02:29.23」，並列出多個分段標籤（如：閱讀頁成品、理解路線、第三方榜單、1M 找路、主線層級關係、可繼續用、確認主體、主體提示詞、HTML 頁面、追問解圖、畫關係、閱讀入口、入口變化）。</div></details>

左邊是影片預覽；底部是進度條，附帶文字說明；右邊展示口播內容。

時間軸預覽會按字幕時間點排動畫。字幕說到哪裡，動畫就出現在哪裡，這比自己在剪輯軟體裡對時間軸省很多事。

這裡看的是：這些畫面放回整條影片以後，出現得對不對。

如果影片出錯，回饋不用寫長文，直接按片段說：

> 01 保留原影片。02 圖出現太早。03 畫面太滿，刪掉下面兩行字。

這一步確認以後，才進入最終合成。

## 用 HyperFrames 合成 MP4

前面的影片預覽確認以後，就可以讓 Agent 合成。

Agent 會用 HyperFrames 負責把它變成可以渲染的影片動畫工程。

![這是一張介紹「HyperFrames by HeyGen」工具的介面截圖，該工具旨在透過 HTML、CSS 與 GSAP 技術將網頁內容轉換為影片。](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/18e5f7e78526b2c7.jpg)

<details class="chart-data"><summary>展開畫面重點</summary><div class="me-note">畫面顯示「HyperFrames by HeyGen」工具的詳細資訊頁面，包含以下文字內容：
- 標題：HyperFrames by HeyGen (Write HTML, render video)
- 互動按鈕：在對話中試用
- 功能演示選項：
  1. HyperFrames by HeyGen Turn this website into a 20-second product promo
  2. HyperFrames by HeyGen Create an animated title card with kinetic type
  3. HyperFrames by HeyGen Add synced captions to this voiceover
- 描述文字：Build videos from HTML with HyperFrames. Author compositions with HTML + CSS + GSAP, use the CLI for init/preview/render/transcribe/tts, install reusable registry blocks and components, follow the GSAP animation reference, and turn any website into a 20-second capture-to-video pipeline.
- 技能標籤：Gsap、Hyperframes、Hyperframes CLI、Hyperframes registry、Website to hyperframes
- 資訊欄位：
  - 功能：Read, Write
  - 開發者：HeyGen
  - 類別：Creativity
  - 網站：(連結圖示)

畫面重點在於展示該工具的技術堆疊（HTML/CSS/GSAP）以及其作為開發者工具的定位，透過指令列介面（CLI）與登錄檔（registry）來實現網頁轉影片的自動化流程。</div></details>

HyperFrames 對 Agent 很友善，因為它可以把 HTML 動畫變成影片。只要畫面能用 HTML 做出來，就能進入這條合成流程。

過幾分鐘，就可以看到最後的動畫。

## 剪輯 Agent，正在逐步替代傳統剪輯

以前，影片生產圍繞時間軸展開。

現在，影片生產開始圍繞工作流展開。

剪輯 Agent 正在替代傳統剪輯裡的作業層，把影片生產變成一條可以持續複用的自動化流程。

## 標籤

Skills, 開源專案, 功能更新, Codex