本文へ移動
cccskills
無料GitHub で公開

guided-brand-video

Guided, brand-aligned marketing videos rendered with Helios — promo or hype, explainer or walkthrough, product demo or feature showcase, testimonial or social proof, launch or release announcement, and vertical social clips (Reels, TikTok, Shorts). Extracts the brand from a repo or URL, locks the format, randomizes structure and staging, and designs an original look from a seed so videos don't look alike. Optional beat-synced music and Internet Archive B-roll.

日本語の概要は準備中です。原文の説明を表示しています。

BintzGavin/heliosスター 123(GitHub 123 + cccskills 0)
連携ツールTikTokElevenLabs

実行スコア 未検証

インストール方法を見る

含まれるファイル(5)

  • SKILL.md7.4 KB
  • references/direction-deck.json16.7 KB
  • references/formats.md3.8 KB
  • references/look-ideation.md4.2 KB
  • scripts/roll-direction.mjs7.8 KB

SKILL.md(原文)

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

Brand video

One pipeline for six formats. The format profile fixes structure and pacing (references/formats.md). A random roll decides how the story is staged. The look is designed fresh for each video from the brand and a seed, the same way make-video does it. Known looks from motion-styles are opt-in: use one only when the user asks for it.

Build the page under the make-video contract (one HTML page, window.renderAt(t), every frame a pure function of t) and render, review and check as it describes. Read motion-design-rules before writing the spec.

Keep each video in its own folder, e.g. videos/<slug>/: seed.txt, direction.json, spec.md, video.html, audio/, broll/, video.mp4. Commit direction.json: the next video reads it to avoid repeating this one.

1. Gather context

⛔ Ask together, then wait:

  1. "Are we in your brand's repository, or should I research a URL (e.g. your marketing site)?"
  2. "Do you want generated background music (ElevenLabs; you'll need an API key set up), or do you have a track?"
  3. "Should I pull B-roll from the Internet Archive (public-domain and Creative Commons film)?"

If they name or describe a style, a medium or a reference look, note it for step 5. Don't read .env files or check keys; trust the answers.

2. Brand

From a repo: Tailwind config or CSS variables, global styles, design tokens, logo, favicon, hero sections, marketing copy, CTAs, UI components, existing motion. From a URL: the same visible signals. Add the format's extra signals from its profile.

Write a brand profile: value proposition, audience, tone, palette, type, emotional position. The brand fixes facts, logo, product UI, and the colours and fonts that must appear. It doesn't dictate a visual style.

3. Lock the format

Pick the profile in references/formats.md and apply its defaults: duration, aspect, arc, timing anchors, limits.

4. Roll the staging

Draw the seed with the apply-randomness skill if it's installed (save its output as seed.txt); otherwise:

LC_ALL=C tr -dc 'A-Za-z0-9' < /dev/urandom | head -c 1024 > videos/<slug>/seed.txt

Then roll:

node <this-skill>/scripts/roll-direction.mjs --format promo \
  --seed-file videos/<slug>/seed.txt --avoid . --out videos/<slug>/direction.json

It picks one option on every axis in references/direction-deck.json: structure, opening, ending, peak position, palette approach, ground, scale, camera path, layout, pacing, entrance emphasis, accent device, footage role, and one twist (a constraint or device; some twists break a motion-design rule on purpose). It also draws three idea lenses for step 5 and lists earlier videos' looks. It skips what the last two videos used, and never pairs picks that overlap. Add --no-broll if B-roll was declined; --lock axis=option for anything the user or brand requires; --style <slug> when step 5 uses a style card.

Honor the picks. Up to two vetoes are allowed for a concrete brand or format conflict, re-rolled with --lock and written in the spec. "Something else would look better" isn't one.

5. Design the look

Default: an original look, found with references/look-ideation.md:

  1. Write down the obvious answers: the pun on the product's name, the category's usual look, the stock looks (dark gradient with floating orbs or particles, glass cards, word-by-word fade-ups, neon glow on black), and the recent_looks in direction.json. They're off limits unless the brief asks for one.
  2. Write one candidate from each of the three random lenses the roll drew, plus one that drops an assumption all the obvious answers share.
  3. Cut candidates that collapse into an obvious answer or into each other.
  4. Let roll-direction.mjs --pick <n> choose among the survivors, and record the result in picks.look.label.

Only when the user asks for a known look, use the motion-styles library its own way:

  • They name or describe a style or medium ("make it risograph", "like an old blueprint"): open that one card, and re-run the roll with --style <slug> so the history records it.
  • They ask for options or "a known look": follow motion-styles to offer at most three styles plus one original direction, and build what they pick.

