Communitygithub.com

evgenspm/launchfilm

品牌導入:從使用者的儲存庫(Tailwind 配置、CSS 變數、shadcn tokens、next/font、Logo SVG)、即時網站與螢幕截圖中,擷取產品的真實色彩、字型、Logo、圓角與主題,並產生附帶每項數值來源的 films/<slug>/brand.json。

launchfilm 是什麼?

此技能專為需要將產品品牌形象忠實轉移至 launch film、產品影片或促銷短片的開發者與 AI 代理而設計。它會優先從使用者儲存庫中的 Tailwind 設定、CSS 變數、shadcn tokens、next/font 與 Logo SVG 等真實 Token 開始擷取品牌元素(色彩、字型、Logo、圓角與主題),若無足夠資訊則依序查詢即時網站的計算樣式、meta 標籤與頁首 SVG,最後再透過螢幕截圖取樣像素;遇有缺失時會明確向使用者提問,絕不猜測或捏造任何數值。 支援平台包括 Claude Code、Cursor 與其他可讀取用戶儲存庫的 AI 代理。此技能會依序寫出 `brand.json`、`BRAND-SOURCES.md` 與 Logo 檔案,並在最終缺乏 Logo 或色彩時強制停滯,避免不正確的品牌呈現。其強硬停止機制可防止 AI 虛構 Logo 或選用非原始色彩,確保品牌資訊的絕對真實性。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/evgenspm/launchfilm/tree/HEAD/skills/brand-intake

在你喜歡的 AI 中提問

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

說明文件

brand-intake:真實 Token 輸入,brand.json 輸出

影片必須與產品外觀一致,因此 Token 來自於產品本身,絕非來自個人品味。資訊來源順序如下,在找到某欄位的數值後即停止查詢,並記錄該數值的來源:

  1. 使用者的儲存庫(最佳:精確 Token、真實字型名稱、真實 Logo 檔案)。
  2. 即時網站 URL(計算後的樣式、meta 標籤、頁首 SVG)。
  3. 使用者提供的螢幕截圖(像素取樣)。
  4. 針對仍遺漏的項目向使用者提問。請勿猜測。

輸出(路徑相對於 launch-video/):films/<slug>/brand.json、films/<slug>/BRAND-SOURCES.md,以及 Logo 檔案原封不動複製到 public/films/<slug>/brand/(以便場景可使用 staticFile() 載入)。 萃取配方:references/sources.md。欄位對應、字型後備方案、對比度計算:references/brand-json.md。

