后台管理系统与桌面工作台 UI 设计：避开假看板，围绕核心对象组织布局
一提到后台或桌面应用，AI 最容易画出的就是“顶部四张带涨跌百分比的 KPI 卡片 + 中间两张折线饼图 + 底部一张简陋表格”。但真正好用的工作台（如运维排障台、API 账单后台、实验室样本库或视频剪辑器）都是围绕用户每天操作的具体对象展开的：选中什么、对比什么、怎么根据异常状态立刻采取行动。
核心要点
- 先问“用户进来要处理哪个对象”，而不是“顶部放几个统计卡片”——把首屏空间留给服务拓扑、账单列表、样本冻存盒或时间轴。
- 高密度界面靠对齐、字重对比和留白分出主次，不要给每个字段、每个小标签都套一层深色边框。
- 好的工作台必须做出状态联动：拖动时间窗同步刷新日志、点击异常行滑出排查抽屉、按下快捷键呼出命令面板。
- Oil UI Pro 内置了 10 类专业后台与工具工作台骨架（列表-详情、画布-检查器、时间轴、节点图等），可直接按品类匹配。
npx skills add oil-oil/oil-ui可在 /inspiration/desktop-app-design/ 查看画廊全部桌面应用与工作台案例。
从“堆砌统计图”转向“围绕核心对象工作”
观察画廊里的桌面端作品，你会发现它们没有一个采用千篇一律的“四卡片仪表盘”模板，因为每个领域的日常操作对象完全不同：
在运维监控台《Nightwatch》里，核心对象是正在发生故障的服务链路与时间窗，拖拽时间范围会同时对齐拓扑图、部署标记与峰值日志；在 API 计费后台《Vesper》里，核心对象是当期异常账单与 Webhook 扣款事件，点开即可重试扣款或调整配额；在实验室样本系统《格存 GridStore》里，核心对象是零下 80 度冰柜里的 9×9 冻存盒网格，研究员直接在网格上选孔位、做出入库与溯源。
| 画廊作品 | 业务领域 | 页面核心操作对象 | 关键状态与联动设计 |
|---|---|---|---|
| Nightwatch (ops) | 运维监控与值班排障 | 服务拓扑路径 + 统一时间轴 | 健康总览、告警高亮下游链路、错误峰值日志与发布归因四态切换 |
| Vesper (vesper) | API 用量与账单控制台 | 客户账单列表 + 事件时间线抽屉 | 按用量阈值实时筛选、展开异常账单明细与扣款重试、快捷命令面板 |
| Runrate (revenue) | SaaS 收入与留存看板 | MRR 变动拆解（新增/扩容/流失）+ 队列矩阵 | 切换时间粒度联动净收入留存（NRR）、客户分层明细与账期钻取 |
| 格存 GridStore (lims) | 生物实验室样本管理 | 冰柜架位层级 + 9×9 冻存盒孔位网格 | 可视化选孔位查看样本管链路、批量转移出库、温控告警状态 |
高信息密度下保持画面清爽的四个技巧
后台界面字段多、状态多，如果沿用 AI 默认的“卡片套卡片 + 全边框表格 + 彩虹色状态标签”，看十分钟就会眼花。在 Oil UI 中，我们通过四条减法原则控制密度：
- 用列对齐与行间距代替密集的竖向表格线
- 数字列统一使用等宽数字（tabular-nums）并右对齐，文字与时间列左对齐，去掉多余的竖向分割线，表格立刻变得易扫读。
- 高饱和色只留给真正需要处理的异常
- 如果正常状态都标上刺眼的亮绿胶囊，真正的欠费或服务宕机反而跳不出来。正常状态用安静的灰字或小圆点，把琥珀色与红色留给告警与阻塞项。
- 用抽屉、分栏或浮层承载二级明细
- 不要把 15 个字段全部挤进列表行里。主列表只放筛选与判断所需的 5 到 6 列，点击行后在右侧检查器或详情视图里展开完整负载与历史记录。
- 保证整页视觉语言不断裂
- 很多 AI 生成的页面首屏很精致，往下滚到表格和弹窗就退化成粗糙的默认样式。顶栏、筛选条、空状态与详情抽屉必须共用同一套字号梯度与边线克制原则。
后台与桌面工作台提示词模板
给 Agent 写后台需求时，直接指定主工作区的布局结构（如左导航 + 中列表/画布 + 右详情检查器）以及 3 个可切换的真实工作状态：
用 Oil UI 设计并实现 [系统名称，例如：实验室样本库管理系统 / 跨境物流调度台]，桌面端视口 1440×900。
- 核心工作对象：[不要做成泛泛的统计卡片首页；主工作区直接围绕 样本冻存盒网格 / 运单异常列表 / 节点画布 展开]
- 布局与信息密度：采用 [左栏层级导航 + 中央主工作区 + 右侧选中项详情面板] 结构；数字统一使用 tabular-nums，仅对异常与告警项使用高饱和强调色。
- 必选交互状态：实现 1) 日常高频筛选与浏览态、2) 选中异常对象后的详情排查与恢复操作态、3) 批量操作或快捷命令态，并在 1440×900 下截图走查。明确要求“不要做成泛泛的统计卡片首页”，能立刻帮模型跳出平庸仪表盘套路。
画廊真实案例与提示词参考
打开在线演示查看 1440px 或 390px 下的实际页面，对比不同模型与提示词做出的最终效果。
Nightwatch
运维监控与故障处理
一个给中等规模平台团队用的监控和值班工具（1440×900），界面用英文：服务拓扑，延迟、错误率、流量曲线，最近的发布，日志和调用链；出故障时有告警、当前值班人和事件时间线。 故障正在发生是这件作品的核心：拓扑上出问题的服务和受牵连的下游一眼能看到；拖动时间范围，曲线、发布标记和日志对齐，能看出是哪一次发布引起的。 设计三个状态：一切正常的总览、故障进行中（告警触发、拓扑标出受影响路径）、在错误峰值上展开日志和调用链并定位到那次发布。
查看作品与提示词 →
Vesper
API 用量计费与账单后台
为 AI 与开发者工具团队设计一个 API 用量计费与客户账单管理后台，采用英文界面，桌面视口为 1440×900。用户可以管理订阅方案与实时 API 用量，查看本周期应收金额和异常账单，按状态与用量阈值筛选客户或账单，并打开单条记录查看计费明细、扣款与 Webhook 时间线及事件报文，完成重试扣款、调整配额或导出账单等操作。 实现三个关键状态：展示收入与用量走势、客户或账单列表及实时筛选的日常工作区；展示用量拆解、状态时间线和恢复操作的异常账单详情；以及快捷命令面板。交付可离线打开的 `index.html`，并以 1440×900、DPR=2 截取 `shots/desktop.png`、`shots/state-1.png` 和 `shots/state-2.png`。
查看作品与提示词 →
Runrate
SaaS 收入看板
一个给独立开发者和小团队看订阅收入的桌面应用（1440×900）：MRR、新增、升级、降级、流失、净收入留存，按月看趋势，点开某个月能看到是哪些客户带来了变化，每个客户能看到订阅历史。 首页先回答“这个月钱是怎么变的”，而不是堆指标卡。设计总览、展开某个月的变化明细、单个客户详情三个状态。
查看作品与提示词 →
格存
实验室样本管理系统
一个给生物医药实验室用的样本管理系统：样本入库、冷冻存放位置、检测流程和审计记录。做主界面。
查看作品与提示词 →Oil UI Pro：内置 10 类专业后台与桌面工具骨架
Oil UI Pro 针对复杂工具与后台专门整理了 10 类工作台原型（涵盖监控排障、账单总控、多层数据表、画布编辑器、时间线分镜、节点编排等），并强制检查整页从顶部到底部弹窗的视觉连续性。
npx github:oil-oil/oil-cli install oil-ui-pro常见问题
怎么阻止 AI 一上来就在后台顶部画四个毫无意义的 KPI 大卡片？
在提示词里直接写明“主视口直接进入可操作的工作对象（如订单异常表、拓扑图或日历排期），不要放脱离任务的顶部四宫格统计卡片；如需汇总数字，将其收敛为列表上方的紧凑筛选指标条”。
后台界面适合做成单屏固定高度（100vh）还是整页滚动？
像视频剪辑器（《Cut》）、白板（《Loom》）、即时通讯（《声场 Sonar》）和值班监控台（《Nightwatch》）适合做成 1440×900 全屏应用骨架，内部面板独立滚动；而长篇收入分析报表或文档站则适合整页自然滚动。
表格列数很多时，怎么在 1440px 视口下排得既清楚又不拥挤？
把字段按“一眼判断需要”和“点开处理需要”拆开：主表保留标识、状态、核心金额/指标、更新时间与主操作 5 至 6 列，其余如 Webhook 原始 JSON、审计日志或历史批次放进右侧详情抽屉。
画廊里的桌面应用案例可以直接点击切换状态吗？
可以。像《Nightwatch》《Vesper》《声场 Sonar》等作品既可以在页面内直接点击筛选、切换会话或打开抽屉，也可以通过作品查看器底部的状态按钮一键跳到预设的关键业务状态。