With a card, its invariants win: if it bans a rolled pick (Swiss bans bounce, risograph bans dissolves, a locked-camera style can't track), re-roll that axis with --lock to an option the card allows. Map brand colours into the card's colour rules. Never copy the card's demo composition.

Without being asked, you may offer once, in one line, that known styles exist.

6. Music (if wanted)

Generate an instrumental with ElevenLabs matching the brand tone, the format's music direction, the rolled pacing and the runtime, or use the user's track. Analyse it with helios analyze (or make-video's fallback) and key timing to it as make-video's music section and motion-design-rules Rule 7 describe. Without music, build the timing grid from the rolled pacing.

7. B-roll (if wanted and broll isn't none)

Use archive-broll. Grade every clip into the video's palette and materials so footage reads as part of the look.

8. Creative specification

One spec in a single code block, also saved as spec.md. Don't restate the prompt. Include:

  • Duration, aspect, resolution, FPS, render mode
  • Brand summary
  • Format, every rolled pick, locks, vetoes and why
  • The obvious answers, the four look candidates with their lenses, what was cut and why, the pick, and the seed pattern → choice map (or the style card the user asked for)
  • How the twist shows up (and which motion-design rule it breaks, if any), and what happens at the peak
  • Scenes with exact timestamps, each keyed to a sound or time (W/B/H/F/T, Rule 7)
  • Voiceover and on-screen text
  • Per scene: layout, hero, layers, entrance, transition out
  • Elements that persist across scenes
  • Audio direction and assets (logo, UI, B-roll clips with ranges, fonts)

9. Build, review, render

Check two or three early stills of the real page as style frames: do they look like the chosen candidate and like nothing on the obvious list? Then build, render, sheet, verify and check as make-video describes.

CLI notes: still and sheet capture at 1920×1080 unless you pass --width and --height. still, sheet and verify take no --mode (only render does), and --fps only applies to sheet --strip. check, analyze and verify --cues need CLI 0.47.0 or later; on an older CLI, use the fallbacks in make-video's troubleshooting table. Say in the report which checks didn't run.

Report the output path, format, seed, picks, the chosen look, locks and vetoes, B-roll credits, and anything unverified.

レビュー

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

コメント

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

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

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

0 / 1000 文字

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

同じリポジトリのスキル

Story-first motion design philosophy for animated video: motion must earn its place; arc (establish, complicate, resolve); show vs tell; shots as units of thought; quiet vs loud motion; Disney principles with restraint; timing heuristics; composition; grammar by medium (product demos, logos, data viz, explainers); technical commitments (deterministic time, scrubbability, refs); cutting discipline; explicit anti-patterns. Use when planning, storyboarding, critiquing, or implementing programmatic or motion-driven video (Helios, Remotion, explainers, loops, UI capture, logo reveals), or when the user asks for motion direction, pacing, or visual-story structure.

日本語の概要は準備中です。原文の説明を表示しています。

BintzGavin/helios1232026年10月26日 更新

Find, preview, cut and credit archival B-roll from the Internet Archive (archive.org) for a Helios video — public-domain, CC BY and CC BY-SA film plus Prelinger Archives. Use when a Helios composition needs real footage as a plate, cutaway, masked fill or texture. Not for generating footage or editing the user's own camera video.

日本語の概要は準備中です。原文の説明を表示しています。

BintzGavin/helios1232026年10月26日 更新

End-to-end production plan template for feeling-first cinematic product promos: brief interrogation, 45s beat structure (cold open through brand), hero-element metaphor, storyboard fidelity ladder, visual system (palette, type, camera, texture), motion mix and easing vocabulary, audio and captions, tooling (animatic through HTML or AE), deliverables matrix, accessibility, review milestones, and compromises to accept or refuse. Use when planning, pitching, storyboarding, or producing polished brand films for any SaaS or consumer product—not category-specific; pair with skills/design/animated-video-philosophy for broader motion principles.

日本語の概要は準備中です。原文の説明を表示しています。

BintzGavin/helios1232026年10月26日 更新

Workflow for creating a new Helios composition. Use when building a new animation project or converting an existing animation to run in Helios.

日本語の概要は準備中です。原文の説明を表示しています。

BintzGavin/helios1232026年10月26日 更新

Patterns for using Helios with Vanilla Canvas API. Use when building high-performance 2D/3D animations without frameworks.

日本語の概要は準備中です。原文の説明を表示しています。

BintzGavin/helios1232026年10月26日 更新

Chart.js integration patterns for Helios. Use when creating animated data visualizations with Chart.js.

日本語の概要は準備中です。原文の説明を表示しています。

BintzGavin/helios1232026年10月26日 更新

BintzGavin のスキルをすべて見る

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