Website Prompt Generator

このスキルは、ユーザーのアイデアやアップロードされた参照画像セットを、AIコーディングアシスタント（Cursor、Lovable、Bolt、v0など）に投入してサイトを構築するための、非常に詳細で包括的なビルドプロンプトに変換します。

⚡ モード選択: 最初にお読みください

何かを行う前に、該当するモードを決定してください:

状況	モード
ユーザーがアイデアを言葉でのみ説明	[テキストモード] — 説明から生成
ユーザーが1枚以上の画像/スクリーンショット/モックアップをアップロード	[画像ブループリントモード] — まず画像を分析し、次に生成
ユーザーが画像をアップロードし、説明も提供	[画像ブループリントモード] — 画像を優先; 説明はコンテキストとして使用

画像が存在するが表示できない場合は、再アップロードまたは貼り付けをユーザーに依頼してください。画像が提供された場合に、想像からブループリントを作成しないでください。

💬 ステップ 0A: 生成前アンケート (インタラクティブセッションのみ)

アクティブな会話（インタラクティブセッション）では、UI/UXスクリプトを実行する前、またはビルドプロンプト/ブループリントを生成する前に、プロジェクト要件を明確にするために、短くユーザーフレンドリーな選択式アンケートを提示する必要があります。これは、デザインシステムとテクノロジースタックをユーザーの正確なニーズに合わせて調整するのに役立ちます。

ユーザーに以下の質問に答えるよう依頼してください（例:「1A、2B、3C、4A、5F、6C」のように回答）:

構築するウェブサイトのタイプは何ですか？
- オプション A: ポートフォリオ / パーソナルウェブサイト（プロジェクト、履歴書、スキル、連絡先を紹介）
- オプション B: SaaS / プロダクトランディングページ（ソフトウェア製品、機能、価格、お客様の声をマーケティング）
- オプション C: コーポレート / エージェンシーウェブサイト（ビジネスサービス、チーム、クライアントロゴ、連絡先）
- オプション D: Eコマース / オンラインストア（商品一覧、ショッピングカート、チェックアウト体験）
- オプション E: クリエイティブ / 没入型ショーケース（視覚的に豊か、3D要素、インタラクティブアニメーション、または3D表示）
- オプション F: その他（具体的に指定）
ターゲットとするテクノロジースタックは何ですか？
- オプション A: HTML + CSS（Vanilla + Tailwind CSS、軽量シングルページ）
- オプション B: React + Vite + Tailwind CSS + Framer Motion（モダンで動的なSPA）
- オプション C: Next.js (App Router) + Tailwind CSS + shadcn/ui（フルスタック対応テンプレート）
- オプション D: SvelteKit または Vue / Nuxt + Tailwind CSS
- オプション E: その他（具体的に指定、例: Astro、モバイルフレームワーク）
主要なレイアウトと構造の好みは？
- オプション A: スクロール可能なシングルページランディングページ（クイックコンバージョン/シンプルな製品に最適）
- オプション B: マルチページサイト（ホーム、アバウト、サービス、お問い合わせ、ブログなど）
- オプション C: ダッシュボード / ウェブアプリケーションインターフェース（インタラクティブなチャート、テーブル、サイドバーナビゲーション、プロフィール）
- オプション D: ドキュメント / リソースセンター（検索バー、ネストされたサイドバーメニュー、記事グリッド、ドキュメントレイアウト）
- オプション E: ミニマリストな「準備中」 / Link-in-bio（クイックCTA/リンク付きのシングルスクリーンヒーロー）
ブランドに最適なタイポグラフィスタイルは？
- オプション A: モダンサンセリフ（Inter、Roboto、Outfit - クリーンでニュートラル、標準的なテクノロジー/SaaS）
- オプション B: エレガントセリフ（Instrument Serif、Playfair Display - エディトリアル、ラグジュアリー、ファッション、ブティック）
- オプション C: テクニカルモノ（JetBrains Mono、Fira Code - 開発者ツール、Web3、データベースポータル）
- オプション D: 幾何学的で親しみやすい（Lexend、Montserrat、Poppins - マーケティング、SaaS、スタートアップ、教育）
- オプション E: ディスプレイ / スタイライズド（Syne、Clash Display - クリエイティブエージェンシー、ハイエンドデザイン、芸術的、大胆な見出し）
ブループリントに必要なサードパーティ統合はありますか？
- オプション A: シンプルなリード獲得（メールお問い合わせフォーム、Resend/Mailchimp経由のニュースレター登録統合）
- オプション B: Eコマースと決済（Stripeチェックアウト、製品支払い、価格帯リダイレクト）
- オプション C: 認証とデータベース（Clerk / Supabaseログイン、ユーザープロフィール、バックエンドストレージ）
- オプション D: ヘッドレスCMS（Sanity、Strapi、Contentful を使用したブログ記事/記事/ポートフォリオアイテム）
- オプション E: インタラクティブデータ / 分析（Recharts/Chart.jsグラフ、Google Analyticsトラッキング）
- オプション F: なし / 静的ビルドのみ（純粋なフロントエンドコンポーネント/レイアウト）
実装したいテーマ/モードの動作は？
- オプション A: 強制ダークモードのみ（スタイリッシュ、開発者向け、ゲーム、エンターテイメント、クリエイティブ）
- オプション B: 強制ライトモードのみ（クリーン、医療、コーポレート、高いWCAGアクセシビリティ）
- オプション C: 動的モードトグル（ユーザーがボタン/スイッチを使用してライトモードとダークモードを切り替え可能）
- オプション D: システムデフォルト自動切り替え（ユーザーのOSカラースキーム設定に基づいて自動適応）

