本文へ移動
cccskills
無料GitHub で公開日本語紹介

render-flat-vector-explainer

製品の手順を紹介するフラットイラスト動画を組み立て、字幕・音声・商品写真を重ねた約50秒版と30秒版を作るスキルです。

原文原文の説明を見る

Assemble the FREE steps of the flat-vector-explainer video format — a flat-illustration host character (who, where, tone, voice and music come from the recipe choices) walks a countable N-step product routine, one step per beat, and Remotion composites every chip/numeral/tagline/slate/CTA as an animated DOM overlay ON TOP of the Kling i2v character clips (text is NEVER baked into a keyframe — i2v warps type), the closing 'N products' grid is a PIL composite of the REAL product photos (not AI), full-sentence VO drives word-by-word burned captions over a VO-forward music bed, and the ~50s animated silent master is re-cut to a 30s deliverable FROM the animated master (never a static intermediate). Documentation-grade — ships config.example.json + PIPELINE.md + a README of the free assembly; the paid gen steps (keyframes, Kling i2v, VO, music) are separate capabilities the recipe orchestrates. Use for the flat-vector-explainer format.

gooseworks-ai/goose-skillsスター 1,272(GitHub 1,272 + cccskills 0)
連携ツールElevenLabs

実行スコア 未検証

インストール方法を見る

こんなときに便利

  • 製品手順の解説動画を作りたいとき
  • 動画に動くラベルや字幕を重ねたいとき
  • アニメーションから30秒版を作りたいとき

日本語での紹介

できること

フラットイラストの案内役が、数えられる手順で製品を紹介する動画の無料工程を組み立てます。Remotionで番号、ラベル、短い説明、締め画面やCTAをアニメーション付きで重ね、PILで実物の商品写真を並べたグリッドを作ります。音声に合わせた単語単位の字幕を焼き込み、音楽を調整して約50秒のマスター動画に仕上げた後、そこから30秒版を切り出します。設定例、工程マップ、手順を説明するドキュメントも含まれます。

こんなときに便利

製品の使い方や複数商品の手順を、広告風の解説動画にまとめたいときに向いています。素材の生成工程と、動画編集・合成工程を分けて進める構成です。

使い方の例

  • 「この商品ルーティンをフラットイラスト動画にまとめて」
  • 「各手順に番号と説明を重ね、字幕付きのマスターを作って」
  • 「完成したアニメーションから30秒版を作って」

注意点

無料の組み立て工程はRemotion、PIL、FFmpegを使います。キャラクター画像、Klingの動画、ナレーション、音楽の生成は別機能で、有料工程として扱われます。

この紹介文は、公開されている SKILL.md をもとに AI(OpenAI Codex)が作成しました。正確な仕様は下の原文を確認してください。

含まれるファイル(6)

  • SKILL.md6.2 KB
  • scripts/config.example.json10.7 KB
  • scripts/PIPELINE.md4.4 KB
  • scripts/README.md5.6 KB
  • skill.meta.json183 B
  • tests/smoke-test.md1.2 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

render-flat-vector-explainer

