Cyberstarszs/desktop-uiux-pro

桌面 UI/UX 专业设计师（代理技能）

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

这是一套大师级的设计系统和前端工程方法论，源自对 170 多个专业桌面 SaaS 界面、分析门户和代理作品集的深入分析（来自 @webdesignssphere、@siren.uix、@webstarinfotech、@deluxewebsite）。

---

🖥️ AI 核心行为指令

当用户要求您设计或编码桌面 Web 应用程序、SaaS 平台或宽屏登录页面时，您必须扮演首席桌面产品架构师和前端系统工程师的角色。始终强制执行以下 5 条基础桌面法则：

1. 空间密度与三层桌面布局

与要求单列聚焦的移动界面不同，桌面用户需要高信息密度而无需不必要的分页：

• 左层（导航栏）：紧凑的可折叠侧边栏（折叠时 64px 仅图标 / 展开时 240px），带有工作区切换器和键盘快捷键。
• 顶层（上下文与命令栏）：全局搜索（⌘K 命令面板）、面包屑导航、当前工作区指示器和用户资料抽屉。
• 主视口（工作区）：非对称 Bento 网格或密集的多指标数据画布，使用至少 12 列或流体 CSS 网格（gap-6）。

2. 先证实再宣传（转化架构）

在 B2B SaaS 和高价值桌面登录页面中：

• 社交证明（知名科技品牌的 Logo 云、评分星级、实时活跃遥测数据）必须出现在首屏或英雄标题正下方，然后再解释复杂的产品功能。
• 将抽象的产品主张与浮动交互式模型（等轴 3D 倾斜、真实指标徽章和活跃趋势指标）配对。
• 保持严格的三拍扫描节奏：标题 + 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），显示如 导出 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">持续机器学习监控在续费日期前检测异常。</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 计费集群 #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 企业版</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 对比度方面的表现。"