本頁章節

article2media 文章與影片的多格式輸出

文件類型
使用手冊
更新日期
閱讀時間
11 分

整理 article2media 在 Claude Code／Codex 的安裝、共享引擎、原文／改寫／翻譯路線、圖文與影片依賴，提供自有 Markdown 到卡片與微信排版的完整案例，並核對 QA 與繁中限制。

來源
文件資訊
threerocks/article2media
授權
MIT

先選原文、改寫或翻譯，再準備對應檔案與工具，逐項檢查輸出及 QA 報告。

獨立能力
10Capabilities另有總入口與共享引擎
安裝目錄
11Skills能力與 article2media 放在同一 skills root
主題
21Themes固定版本的 CSS 檔案數

01輸入、輸出與分工

用途與查證範圍

article2media 是一組 Claude Code／Codex 技能，將文章與影音轉為圖文或解說影片。

角色工作
宿主 Agent理解來源，撰寫改寫稿、譯文或分鏡
Node.js 與對應工具處理檔案、排版、截圖與部分 QA；影片另需聲音合成等能力

各能力以獨立工作目錄內的檔案交接，文字處理與視覺排版分開。原文排版可以直接使用文章檔；改寫與翻譯需先由 Agent 準備輸入，不能只靠渲染命令自動完成語意工作。

作者的 X 文章提供設計背景與展示；本文的命令、數量與限制以固定版本的儲存庫及程式碼為準。程式碼採 MIT，範例文章與媒體的權利仍依原始來源說明。

02選擇宿主與安裝範圍

安裝與共享引擎

安裝方式適用環境需要保留的結構
Claude Code plugin一次安裝總入口與能力共 11 個技能，由 plugin 管理共享引擎
skills CLIClaude Code、Codex 等相容宿主能力與 article2media 應在同一 skills root
手動同步 skills 目錄需要自行管理位置與版本保留 article2media/engine，不只複製 SKILL.md 或 wrapper

Claude Code plugin 的文件化入口如下。安裝後，總入口使用 /article2media，個別能力採 namespace 名稱，例如 /article2media:image-cards。

bash
claude plugin marketplace add threerocks/article2media
claude plugin install article2media@article2media

skills CLI 的下列命令同時安裝至 Claude Code 與 Codex 的使用者範圍。

參數作用
-g使用者全域安裝；不加 -g 時使用專案範圍
-a指定宿主，可重複使用
-y跳過互動確認
bash
npx skills add threerocks/article2media -g -a claude-code -a codex -y

Codex 對話入口使用 $skill 名稱，例如總入口 $article2media 或單一能力 $wechat-layout。獨立技能名稱與 Claude plugin 的 namespace 不同，不能把帶 article2media: 的命令當成所有宿主通用名稱。

03按任務選擇

十項能力與檔案交接

來源

article-fetch

取得文章

文章網址、本機 Markdown、文字或 HTML 轉為 article.md 與 meta.json；正文不完整時先補齊來源，不從標題推測內容。

來源

video-transcript

影音與字幕轉寫

由平台字幕或本機語音辨識產生 article.md，時間軸與原始片段存於 transcript；中文清理會轉為簡體。

內容

article-rewrite

重組改寫稿

Agent 撰寫 content.json，腳本檢查結構與版面；export 可將改寫稿及圖表輸出為 rewrite.md 和 rewrite-assets。

內容

article-translate

全文翻譯

Agent 逐塊撰寫 article.zh.md，再以 stats／check 檢查結構、疑似漏譯及數字；CLI 本身不呼叫翻譯模型。

圖文

long-image

雜誌長圖或原文長圖

content.json 走結構化長圖，文章檔走原文呈現；原文未指定主題時使用白底閱讀面。

圖文

image-cards

固定比例卡片

支援 3:4、4:5、1:1、9:16；改寫稿產生總結卡片，文章檔依正文順序分頁並做文字讀回比對。

圖文

wechat-layout

微信公眾號排版

接受 article.md、article.zh.md 或 rewrite.md，輸出行內樣式 HTML、封面與圖片；content.json 需先 export。

影片

explainer-video

直式解說影片

