Create concise, conversion-oriented demo video scripts and shot-by-shot storyboards for AI SaaS products. Use when the user asks for a product demo video scr...
设计与多媒体
ShellBot Product Video
试用Create conversion-focused product marketing videos with Remotion + React using the AIDA framework (Attention, Interest, Desire, Action). Use when building la...
它能做什么
Create conversion-focused product marketing videos with Remotion + React using the AIDA framework (Attention, Interest, Desire, Action). Use when building la...
技能文档
Shellbot Product Video
Overview
Build one thing well: product marketing videos that convert. Keep Remotion as the source of truth for pacing, layout, animation, and render output. Use external generation tools only to enrich scenes. Built by the ShellBot Team.
Non-Negotiable Story Structure (AIDA)
Follow this structure in order:
- Establish the problem being solved.
- Introduce the solution.
- Show use cases, not feature lists.
- End with a CTA that includes an incentive.
Reject drafts that skip any step.
Workflow
1) Bootstrap the Remotion Base Project
List bundled templates:
./scripts/bootstrap_template.sh --list
Bootstrap the chosen template:
./scripts/bootstrap_template.sh --template cinematic-product-16x9 ./my-product-video
cd ./my-product-video
npm install
To also copy official Remotion rule asset snippets into the project:
./scripts/bootstrap_template.sh --template cinematic-product-16x9 --include-rule-assets ./my-product-video
Template bundle:
assets/remotion-product-template(aida-classic-16x9)assets/templates/cinematic-product-16x9assets/templates/saas-metrics-16x9assets/templates/mobile-ugc-9x16references/remotion-rules/assets(official-style reusable snippet assets)
Then adapt scene content/components and composition metadata in src/Root.tsx for the brief.
2) Capture Brief Inputs
Collect these fields before writing scenes:
- Product name
- Audience
- Core pain/problem
- Value proposition (one sentence)
- 2 to 4 use cases
- CTA
- Incentive for CTA (discount, trial extension, bonus, etc.)
- Visual style direction
If use cases are missing and only features are present, ask for use-case phrasing.
3) Build AIDA Narrative and Timing
Use this duration allocation as a starting point:
- Attention: 0% to 20%
- Interest: 20% to 45%
- Desire: 45% to 80%
- Action: 80% to 100%
Generate a structured plan with:
python3 scripts/brief_to_aida_plan.py --in brief.json --out plan.json --duration-sec 45 --fps 30
4) Map Story to Remotion Scenes
Implement scenes as React components and sequence them using Sequence.
Keep transitions purposeful and short (usually 8-18 frames).
Load references/remotion-product-video-playbook.md when writing or reviewing Remotion code.
Load references/remotion-rules-index.md and then only the specific files needed from references/remotion-rules/.
5) Add Ancillary Assets (Optional but Useful)
Use Freepik-generated assets only to support scenes:
- Nano Banana 2 or Freepik image models for hero stills/background art.
- Kling for short inserts or transition clips.
- ElevenLabs voiceover and music endpoints for narration and soundtrack.
Do not let generated clips replace the whole narrative structure.
Load references/freepik-ancillary-assets.md when planning asset generation.
6) Assemble, QA, and Render
Run this QA gate before rendering:
- Problem is clear in first 3-5 seconds.
- Solution is introduced before midpoint.
- Use cases are concrete scenarios, not feature bullets.
- CTA includes an explicit incentive.
- Audio levels keep voiceover intelligible over music.
Then render via Remotion CLI or renderer API.
Creative Rules
- Prefer visual metaphors and outcomes over UI tours.
- Keep one message per scene.
- Use motion to direct attention, not decorate.
- Show benefits in context: who uses the product, when, and what changes.
- Keep CTA simple and singular.
Deliverables
Produce these outputs for each request:
- AIDA script draft.
- Scene plan JSON (
plan.json). - Remotion project from the selected bundled template customized for the brief.
- Asset manifest listing generated inputs and their intended scene usage.
- Final render command(s).
References
- Remotion implementation details: references/remotion-product-video-playbook.md
- Remotion rules navigator: references/remotion-rules-index.md
- Freepik ancillary generation recipes: references/freepik-ancillary-assets.md
- Template chooser: references/template-showcase.md
- Packaging and publishing: references/publishing-clawhub.md
- ShellBot Team: getshell.ai
Use this skill for product marketing videos only. For other video categories, use a different skill.
相关技能
Best-practice guidance for building, editing, and debugging Remotion video projects with React and TypeScript. Use this skill for Remotion compositions, anim...
Turn rough product image, poster, thumbnail, social creative, ad concept, or image-to-video ideas into structured prompts for AI image and video generation t...
product video, product demo video, product ad video, product showcase — turn a product's photos or link into a polished demo / ad video. Use when the user wants a product demo, showcase, or ad video.
Turn one product photo into a vertical product video that speaks. This AI product video generator and product video maker builds ecommerce product videos, product ads, and commerce short videos from a single photo — composing a 9:16 opening frame, writing a short script from what the photo shows and the details you supply, voicing it with a selected narrator, and directing one finished clip ready to post. Use it for product launches, listing videos, shoppable social posts, storefront promos, and turning a phone snap of merchandise into a video that sells, with no shoot, no crew, and no editing.
Turn still images, product photos, portraits, posters, scenes, or rough video ideas into structured prompts for image-to-video AI tools. Use when the user wa...