Claude Code、Playwright、FFmpeg ... ノート

Claude Code、Playwright、FFmpeg を使ってプロダクトデモを作成した方法

著者は、Claude Code、Playwright、FFmpeg を使用して、約 30 分でオープンソースプロジェクトである Agent OS の 56 秒の製品デモを作成しました。目標は、手動での録画や複雑なビデオ編集ソフトウェアを避け、実際の製品の明確で洗練されていないウォークスルーを作成することでした。Claude Code はアプリケーションを検査し、ナラティブの重要な製品状態を特定し、次に Playwright を使用してこれらの状態をナビゲートおよび記録しました。デモは、実際の Pulseboard ビルドからの既存の実行記録を特徴とし、真正性を確保しました。長い録画ではなく、安定性を向上させるために、それぞれ独自のブラウザコンテキストを持つ複数の短いクリップが録画されました。次に FFmpeg を使用してクリップをトリミングし、ラベルを追加し、オープニングとクロージングカードを作成し、すべてを連結して最終的な MP4 を作成しました。このワークフローは、凝ったグラフィックよりも真正性と再現性が優先されるオープンソースデモや内部ウォークスルーに最適です。著者は、ブラウザフローはコードであり、製品状態は決定的であり、ラベル/タイミングは設定であるため、ビデオの再生成が容易であると述べています。Agent OS は、コーディングモデルにメモリ、実行制御、検証、リカバリ、配信を追加するローカルファーストの AI プロジェクトオペレーティングシステムとして説明されています。このデモは、システムが実際に行っていることをユーザーに迅速に示すためのものです。