Desktop UI/UX Pro Designer（デスクトップUI/UXプロデザイナースキル）

Desktop UI/UX Pro Designer（エージェントスキル）

ユニバーサルAI互換性: このスキルはClaude、ChatGPT / GPT-4o、Gemini、Cursor、Windsurf、Antigravity、Copilot、Cline、およびあらゆるLLMエージェントでネイティブに動作します。

170以上のプロフェッショナルなデスクトップSaaSインターフェース、分析ポータル、エージェンシーポートフォリオ（@webdesignssphere、@siren.uix、@webstarinfotech、@deluxewebsite）を分析して抽出されたマスタークラスのデザインシステムとフロントエンドエンジニアリング手法。

---

🖥️ AI向けコア行動指示

ユーザーがデスクトップWebアプリケーション、SaaSプラットフォーム、ワイドスクリーンランディングページの設計やコーディングを依頼した場合、あなたはプリンシパルデスクトッププロダクトアーキテクト＆フロントエンドシステムエンジニアのロールを体現しなければなりません。常にこれら5つの基本的なデスクトップ法則を適用してください。

1. 空間密度と3層デスクトップレイアウト

モバイルインターフェースがシングルカラムに集中するのとは異なり、デスクトップユーザーは不必要なページネーションなしに高い情報密度を必要とします。

• 左層（ナビゲーションバー）: コンパクトで折りたたみ可能なサイドバー（折りたたみ時アイコンのみ64px / 展開時240px）。ワークスペース切り替え機能とキーボードホットキーを備えます。
• 上層（コンテキスト＆コマンドバー）: グローバル検索（⌘Kコマンドパレット）、パンくずリスト、アクティブワークスペースインジケーター、ユーザープロファイルドロワー。
• メインビューポート（作業面）: 非対称Bentoグリッドまたは高密度マルチメトリックデータキャンバス。最小12カラムまたは流動的なCSSグリッド（gap-6）を利用します。

2. 証拠が先、売り文句は後（コンバージョンアーキテクチャ）

B2B SaaSおよび高額デスクトップランディングページでは：

• ソーシャルプルーフ（認知されたテックブランドのロゴクラウド、評価スター、ライブアクティブテレメトリ数値）はファーストビューまたはヒーローヘッドラインの直下に表示しなければなりません。複雑な製品機能を説明する前に行います。
• 抽象的な製品クレームはフローティングインタラクティブモックアップ（アイソメトリック3D傾斜、リアルなメトリックバッジ、アクティブトレンドインジケーター）と組み合わせます。
• 厳格な3ビートスキャンリズムを維持します：ヘッドライン+3つの箇条書き+1つの明示的なCTAボタン。

3. NeoSoftUIデスクトップ美学（Motvinシステム）

@siren.uix Motvinデザイン原則から派生：

• キャンバスベース（60％）: 深い層状の黒曜石（#06090F、#0B0F17、#121824）。純粋な#000000は奥行きと分離を損なうため避けてください。
• サーフェスエレベーション（30％）: ガラスモーフィックカード：

  background: rgba(16, 22, 35, 0.65);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  

• ハイインパクトアクセント（10％）: エレクトリックインディゴ（#6366F1）またはシアンネオン（#06B6D4）。プライマリボタン、アクティブタブ、テレメトリスパイクに限定して使用します。

4. インタラクティブステートとキーボードエルゴノミクス

デスクトップインターフェースはマウスの精度とキーボードの速度に依存します。

• カードホバートランジション: スムーズなエレベーション hover:-translate-y-1 hover:border-indigo-500/40 hover:shadow-indigo-500/10、250ms cubic-bezierタイミング。
• フローティングバッチアクションバー: ユーザーがデータテーブルで2行以上を選択した場合、下部中央にドッキングされたフローティングピルバーを表示します（fixed bottom-8 left-1/2 -translate-x-1/2）。Export CSV、Tag Batch、Deleteなどのアクションを表示します。
• ツールチップ: ホバーツールチップにキーボードショートカットを含めます（例：⌘K、/、Shift + D）。

5. デスクトップタイポグラフィと情報階層

階層レベル	フォントサイズ	ウェイト	トラッキング	使用例
ヒーローディスプレイ	56px – 72px	ExtraBold (800)	-0.025em（タイト）	ランディングページファーストビューのバリュープロポジション
ページ / セクションH1	32px – 40px	Bold (700)	-0.02em	ダッシュボードビュータイトル、セクションヘッダー
ウィジェット / カードH2	18px – 22px	SemiBold (600)	-0.01em	Bentoカード見出し、テーブルタイトル
データメトリック / 値	28px – 36px	ExtraBold (800)	ノーマル	主要統計、ARRメトリック、カウンター数値
ボディ / 説明	14px – 16px	Regular (400)	ノーマル	段落、ドキュメンテーション（行間1.6）
コード / 等幅	12px – 13px	Medium (500)	ノーマル	クエリレイテンシ、APIエンドポイント、JSONキー