🎨 ステップ 0B: UI/UX デザインインテリジェンスの取得と適用 (必須)

ビルドプロンプトやブループリントを作成する前に、このスキルにバンドルされた検索スクリプトを実行して、レイアウト、タイポグラフィ、カラーに関する推奨事項を取得してください。この厳選されたデータベースに依存することで、生成されるデザインシステムは業界でテストされ、アクセシビリティに準拠し、製品のビジネスドメインに完全に適合したものとなり、推測や一般的なカラーチョースに依存することを防ぎます。

1. 主要属性の抽出

ユーザーの説明または参照画像から以下を特定します:

製品タイプ / 業界: (例: SaaS、フィンテック、美容/スパ、教育、ポートフォリオ、医療、Eコマース)
ビジュアルキーワード / 雰囲気: (例: ミニマル、グラスモーフィズム、ダークモード、ブルータリズム、ソフトUI、ラグジュアリー)
ターゲットスタック: (例: html-tailwind (デフォルト)、react、nextjs、vue、svelte、swiftui、react-native、flutter、shadcn、jetpack-compose、astro、nuxt-ui、nuxtjs)

2. UI/UX Pro Max CLI コマンドの実行

ワークスペースで run_command ツールを使用して以下のターミナルコマンドを実行し、デザインシステムパラメータとスタックガイドラインを取得します:

完全なデザインシステムの生成:
```
py .agents/skills/website-prompt-generator-skill-main/scripts/search.py "<product_type> <industry> <visual keywords>" --design-system -p "Project Name"
```
ヒント: マルチページのウェブアプリまたは永続化が必要な場合は、--persist を追加してデザインシステムを design-system/MASTER.md (グローバルな信頼できる情報源) に、ページ固有のオーバーライドを design-system/pages/[page-slug].md に保存します。生成されたビルドプロンプトでは、開発者ツールにこれらのマークダウンファイルを確認して従うように明示的に指示します。
スタックガイドラインの取得 (特定のテクノロジースタックがリクエストまたは選択された場合に実行):
```
py .agents/skills/website-prompt-generator-skill-main/scripts/search.py "<layout/component/responsive keywords>" --stack <stack_name>
```
ドメインガイドラインの取得 (ux、accessibility、animation、landing、chart に関する特定のガイドラインが必要な場合):
```
py .agents/skills/website-prompt-generator-skill-main/scripts/search.py "<topic keywords>" --domain <domain_name>
```

3. 結果の解析と統合

これらのスクリプトのコンソール出力を解析し、以下のように適用します:

パレット: スクリプト出力から正確なプライマリ、セカンダリ、背景、テキスト、CTAのHEX/HSLカラーをCSS変数テンプレートに直接マッピングします。
タイポグラフィ: 推奨されるGoogle Fontsのペアリング（特定のウェイトとCSSインポートリンクを含む）を見出しフォントと本文フォントに適用します。
主要エフェクト: データベースから返された特定のエフェクト（例:「曇りガラス」、「微妙な奥行きのある影」、「クリアな3pxフォーカスリング」）を実装します。
制約 / アンチパターン: 「AVOID」警告（例:「ネオンカラー禁止」、「紛らわしい予約フロー禁止」、「レイアウトシフトを引き起こすスケール変換禁止」）を抽出し、制約セクションの下にリストします。

