MotionSites プロンプトキャプチャ は何をしますか？
目標
ユーザーがウェブサイト/UI デザインのリクエストを行った際に、motionsites.ai にアクセスして最適なプロンプトテンプレートを見つけ、ユーザープロジェクト向けの最適化計画を提供します。このスキルの出力は「推奨プロンプト + 最適化計画」であり、コードを直接記述するものではありません。
ワークフロー
1. 要件の抽出
まず、重要な情報を確認します。情報が不足している場合は、合理的なデフォルト値で進め、過度に質問を繰り返さないでください。
- サイトタイプ: ランディングページ / SaaS 公式サイト / ポートフォリオ / エージェンシーサイト / ヒーローセクション / EC ページなど
- ビジュアルスタイル: ダーク、グラスモーフィズム、グラデーション、ミニマル、3D、パーティクル背景など
- アニメーション要件: スクロールアニメーション、パララックス、スムーススクロール、3D インタラクションなど
- コンテンツ構造: 必要なセクション（ナビゲーション、ヒーロー、特徴、料金、フッターなど）
- 技術スタック: デフォルトは React/Next.js + Tailwind + shadcn/ui（Build Web Apps プラグイン環境）。ユーザーが他のスタックを指定した場合はそれを優先します。
2. motionsites.ai へのアクセス
- 可能な場合は、アプリ内ブラウザ（ユーザーが既に開いている、または利用可能な場合）を使用して https://motionsites.ai/ を開き、カテゴリ（SaaS、Agency、Portfolio、Landing pages、Hero sections など）を閲覧します。
- ブラウザが使用できない場合は、
open_pageまたはウェブ検索を使用してページ情報を取得します。このサイトは JS でレンダリングされる SPA であり、静的スクレイピングではカテゴリコンテンツを取得できない可能性があることに注意してください。その場合は、ブラウザを使用して閲覧する方が正確である旨を説明します。 - 「タイプ + スタイル + アニメーション」の3つの軸でフィルタリングし、最もマッチするプロンプトを1～3個選択します。
3. 推奨プロンプトの出力
- 選択したプロンプトの原文を完全に表示します。改変や翻訳は行わないでください。
- 各プロンプトのマッチング理由（なぜユーザーの要件に適しているか）を説明します。
- 完全に一致するプロンプトが見つからない場合は、最も近いものを選択し、差異を明確に指摘します。存在しないプロンプトを決して捏造しないでください。
4. 最適化計画の提示
ユーザーの実際のプロジェクトに基づいて、最適化ポイントを箇条書きで列挙します。
- 技術スタックの適応: プロンプトはデフォルトで Lovable/Bolt/Cursor/Claude を対象としています。ユーザーのスタック（デフォルトは React + Tailwind + shadcn/ui）への移行方法、コンポーネントの分割、デザイントークンの再利用について説明します。
- アニメーション実装: motionsites は GSAP ScrollTrigger + Lenis スムーススクロールをよく使用します。実装時の重要なトレードオフ（パフォーマンス、フォールバック、アクセシビリティ、
prefers-reduced-motion）について説明します。 - ビジュアルアセット: ヒーロー画像、テクスチャ、アイコンが必要な場合、imagegen を使用して生成するか、プロンプトで指定されたリソースから導入する方法を説明します。
- 検証方法: 実装後、playwright / frontend-testing-debugging を使用してブラウザ検証（レスポンシブ、アニメーション、コンソールエラー）を行います。
- リスクの注意: プロンプト内の現在のプロジェクトに適用できない可能性のある部分（依存関係、パフォーマンスオーバーヘッド、コンテンツプレースホルダー）を指摘します。
5. 終了
最後に、ユーザーに最適化計画に従って実装を開始するかどうかを確認します。ユーザーが承認するまではコードを記述しません。
トリガー例
- 「ウェブサイトを作成して、UIデザインも使いたい」
- 「SaaSのランディングページを作りたいので、MotionSitesからプロンプトを探して」
- 「ヒーローアニメーション付きのポートフォリオサイトを作って、まずは計画を提示して」
注意事項
- 「プロンプトを探す」ステップを飛ばして、いきなりコードを記述しないでください。
- プロンプトの原文はそのまま維持します。最適化計画はユーザーのプロジェクトに基づきますが、デフォルトではプロンプト自体を書き換えません（ユーザーが要求した場合を除く）。
- motionsites.ai の内容を記憶に頼って推測するのではなく、ブラウザで実際に閲覧してから選択することを優先します。