返回技能库

新媒体内容 · 精选技能

综艺风格视频包装

335 Stars

为访谈视频自动添加综艺风格视觉特效:AI 分析字幕内容生成建议,审批后自动渲染。

新媒体内容视频包装特效

如何使用这个技能

四步装进你的 AI Agent(Claude Code、Codex CLI、Cursor 等通用流程):

  1. 1

    复制安装命令

    点击右侧按钮,把安装命令复制到剪贴板。

  2. 2

    在你的 Agent 终端执行

    打开 Claude Code / Codex / Cursor 的终端,粘贴并回车执行,等待安装完成。

  3. 3

    在对话中直接点名调用

    新开一个会话,直接说「用 综艺风格视频包装 帮我……」,Agent 会按技能里的专业流程执行。

  4. 4

    阅读下方完整说明

    想深入了解参数、进阶玩法与真实示例,往下看该技能的完整说明文档。

安装示例 / 项目说明

🎬 Video Wrapper

Add Variety Show Style Visual Effects to Interview/Podcast Videos

AI-powered subtitle analysis, automatic effect suggestions, one-click professional visual rendering

License: MIT Python 3.8+ Claude Skills

Quick StartFeaturesDemoUse CasesArchitecture

中文文档


✨ Features

🎨 8 Visual Components

  • Key Phrases - Short phrases highlighting core ideas
  • Lower Thirds - Display guest name and title
  • Chapter Titles - Topic transition title cards
  • Term Cards - Professional terminology explanations
  • Quote Callouts - Highlight memorable quotes
  • Animated Stats - Dynamic number displays
  • Bullet Points - Core takeaways summary
  • Social Bars - Follow call-to-action

🎭 4 Visual Themes

  • Notion 🟡 - Warm knowledge style
  • Cyberpunk 💜 - Neon futuristic
  • Apple ⚪ - Minimalist business
  • Aurora 🌈 - Gradient flowing

🤖 Smart Workflow

  1. 📝 AI analyzes subtitle content
  2. 💡 Auto-generates effect suggestions
  3. ✅ User approves configuration
  4. 🎬 One-click video rendering

🛠️ Dual Rendering Engines

Engine Tech Stack Features
Browser 🌐 Playwright + HTML/CSS/Anime.js High quality, complex animations (Recommended)
PIL 🎨 Python PIL Pure Python, no browser required

🚀 Quick Start

Installation

Method 1: One-Click Install (Recommended)

npx skills add https://github.com/op7418/Video-Wrapper-Skills

Method 2: Manual Install

# Clone to Claude Skills directory
cd ~/.claude/skills/
git clone https://github.com/op7418/Video-Wrapper-Skills.git video-wrapper
cd video-wrapper

# Install dependencies
python3 -m venv venv
source venv/bin/activate
pip install -r requirements.txt
playwright install chromium

Usage

In Claude Code

/video-wrapper interview.mp4 subtitles.srt

Claude will:

  1. 📊 Analyze subtitles, identify key information
  2. 💡 Generate effect suggestions (lower thirds, key phrases, term cards, etc.)
  3. 📝 Present suggestions in Markdown for review
  4. ✅ Auto-render output video after confirmation

Command Line

# Direct rendering with config file
python src/video_processor.py video.mp4 subs.srt config.json output.mp4

# Specify renderer
python src/video_processor.py video.mp4 subs.srt config.json -r browser  # Browser
python src/video_processor.py video.mp4 subs.srt config.json -r pil      # PIL

🎥 Demo

💡 Visual effects showcase across different themes and components

Theme Comparison

Notion Theme
Warm Knowledge
Cyberpunk Theme
Neon Futuristic
Apple Theme
Minimalist Elegant
Aurora Theme
Gradient Flow
🟡 Education/Knowledge 💜 Tech/Innovation ⚪ Business/Professional 🌈 Creative/Artistic

Component Examples

Component Preview Use Case
🏷️ Key Phrase [Preview placeholder] When guest mentions "Artificial General Intelligence", show "AI Development is Smooth Curve"
👤 Lower Third [Preview placeholder] Show "Dario Amodei · CEO · Anthropic" at video start
📖 Term Card [Preview placeholder] Auto popup explanation when "Moore's Law" first mentioned
💬 Quote [Preview placeholder] Highlight "AI development is a very smooth exponential curve"

📋 Use Cases

🎓 Educational Content

  • Knowledge sharing videos
  • Course recordings
  • Online lectures
  • Heavy terminology needs

🎙️ Interviews & Podcasts

  • Personal interviews
  • Panel discussions
  • Industry dialogues
  • Guest info display needs

📱 Social Media

  • YouTube long-form
  • B站 content
  • Podcast shows
  • Highlight clips needed

🎨 Theme System

Choose the right theme based on content style:

{
  "theme": "notion"  // or "cyberpunk", "apple", "aurora"
}
Theme Color Scheme Characteristics Best For
Notion Warm Yellow + Blue Soft gradients, knowledge-focused Education, knowledge sharing, courses
Cyberpunk Neon Purple + Cyan High contrast, tech-forward Tech, sci-fi, innovation topics
Apple Black/White/Gray Minimal, professional Business, corporate, formal interviews
Aurora Rainbow Gradient Flowing light, artistic Creative, design, artistic content

🧩 Component Configuration

Complete Configuration Example