4. ビジュアル品質ガイドラインの実施

出力プロンプト/ブループリントは、ui-ux-pro-max チェックリストからの以下のコアルールを開発者ツールが遵守するように明示的に指示する必要があります。これらはプレミアムなビジュアルデザインを達成するために重要です:

アイコンとビジュアル要素: Lucide、Heroicons、またはSimple Iconsからの公式ブランドSVGを使用します。絵文字はUIアイコンとして使用してはいけません。プレミアムデザインでは未完成でプロフェッショナルでない印象を与えます。
トランジションとホバー: トランジション速度を150msから300msの間に標準化します（例: transition-colors duration-200）。この範囲外のトランジションは、動作が遅いか、またはきつすぎると感じられます。すべてのホバー可能またはクリック可能な要素に cursor-pointer を設定して、インタラクティブ性をユーザーに知らせます。ホバーエフェクトは、レイアウト内の他の要素をシフトさせるようなスケーリング変換を避ける必要があります。
ライト/ダークコントラスト: 通常の本文テキストには4.5:1以上の最小コントラスト比を確保し、読みやすさを保証します。ライトモードのガラス要素には、高い不透明度のレイヤー（bg-white/80 以上）と、目に見える薄いグレーの境界線（border-gray-200）を使用して、カードが明るい背景に対して埋もれてしまうのを防ぎます。
レイアウトとスペーシング: フローティングナビゲーションバーには、ウィンドウの端に窮屈に感じさせないように、オフセットマージン（top-4 left-4 right-4 など）を設ける必要があります。明示的なz-index値で意図的にレイヤー化されている場合を除き、要素の重なりを避けます。一貫したコンテナ幅を維持します（例: max-w-6xl または max-w-7xl）。
アクセシビリティ: キーボードのみのナビゲーションを支援するために、キーボードフォーカスリングが表示されるようにします。すべてのフォームフィールドには説明的なラベルが必要であり、すべての画像には代替テキストが必要であり、トランジションはユーザーの prefers-reduced-motion 設定を尊重する必要があります。
SF/サイバーパンクHUDワイヤーフレーム禁止: 装飾的なノード/星座グラフ、破線のポリゴンワイヤーフレーム接続線、未来的なHUDスタイルの図を使用しないでください。これらの要素は未完成で時代遅れに見えます。代わりに、クリーンなタイポグラフィ階層、構造化されたチャート、実際のUIモックアップ、またはプレミアムなグラデーション/シャマーサーフェスを使用します。
デバイスレスポンシブ性: すべてのレイアウト、セクション、コンポーネントは完全にレスポンシブである必要があり、すべての画面（モバイル、タブレット、デスクトップ）で例外的に見えるように最適化されている必要があります。レイアウトはモバイルファーストで構築し、固定ピクセル幅の代わりに相対的/流動的単位（clamp()、vw、%、dvh など）を使用し、アダプティブスケーリングにはCSS GridとFlexboxを活用し、コンポーネントレベルのレスポンシブ性にはコンテナクエリ（@container）を実装する必要があります。水平方向のオーバーフローがゼロであること、フォントサイズが適切にスケーリングされること、モバイルデバイスでのタップターゲットが最小44x44pxであることを確認します。

5. インタラクティブな選択とプレビュー (インタラクティブセッションのみ)

アクティブな会話では、最終的な完全なビルドプロンプト/ブループリントを生成する前に、取得したデザイントークン（プライマリ/セカンダリ/CTAカラー、タイポグラフィペアリング、レイアウトパターン、チェックリスト）の簡単な概要をユーザーに提示し、承認または調整を求めます。これにより、ユーザーの同意が確保されます。

📝 テキストモード

画像がアップロードされていない場合に使用します。

アプローチ

熟練したテクニカルUI/UXデザイナー兼フロントエンドアーキテクトとして機能します。結果のプロンプトは、何も推測の余地を残さないように、正確なテクノロジースタック、色、タイポグラフィ、レイアウト、アニメーション、コンテンツ構造を指定します。ステップ 0B: UI/UX デザインインテリジェンスの取得 からのすべての発見事項を組み込みます。

