회사 URL을 Codex 및 기타 AI 코딩 에이전트에 대한 광택 SaaS/제품 데모 비디오 워크플로우로 전환합니다.

이 저장소 패키지는 에이전트가 제품 웹 사이트를 연구하는 데 도움이되는 재사용 가능한 기술, 높은 해상도 UI 증거를 캡처, 제품 관리 품질의 스토리 보드를 작성, Remotion 및 FFmpeg로 비디오를 구축하고, 최종 렌더링을 확인하기 전에.

그것은 무엇을

• 모든 사용자가 있는 경우 단일 회사 URL에서 시작합니다.
• 제품 흐름, 스크린 샷, 브랜드 자산, 참조 동영상, CTA, 청중, 또는 플랫폼과 같은 풍부한 입력으로 개선합니다.
• 실제 제품 표면에 대한 브라우저 연구 및 스크린 샷 캡처.
• 60-90초 데모 영상 계획 및 생산 워크플로우 제작
• 요청시 기본적으로 1080p 및 4K 지원
• 간단한 창조, 영상 QC 및 접촉 장을 위한 재사용할 수 있는 스크립트를 포함합니다.
• Product-demo 구성에 대한 일반적인 Remotion Starter 템플릿이 포함되어 있습니다.

설치

Codex 기술 디렉토리에 기술 폴더를 복사합니다.

Windows 전원:

macOS 또는 Linux:

에이전트가 다른 기술 디렉토리를 사용한다면, demo-video-creation-skill/] 폴더를 복사합니다.

예 Prompts

URL 전용:

제품 교류로:

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