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 製品ローンチスキル：AI製品ローンチのための構造化プレイブック
無料のClaudeスキルが、AI製品ローンチのための戦略、準備、メッセージング、チャネル実行をカバーする6つの実戦で鍛えられたローンチプレイブックを提供します。リポジトリには、ローンチ段階別に整理された英語と中国語の資料が含まれています。
チャンバー：GPUインフラ管理のためのAIエージェント
Chamberは、クラスターのプロビジョニング、失敗したジョブの診断、ワークロードの管理などのタスクを処理することでGPUインフラストラクチャを管理するAIエージェントです。生のシェルコマンドだけでなく、検証とロールバック機能を備えた構造化された操作を提供します。
マーキー：エージェント生成ドキュメント用の軽量マークダウンビューアー
Markyは、Tauri v2とReactで構築されたデスクトップMarkdownビューアで、ターミナルから.mdファイルをライブリロードで開きます。CLIファーストの使用法、Shikiによるシンタックスハイライト、KaTeX数式サポート、Mermaidダイアグラム、フォルダ用ワークスペースを特徴としています。
SkyClaw v2.2 Rust AI エージェントランタイム、OpenAI OAuthとカスタムツール作成機能を追加
SkyClaw v2.2は、ChatGPT Plus/Proサブスクリプションを使用したOpenAI OAuth認証、エージェントが実行時に独自のbash/python/nodeツールを作成するカスタムツール作成機能、バックグラウンド操作のためのデーモンモードを導入しています。Rustベースのランタイムは、31msのコールドスタート、15MBのアイドルRAM、9.3MBのバイナリサイズでベンチマークされています。