Expand to view full JSON config
{
  "theme": "notion",

  "lowerThirds": [
    {
      "name": "John Doe",
      "role": "Chief Scientist",
      "company": "AI Research Lab",
      "startMs": 1000,
      "durationMs": 5000
    }
  ],

  "chapterTitles": [
    {
      "number": "Part 1",
      "title": "The Journey of AI",
      "subtitle": "The History of AI Development",
      "startMs": 0,
      "durationMs": 4000
    }
  ],

  "keyPhrases": [
    {
      "text": "AI Development is Smooth Curve",
      "style": "emphasis",
      "startMs": 2630,
      "endMs": 5500
    }
  ],

  "termDefinitions": [
    {
      "chinese": "摩尔定律",
      "english": "Moore's Law",
      "description": "Number of transistors doubles every 18-24 months",
      "firstAppearanceMs": 37550,
      "displayDurationSeconds": 6
    }
  ],

  "quotes": [
    {
      "text": "AI development is a very smooth exponential curve",
      "author": "— John Doe",
      "startMs": 30000,
      "durationMs": 5000
    }
  ],

  "stats": [
    {
      "prefix": "Growth Rate ",
      "number": 240,
      "unit": "%",
      "label": "Annual Computing Power Growth",
      "startMs": 45000,
      "durationMs": 4000
    }
  ],

  "bulletPoints": [
    {
      "title": "Key Takeaways",
      "points": [
        "AI development is smooth exponential curve",
        "Similar to Moore's Law intelligence growth",
        "No sudden singularity moment"
      ],
      "startMs": 50000,
      "durationMs": 6000
    }
  ],

  "socialBars": [
    {
      "platform": "twitter",
      "label": "Follow us",
      "handle": "@ai_research",
      "startMs": 52000,
      "durationMs": 8000
    }
  ]
}

Component Parameters Quick Reference

Component Required Optional Notes
Lower Third name, role, company, startMs durationMs (default 5s) Guest information
Chapter Title number, title, startMs subtitle, durationMs Topic segmentation
Key Phrase text, startMs, endMs style, position text must be phrase
Term Card chinese, english, firstAppearanceMs description, displayDurationSeconds Terminology explanation
Quote text, author, startMs durationMs, position Memorable quotes
Stats number, label, startMs prefix, unit, durationMs Number display
Bullet Points title, points, startMs durationMs List summary
Social Bar platform, handle, startMs label, durationMs Follow CTA

⚠️ Key Phrase Usage: text must be a phrase (e.g., "AI Development is Smooth Curve"), not a single word (e.g., "Artificial Intelligence"). Use term cards for single words.


🗂️ Project Structure

video-wrapper/
├── 📄 SKILL.md                  # Claude Skill definition
├── 📄 README.md                 # This document (English)
├── 📄 README_CN.md              # Chinese documentation
├── 📄 ARCHITECTURE.md           # Detailed architecture
├── 📄 requirements.txt          # Python dependencies
├── 📁 src/                      # Source code
│   ├── video_processor.py       # Main processing flow
│   ├── browser_renderer.py      # Playwright renderer
│   ├── content_analyzer.py      # AI content analysis
│   ├── fancy_text.py            # PIL key phrase rendering
│   ├── term_card.py             # PIL card rendering
│   └── animations.py            # Animation functions
├── 📁 templates/                # HTML templates
│   ├── fancy-text.html
│   ├── term-card.html
│   ├── lower-third.html
│   ├── chapter-title.html
│   ├── quote-callout.html
│   ├── animated-stats.html
│   ├── bullet-points.html
│   ├── social-bar.html
│   └── video-config.json.template
└── 📁 static/                   # Static assets
    ├── css/                     # Theme styles
    │   ├── effects.css
    │   ├── theme-notion.css
    │   ├── theme-cyberpunk.css
    │   ├── theme-apple.css
    │   └── theme-aurora.css
    └── js/
        └── anime.min.js         # Animation engine

❓ FAQ

Q: Playwright installation failed?
# Ensure Python version >= 3.8
pip install playwright
playwright install chromium

# macOS may need to remove quarantine flag
xattr -r -d com.apple.quarantine ~/.cache/ms-playwright

# Verify installation
playwright --version
Q: Processing too slow?

Optimization Tips:

  1. Use PIL renderer: -r pil (simpler but 2-3x faster)
  2. Lower video resolution (1080p → 720p)
  3. Process long videos in segments (5-10 min chunks)
  4. Reduce component count (keep only essentials)
Q: Out of memory?

Solutions:

  1. Close other applications to free memory
  2. Process long videos in segments
  3. Use lower resolution (720p or 480p)
  4. Reduce number of simultaneous components
  5. Use PIL renderer (smaller memory footprint)
Q: Font display issues?

Ensure Chinese fonts are installed:

# macOS - PingFang SC included
# No additional installation needed

# Ubuntu/Debian
sudo apt-get install fonts-noto-cjk

# CentOS/RHEL
sudo yum install google-noto-sans-cjk-fonts

# Verify fonts
fc-list :lang=zh
Q: How to customize themes?
  1. Copy existing theme CSS file
  2. Modify CSS variables
  3. Specify new theme name in config

See ARCHITECTURE.md for details


🔧 Tech Stack

Layer Technology Description
Visual Rendering HTML + CSS + Anime.js Screenshot via Playwright browser
Video Compositing MoviePy Python video editing library
Animation Engine Anime.js Spring physics animations
Fallback Rendering Python PIL Pure Python image processing
Content Analysis AI Analysis Auto-identify key information

Detailed architecture available in ARCHITECTURE.md


📚 Resources


🤝 Contributing

Issues and Pull Requests are welcome!

Before submitting a PR, please ensure:

  • ✅ Code style follows project conventions
  • ✅ Added necessary tests
  • ✅ Updated relevant documentation

📄 License

MIT License


Powered by Claude

If you find this useful, please give it a ⭐️ Star!