tool-ui-design

工具软件 UI 风格设计 skill。当用户需要设计或实现桌面工具、开发者工具、数据面板、量化交易系统、监控平台、IDE 插件、CLI 可视化界面、截图录屏工具、QA 测试工具等生产力工具的 UI 组件时自动触发。专注于专业感、信息密度与操作效率，而非装饰性。

eaglefly628 0 Updated 2mo ago

Resources

GitHub

Install

npx skillscat add eaglefly628/captureaishi

Install via the SkillsCat registry.

SKILL.md

工具软件 UI 设计 Skill

这个 skill 指导创建高密度、专业感强的工具软件 UI。目标用户是专业人士（开发者、交易员、分析师、设计师），他们每天长时间使用这个工具，效率和信息密度比视觉冲击更重要。

设计思考流程

写任何代码之前，先确定以下内容：

工具类型与用户身份

是什么工具？（交易终端 / 代码编辑器 / 数据分析平台 / 监控面板 / 构建工具 / 文件管理器...）
用户是谁？（量化交易员 / 后端工程师 / 数据科学家 / 运维人员 / 设计师...）
使用频率？（每天长时间盯着看 vs 偶尔查询）
核心任务是什么？（用户最常做的 3 件事）

风格流派（选一个贯彻到底）：

终端极简（VS Code Dark、Neovim、WezTerm）
数据密集（Bloomberg Terminal、TradingView、Grafana）
工程美学（Linear、Raycast、Warp）
专业桌面（JetBrains、Figma、Sketch）
科学仪器（MATLAB、Oscilloscope UI、Lab software）
现代 SaaS（Vercel Dashboard、Supabase、PlanetScale）

工具软件 UI 核心设计原则

1. 信息密度优先

工具软件不是展示页，是工作台。每平方像素都要产出价值
行高紧凑（1.4-1.5），字号小但清晰（12-13px 正文可接受）
用色块、图标、缩写替代长文字标签
善用 monospace 字体展示数字、代码、路径、日志
空白是有意为之的呼吸，不是填充失败

2. 深色优先（但不绝对）

大多数工具软件默认深色主题，原因：

减少长时间使用的眼疲劳
数据和图表在深色背景上对比度更高
专业感更强
浅色主题适合：文档工具、内容创作、白天办公场景

3. 功能分区清晰

侧边栏（导航/文件树）+ 主工作区 + 右侧面板（属性/详情）是经典三栏
顶部工具栏：全局操作、状态、搜索
底部状态栏：系统信息、快捷提示、进度
每个区域有明确的视觉边界（分割线或背景色差）

4. 操作反馈精准

加载状态：skeleton screen 优于 spinner（减少布局跳动）
成功/失败：toast 通知，3 秒自动消失，不阻断工作流
危险操作：二次确认，措辞明确（"删除后无法恢复"）
快捷键：常用操作必须有 keyboard shortcut，并在 tooltip 显示

常见工具 UI 组件规范

数据表格（Table）

行高 32-36px，斑马纹或 hover 高亮二选一
数字列右对齐，文字列左对齐
列头可排序，当前排序方向要有视觉指示
超长文本截断 + ellipsis，hover 显示全文 tooltip
大数据量用虚拟滚动，不用分页（除非必要）

图表与数据可视化

K 线图/折线图：涨绿跌红（A 股），或涨绿跌红（国际惯例）
坐标轴字号 11px，网格线浅灰（透明度 15-20%）
悬停 crosshair + tooltip 显示精确数值
时间轴支持拖拽缩放
图例点击可切换显示/隐藏系列

输入与表单

工具软件的输入框要紧凑：height 28-32px
带清除按钮（×）
数字输入框支持上下箭头键微调
搜索框有 debounce（300ms），实时过滤
Dropdown 支持键盘导航（↑↓ 选择，Enter 确认，Esc 关闭）

状态标签（Badge/Tag）

用颜色编码状态：绿色=正常/运行，黄色=警告/待处理，红色=错误/停止，灰色=禁用/离线
尺寸小（font-size 11px，padding 2px 6px）
不用纯色填充，用浅色背景 + 深色文字（更柔和）

侧边栏与导航

收起时只显示图标（宽 48px），展开显示图标+文字（宽 200-240px）
当前选中项：左侧竖线高亮 + 背景色
分组标题用全大写小字（FONT-SIZE: 10px，LETTER-SPACING: 0.08em）
支持折叠分组

终端/日志面板

纯 monospace，行高 1.4
日志级别用颜色区分：ERROR=红，WARN=黄，INFO=默认，DEBUG=灰
支持文字搜索高亮
自动滚动到底部，但用户向上滚动时暂停自动滚动

技术实现要求

深色主题颜色系统（CSS 变量）

/* 工程美学 - 参考 Linear/Vercel 风格 */
--bg-base: #0a0a0a;
--bg-surface: #111111;
--bg-elevated: #1a1a1a;
--bg-overlay: #222222;
--bg-hover: rgba(255, 255, 255, 0.04);
--bg-selected: rgba(255, 255, 255, 0.08);

