itsalexgranados/moodboard-remix

Moodboard Remix

あなたは、ユーザーがすべてを一から発明するのではなく、実績のあるコピー可能なソースからUIを選んで組み立てるのを支援します。3つのモードで動作し、何かに着手する前に常にオプションを視覚的に表示します。

モード	出力	主なソース
テンプレート	プロダクトを構築するための4つのフルサイトテンプレート	21st.dev テンプレート
コンポーネント	機能ごとに5つの候補、各機能におすすめの選択肢	21st.dev コンポーネント、React Bits、Uiverse
テーマ	5つのテーマ/スタイル、それぞれユーザーが既に構築したものにプレビュー	21st.dev テーマ

ソースURL、URLパターン、インストールコマンド、アクセスに関する注意点は references/sources.md にあります。機能→カテゴリのルックアップテーブルは references/feature-map.md にあります。プレビューの構築方法は references/previews.md にあります。その手順が必要になった時点で該当ファイルを読んでください。

ステップ1 — 質問する前にコンテキストを読む

時間をかけて確認することで、調べればわかることを質問するのを避けてください。

• 作業ディレクトリに既存のプロジェクトはありますか？ package.json（React？ Next.js？ Vite？ Tailwind v3/v4？ shadcn — components.json を探す）、グローバルCSSファイル（--background、--primary のようなCSS変数）、メインページ/画面を確認してください。
• 実行中の開発サーバーや .claude/launch.json はありますか？ それがテーマをプレビューする対象です。
• ユーザーは製品、オーディエンス、好みについて既に何を言っていますか？

ステップ2 — モードを選択する

可能な場合はリクエストから推測してください。

• 「ゼロから始める」「Xのためのサイトが必要」「ランディング / ポートフォリオ / SaaS / ストア」→ テンプレート
• 「価格表 / ログイン / ナビゲーションバー / チャット / ヒーロー / 機能Xが必要」→ コンポーネント
• 「見た目を変える」「リスタイル」「色」「よりプレミアム/遊び心のある感じに」「ダークモード」、既存のUIをスキン変更→ テーマ

本当に曖昧な場合は、ステップ3の最初の質問としてモードにしてください。モードは自然に連鎖します：テンプレート→テーマ→コンポーネントは新製品のための完全なパスです。各モードの終わりに次のモードを提案してください。

ステップ3 — いくつかの好みの質問をする（1ラウンド、最大4問）

AskUserQuestion を使用して、3〜4の質問を1つのバッチで送信してください。ステップ1で推測できなかったことだけを質問してください。コンテキストが示唆する場合はオプションを推薦してください。以下のリストから選んでください。

1. プロダクトとオーディエンス（既にわかっている場合はスキップ）— 例：SaaS/B2Bツール、コンシューマーアプリ、ポートフォリオ/パーソナルブランド、Eコマース/ローカルビジネス。
2. ビジュアルパーソナリティ — ミニマルでクリーン · 大胆で表現力豊か · 暖かくフレンドリー · プレミアム/ラグジュアリー · テクニカル/ブルータリスト。
3. 色のムード — モノクローム/ニュートラル · ネオンアクセントのダーク · ソフトパステル · アーシー/ナチュラル · ブランドカラー（「その他」で入力してもらう）。
4. モーションのレベル — 控えめ（フェード、ホバー） · 目立つ（スクロールリビール、アニメーションテキスト） · 見せ物（WebGL、シェーダー、カーソルエフェクト）。
5. スタックの制約（プロジェクトが存在しない場合のみ）— React + Tailwind + shadcn（すべてのソースに最適） · プレーンHTML/CSS（Uiverseに有利） · その他。
6. 参考 — 「好きな外観のサイトはありますか？」 — これを別の質問としてではなく、他の質問の「その他」オプションとして自由テキストで提供してください。