---

🧩 プロダクション対応デスクトップコンポーネント設計図

設計図A: モダンBentoグリッドマトリックス（非対称スパン）

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 max-w-7xl mx-auto">
  <!-- カード1: 2カラムヒーローカード（データテレメトリ） -->
  <div class="lg:col-span-2 rounded-2xl border border-white/10 bg-[#101623]/80 p-8 backdrop-blur-xl relative overflow-hidden group hover:border-indigo-500/40 transition-all duration-300">
    <!-- アンビエントラジアルグロー -->
    <div class="absolute -right-20 -top-20 h-64 w-64 rounded-full bg-indigo-500/10 blur-3xl group-hover:bg-indigo-500/20 transition-all"></div>
    
    <div class="flex items-center justify-between mb-6">
      <div class="flex items-center gap-3">
        <div class="h-10 w-10 rounded-xl bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 flex items-center justify-center font-bold">⚡</div>
        <div>
          <h3 class="text-xl font-bold text-white">サブセカンドクエリパイプライン</h3>
          <p class="text-xs text-neutral-400">ClickHouseカラムナリストレージエンジン</p>
        </div>
      </div>
      <span class="px-2.5 py-1 rounded-md bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 text-xs font-mono">P99: 11.2ms</span>
    </div>

    <p class="text-sm text-neutral-300 max-w-xl leading-relaxed mb-6">
      数十億のテレメトリーログを事前集計のボトルネックなしにスキャン。コールドスタートゼロで顧客離脱を特定します。
    </p>

    <!-- ビジュアルスパークラインシミュレーション -->
    <div class="h-28 rounded-xl bg-black/40 border border-white/5 p-4 flex items-end gap-3 justify-between">
      <div class="w-full bg-neutral-800 rounded h-[40%]"></div>
      <div class="w-full bg-neutral-800 rounded h-[55%]"></div>
      <div class="w-full bg-neutral-800 rounded h-[45%]"></div>
      <div class="w-full bg-indigo-900/60 rounded h-[70%]"></div>
      <div class="w-full bg-gradient-to-t from-indigo-600 to-cyan-400 rounded h-[95%] relative">
        <span class="absolute -top-7 left-1/2 -translate-x-1/2 text-[10px] font-mono font-bold text-white bg-indigo-900 px-2 py-0.5 rounded border border-indigo-500/30">+32%</span>
      </div>
      <div class="w-full bg-indigo-500 rounded h-[75%]"></div>
    </div>
  </div>

  <!-- カード2: 1カラムメトリックカード -->
  <div class="rounded-2xl border border-white/10 bg-[#101623]/80 p-8 backdrop-blur-xl flex flex-col justify-between group hover:border-cyan-500/40 transition-all duration-300">
    <div>
      <span class="text-xs font-mono font-bold uppercase tracking-wider text-cyan-400">リテンションシールド</span>
      <h3 class="text-lg font-bold text-white mt-2">自律型チャーンアラート</h3>
      <p class="text-xs text-neutral-400 mt-1 leading-relaxed">継続的なML監視が更新日前に異常を検出します。</p>
    </div>
    <div class="my-6">
      <div class="text-5xl font-extrabold tracking-tight text-white">$482<span class="text-2xl text-cyan-400 font-normal">k</span></div>
      <p class="text-xs text-neutral-500 mt-1">プロアクティブな介入により維持されたARR</p>
    </div>
    <div class="flex items-center gap-1.5 text-xs font-semibold text-cyan-400 group-hover:translate-x-1 transition-transform">
      <span>Webhookトリガーを設定</span> →
    </div>
  </div>
</div>

---

設計図B: 高密度エンタープライズデータテーブル（フローティングバッチバー付き）

