Communitygithub.com

Amartileyton/autovideo

編輯類 Remotion 文章插入片段,強制指定格式與背景,分層標記、禁用霓虹與發光效果,並支援行動裝置 QA。

autovideo 是什麼?

此技能專為使用 Remotion 製作高品質文章重點摘要影片而設計,特別適用於新聞、產品發布、趨勢報導等場景。它強制要求使用者在上游確認格式(如 4:3 或 9:16 比例)與背景風格(如暖光、暗色網格),並嚴格禁止任何霓虹、發光、玻璃擬態或「氛圍編碼」的 AI 裝飾,以確保視覺風格符合編輯調性。技能支援多種平台(如 Instagram 直式畫面與限時動態),並包含完善的 QA 流程與交付步驟。其核心實作透過粗糙.js 與 SVG 層疊技術,在文章文字後方繪製看似實體螢光筆的標記筆觸,並以 Remotion 的 useCurrentFrame()、spring() 和 interpolate() 控制動畫,實現由模糊到清晰、由左至右逐一顯現的平緩推鏡效果。開發者應先參考 `assets/examples/article-highlight.mp4` 中的範例規格,並遵守第一道否決關卡,確保成品無格式遺漏、無禁止樣式、來源真實、文字可讀,方能交付最終 MP4 檔案。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Amartileyton/autovideo/tree/HEAD/.agent/skills/article-highlights

在你喜歡的 AI 中提問

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

說明文件

文章重點摘要

搭配 remotion-best-practices、motion-graphics 與 cinematic-camera 使用,適合新聞、發布、趨勢與文章佐證類場景,不需強制使用終端機畫面。

強制輸入

開始編碼前,務必向使用者確認缺少的決策:

您要哪種格式:4:3 半螢幕 Instagram 插入片段,還是 9:16 全螢幕 Instagram?以及哪種背景:暖光、暗色淨空、淺色網格或暗色網格?

  • 4:3 插入片段:1440×1080,設計在 9:16 畫面約一半大小時仍保持可讀。
  • 9:16 全螢幕:1080×1920,需保留字幕/介面區域。
  • 僅在明確要求時才使用 16:9。
  • 若使用者委託選擇背景,則使用暖光。

文章紙張可保持淺色,置於暗色淨空或暗色網格場景中。請勿擅自將整個構圖改為暗色調。

絕對視覺禁令

禁用霓虹、發光、光暈、亮邊、彩色陰影、青紫漸層、漸層光球、放射狀色彩暈染、玻璃擬態、賽博龐克燈光或任何「氛圍編碼」的 AI 裝飾。標記必須表現得像實體螢光筆/紙張處理,而非發光效果。

在交付成品前,請拒絕任何違規處理方式。

核准參考

在開始編碼前,請檢視 assets/examples/article-highlight.mp4 並對照參考畫面。延續其中的編輯層級、紙張充足留白、節制的標記處理、緩慢運鏡以及可讀性。若本地素材無法使用,請參考官方儲存庫畫廊:https://github.com/Liamrjohnston/remotion-motion-graphics-skill。

使用時機

適用於:

  • 資訊/新聞/發布/趨勢節拍。
  • 「某事物已更改或已發布」的佐證。
  • 包含有意義重點片段的真實文章摘錄。
  • 需以編輯素材釐清論點,而非使用終端機的證據場景。

若內容為 CLI/設定/代理執行故事,請改用 terminal-inserts。若節拍為產品展示,請使用真實產品影片/UI。

核心架構

當標記筆觸需位於文字後方時,請勿扁平化處理文章。應建立分層的 Remotion DOM/SVG:

  1. 選定的場景表面。
  2. 編輯用紙張/卡片,預留充足的留白邊距。
  3. 粗糙.js/SVG 標記層,位於紙張上方。
  4. DOM/SVG 文字層,位於標記上方。

標記必須明顯位於文字後方、紙張上方。

材質與佈局

  • 紙張:暖白/米白,搭配中性邊框與柔和中性陰影;禁用彩色發光。
  • 字體層級:編輯/新聞層級——小型章節標籤、大型襯線/編輯主標題、低調的作者/日期,以及最多 2-3 行內文。
  • 標記:節制的半透明實體螢光筆顏色,例如柔和黃色;禁用螢光色。
  • 使用真實文章/來源識別資訊與提供的文字。請勿虛構出版品、日期、主張或引言。
  • 刻意手動斷行,並將文字保持在轉換後的安全邊距內。
  • 請勿像標題投影片般置中;應呈現真實文章摘錄的感覺。
  • 若目標尺寸下無法閱讀,請移除非必要的標籤、按鈕或來源雜訊。

動畫

  • 僅在符合核准參考時,以簡短節制的模糊到清晰效果開場;模糊是光學對焦,非發光。
  • 在初期對焦階段,不可顯示標記。
  • 使用緩慢微妙的鏡頭推進與節制的透視旋轉。
  • 在對焦穩定後才開始繪製標記筆觸。
  • 使用遮罩/擦拭效果,從左到右繪製每個標記。
  • 依序顯示標記;不可一次全部顯現。
  • 結尾時所有關鍵片語皆可讀,並保持穩定停留。
  • 使用 useCurrentFrame()、spring() 與 interpolate() 驅動動畫;禁用 CSS 動畫。

螢光筆規則

  • 使用粗糙.js 或不規則的 SVG 標記形狀。
  • 標記位於文字後方。
  • 些微不完美是好的;完美的漸層矩形則否。
  • 僅標記有意義且經過驗證的片語,而非整個段落。
  • 標記透明度須保留文字對比度。
  • 禁用螢光黃、發光邊緣、模糊光暈或亮邊。

避免重複敘述

當文章/來源文字本身就是實際證據時,可予以呈現。請勿添加僅重複語音旁白的獨立標題。僅使用真實摘錄與最小限度的結構化後設資料。

第一道否決關卡

在每個答案都是「否」之前,請勿交付成品:

  1. 格式或背景是否未經確認?
  2. 是否有霓虹、發光、標記發光處理、彩色陰影、漸層暈染或玻璃擬態?
  3. 來源/文章識別資訊或主張是否為虛構?
  4. 卡片是否為通用的置中標題投影片,而非編輯表面?
  5. 在選定的 Instagram 版位中,是否有任何關鍵文字無法閱讀?
  6. 標記是否位於文字上方/遮蔽文字,或顯示時間過早?
  7. 鏡頭是否裁切紙張或產生無意義的移動?
  8. 結果是否缺乏核准參考的節制與精緻度?

請私下修改,直到通過關卡。

QA 與交付

  1. 執行型別檢查或最小的有效驗證。
  2. 渲染出:無標記的早期影格、標記進行中的影格、標記完成的最終影格以及結尾停留影格。
  3. 確認標記在初期不可見,位於文字後方,並於結尾完整。
  4. 檢查裁切、無法閱讀的文字、虛構來源資訊、霓虹/發光以及弱構圖。
  5. 交付 MP4,並附上解析度、長度、確切的渲染指令以及編輯器放置說明。

Individual skills in this repo

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

相關技能