Assembles a flat-vector product-routine explainer: one illustrated host character walks through a countable N-step routine (e.g. the demo's soil mix -> plant food -> leaf mist -> root tonic), one step per beat, each beat carrying a large corner numeral, a labelled chip + one-line tagline, and the step's real product photo, closing on an "N products" grid + brand CTA. It reads as a premium DTC explainer (Spotify/Anchor flat-vector lineage), not UGC.

This capability is documentation-grade. The format's source recipe is a documented recipe, not a runnable end-to-end app, so this capability ships the config schema (scripts/config.example.json), the field-to-script map (scripts/PIPELINE.md), and a README (scripts/README.md) describing the FREE assembly steps the agent runs by hand with ffmpeg + Remotion + PIL. The paid generative steps are separate capabilities the recipe orchestrates and gates.

Choices

Creative calls the user makes (the recipe's choices, asked in one round before any paid step). The demo's value is only an example, never the default. The flat-vector 2D style itself is the format, not a choice.

  • host — who the illustrated host is (gender, age, look, outfit) -> character.anchor_prompt. Asked; the demo used a mid-30s woman with a short black bob in green overalls.
  • setting — where the routine happens -> the character keyframe prompts. Asked; the demo used a sunny windowsill full of houseplants.
  • tone — the script's tone -> VO lines + expressions. Asked; the demo used faintly comedic overwhelm -> satisfied payoff.
  • narrator_voice — the VO voice -> voice.voice_id. Asked; the demo used ElevenLabs "Eryn".
  • music — the bed -> music.prompt (or none). Asked; the demo used lo-fi pop, 95-105 BPM.

scripts/config.example.json is the Greenmoth worked example: copy its structure, never its creative values or its brand palette.

The two non-negotiable separations

  1. Motion layer != text layer. Animate a text-stripped clean plate with Kling i2v (subtle motion, style-preserving negative, cfg 0.5), then composite every chip / numeral / tagline / slate / CTA as an animated Remotion DOM overlay on top. Baking text into the keyframe before i2v warps the type and forfeits the ability to retime/restyle it — this separation is the format's whole credibility.
  2. Real assets != AI assets. The per-step product photo and the closing "N products" grid are real product webps composited with PIL (AI duplicates SKUs in a grid). Only the character vignettes and stylized backgrounds are generative.

Free assembly steps (this capability)

The agent runs these deterministic, free steps by hand — see scripts/README.md for the ffmpeg/Remotion/PIL detail:

  • Remotion overlay — import each Kling clip as the moving base; composite chips / numerals / taglines / slate / grid / CTA as animated DOM on top -> the animated silent master. Slate/grid/CTA beats are Remotion text with no i2v.
  • PIL product grid — composite the N real product webps on the brand ground for the closing lockup; preserve each aspect (never stretch, never AI-dupe).
  • Captions — word-by-word burned from the eleven_v3 with-timestamps char timings (libass); suppress on slate/grid/CTA scenes so two text layers don't collide.
  • Audio mix + master — place each VO line at its scene start, duck the music under VO (sidechaincompress), loudnorm I=-15 VO-forward, mux, burn captions LAST -> finals/master-final.mp4 (~50s).
  • 30s cut — slice each beat's region OUT of the animated silent master (never a static intermediate); trim short beats, gently slow long beats (setpts <=1.6x), re-burn scaled captions -> finals/master-final-30s-v1.mp4.

Paid gen steps (separate capabilities)

The recipe orchestrates and gates these; they are not part of this capability:

  • Flat-vector character anchor + per-scene keyframes + clean plates -> create-image-fal (nano-banana; re-render a FRESH flat-vector anchor, never chain a photoreal ref).
  • Kling i2v on the character scenes -> create-video-fal (Kling v3 standard image-to-video with start_image_url and generate_audio: false, cfg 0.5; Kling 2.5 Turbo is withdrawn, style-preserving negative, low motion; TEST one scene before batching).
  • Full-sentence VO -> create-vo-elevenlabs (eleven_v3, with-timestamps).
  • Music bed in the chosen style (demo: lo-fi pop; skip if the user chose no music) -> create-music-elevenlabs.

Contract

  • Documentation-grade + FREE assembly (Remotion + PIL + FFmpeg); no paid calls in this capability, no AI-rendered text.
  • Text is an overlay, never baked. Strip to a clean plate -> i2v -> composite text as Remotion DOM.
  • Any multi-SKU grid is PIL of the real product webps; preserve each aspect ratio.
  • Kling holds the 2D flat-vector look only at LOW motion (cfg 0.5 + style-preserving negative). Aggressive motion drifts to photoreal.
  • Cut down from the ANIMATED master, never a static intermediate; frame-diff to prove localized motion.
  • The paid steps — keyframes/clean plates, Kling i2v, VO, music — are separate capabilities (create-image-fal, create-video-fal, create-vo-elevenlabs, create-music-elevenlabs); the recipe orchestrates them and gates the spend.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

コメント

ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。

まだコメントはありません。最初のコメントを書いてみませんか。

送信するとすぐに公開されます。メールアドレスや電話番号などの個人情報は書かないでください。URL は 2 つまでです。

0 / 1000 文字

このフォームは reCAPTCHA で保護されており、Google のプライバシーポリシーと利用規約が適用されます。

同じリポジトリのスキル

<slug>

無料概要あり

資料には具体的なスキルの内容や手順が記載されていないため、用途や得られる結果を特定できません。

  • 用途を確認したいとき
  • 入力や手順を確認したいとき
  • 期待する結果を確認したいとき
gooseworks-ai/goose-skills1,2722026年10月27日 更新

ad-angle-miner

無料概要あり

顧客の課題や商品情報、広告事例を調べ、根拠のある広告訴求と静止画・動画・コピー案にまとめます。動画案は実際の制作フォーマットとの相性も確認し、商品単位の角度集として整理します。

  • 商品の根拠に沿った広告の切り口を探したいとき
  • 静止画広告や動画広告の案を作りたいとき
  • 顧客の言葉から見出しや広告文を考えたいとき
gooseworks-ai/goose-skills1,2722026年10月27日 更新

ad-campaign-analyzer

無料概要あり

Google、Meta、LinkedInなどの広告実績を分析し、成果の出た広告や予算の無駄を特定します。停止・拡大・テスト案や、具体的な予算配分を提案します。

  • 広告予算の無駄を見つけたいとき
  • 複数媒体の成果を比較したいとき
  • 広告の停止・拡大候補を決めたいとき
gooseworks-ai/goose-skills1,2722026年10月27日 更新

ad-lead-quality-analyzer

無料概要あり

広告費と登録後の成果を照合し、質の高いリード獲得にかかった実コストを算出します。広告素材ごとに拡大・維持・調査・停止の判断材料を整理するスキルです。

  • 広告素材ごとの実質獲得コストを比べたいとき
  • 低CPAでも質の低い広告を見つけたいとき
  • 登録後の成果データとの照合状況を調べたいとき
gooseworks-ai/goose-skills1,2722026年10月27日 更新

ad-management-intake

無料概要あり

Meta広告を始める前にブランド情報を調べ、予算や広告表現に関わる不明点だけを質問して準備を整えます。確認事項と仮定を記録し、ブランド情報とキャンペーン概要を作成します。

  • ブランド情報が未記録の状態で広告を始めたいとき
  • 予算や広告期間の前提を整理したいとき
  • 広告で使う主張や制約を記録したいとき
gooseworks-ai/goose-skills1,2722026年10月27日 更新

ad-policy-check

無料概要あり

広告文や画像内の表現を配信先と商品カテゴリのルールに照らして確認し、直せる箇所を修正しながら、法務や人の判断が必要なリスクを広告ごとに整理します。

  • 広告の配信前チェック
  • 広告画像や動画の表現確認
  • クリエイター広告の表示確認
gooseworks-ai/goose-skills1,2722026年10月27日 更新

gooseworks-ai のスキルをすべて見る

このスキルの問題を報告する