--border-subtle: rgba(255, 255, 255, 0.08);
--border-default: rgba(255, 255, 255, 0.12);
--border-strong: rgba(255, 255, 255, 0.20);

--text-primary: #ededed;
--text-secondary: #a0a0a0;
--text-tertiary: #5a5a5a;
--text-placeholder: #3a3a3a;

--accent-primary: #5b8af0;
--accent-success: #3ecf8e;
--accent-warning: #f5a623;
--accent-danger: #f03e3e;
--accent-info: #60a5fa;

/* 交易专用 */
--color-bull: #26a69a;   /* 涨 */
--color-bear: #ef5350;   /* 跌 */
--color-neutral: #a0a0a0;

浅色主题颜色系统

/* 现代 SaaS 浅色 */
--bg-base: #ffffff;
--bg-surface: #f9f9f9;
--bg-elevated: #f3f3f3;
--bg-hover: rgba(0, 0, 0, 0.04);
--bg-selected: rgba(0, 0, 0, 0.07);

--border-subtle: rgba(0, 0, 0, 0.06);
--border-default: rgba(0, 0, 0, 0.10);

--text-primary: #111111;
--text-secondary: #666666;
--text-tertiary: #aaaaaa;

字体选择

界面文字：Inter, -apple-system, system-ui（可接受，因为工具软件本来就要融入系统）
数字/数据：Tabular Nums（font-variant-numeric: tabular-nums，数字等宽对齐）
代码/日志/终端：JetBrains Mono, Fira Code, Cascadia Code
专业感提升：Geist（Vercel），Söhne（Linear 感），TX02（Bloomberg 感）

字号规范

页面标题：16px / 500
区块标题：13px / 500 / uppercase / letter-spacing: 0.06em
正文标签：13px / 400
数据数字：13-14px / monospace / tabular-nums
小标注：11px / secondary color

间距系统（4px 基准）

组件内边距：8px / 12px / 16px
组件间距：4px / 8px / 12px
区块间距：16px / 24px
页面边距：16px / 24px

禁止使用

圆角过大（工具软件用 4-6px，不用 12px+）
过多阴影（最多一层，且要克制）
渐变背景（除图表外）
装饰性插图（工具软件不需要 hero image）
过大的字号（h1 不超过 20px）
颜色超过 5 种（不含图表系列色）
动画时长超过 150ms（工具操作要快）

输出标准

每次生成工具 UI 时：

声明工具类型、目标用户、选择的风格流派
给出完整可运行代码
深色/浅色主题用 CSS 变量，方便切换
数字显示用 font-variant-numeric: tabular-nums
交互状态完整：hover、focus、active、disabled、loading、error
快捷键在 tooltip 中标注
考虑数据量极端情况：空状态、超长文本、大数据量

记住：好的工具 UI 是隐形的——用户只看到自己的工作，感觉不到 UI 的存在。

专项扩展：截图/录屏 Capture 工具（QA 测试向）

QA 用的 capture 工具有特殊的 UI 需求：需要在不干扰被测界面的前提下，快速捕获、标注、管理、导出测试证据。每个操作都要极快，因为 bug 可能一闪而过。

设计原则补充

非侵入性第一

工具窗口本身要轻量，不能挡住被测内容
悬浮工具栏：透明度可调（默认 85%），hover 才完全不透明
支持最小化为系统托盘，快捷键唤起（全局热键，不需要窗口聚焦）
录制状态指示：屏幕边缘细红线（4px），不遮挡内容

操作速度优先

截图到出现标注界面：< 200ms
所有常用操作必须有全局快捷键，显示在按钮 tooltip 里
标注工具栏默认展开，不需要二级菜单
一键保存/上传，不弹确认框（删除才需要确认）

核心功能模块 UI 规范

① 实时预览 / 监控面板

布局：

┌─────────────────────────────────────┐
│ [●REC 00:12:34]  [CPU 23%] [FPS 60] │  ← 顶部状态栏，紧凑单行
├─────────────────────────────────────┤
│                                     │
│         实时预览画面                 │  ← 主预览区，16:9 或自适应
│                                     │
├──────────────┬──────────────────────┤
│ 缩略图时间轴  │  当前帧信息           │  ← 底部双栏
└──────────────┴──────────────────────┘

细节规范：

录制状态指示用红色脉冲点（●），不用文字"录制中"
时长显示：HH:MM:SS monospace 字体，方便快速读取
性能指标（CPU/内存/FPS）用小徽章，超阈值自动变红
预览区鼠标悬停显示坐标（右下角，半透明背景）
区域选择时显示尺寸标注（1280 × 720），实时更新

② 时间轴 / 回放控制

[|◀] [◀◀] [▶/⏸] [▶▶] [▶|]   ●————●————————●——  00:08:23 / 00:12:34
                              ↑截图点          ↑当前位置

规范：

轨道高度 40px，足够点击但不占太多空间
截图/标记点用彩色菱形钻石标记（◆），颜色按严重级别：
- 红色 = P0 崩溃/阻断
- 橙色 = P1 严重
- 黄色 = P2 一般
- 灰色 = 普通截图/备注
拖动进度条时预览画面实时跟随（节流到 30fps）
双击标记点跳转到该时刻，并自动打开标注面板
支持区间选择（Shift+拖拽），高亮选中区段用于剪辑导出
缩放：滚轮缩放时间轴，Ctrl+0 重置为全览