重要ステップ: このスキルには、references/core/animated-web-prompts.md にユニバーサルコンポーネントプロンプトライブラリがバンドルされています。生成する前に、grep_search または view_file を使用して、ユーザーのリクエストスタイルまたはドメインに一致する1〜3個のエントリを見つけてください。それらを分析し、その構造、技術的な特異性のレベル、ブラケット/プレースホルダーの規則、アニメーション技術を研究し、独自のコンポーネントとアニメーションを使用して完全に新しいプロンプトを生成します。サンプルを逐語的にコピーしたり、ライブラリテキストをそのまま出力として返さないでください: サンプルは品質基準を設定し、フォーマットを示すものであり、成果物ではありません。この手順をスキップしないでください！さらに、Anime.jsがリクエストされた場合、またはアニメーション要件（SVGモーフィング/描画、複雑なスターターグリッド、カスタムタイムラインなど）に最適な場合は、references/animations/animejs/animejs-api-reference.md と references/animations/animejs/animejs-examples.md を読み込んで、正しい構文、ツリーシェイク可能なインポート、クリーンなReactコンポーネント構造（コンポーネントライフサイクルクリーンアップに createScope を使用）を確保してください。同様に、GSAP ScrollTriggerがリクエストされた場合、または高度なスクロール駆動アクション（ピン止め、複雑なスクロールタイムライン、スクロールスクラビング、コールバックバッチ処理など）に最適な場合は、references/animations/gsap/gsap-scrolltrigger-reference.md を読み込んで、正しいプラグイン登録と @gsap/react / useGSAP() フックを使用した適切なクリーンアップを確保してください。

出力フォーマット (テキストモード)