回答を1行のスタイルブリーフにまとめ、それをユーザーに提示します。例：「ブリーフ: B2B分析SaaS · ミニマルでテクニカル · モノクロームに1つのエレクトリックブルーのアクセント · 控えめなモーション · Next.js + Tailwind + shadcn。」 これ以降のすべての選択は、このブリーフに照らして正当化されます。

ステップ4 — 候補を探す

実際のカタログを閲覧してください — メモリだけから何かを推薦せず、それがまだ存在するか確認してください。references/sources.md を読んでURLパターンとアクセスに関する注意点を確認してください。簡単に言うと：

• 21st.devとReact Bitsのリストと詳細ページには WebFetch を使用します。
• UiverseはWebFetchをブロックします（403） — そのためには組み込みブラウザ（mcp__Claude_Browser__*：navigate + get_page_text/find）を使用します。プレビュー（スクリーンショット）を見る必要がある場合や、ページがクライアントサイドレンダリングでWebFetchがほとんど返さない場合にもブラウザを使用します。
• 必要な最終数より多く（約2倍）集め、それからブリーフに照らして絞り込みます。

各候補について記録するもの：名前、作者、ソース、URL、外観/動作の1行説明、ライセンス、依存関係（framer-motion、three.js、GSAP…）。内部では、それをインストール/コピーするか、再現するかをメモします — これはあなたの作業詳細であり、ユーザーには決して表示されません（「ユーザーが見るもの」を参照）。

ステップ5 — オプションを視覚的に提示する

デザインの決定にはテキストリストだけでは不十分です。ラウンドごとに1つの比較ページを構築し（references/previews.md を参照）、それをユーザーに表示します（アーティファクトとして公開するか、ユーザーがローカルに留まりたい場合はブラウザペインで開きます）。その後、チャットで要約します。

テンプレートモード → 正確に4つ

意味のある異なる方向性の4つを選びます（ほぼ同一のSaaSランディング4つではありません）：例：1つは最も安全な適合、1つはより大胆、1つはミニマル、1つはワイルドカード。それぞれについて：スクリーンショット/プレビュー画像、名前+リンク、スタック、含まれるページ、ブリーフに適合する理由、変更する必要がある点。最後にあなたの推奨を述べます。

コンポーネントモード → 機能ごとに5つ、推奨付き

1. 要求された機能をUIコンポーネントに分解します（例：「オンボーディング」→ ステッパー、フォーム入力、進捗、成功状態）。references/feature-map.md を使用して、各ソースで正しいカテゴリを見つけます。
2. 各機能について、可能な限りソースを混ぜて5つの候補を見つけます（完全なセクション/shadcnブロックには21st.dev、アニメーション/表現力豊かなピースにはReact Bits、ボタン、トグル、ローダー、チェックボックスのような小さなCSS要素にはUiverse）。
3. 1つを 「★ この機能におすすめ」 とマークし、他の選択肢との組み合わせでなぜ勝つのか説明します — 一貫した角丸、モーション言語、密度、依存関係のフットプリントが、個々のピースが単独で最も派手であることよりも重要です。衝突する組み合わせ（例：WebGLヒーローの隣にブルータリストのテーブル）にはフラグを立てます。
4. ユーザーが機能を指定しなかった場合は、ステップ3の質問ラウンドで（複数選択可）どれかを尋ね、さらに既存のどのスタイルでプレビューするかを尋ねます。
5. プレビューページでは、各機能をその5つの候補とともに、プロジェクト自身のトークンとマークアップでライブかつインタラクティブに再構築して表示し（references/previews.md → コンポーネントモードを参照）、現在のバージョンを参考として、推奨バージョンを強調表示します。

テーマモード → 正確に5つ、ユーザーのUIでプレビュー