Agent 先寫 video/video.json，再由腳本處理配音、畫面、字幕與審片；成片是重新編排的解說，不是全文逐字朗讀。

視覺解說

logic-whiteboard

論證白板

以來源清單與 whiteboard.json 交代段落去向，再渲染推理主幹；覆蓋檢查不代表論證本身已獲證實。

視覺解說

article-comic

黑白漫畫

Agent 寫 comic.json，圖像模型產生角色與場景，HTML 排文字；缺少出圖能力時停止，不交付空白佔位圖。

04先決定文字處理方式

原文、改寫與翻譯路線

路線Agent 工作排版輸入驗收重點
原文讀取並確認來源完整，保留正文article.md解析後文字區塊與 DOM 讀回結果、來源 SHA-256
改寫依 schema 重組文章，撰寫 content.jsoncontent.json；WeChat 先 export 為 rewrite.md結構、數字依據、版面與人工內容審閱
翻譯逐塊翻譯，保存區塊型態與順序article.zh.md 或指定語言稿結構檢查、警示、術語與語意人工對照

未指定路線時，長圖與卡片預設先改寫，WeChat 預設原文排版。需要保留文字時，在任務中明確寫出「原文排版、保留正文」；口播、白板與漫畫各有自己的腳本或帳本，不套用全文不改字的保證。

翻譯預設是簡體中文，影片轉寫的中文清理也會繁轉簡。繁中工作流需明確要求 Agent 交付繁體，保存原始字幕或 transcript/raw.txt，再核對成稿；--lang zh 是語音辨識語言，不能當成保留繁體的開關。

05核心與選用能力

依賴、網路與平台限制

路線需要準備執行界線
基本圖文Node.js 22+、可用 Chrome／Chromium核心不需 npm 套件；字型及原文圖片可能連網
文章網址可存取的來源與網路一般網頁可經 r.jina.ai／defuddle.md，X 使用 FxTwitter
影片網址與字幕yt-dlp 等對應工具下載、登入或網站限制依來源；無字幕時另需可用 ASR
本機 ASR／對齊文件採用的 mlx-whisper 與快取模型主要為 Apple Silicon 路線，模型缺失不能當成已可辨識
影片合成ffmpeg、Chrome 與可用配音後端配音及對齊能力依主機不同
本機配音Apple Silicon、VoxCPM2／MLX 等需事先備好模型與環境
Edge 配音uv 與可達服務會把文字送服務；uv 可能取得未快取的 Python 套件
插畫／漫畫可用 Codex CLI 或 OpenAI／Gemini 路線登入、模型資格、額度與 API 費用另行確認

在儲存庫根目錄，官方提供以下環境檢查入口。它不會替你安裝 Node、Chrome、ffmpeg 或模型，但 doctor 會啟動暫時的 headless Chrome、測試 Google Fonts 連線並探測外部工具。

bash
bash scripts/install.sh

Chrome 使用新的暫時 profile，不自動帶入日常瀏覽器登入狀態。影片來源要求 Cookie 時，只有明確採用 --cookies-from-browser 才交給 yt-dlp；也可使用已取得的本機影音或字幕檔。

--no-proxy 只略過一般網頁的兩個代理路線，不是全面離線開關。YouTube 的部分 yt-dlp 路線可能取得遠端 EJS 元件；出圖、外部配音、字型與來源圖片也有各自的網路請求。

06內容與樣式分開管理

主題、比例與品牌設定

固定版本包含 21 份主題 CSS。同一份 content.json 可換主題重渲染；不用為了改配色重寫文章，但仍需重新檢查版面。

需求文件化選項需要區分的介面
商業或閱讀型長圖editorial、swiss、quiet主題名稱不是輸出路線
深色科技內容midnight對比與實際字型仍要看成品
固定比例卡片--ratio 3:4、4:5、1:1、9:16比例影響分頁，不是任意裁切
指定主題Skill 入口 --style；渲染 CLI --theme不把口語入口參數直接套給所有腳本
自訂頁尾資訊brand.json 與 --brand依來源保留出處及正文邊界

