ThreeUI 3D Pages は何をしますか？
ThreeUIを、盲目的に貼り付けるためのプロンプト集としてではなく、厳選された視覚的なソースとして使用してください。目標は、ヒーローエフェクト、タイポグラフィ、スペーシング、モーション、コンテンツがすべて1つのアートディレクションを強化する、一貫性のあるプロダクション対応インターフェースを構築することです。
ワークフロー
-
ユーザーのリクエストからデザインブリーフを確立します: 製品、ターゲットオーディエンス、望ましいムード、主要コンテンツ、必要なブランド制約。製品の主張を捏造したり、提供されたコピーをデモコピーで置き換えたりしないでください。
-
バンドルされたカタログを検索します:
node scripts/threeui.mjs search "liquid metal launch button" node scripts/threeui.mjs search "奢侈品香水 落地页 烟雾" -
互換性のある候補を2〜3つに絞り込み、最も強力なものを詳細に確認します:
node scripts/threeui.mjs show <item-id> node scripts/threeui.mjs guide <item-id> -
1つのアンカーエフェクトを選択します。最大で1つの補助的なThreeUI要素を追加できますが、それは明確な階層やインタラクションの役割を果たす場合に限ります。ページを賑やかに見せるためだけに無関係なシェーダーを積み重ねないでください。
-
アプリケーションコードを変更する前に、references/integration.md を読んでください。そこには、ソース、アセット、構成、パフォーマンス、および検証ルールが含まれています。
決定ルール
- エフェクトをコンテンツに合わせてください。落ち着いた製品ページに自動的に高エネルギーのパーティクルフィールドを割り当てるべきではありません。また、ダッシュボードに映画のような全画面シェーダーを主要なサーフェスとして使用すべきではありません。
- 新しいサイトのタスクの場合は、
Landing PagesとHeroカテゴリからのフルページまたはヒーローを優先してください。既存のUIに奥行きが必要な場合は背景コンポーネントを、要求されたスコープが小さい場合はボタンやUI要素を優先してください。 - カタログの
runtime、interaction、asset、variantsメタデータを使用して、ターゲットスタックやパフォーマンスエンベロープと競合する候補を除外してください。 - 画像とモーションエフェクトをデザインの1つのレイヤーとして扱ってください。周囲のレイアウト、タイプスケール、ホワイトスペース、コントラスト、およびコールトゥアクションが、結果が完成したように見えるかどうかを依然として決定します。
- カタログに適切なコミュニティコンポーネントがない場合は、そのことを明確に述べ、プロジェクトの既存のスタックから最も近い適切なソリューションを構築してください。Proまたは利用不可能なThreeUIアセットが使用されたと主張しないでください。
ソースルール
- コミュニティソースはMITライセンスです。帰属表示とバンドルされたライセンス通知を保持してください。references/THIRD_PARTY_NOTICES.md を参照してください。リモートのThreeUIサムネイルやプレビューを再配布しないでください。
- npmパッケージ
@designcodeio/threeuiとその文書化されたインポート名を優先してください。テンプレートカタログ全体をターゲットプロジェクトにコピーしないでください。 - 実装ガイドが存在する場合は、即興で行う前にそれに従ってください。ガイドは、正規のソースファイル、アセット、ランタイムバージョン、および動作を特定します。
- 正確なソースが利用可能な場合に、作成されたシェーダー、ジオメトリ、またはアセットを大まかな視覚的近似値で決して置き換えないでください。
- Pro MCPまたはCLIは、ユーザーが自身の許可されたアクセス権を持っている場合にのみ使用してください。生成されたプロジェクト内で資格情報を要求、保存、または埋め込まないでください。
完了バー
終了する前に、存在するターゲットプロジェクトのビルド、テスト、およびリントコマンドを実行してください。デスクトップとモバイルのレンダリング、ブラウザコンソールの出力、reduced-motionの動作、および該当する場合はWebGLフォールバックパスを検査してください。実行した正確なチェックと、完了できなかった検証を報告してください。