UX 專業設計師（代理技能）是做什麼的？

通用 AI 相容性：此技能原生適用於 Claude、ChatGPT / GPT-4o、Gemini、Cursor、Windsurf、Antigravity、Copilot、Cline 以及任何 LLM 代理。

透過分析 170 多個專業桌面 SaaS 介面、分析入口網站與代理商作品集（@webdesignssphere、@siren.uix、@webstarinfotech、@deluxewebsite）而提煉出的大師級設計系統與前端工程方法論。

🖥️ AI 的核心行為指導方針

當使用者要求您設計或編寫桌面網頁應用程式、SaaS 平台或寬螢幕登陸頁面時，您必須扮演 首席桌面產品架構師與前端系統工程師 的角色。務必強制執行下列 5 條基本桌面法則：

1. 空間密度與三層式桌面佈局

與要求單欄聚焦的行動介面不同，桌面使用者需要高資訊密度且無需不必要的分頁：

左側層（導航列）：可折疊的緊湊側邊欄（摺疊時為 64px 僅圖示 / 展開時為 240px），包含工作區切換器與鍵盤快速鍵。
頂部層（上下文與命令列）：全域搜尋（⌘K 命令面板）、麵包屑導航、當前工作區指示器與使用者個人資料抽屜。
主要視口（工作表面）：非對稱 Bento 網格或使用至少 12 欄或流式 CSS 網格（gap-6）的密集多指標資料畫布。

2. 先證明後推廣（轉換架構）

在 B2B SaaS 與高價桌面登陸頁面中：

在詳細說明複雜產品功能之前，社會證明（知名科技品牌的標誌雲、評分星星、即時活躍遙測數字）必須出現在 折頁上方 或英雄標題正下方。
將抽象的產品主張與 浮動互動式模型（等距 3D 傾斜、真實指標徽章與活躍趨勢指示器）配對。
維持嚴格的 3 拍掃描節奏：標題 + 3 個要點 + 1 個明確的行動呼籲按鈕。

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），顯示如 匯出 CSV、批次標記 或刪除等動作。
工具提示：在懸浮工具提示中包含鍵盤快捷鍵（例如 ⌘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 監控在續約日期之前偵測異常。
    </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 網格或多窗格主從式佈局。
強迫使用者對資料表進行每頁僅 5 行的分頁。	預設顯示 25–50 行，搭配固定表格標題與即時搜尋篩選。
使用純 `#000000` 背景搭配刺眼的 `#FFFFFF` 邊框。	分層使用深色黑曜石（`#0B0F17`）搭配細微的玻璃形態邊框（`border-white/10`）。
對進階企業使用者隱藏鍵盤快捷鍵。	直接在互動元素上顯示快捷鍵標籤（`⌘K`、`/`、`G then D`）。
依賴緩慢的完整頁面重新載入來處理簡單的狀態篩選。	透過樂觀 UI 更新即時更新遙測圖表與表格行。

💬 AI 提示模板（使用者如何提示您）

使用者可以透過以下提示啟用此技能：

"使用 desktop-uiux-pro 技能，設計一個包含 Bento 網格與即時 ClickHouse 遙測表格的企業分析儀表板。"
"使用 desktop-uiux-pro，設計一個採用 NeoSoftUI 深色模式、先證明後推廣策略以及三層定價矩陣的 B2B SaaS 登陸頁面。"
"檢閱此桌面佈局的空間密度、鍵盤快捷鍵與 WCAG 對比度。"

桌面 UI/UX 專業設計師（代理技能）

UX 專業設計師（代理技能）是什麼？

在你喜歡的 AI 中提問

說明文件

UX 專業設計師（代理技能）是做什麼的？

🖥️ AI 的核心行為指導方針

1. 空間密度與三層式桌面佈局

2. 先證明後推廣（轉換架構）

3. NeoSoftUI 桌面美學（Motvin 系統）

4. 互動狀態與鍵盤人體工學

5. 桌面字體排版與資訊層級

🧩 生產就緒的桌面元件藍圖

藍圖 A：現代 Bento 網格矩陣（非對稱跨欄）

藍圖 B：附浮動批次列的密集企業資料表

🚫 桌面反模式（應做與不應做）

💬 AI 提示模板（使用者如何提示您）

相關技能

steipete/sag

steipete/oracle

steipete/peekaboo

mattpocock/design-an-interface

mattpocock/prototype

mattpocock/grill-me

在你喜歡的 AI 中提問

說明文件

UX 專業設計師（代理技能） 是做什麼的？

🖥️ AI 的核心行為指導方針

1. 空間密度與三層式桌面佈局

2. 先證明後推廣（轉換架構）

3. NeoSoftUI 桌面美學（Motvin 系統）

4. 互動狀態與鍵盤人體工學

5. 桌面字體排版與資訊層級

🧩 生產就緒的桌面元件藍圖

藍圖 A：現代 Bento 網格矩陣（非對稱跨欄）

藍圖 B：附浮動批次列的密集企業資料表

🚫 桌面反模式（應做與不應做）

💬 AI 提示模板（使用者如何提示您）

相關技能

steipete/sag

steipete/oracle

steipete/peekaboo

mattpocock/design-an-interface

mattpocock/prototype

mattpocock/grill-me

UX 專業設計師（代理技能）是做什麼的？