MotionSites、シネマティックなWebページを作れるClaude Skillをオープンソース公開

MotionSitesは、Claudeに映画のような高品質なWebサイトやランディングページを制作させるオープンソースのスキル「motionsites-web-builder」を公開しました。

AIが作るWebサイトがどれも似通ったデザインになってしまう原因は、曖昧な指示、実際のメディア素材の不足、そして生成された画面をAI自身が見ていないことにあります。このスキルは、700件以上のサイト制作ノウハウをもとに、その3つの課題を解決します。

機能と仕組み

単に「おしゃれに作って」と頼むのではなく、厳格なデザインルールと自動検証の仕組みをClaudeに組み込むのが特徴です。

スキル内には、MotionSitesで評価の高かった40種類の厳選プロンプトが含まれています。Claudeはユーザーの要望に近い2〜3件の設計パターンを参照し、デザインの密度やトーンを揃えます。

素材面では、50本以上の映画風背景動画、30点の透過3Dカットアウト、29点の画像を公開ライブラリとして内蔵しています。番号付きコンタクトシートが用意されているため、Claudeは視覚的に素材を選び出してコードに組み込めます。

さらに、55種類以上の実践的なコードレシピを収録しています。シームレスなループ動画、リキッドグラス表現、見出しのブラー効果、マウス操作に連動する動画スクラブ、Three.jsによるリアルタイム3D表示などを簡単に実装できます。

コード生成後は、Playwrightを使った自動検証ループが走ります。実際の画面をスクリーンショットで撮影し、リンク切れやスマートフォン表示での崩れ、フォント、動画再生を自動チェックして修正を繰り返します。

また、コードを直接出力するだけでなく、Lovable、Bolt、v0、Cursor、Manus、Google AI Studio、Kimi向けに最適化したプロンプトを出力するモードも備えています。

導入手順と使い方

導入はGitHubの「Motionsites-AI/claude-skill」からzipファイルをダウンロードして行います。

Claudeの設定画面からカスタムスキルとしてzipをアップロードし、有効化します。この際、Claudeの設定でコード実行機能がオンになっている必要があります。

コマンドラインプラグインとしての追加や、ローカルのClaudeスキルフォルダへの配置にも対応しています。自動スクショによる検証を機能させるには、PythonのPlaywrightとChromiumのインストールが推奨されます。

設定完了後は、高級感のあるLPやポートフォリオの制作をClaudeに依頼するだけで自動的にスキルが適用されます。

コードと指示文はMITライセンスで提供されています。同梱のプロンプトと素材はMotionSitesの著作権下にありますが、このスキルで生成したWebサイト内であれば無料で使用可能です。

なぜ重要か

個人開発者やデザイナーにとって、フロントエンドの微調整に何時間も費やすことなく、展示会やギャラリーに並ぶようなリッチな動向LPを即座に手に入れられる価値は大きいです。

プロンプトの工夫だけで終わらせず、自動スクリーンショットでAI自身に視覚的なバグを直させるアプローチは非常に合理的です。ただし、真にブランドの世界観を反映させるには独自の素材準備が欠かせないため、付属ライブラリは骨組み作りとして活用するのが現実的と言えます。