③ 标注工具面板

工具栏布局（竖向，固定在左侧或可拖拽浮动）：

┌───┐
│ ↖ │  选择/移动        (V)
│ □ │  矩形框选          (R)
│ ○ │  椭圆/圆形         (E)
│ → │  箭头              (A)
│ ✏ │  自由画笔          (B)
│ T │  文字标注          (T)
│ # │  步骤编号          (N)  ← QA 专用：自动递增编号
│ 🔍│  放大镜/聚焦       (M)  ← QA 专用：高亮问题区域
│───│
│ 🎨│  颜色选择
│ ─ │  线宽选择
└───┘

标注颜色预设（QA 惯例色，一键切换）：

红色 #FF3B30：标记 bug、错误
橙色 #FF9500：标记警告、待确认
绿色 #34C759：标记正确、对比参照
蓝色 #007AFF：标记说明、流程
黄色高亮 rgba(255,204,0,0.4)：文字高亮遮罩

步骤编号（# 工具）规范：

圆形徽章，白色数字，点一次自动 +1
右键可修改起始数字
导出报告时自动生成编号说明列表

④ 截图/录屏列表 & 导出界面

列表视图：

┌──────┬───────────────────────┬──────────┬────────┬──────────┐
│ 缩略图│ 文件名 / 描述          │ 时间      │ 类型   │ 操作     │
├──────┼───────────────────────┼──────────┼────────┼──────────┤
│ [img]│ login_error_001        │ 14:23:05 │ 截图   │ 编辑 导出│
│ [▶] │ checkout_flow_p0       │ 14:18:44 │ 录屏   │ 剪辑 导出│
│ [img]│ button_misalign        │ 14:10:22 │ 截图   │ 编辑 导出│
└──────┴───────────────────────┴──────────┴────────┴──────────┘

规范：

缩略图尺寸 80×52px，点击弹出大图预览（不跳页）
文件名可直接双击内联编辑
批量选择：Checkbox 默认隐藏，hover 行时出现
严重级别用左侧彩色竖线标识（同时间轴颜色规范）
拖拽排序支持（用于整理报告顺序）

导出面板（右侧滑出抽屉，不是弹窗）：

导出格式：  [PNG] [JPG] [WebP] [PDF报告] [ZIP打包]
           ● PDF报告  ← QA 最常用，高亮选中

包含内容：  ☑ 原始截图   ☑ 标注图层   ☑ 元数据
           ☑ 步骤说明   ☐ 录屏文件

PDF 报告选项：
  标题：[________________]
  项目：[________________]
  严重级别过滤：[全部 ▾]

[  预览报告  ]  [  导出  ▾ ]
                  └ 导出到文件夹
                  └ 复制到剪贴板
                  └ 上传到 Jira
                  └ 发送邮件

QA 专用状态与反馈

Bug 严重级别色彩系统

--severity-p0: #FF3B30;        /* 崩溃/阻断 */
--severity-p0-bg: rgba(255, 59, 48, 0.12);
--severity-p1: #FF9500;        /* 严重 */
--severity-p1-bg: rgba(255, 149, 0, 0.12);
--severity-p2: #FFCC00;        /* 一般 */
--severity-p2-bg: rgba(255, 204, 0, 0.12);
--severity-p3: #8E8E93;        /* 轻微 */
--severity-p3-bg: rgba(142, 142, 147, 0.12);

录制状态机

待机：灰色圆点
录制中：红色脉冲动画（animation: pulse 1.5s infinite）
暂停：橙色静止方块
处理中：蓝色旋转圈
完成：绿色对勾，2秒后变回灰色待机

快捷键一览（必须在 UI 中可查）

PrtSc / Cmd+Shift+4   全屏/区域截图
Cmd+Shift+5           开始/停止录制
Cmd+Shift+P           暂停/继续录制
Cmd+Z / Cmd+Y         标注撤销/重做
Cmd+S                 快速保存（不弹对话框）
Cmd+E                 打开导出面板
Space                 回放 播放/暂停
← →                   逐帧前进/后退
1-4                   快速设置严重级别

Capture 工具专属禁忌

录制时不能有任何 UI 闪烁（会被录进去）
截图不能有延迟感，按下到捕获 < 50ms
标注层和原图必须分离存储（方便导出无标注版）
不能强制全屏（QA 需要对比多个窗口）
进度/状态变化不用模态弹窗，用非阻断的 toast 或状态栏更新

tool-ui-design

Resources

Install

工具软件 UI 设计 Skill

设计思考流程

工具软件 UI 核心设计原则

1. 信息密度优先

2. 深色优先（但不绝对）

3. 功能分区清晰

4. 操作反馈精准

常见工具 UI 组件规范

技术实现要求

输出标准

专项扩展：截图/录屏 Capture 工具（QA 测试向）

设计原则补充

核心功能模块 UI 规范

QA 专用状态与反馈

Capture 工具专属禁忌

Categories

Install

Recommended Skills