Claude CodeとVeoを使って2時間で3Dスクロールサイトを構築した方法
Redditユーザーのu/Tough-Survey-2155氏が、約2時間で3DスクロールWebサイトをゼロから構築するワークフローを公開しました。この手法では、Claude Codeが主要な作業を担い、カスタムの動画からWebサイトスキル（Nate Herk氏による功績）とVeoを動画生成に使用しています。
ワークフロー
- 動画からWebサイトへのスキルを作成 — これにより、動きをスクロール駆動のインタラクションに変換する基盤ができます。
- 元の動画から最初と最後のフレーム画像を抽出し、Veoを使用してそれらを新しい動画に変換します。動画のプロンプトはChatGPTで生成しました。
- Claude Codeにプロンプトを与えて、動画アセットを使用してWebサイトを構築します。著者によると、動画が準備できれば、残りは簡単なプロンプト処理で済みました。
- デザインの調整 — 生成後にいくつかの手動調整が必要でした。
結果とリンク
- ライブWebサイト: royal-pop-website.vercel.app
- 完全なソースコード: github.com/hamzafarooq/claude-code-starter
リポジトリには、同様のプロジェクトで再利用可能なClaude Codeスターターテンプレートが含まれています。著者は、エンドツーエンドのプロセスがわずか2時間で完了したと述べており、AI支援によるスクロール駆動の3Dサイトを迅速にプロトタイプ化したい開発者にとって、実用的な参考資料となっています。
📖 全文はこちら: r/ClaudeAI
👀 See Also
深層競争分析のためのマルチエージェントシステム（Claude対応）
ある開発者は、単一プロンプトのAIクエリによる表面的な競合分析の問題に対処するため、3つの連続した波で構造化された複数ソースのリサーチを実行するマルチエージェントシステムを構築しました。
クリスピーVSコード拡張機能が、ClaudeとCodexにエージェントメモリとマルチエージェント機能を追加
Crispyは、Claude CodeとCodex CLIをGUIでラップするオープンソースのVS Code拡張機能です。ローカルエージェントメモリをセマンティック検索機能付きで追加し、マルチエージェントセッション、会話のフォーク、専用ツールビューを提供します。MITライセンスの下、Linux、macOS、Windowsで動作します。
Claude AIの使用制限を監視する無料macOSメニューバーアプリ
Claude AIのセッション使用率、週間制限、リセットカウントダウンをメニューバーに直接表示する、無料でオープンソースのmacOSツールです。Homebrewコマンド1つでインストールでき、既存のChromeセッションを利用してデータを保存しません。
フェーズロック：子育ての手法に着想を得たAIエージェント制御システム
Phaselockは、AIコーディングエージェント向けに4つの制御メカニズムを実装したオープンソースのAgent Skillです。具体的には、アクション前の明示的なゲート、ミスに対する即時フィードバック、選択肢の制約、機械的なルール強制です。Claude Code、Cursor、Windsurf、およびフックをサポートするあらゆるツールで動作します。