部分字型由 Google Fonts 或 jsDelivr 載入，離線或字型缺失可能改用替代字型。檢查 QA 記錄的實際字型與成圖換行，不以主題名稱推定版面相同。

07分鏡、配音與審片

解說影片與聲音路線

先由 Agent 撰寫 video/video.json，描述受眾、鏡頭、台詞與畫面，再執行影片命令。預期輸出為 1080×1920 直式影片，並有封面、字幕、審片資料及發佈用草稿。

bash
node skills/explainer-video/scripts/video.mjs check article2media-out/demo/video/video.json
node skills/explainer-video/scripts/video.mjs make article2media-out/demo/video/video.json

以上相對路徑從儲存庫根目錄執行。make 與 render 都可能在缺少快取時合成配音，選用插畫時也可能呼叫出圖服務，不能將 render 當成保證零網路或零費用的重播。

固定 catalog 有 6 款公開音色，預設 news-man；作者 X 文中的 7 款不適用於這個固定版本。聲音品質與速度需在目標主機驗收。

配音路線條件與限制
VoxCPM2／MLX本機 Apple Silicon 路線，採 48 kHz，需事先備好模型
Edge需網路，並可能由 uv 取得 Python 套件
macOS 系統語音平台限定的後備路線；對齊能力也需另核對

08只補需要的階段

進階操作與重跑原則

以工作檔接續

已有完整 article.md 就不重抓；已有 content.json 時，換主題或版式先沿用內容，再補目標版式需要的欄位。

保留各階段來源

保留原稿、譯文、改寫稿及轉寫 raw.txt，分開記錄來源核對與排版驗收；不要手改生成 HTML 取代上游內容修正。

區分檢查與完整渲染

--check 的範圍依腳本不同；卡片與 WeChat 的前置檢查不等於已執行 Chrome 版面驗收。

按出圖用途決定停止

漫畫需要可用出圖能力；一般改寫插畫失敗可依技能移除相關欄位後重渲染，不能把佔位框當交付圖。

漫畫的角色參考圖目前由 Codex 出圖路線傳入，不能假設所有 provider 都有相同機制。白板則需保存來源清單，才能核對每段原文的去向與 source hash。

09完整建議案例

自有 Markdown 到卡片與 WeChat

準備一份你有權使用的繁體中文 Markdown，包含標題、段落、小標與清單，存為目前目錄的 owned-notes.md。此案例採原文路線，交付 3:4 卡片與 quiet 主題的 WeChat 排版；不需要模型生成插畫或配音。

先依前述 skills CLI 命令安裝全部技能，再於包含 owned-notes.md 的目錄執行。以下指定 Codex 全域 skills root；Claude plugin 使用者需依實際 plugin 安裝位置處理，不能直接假設相同路徑。

bash
ARTICLE2MEDIA_SKILLS="$HOME/.agents/skills"
ARTICLE2MEDIA_WORK="./article2media-out/owned-notes"
node "$ARTICLE2MEDIA_SKILLS/article-fetch/scripts/doctor.mjs"
node "$ARTICLE2MEDIA_SKILLS/article-fetch/scripts/fetch.mjs" ./owned-notes.md --out "$ARTICLE2MEDIA_WORK"
node "$ARTICLE2MEDIA_SKILLS/image-cards/scripts/cards.mjs" "$ARTICLE2MEDIA_WORK/article.md" --ratio 3:4
node "$ARTICLE2MEDIA_SKILLS/wechat-layout/scripts/wechat.mjs" "$ARTICLE2MEDIA_WORK/article.md" --check
node "$ARTICLE2MEDIA_SKILLS/wechat-layout/scripts/wechat.mjs" "$ARTICLE2MEDIA_WORK/article.md" --theme quiet

  1. 核對擷取結果

    開啟工作目錄的 article.md 與 meta.json，確認標題、正文及來源；本機原稿另外保留，不在渲染產物中修改來源。

  2. 檢查原文卡片

    開啟 full-3x4 的 overview.jpg、每張 card 圖、ledger.json 與 qa.json，確認文字比對、分頁與圖片範圍。

  3. 檢查微信排版

    查看 quiet-wechat 的 article.html、兩張封面、ledger.json 與 qa.json；--check 只是前置檢查，最後一行才執行完整渲染。

  4. 在目標平台預覽

    從 article.html 的複製按鈕取得富文字，貼到微信公眾號編輯器，再檢查圖片、樣式與行動版預覽；這一步尚不代表已公開發佈。