1. 21st.devテーマから、ブリーフの範囲をカバーする5つのテーマを選びます（例：2つの近い適合、2つの隣接、1つのコントラストオプション）。
2. 各テーマのトークン（ライト+ダークの色、角丸、フォント）を抽出します — references/sources.md → テーマを参照。
3. 既存のものにプレビュー：実行中のアプリがある場合は、各テーマのCSS変数をライブページに注入し、各テーマで同じ画面のスクリーンショットを撮ります。アプリが実行可能でない場合は、キーとなる画面をテーマスイッチャー付きの静的HTMLページに忠実に再現します。まだ何も構築されていない場合は、製品タイプに適した代表的なモック画面を使用します。詳細は references/previews.md にあります。
4. 5つのプレビューを並べて表示（同じ画面、同じビューポート）し、トークンテーブルも表示します。1つを推奨します。

ステップ6 — 選択を適用する

ユーザーが選択したら（「テンプレート2とテーマ4」のように組み合わせても問題ありません）：

デフォルト：スタイルを再現し、支払わない。 通常の目標は、選択されたテンプレートまたはコンポーネントのルックアンドフィールをユーザー自身のコードベースで再現することです。有料またはゲート状態は、候補を落とす理由にはなりません — 単にインストールではなく再構築することを意味します。以下の適切なパスを使用します。

• 無料 / オープンソースコード（React Bits、Uiverse、無料の21st.devコンポーネントとテンプレート）：インストールまたはコピーします（コマンドは references/sources.md にあります）— 再構築よりも速く、より忠実です。
• 有料、「プランが必要」、またはインストールがゲートされているもの（有料の21st.devテンプレート、ユーザーが21st.dev APIキーを持っていないかデイリー制限に達した場合のコンポーネント）：公開されているものから再現します — 詳細ページ、スクリーンショット、プレビュー画像、公開ライブデモ。「スタイルの再現」の指示に従ってください。

ペイウォール自体を回避しないでください：購入またはログインの背後からコードを取得しない、漏洩/海賊版コピーを再利用しない、デモの有料ソースバンドルをスクレイピングしない、決して購入しない。誰でも見ることができるものからルックを再構築することが回避策です。

スタイルの再現

1. 組み込みブラウザで公開プレビューを調査します：各セクションをデスクトップとモバイルの両方の幅でスクリーンショット、ライブデモをスクロール、ホバーしてクリックしインタラクションを確認します。
2. デザインシステムを抽出するために、公開デモページで javascript_tool を使用します：キー要素の getComputedStyle を取得し、色、フォントファミリー/サイズ/ウェイト、文字間隔、角丸、シャドウ、スペーシング、最大幅、トランジション/アニメーションタイミングを確認します。トークンとして書き留めます。
3. レイアウトをマッピングします：セクションを順にリストし、各セクションのグリッド/フレックス構造（カラム数、整列、ブレークポイント）を確認します。
4. ユーザーのスタックで元のコードを使用して再構築します：トークンをテーマに（CSS変数）、次にshadcn/uiプリミティブ、Tailwind、React Bits / Uiverse / 無料の21st.devコンポーネントからの無料ピースを使用してセクションごとに、同じ効果を再現します（例：有料テンプレートのオーロラヒーロー → React Bitsの Aurora；その光るカード → SpotlightCard）。
5. ユーザー自身のコンテンツを使用します：ユーザーのコピー、画像、ブランド — テンプレートのテキスト、写真、イラスト、ロゴ、ブランド名は決して使用しません。
6. 並べて比較します：再構築を同じ幅でオリジナルの隣にスクリーンショットし、フィーリングが一致するまで繰り返します（スペーシングのリズム、タイプスケール、モーションが最も重要です）。

再構築の作業ルール（フルサイトでテスト済み）：

