bright-green-tech-system-webgl

Bright Green Tech System WebGL Skill

使用する場面

• 構造化された分割レイアウト、明確な枠線のある暗色の面、モノスペースのユーティリティラベル、目立つ WebGL ビジュアライゼーション領域を備えた、鮮やかなグリーンのテクニカルデザインシステムを作成するとき。

ワークフロー

範囲

• レイアウト、フレーミング、タイポグラフィ、コントロール、メタデータ、埋め込み WebGL ビジュアライゼーション領域にわたるデザインシステム全体の方向性として適用します。
• 鮮やかなグリーンをシグナルカラーとし、リアルタイムのビジュアルエンジンが見える、シャープで実験的、かつ構造化された印象のインターフェースにしたいときに使用します。
• 汎用的なダーク SaaS や、柔らかなグラスモーフィズムではありません。稼働中の合成コンソールやビルドシステムのインターフェースのような印象にします。

ビジュアルの目標

• 深いチャコールまたはほぼ黒のベースに、はっきり見える構造線、コンテナの境界線、コーナーブラケット、内部の仕切りを配置してページを構成します。
• インジケーター、進捗状態、フォーカスの細部、ハイライト、重要なラベルには、鮮やかなライム、アシッドグリーン、またはシグナルグリーンを主要なアクティブカラーとして使用します。
• グリーンは鮮やかで意図的に使いつつ、すべての面をグリーンで埋め尽くさず、シグナル、焦点となるタイポグラフィ、アクセントの塗り、WebGL のハイライトに限定します。
• 片側にコンテンツ、メタデータ、手順を配置し、もう片側に WebGL または Three.js のビジュアライゼーション領域を設けた分割構成にします。
• WebGL 領域は装飾ではなく、システムに統合されたものとして見せます。電源の入った計器パネル、合成された地球儀、パーティクルエンジン、またはリアルタイムのジオメトリビューポートのような印象にします。

実装ガイダンス

• 細い線、控えめな背景ぼかし、見えるコーナーブラケットを備え、中央の仕切りまたはテキストとビジュアライゼーションの明確な分割を含む、しっかりとした外側のコンテナシェルを優先します。
• メインコンテンツには読みやすいサンセリフ体を使い、ラベル、ステータス表示、プロセスの手順、パーセンテージ、システムメタデータにはモノスペースのユーティリティテキストを使用します。
• 小さなフレーム付きモジュール、ヒントパネル、進捗レール、ステータスブロックを、正確な間隔と明確な境界線の階層で配置します。
• マスクを使った段階的な表示、下からのフェードイン、または制御された順次表示を取り入れ、レイアウトに躍動感を持たせながらも規律ある印象にします。
• WebGL パネルを中核コンポーネントとして扱います。可能であれば、明るく光るパーティクル、合成ジオメトリ、または明るいグリーンのアクセントで色付けした軌道形状を使い、実際のキャンバスまたは Three.js によるレンダリングを行います。
• ビジュアライゼーションは雰囲気があり、上質な印象にします。加算発光、控えめなフォグ、穏やかなカメラの動き、落ち着いたマウスへの反応は適していますが、激しい動きやノイズによる過剰な演出は避けます。

推奨パターン

• 左側にコンテンツとシステムプロンプト、右側に没入感のある WebGL ビューポートを配置した分割画面のヒーロー。
• 外枠、内側の仕切り、隅の小さなブラケットマークを備えた、エッジの立ったフレーム付きコンテナ。
• 番号付きステージ、システムタグ、またはコンパイル手順を使ったモノスペースのプロセスナビゲーション。アクティブ状態はグリーンで示します。
• 明るいグリーンをアクティブな稼働色として使う進捗バー、小さなライブドット、ステータスの要約。
• インターフェースのアクセントカラーを反映する、明るいパーティクル、惑星構造、ノードフィールド、または幾何学的な動きで構成された WebGL シーン。

調整項目

• グリーンの明るさ：鮮やかでエネルギッシュに保ちながら、暗いニュートラルカラーとのバランスを取り、上質な印象を維持します。
• 構造の密度：システムの計装感に応じて、ガイド、ブラケット、仕切り、フレーム付きボックスの数を増減します。
• WebGL の存在感：ビジュアライゼーションを画面の半分を占める主役にするか、よりコンパクトなテクニカルパネルにするかを選びます。
• 動きの強さ：滑らかで意図的な動きを保ちます。表示タイミング、パーティクルの速度、ホバー時の反応を調整し、慌ただしくならずにシステムが動いている印象を与えます。
• 背景のテクスチャ：シェルに奥行きを加えるため、目立たない斜線やグリッドのテクスチャを使います。ただし、中心となる構造より目立たせないようにします。

避けること

• レイアウトに統一感がない、ありきたりな緑と黒のハッカー風デザイン。
• UI 全体を鮮やかな緑で過度に彩り、インターフェースの階層がわかりにくくなること。
• WebGL をデザインシステムから切り離された、場当たり的なヒーロー装飾として扱うこと。
• シャープでフレーム感のあるテクニカルなシェルと相容れない、丸みのある柔らかなコンシューマーアプリ風のスタイル。
• 粒子を過剰に散らしたり、動きを速くしたり、光るレイヤーを重ねすぎたりして、視認性を損なうこと。