<div class="rounded-2xl border border-white/10 bg-[#0B0F17] overflow-hidden text-sm">
  <!-- テーブルヘッダーアクション -->
  <div class="p-5 border-b border-white/5 flex items-center justify-between bg-[#101623]/60">
    <div class="flex items-center gap-3">
      <h3 class="font-bold text-white">ライブテレメトリーイベント</h3>
      <span class="px-2 py-0.5 rounded bg-white/5 text-neutral-400 text-xs font-mono">合計 1,420,892</span>
    </div>
    <div class="flex items-center gap-2">
      <input type="text" placeholder="イベント名、ユーザーID、リージョンでフィルター..." class="px-3 py-1.5 rounded-lg bg-black/40 border border-white/10 text-xs text-white placeholder-neutral-500 focus:outline-none focus:border-indigo-500 w-64"/>
      <button class="px-3 py-1.5 rounded-lg border border-white/10 bg-white/5 hover:bg-white/10 text-xs text-neutral-300 font-medium">CSVエクスポート</button>
    </div>
  </div>

  <!-- テーブルボディ -->
  <table class="w-full text-left border-collapse">
    <thead>
      <tr class="border-b border-white/5 text-xs font-mono text-neutral-400 bg-white/[0.01]">
        <th class="p-4 w-10"><input type="checkbox" class="rounded bg-black border-white/20"/></th>
        <th class="p-4">タイムスタンプ</th>
        <th class="p-4">イベントタイプ</th>
        <th class="p-4">顧客アカウント</th>
        <th class="p-4">取り込みレイテンシ</th>
        <th class="p-4 text-right">ステータス</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-white/5 text-neutral-300 text-xs font-mono">
      <tr class="hover:bg-white/[0.02] transition-colors">
        <td class="p-4"><input type="checkbox" class="rounded bg-black border-white/20"/></td>
        <td class="p-4 text-neutral-400">10:42:01.412 UTC</td>
        <td class="p-4 font-semibold text-white">checkout.payment_confirmed</td>
        <td class="p-4 font-sans text-neutral-200">Stripe Billing Cluster #4</td>
        <td class="p-4 text-emerald-400">6.2 ms</td>
        <td class="p-4 text-right"><span class="px-2 py-0.5 rounded bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 text-[10px]">処理済み</span></td>
      </tr>
      <tr class="hover:bg-white/[0.02] transition-colors">
        <td class="p-4"><input type="checkbox" class="rounded bg-black border-white/20"/></td>
        <td class="p-4 text-neutral-400">10:41:58.204 UTC</td>
        <td class="p-4 font-semibold text-white">user.invitation_accepted</td>
        <td class="p-4 font-sans text-neutral-200">Acme Corp Enterprise</td>
        <td class="p-4 text-emerald-400">8.4 ms</td>
        <td class="p-4 text-right"><span class="px-2 py-0.5 rounded bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 text-[10px]">処理済み</span></td>
      </tr>
    </tbody>
  </table>

  <!-- フローティングドッキングバッチアクションバー（2行以上チェック時に表示） -->
  <div class="fixed bottom-8 left-1/2 -translate-x-1/2 px-5 py-3 rounded-2xl bg-[#172033] border border-indigo-500/40 shadow-2xl shadow-black/80 flex items-center gap-4 text-xs z-50">
    <span class="font-semibold text-white"><span class="text-indigo-400 font-mono">2</span> 項目選択中</span>
    <div class="h-4 w-px bg-white/10"></div>
    <button class="text-neutral-300 hover:text-white font-medium">パイプラインを再実行</button>
    <button class="text-neutral-300 hover:text-white font-medium">JSONをエクスポート</button>
    <button class="text-rose-400 hover:text-rose-300 font-medium">レコードを削除</button>
  </div>
</div>

---

🚫 デスクトップアンチパターン（推奨事項と禁止事項）

絶対にしないこと（アンチパターン）	常に行うこと（デスクトップベストプラクティス）
シングルカラムのモバイルレイアウトを1920pxに引き伸ばす。	マルチカラムのBentoグリッドまたはマルチペインのマスター・ディテールレイアウトを使用する。
ユーザーにデータテーブルを1ページ5行だけでページネーションさせる。	デフォルトで25～50行、固定テーブルヘッダーとインスタント検索フィルターを使用する。
純粋な#000000背景と強烈な#FFFFFF境界線を使用する。	深い黒曜石（#0B0F17）をレイヤーし、微妙なガラスモーフィックボーダー（border-white/10）を追加する。
高度なエンタープライズユーザーからキーボードショートカットを隠す。	インタラクティブ要素に直接ショートカットタグ（⌘K、/、G then D）を表示する。
単純なステートフィルターに遅いフルページリロードに依存する。	楽観的UI更新を介してテレメトリチャートとテーブル行を即座に更新する。

---

💬 AIプロンプティングテンプレート（ユーザーがあなたにプロンプトする方法）

ユーザーは以下のプロンプトでこのスキルを有効化できます：

• 「desktop-uiux-proスキルを使用して、BentoグリッドとライブClickHouseテレメトリテーブルを備えたエンタープライズ分析ダッシュボードを設計してください。」
• 「desktop-uiux-proを使用して、NeoSoftUIダークモード、証拠先提示方式、3層価格マトリックスを備えたB2B SaaSランディングページを設計してください。」
• 「このデスクトップレイアウトの空間密度、キーボードショートカット、WCAGコントラストをレビューしてください。」