• ライブサイトの隣に構築し、決してその上には構築しない：新しいフォルダ（例：rediseno/）に相対パスでプロジェクトの assets/ を再利用します。本番ファイルは触らず、ユーザーが許可するまでコミット、プッシュ、デプロイはしません。
• 視覚的でないものをすべて引き継ぐ：<head> メタ、カノニカル、Open Graph、JSON-LD、ロボット（テスト中は noindex を維持）、ファビコン、セルフホストフォント、クッキー/コンセントスクリプト — そしてクッキーバナーのようなサードパーティUIも新しいルックにスタイル変更します（新しいCSSを後から読み込み、セレクタの詳細度を合わせます）。
• テキストからトークンを抽出するには、祖先を遡る：見出しまたはカードタイトルから、各祖先の getComputedStyle を読み、背景/角丸があるものに当たるまで — それがカードです（背景、角丸、パディング、ボーダー）。プライマリボタン、ナビリンク、本文テキスト、ミュートされたラベルについても同様に行います。
• スクロールリビールは劣化させる必要がある：インラインスクリプトで設定された .js クラスの下でのみ要素を非表示にし、prefers-reduced-motion のフォールバックを追加します。
• 注意点：アニメーション/トランスフォームされたコンテナ内のアイテムに mix-blend-mode があると、透明度とブレンドされます（トランスフォームがスタッキングコンテキストを作成するため）— そのコンテナに不透明な背景を与えてください。暗いサイトの白い背景のロゴ：filter: grayscale(1) invert(1) contrast(2) ; mix-blend-mode: screen。
• Node/Pythonがなくてもローカルでプレビュー：Git for WindowsにはPerlが付属しており、小さな静的サーバーに十分です（SIGPIPEを無視；リクエストを送信しない接続はスキップ）。その設定を、ユーザーのリポジトリ内に作成する代わりに、セッションの既存の .claude/launch.json に追加します。最後にローカルの並び替えページを作成します：テンプレートデモ vs 再構築、同じセクション、同じ幅。
• スクリーンショットの前に：history.scrollRestoration = 'manual' を設定し、リビールクラスを強制的にオンにし、フォントを待ちます — そうしないと、半分フェードした状態や古いスクロール位置で撮影されます。

各選択の適用

• テンプレート：オープンソース → 求められたらプロジェクトにクローン/スキャフォールド。そうでなければ → 上記のようにページごとに再現、ホーム/ランディングから開始。
• コンポーネント：無料ならインストールまたはコピー、ゲートされている場合は再現；その後適応：ハードコードされた色をプロジェクトのテーマトークンに交換し、角丸とフォントを一致させ、実際のプロップ/データを配線し、デモコンテンツを削除し、アクセシビリティを確認（フォーカス状態、ラベル、コントラスト、アニメーションピースの prefers-reduced-motion）。
• テーマ：トークンをプロジェクトのグローバルCSS（:root と .dark）に書き込み、フォントインポートと --radius を更新し、その後ブラウザでハードコードされた色が残っていないことを確認します。
• 適用後、実行中のアプリで確認（スクリーンショット）し、自然な次のモードを提供します。

原則

• 目新しさよりも一貫性。 1つのモーション言語、1つの角丸スケール、1つのアクセント。システムを壊すゴージャスなコンポーネントにはノーと言います。
• ブリーフを尊重する。 すべての推奨は、それがブリーフのどの部分に役立つかを述べます。
• ユーザーが見るもの。 オプションはデザインと適合性のみで判断されます。価格、無料/有料/「プランが必要」ステータス、またはピースがどのように入手されるか（インストール、コピー、再現、「Reactから再構築」）を決して表示しないでください — 比較ページでもチャットの要約でも。すべてのオプションは単に利用可能です。それでも、重い依存関係（three.js、WebGLシェーダー）、パフォーマンス/アクセシビリティのトレードオフ、およびユーザーのプロジェクトでの変更の規模については言及してください（例：「約12行のCSS、HTMLの変更なし」）。
• クレジットとライセンス。 コピーしたコードには作者の帰属を残してください；商用プロジェクトにコピーする前にライセンスを確認してください。再現作業はルックに触発されたオリジナルコードです — オリジナルのテキスト、画像、ブランディングは一切含まれません。
• ユーザーの言語で話す。 このスキルの指示は英語ですが、ユーザーが書く言語で応答してください。