步驟

  1. 尋找產品根目錄。 若 launch-video/ 位於產品儲存庫內,根目錄為上一層。否則要求提供 URL 與螢幕截圖。注意技術棧:package.json 的依賴項(tailwindcss 版本、next、@fontsource/*、shadcn)。
  2. 從儲存庫取得色彩。 依序:Tailwind v4 的 @theme 變數(CSS 中)、Tailwind v3 的 tailwind.config.{js,ts,cjs,mjs} theme.extend.colors、shadcn 的 globals.css Token(--background、--foreground、--primary、--muted、--card、--accent)、其他 :root 自訂屬性。將 HSL/OKLCH/RGB 轉換為 6 位十六進位色碼。使用行銷網站所使用的主題(深色或淺色),不要混合兩者。
  3. 從儲存庫取得字型。 next/font/google 或 next/font/local 導入、@fontsource* 依賴項、@font-face、body/html/h1 上的 font-family、Tailwind 的 fontFamily。記錄實際使用的字型家族名稱與字重。
  4. 從儲存庫取得 Logo。 優先尋找 SVG:public/logo*.svg、public/*mark*.svg、app/icon.svg、public/favicon.svg、src/assets/*logo*、src/components/*Logo*(內嵌 JSX SVG:擷取 <svg>),然後是 PNG ≥ 512 px(apple-touch-icon.png 為 180 px:僅作為標記的最後手段,絕不用於字標)。原封不動複製到 public/films/<slug>/brand/。
  5. 取得圓角半徑與主題。 --radius 或 Tailwind 的 borderRadius;若背景相對亮度 < 0.2 則主題為深色。
  6. 從即時網站填補空缺(references/sources.md § 即時 URL):theme-color meta、og:image、link rel=icon、頁頭內嵌 SVG、body、主要按鈕、h1 的計算樣式。
  7. 從螢幕截圖填補空缺: 在指定點(頁面背景、正文文字、主要按鈕、卡片)取樣像素。在 BRAND-SOURCES.md 中寫入像素座標。
  8. 名稱、標語、URL: 來自 package.json 的 name/description、網站的 <title>、首頁 h1、og:description、README 第一行。使用使用者自己的用語;請勿在此處編寫新的標語(文案由 story 負責)。
  9. 將無法出貨或載入的字型 根據角色對應至已出貨的 OFL 字型(brand-json.md § 字型)並加以說明。
  10. 對比度檢查(brand-json.md § 對比度):前景色相對於背景色 ≥ 4.5:1(目標 7:1),強調色相對於背景色 ≥ 3:1。寫出數值。強調色未通過檢查 → 保留它用於形狀,選取 fg 作為其上文字的色彩。
  11. 寫入 brand.json,然後若存在 schemas/brand.schema.json 則進行驗證: npx -y -p ajv-cli@5 -p ajv-formats ajv validate --spec=draft2020 -c ajv-formats -s schemas/brand.schema.json -d films/<slug>/brand.json
  12. 寫入 BRAND-SOURCES.md:每個數值一行 → 來源(檔案:行號、URL + 選擇器,或螢幕截圖 + x,y)。
  13. 向使用者顯示 6 行摘要(名稱、主題、6 個十六進位色票、字型、Logo 檔案、任何已對應或已詢問的項目)。

強制停止(請勿繼續流程)

情況應做絕不做
儲存庫、網站或螢幕截圖中無 Logo 檔案詢問:「請以 SVG(最佳)或 ≥ 512 px 且含透明背景的 PNG 格式傳送 Logo。」繪製、描摹、生成或近似 Logo
Logo 僅為小型 favicon請求較大檔案將 32 px 的 favicon 放大為英雄標記
未擷取到任何色彩(無法存取儲存庫、網站被封鎖、無螢幕截圖)請求提供 URL 或 2–3 張螢幕截圖,或十六進位色碼挑選「好看的」色彩或預設色板
衝突的色板(應用程式 vs 行銷)詢問影片應使用哪一個;預設為行銷網站混合兩者
使用者希望使用文字字標(無 Logo 時)僅在明確回覆「是」時允許:產品名稱使用顯示字型、前景色將其呈現為使用者的 Logo

規則

  • 以位元組為單位完整複製 Logo 檔案。除非使用者要求,否則請勿重新著色、裁切或「清理」Logo。
  • 未經使用者確認擁有權利,絕不使用其他公司的 Logo 或使用者的客戶 Logo。
  • 絕對不要從其授權禁止重新分發至儲存庫的來源獲取字型(例如 Fontshare FFL 系列字型如 Satoshi 或 General Sans、Apple SF Pro):將它們對應至其他字型(brand-json.md § 字型)。
  • brand.json 不包含機密資訊,亦不包含超出公開產品名稱與 URL 的個人資料。
  • 重新執行導入僅會覆寫來源已變更的欄位;保留使用者手動編輯的欄位(先進行差異比對)。
  • 下游技能僅讀取 brand.json;切勿在場景中硬編碼品牌十六進位色票 [craft/06#grade-discipline]。

Individual skills in this repo

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

evgenspm/launchfilm

QA a rendered launch film before anyone ships it. Use for "QA the video", "check the render", "is it ready to post", "review the film", "why does it look cheap", "check the captions/safe zones/loudness", after every render and before package. Reads the CLI's automatic report (`npx launchfilm qa <slug>`), contact sheets and stills at key timestamps, then checks text-at-time readability, contrast, platform safe zones, loudness (−14 LUFS, −1.5 dBTP), ffprobe encode specs, black and frozen frames, cuts on the beat, and the 12 amateur tells as blocking checks. Writes qa/<slug>/QA.md where every line cites a file or a measured number; a check that was not run says NOT CHECKED, never PASS. Use scene-build to fix picture problems it finds, sound to fix the mix, launch-film for the whole pipeline, reference-study for reference videos.

evgenspm/launchfilm

Launch video, launch film, product video, product launch, promo, teaser, trailer, demo video, Product Hunt video, X / LinkedIn launch clip, reel, hero loop, motion graphics, "make a video for my product", Remotion film. Router and gated pipeline for making a pro product-launch film with the launchfilm studio in ./launch-video: brief, brand intake, story and storyboard (user approves), sound, scene build, frame QA, render per platform preset, package, post copy, one-time credit note. Use this first for any request to make, remake or revise a launch or product film; it calls the sibling skills (brand-intake, story, sound, scene-build, recipes, film-qa, launch-post). Do not use it to study a reference video (use reference-study), to browse recipes only (use recipes), or for generic Remotion questions unrelated to a launch film.

evgenspm/launchfilm

Write the launch post that goes with the film: X / Twitter post, LinkedIn post, Product Hunt tagline, description and maker comment, written in the founder's own voice, concrete, no AI slop ("excited to announce", em dashes, buzzwords). Triggers: write the tweet, launch post, LinkedIn post, Product Hunt copy, PH tagline, maker comment, caption for the video, announcement copy. Use after the film is rendered (or when the user asks for post copy for an existing film); starts from `npx launchfilm post <slug>` and the film's BRIEF.md and STORYBOARD.md, writes out/<slug>/POST.md. Never posts anything. Not for the film's own on-screen script or VO (story).

evgenspm/launchfilm

Find launchfilm recipes (published launch films studied frame by frame and written down as text, some with ready Remotion code) and build the user's film from 1 to 3 of them. Use for "use a template", "start from a recipe", "make a 30s launch film from recipe <id>", "something like this style", "show me options", "which recipe fits a 30 s vertical launch", "remix recipe X with our brand", or when a storyboard needs a proven hook, feature beat, logo reveal or end card. Searches recipes/CATALOG.md or recipes/index.json, scores and picks 1 to 3, shows each with its source link, reads the recipe.md beat sheet, then scaffolds with `npx launchfilm new <slug> --recipe <id>`: ready code when Recipe.tsx exists, else TODO scenes built from the beat sheet with studio presets, keeping the recipe's timings, springs and sounds re-timed to the user's length and beat grid. Use reference-study to make a new recipe, story for the storyboard, scene-build for scenes, launch-film for the whole pipeline.

相關技能