DD

derrickgong87/demo-video-creation-skill

开发工具

本页由 AI 翻译,技术细节请以原文为准。 查看原文

21 stars 质量 54 趋势 14MIT

一项可重复使用的Codex技能,用于根据公司网址、截图和产品流程制作精致的SaaS和产品演示视频。

概览

将公司网址转变为精致的SaaS/产品演示视频流程,供Codex及其他AI编码代理使用。 该仓库包含一项可复用技能,帮助代理研究产品网站、捕捉高分辨率界面证据、撰写产品经理级故事板、用Remotion和FFmpeg制作视频,并在交付前验证最终渲染效果。 - 从单个公司网址开始,当用户仅拥有该网址时。- 通过更丰富的输入提升,如产品流程、截图、品牌资产、参考视频、行动号召、受众或平台。- 提供浏览器研究和真实产品表面截图的指南。- 生成60-90秒的演示视频计划和制作流程。- 默认支持1080p,并在请求或适当时支持4K。- 包含可重复使用的脚本,用于简报制作、视频质量控制和联系人表。- 包含用于产品演示构图的通用Remotion入门模板。 把技能文件夹复制到你的Codex技能目录里。

概述(AI 翻译)

将公司网址转变为精致的SaaS/产品演示视频流程,供Codex及其他AI编码代理使用。

该仓库包含一项可复用技能,帮助代理研究产品网站、捕捉高分辨率界面证据、撰写产品经理级故事板、用Remotion和FFmpeg制作视频,并在交付前验证最终渲染效果。

它的作用

  • 从单个公司网址开始,而用户仅拥有那个网址。
  • 通过更丰富的输入提升,如产品流、截图、品牌资产、参考视频、行动号召、受众或平台。
  • 指南、浏览器研究和真实产品表面截图采集。
  • 制作60-90秒的演示视频计划和制作流程。
  • 默认支持 1080p,在要求或适当时支持 4K。
  • 包含可重复使用的脚本,用于简报制作、视频质量控制和联系表。
  • 包含一个通用的 Remotion 起始模板,用于产品演示组合。

安装

把技能文件夹复制到你的Codex技能目录里。

Windows PowerShell:

macOS 或 Linux:

如果你的经纪人用的是不同的技能目录,复制那里的demo-video-creation-skill/文件夹。

示例提示

仅网址:

产品流方面:

本页由 AI 翻译,技术细节请以原文为准。

README

以下为原文 README 节选,完整内容请查看原文。

Demo Video Creation Skill

Turn a company URL into a polished SaaS/product demo video workflow for Codex and other AI coding agents.

This repository packages a reusable skill that helps an agent research a product website, capture high-resolution UI evidence, write a product-manager-quality storyboard, build the video with Remotion and FFmpeg, and verify the final render before delivery.

What It Does

  • Starts from a single company URL when that is all the user has.
  • Improves with richer inputs such as product flow, screenshots, brand assets, reference videos, CTA, audience, or platform.
  • Guides browser research and screenshot capture for real product surfaces.
  • Produces a 60-90 second demo video plan and production workflow.
  • Supports 1080p by default and 4K when requested or appropriate.
  • Includes reusable scripts for brief creation, video QC, and contact sheets.
  • Includes a generic Remotion starter template for product-demo composition.

Install

Copy the skill folder into your Codex skills directory.

Windows PowerShell:

Copy-Item -Recurse .\demo-video-creation-skill "$env:USERPROFILE\.codex\skills\demo-video-creation-skill"

macOS or Linux:

cp -R ./demo-video-creation-skill ~/.codex/skills/demo-video-creation-skill

If your agent uses a different skills directory, copy the demo-video-creation-skill/ folder there.

Example Prompts

URL-only:

Use $demo-video-creation-skill to create a 60-90 second 4K demo video for https://example.com.

With product flow:

Use $demo-video-creation-skill. Make a 75 second launch demo for https://example.com. The target user is a RevOps manager. Show: import CRM data, clean duplicates, generate pipeline forecast, export report. Use a calm enterprise style.

With assets and reference:

Use $demo-video-creation-skill to make a vertical product demo for this app. Use the screenshots in ./assets, follow the pacing of the reference video, and keep the CTA focused on free trial signup.

Included Structure

demo-video-creation-skill/
  SKILL.md
  agents/openai.yaml
  references/
    capture-workflow.md
    storytelling.md
    visual-system.md
    remotion-ffmpeg.md
    qc-checklist.md
  scripts/
    create_demo_brief.py
    qc_video.py
    make_contact_sheet.py
  assets/remotion-starter/

Requirements

The skill can guide planning without local dependencies, but production-quality rendering typically uses:

  • Node.js and npm
  • Remotion
  • FFmpeg and ffprobe
  • Browser automation or an in-app browser for live capture

Quality Bar

The skill is designed to prevent common demo-video failures:

  • Generic marketing copy with no real product loop
  • Blurry screenshots
  • Slide-like scene jumps
  • Misaligned cursors and callouts
  • Unsupported claims
  • Unlicensed music
  • Final files that were never inspected with ffprobe or contact sheets

Promotional Copy

English

在 GitHub 查看完整 README

推荐工具

换一个关键词,或者移除筛选条件。

安装

npx skillfish add derrickgong87/demo-video-creation-skill
新手?先看 mcpskill.org 教程 →