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
Astryx：Metaのオープンソースデザインシステム、150以上のコンポーネント搭載、カスタマイズ可能かつAIエージェント対応
MetaのデザインシステムAstryxがオープンソース化されました。150以上のReact/StyleXコンポーネント、CLIスキャフォールディング、MCPサポートを備え、社内ですでに13,000以上のアプリで使用されています。現在ベータ版です。
MCPサーバー経由でClaude Codeのルーチン作業をGemmaにオフロードする
offload-mcp は、Claude がコミットメッセージや PR サマリーなどのルーチン業務を無料のモデル API（デフォルトでは Google GenAI API を介した Gemma）にオフロードできるようにする新しい MCP サーバーで、Claude のトークンを節約し、ローカルハードウェアの制約なしに軽量な作業を実行します。
克劳德设计与华数设计：HTML布局与速率限制的直面交锋
Claude DesignはHTMLプロトタイプを高速に作成できますが、すぐにレート制限に達します。オープンソースのClaude CodeスキルであるHuashu-Designは、通常のサブスクリプションで動作し、個別のレート制限はありませんが、5分に対して20分かかります。
二つの無料Claudeコードスキル：チュートリアル生成とプロンプト修正
2つの新しい無料Claude Codeスキル: create-tutorialは実際のプロジェクトファイルからコード読解チュートリアルを生成し、prompterは誤字だらけのプロンプトを実行可能な指示に書き換えます。両方ともMITライセンスで、GitHubからインストール可能です。