MotionSites Web Builder (claude-skill)

これは何か

Claudeスキル — Claudeがウェブサイトを構築する方法を変えるダウンロード可能なアドオンです。一般的なAIレイアウトではなく、Claudeに映画的で「受賞レベル」のランディングページを生成させます。

解決する問題

READMEによると、AIが構築したウェブサイトがすべて同じように見える理由は3つあります：

1. 曖昧な計画 — コーディング前の正確なデザインブリーフがない
2. 実メディアがない — 使用する実際のビデオや画像がない
3. 結果を見る人がいない — レビューや品質チェックがない

このスキルはこれら3つすべてに対処します。

仕組み

ワークフローは以下の通りです：

1. ClaudeはMotionSites（デザインギャラリーサイト）で最も好まれたデザインを研究します
2. 実際の映画的なメディア（ビデオ、3Dカットアウト、画像）を選びます
3. コードを書く前に正確なビルド仕様を書きます
4. ページを構築します
5. 自分の作業をスクリーンショットして修正し、「ギャラリーレベルの基準」をクリアするまで繰り返します

含まれるもの

• 40のサンプルプロンプト — MotionSitesで最も好まれた無料プロンプト。Claudeは各新しいブリーフに対して最も近い2〜3を読み、その詳細度とセンスに合わせます。
• メディア棚 — 50以上の映画的なヒーロービデオ、30の透明3Dカットアウト、29の画像。公開ホストされ、番号付きのコンタクトシートに表示されるため、Claudeは目で見てメディアを選びます。
• 55以上のテクニックレシピ、動作するコード付き。シームレスなビデオループ、リキッドガラス、単語ごとのぼかし見出し、マウススクラブビデオ、スポットライトリビール、深度カルーセル、スクロールストーリー、実際の3Dモデル（Three.js）など。
• 実際の数字付きデザインセンスルール — タイプスケール、トラッキング、スペーシング、色、モーションタイミング、コピーガイドライン。
• 仕様テンプレート — Claudeがコーディング前に書く正確なブリーフ。READMEはこれを「品質が決まる場所」と呼んでいます。
• 見て修正するループ — 壊れたアセット、モバイルオーバーフロー、フォント、ビデオ再生をチェックするスクリーンショット+QAスクリプト、および採点ルーブリック。
• プロンプトモード — コードの代わりにプロンプトを要求でき、Lovable、Bolt、v0、Cursor、Manus、Google AI Studio、Kimi向けに調整されています。

インストール

Claude.aiおよびClaudeデスクトップ：

1. 最新リリースからmotionsites-web-builder.zipをダウンロードします
2. Claudeで：カスタマイズ→スキル→+→スキルを作成→スキルをアップロード、zipを選択してオンにします
3. 設定→機能でコード実行を有効にする必要があります

Claude Code（プラグイン）：

/plugin marketplace add Motionsites-AI/claude-skill
/plugin install motionsites-web-builder@motionsites

（GitHub SSHキーがない場合？代わりにHTTPS URLバリアントを使用してください。）

Claude Code（手動）： plugins/motionsites-web-builder/skills/motionsites-web-builderを~/.claude/skills/にコピーします。

**最良の結果を得るためのオプション：**Claudeが自分の作業を見られるようにPlaywrightをインストールします：

pip install playwright && python -m playwright install chromium

使用方法

Claudeにサイトを依頼するだけで、スキルが自動的に起動します。READMEのサンプルプロンプト：

• "高級睡眠トラッキングリングのランディングページヒーローを構築してください。"
• "リスボンの建築写真家のポートフォリオホームページを作成してください。エディトリアルで静かな感じに。"
• "AI旅行アプリのウェイトリストページ用のLovableプロンプトを書いてください。"
• "これが現在のサイトです：受賞レベルに見えるようにしてください。"

無料と有料

このスキルは無料サンプルです。MotionSites Unlimitedという有料ティアがロックを解除します：

• 500以上のプレミアムウェブサイトプロンプト（Lovable、Bolt、v0、Cursor、Claude用）
• アニメーションヒーロー背景とセクションプロンプト（機能、価格、フッターなど）
• 40以上のLovableテンプレート
• MotionSites MCP。Claudeが検索して任意のプレミアムプロンプトをビルドに取り込めます
• 個人およびクライアントワークでの使用

ライセンス

• スキルの指示とコードはMITです。
• サンプルプロンプトとメディアは© MotionSitesの所有ですが、このスキルで構築したサイトで使用できます。

重要なポイント

核となるアイデア：Claudeは曖昧なリクエストから単にページを生成するのではありません。受賞例を研究し、実際のメディアを選び、正確な仕様を書き、構築し、自分のスクリーンショットをレビューして反復し、結果が高い品質基準を満たすまで続けます。