出力全体を単一の ```markdown ブロックでラップして、コピー＆ペーストしやすくします:

Build Prompt: [ウェブサイトのキャッチーなタイトル]
Build a [サイトの種類] with [主要なビジュアル機能].

## グローバルデザインシステムリファレンス
- 注: 永続化されている場合、開発者ツールはデザイントークンの唯一の信頼できる情報源として `design-system/MASTER.md` および `design-system/pages/` 配下のページオーバーライドを検査する必要があります。

## UI/UX デザインの根拠とアクセシビリティ
- 選択したカラーパレットの認知的ロジックを説明します（例:「濃い青はフィンテックのセキュリティを伝えます; WCAGコントラストは5.2:1です」）。
- タイポグラフィのペアリングが製品ドメインに適合する理由を詳しく説明します（例:「Instrument Serifはラグジュアリーなエディトリアル感を加え、クリーンなBarlow本文テキストでバランスを取っています」）。
- スペーシングのリズムとインタラクティブトランジションの選択を説明します（例:「カードの200ms ease-outは、応答性をスナッピーでありながらスムーズに感じさせるため」）。

## テクノロジースタック
- React + Vite + TypeScript
- Tailwind CSS
- Framer Motion / Motion、Anime.js (v4)、GSAP + ScrollTrigger、Spline 3D / React Three Fiber / 3D WebGL、React Spring。注: 生成されるプロンプトには、これらすべてのアニメーションおよび3Dテクノロジーが含まれ、各テクノロジーにつき少なくとも2つ以上のコンポーネント、セクション、またはアニメーションシーケンスが含まれている必要があります。
- Lucide React

## フォント
- 特定のGoogle Fontsを指定します（例: Instrument Serif + Barlow:300;400;500;600）。ウェイトの使用方法を含めます。

## カラーシステム / テーマ
- 背景（bg）、前景（fg）、アクセント、ミュートの正確なHEX/HSL値を使用して、CSS変数またはTailwindトークンを定義します。

## レイアウト構造
[ページの主要セクションを記述]

## コンポーネントの内訳
### 1. ナビゲーションバー
- **位置**: sticky top-0, backdrop-blur-lg, dark:bg-gray-900/80
- **項目**: Logo.svg、リンク、CTAボタン
- **モバイル**: ハンバーガーメニュー、シートオーバーレイ

### 2. ヒーローセクション
[構造、アニメーション、テキスト配置を定義]

...

## アニメーション仕様
- **Framer Motion**: コンテナのstaggerChildren (0.1s)、scale + fade on scroll into view、whileHover: カードのy: -6
- **Anime.js**: SVGパス描画 (duration: 1500, easing: easeOutQuad)、スターターグリッド
- **GSAP + ScrollTrigger**: 水平パネルスクロール (scrub: 1)、マスタータイムライン
- **React Three Fiber**: 浮遊する3Dジオメトリ (mouse follow parallax)
- **React Spring**: バネベースの番号カウンター (config: { mass: 1, tension: 280, friction: 60 })

## レスポンシブルール
- モバイルファーストブレークポイント: 640px, 768px, 1024px, 1280px
- グリッド: 1列 (モバイル) → 2列 (タブレット) → 3列 (デスクトップ)
- タッチターゲット: 最小44x44px

## アクセシビリティ
- すべてのインタラクティブ要素に aria-label
- prefers-reduced-motion: アニメーションをフェードのみに削減
- フォーカスリング: ring-2 ring-offset-2 ring-accent
- スキップリンク: "メインコンテンツにスキップ"

## 制約
- サイバーパンクHUDワイヤーフレーム禁止
- レイアウトシフトを引き起こすスケール変換禁止
- アイコンとしての絵文字禁止

🖼️ 画像ブループリントモード

ユーザーが1枚以上の画像をアップロードした場合に使用します。

アプローチ

画像の分析: アップロードされた各画像について、以下を詳細に説明します:
- レイアウト構造とセクションの識別
- カラーパレット (支配的な色、アクセント色、テキストの背景コントラスト)
- タイポグラフィ (フォントファミリーの推測、サイズ階層、行間)
- インタラクティブ要素 (ボタン、フォーム、ナビゲーションパターン)
- アニメーション効果 (該当する場合: ホバー状態、トランジション、スクロール挙動)
- ブランド要素 (ロゴ配置、ファビコンの可能性、全体的なブランドの雰囲気)
UI/UX Pro Maxからのデザインシステム取得: 画像分析からのキーワードを使用して、ステップ 0Bと同じスクリプトを実行します。
分析の統合: 視覚分析をデザインシステムデータとブレンドします。
ブループリントの生成: テキストモードと同じフォーマットに従いますが、自明でないすべての設計上の決定を画像観察に基づいて正当化します。

画像分析のガイドライン

色については、画像に適用される主要なHEX値を推測して出力します。
タイポグラフィについては、画像のフォントに最も近い一致として、Google Fontsのペアリング（タイポグラフィのスタイル、セリフ/サンセリフ、見出し/本文の推定など）を提案します。
レイアウトについては、ワイヤーフレームの構造を説明します（例:「セクションAは3列のカードグリッド（この画像では1行）で、セクションBは左右にコンテンツがあります」）。
アクセシビリティとUI/UXの状態（ホバー、クリック、フォーカス、ローディング）が画像にないことに注意します。これらの状態は青色で定義する必要があります。

画像ブループリントの出力フォーマット

Build Prompt: [アップロードされた参照からのプロジェクト名]

## 画像分析
[アップロードされた各画像の構造化された分析]

## UI/UX デザインの根拠
[デザインシステムの選択を画像とデータベースのフィードバックに基づいて正当化]

## グローバルデザインシステムリファレンス
...

[以下、テキストモードと同じフォーマット]

isumenuka/website-prompt-generator-skill

website-prompt-generator-skill とは？

お気に入りのAIに質問する

ドキュメント

Website Prompt Generator

⚡ モード選択: 最初にお読みください

💬 ステップ 0A: 生成前アンケート (インタラクティブセッションのみ)

🎨 ステップ 0B: UI/UX デザインインテリジェンスの取得と適用 (必須)

1. 主要属性の抽出

2. UI/UX Pro Max CLI コマンドの実行

3. 結果の解析と統合

4. ビジュアル品質ガイドラインの実施

5. インタラクティブな選択とプレビュー (インタラクティブセッションのみ)

📝 テキストモード

アプローチ

出力フォーマット (テキストモード)

🖼️ 画像ブループリントモード

アプローチ

画像分析のガイドライン

画像ブループリントの出力フォーマット

関連スキル

steipete/sag

steipete/oracle

steipete/peekaboo

mattpocock/design-an-interface

mattpocock/prototype

mattpocock/grill-me