階段預期檔案
擷取article2media-out/owned-notes/article.md、meta.json
原文卡片full-3x4/card-01.png 等、cards.html、overview.jpg、caption.md、ledger.json、qa.json
WeChatquiet-wechat/article.html、article-body.html、cover-2.35x1.png、cover-1x1.png、wechat.md、images、ledger.json、qa.json

本例為建議流程；本次未執行命令或發佈內容。若改做摘要，先由 Agent 寫 content.json；若改做翻譯，先寫譯文並完成結構與人工審閱，再把對應檔案交給排版能力。

10退出碼、警示與實際成品

QA 報告與人工驗收

路線程式檢查仍需人工確認
原文長圖／卡片／WeChat來源檔 SHA、解析覆蓋、文字區塊與 DOM 讀回擷取完整性、實際分頁與目標平台貼上結果
改寫長圖／卡片schema、幾何與版面報告改寫事實、圖表解讀與 qa.json 的 error
翻譯區塊型態、結構、code、figure 與數字等提示漏譯疑慮、術語、一般連結與語意對照
白板有來源清單時核對覆蓋與 hash推理是否成立；省略理由是否合理
漫畫分格及文字邊界等檢查角色、情節與文字是否對應
影片結構、時間、字幕、音訊與 review.json所有警示、實際聽感、漏讀與畫面節奏

相關實作可回查 render.mjs 與影片審片程式。本報告記錄固定版本的行為，未修改上游或將未執行的範例標成通過。

11症狀、原因與下一步

故障排除與已知限制

現象優先檢查下一步
找不到共享引擎技能是否同根、article2media/engine 是否存在修正安裝結構或 ARTICLE2MEDIA_ENGINE
Chrome 無法啟動既有瀏覽器路徑與主機環境依 doctor 訊息修正，可設定 ARTICLE2MEDIA_CHROME
字型或換行與範例不同網路字型、替代字型與 QA 記錄使用可用字型重渲染並目視，不只核對主題名
抓取只有摘要或被擋頁面來源可達性與抓取路線停止推測正文，改提供完整且可使用的本機檔案
影片沒有可讀字幕字幕軌、本機 ASR 與快取模型提供 srt／vtt 或準備支援的辨識環境
轉寫後變成簡體內建中文清理會繁轉簡保存 raw.txt，另建並核對繁中工作稿
WeChat 拒絕 JSON輸入不是文章檔改寫稿先 export 成 rewrite.md，再排版
exit 0 但報告仍有錯誤QA issues 與 review 警示修正內容或環境，重渲染並重新檢查
原文卡片超出張數或版面限制文章長度、比例與上游規則保留正文，另規劃拆篇或適合的長圖路線
漫畫沒有出圖能力provider、登入、模型權限與額度先停止該路線，不交付佔位圖

12可選的工程路徑

開發、自測與回報

研究或修改引擎時，在獨立儲存庫執行官方自測入口。測試會生成檔案並執行對應渲染，需準備瀏覽器與環境；本次未執行這些上游測試。

bash
node tests/run-all.mjs --quick
node tests/run-all.mjs --themes quiet
claude plugin validate .

修改來源內容用 article.md／content.json，修改版式用 layout／theme；不要把生成 HTML 的手動修改當成可重現的修正。程式回報與預覽都需保留，檢查未完成的項目要列出原因。

回報問題時提供以下資訊，並移除憑證及與問題無關的私人內容。

  • commit。

  • 主機。

  • 宿主。

  • 輸入路線。

  • 執行命令。

  • 相關 QA 檔案。

來源不完整、模型輸出與渲染版面應分別定位。

13先完成一條可驗收流程

後續使用路徑

先用自有 Markdown 完成原文卡片或 WeChat 排版，核對檔案與實際平台預覽。需要改寫、翻譯、影片或漫畫時，再加入相應的 Agent 工作、模型及工具。

參考資料