通用桌面应用 UI - UX 产品设计规范

通用桌面应用 UI / UX 产品设计规范

规范MDv1.0

规范MD下载原文件

# 通用桌面应用 UI / UX 产品设计规范 ## Apple-inspired 极简桌面智能体完整界面方案 V1.0

1. 产品定位

通用桌面应用是一款 Windows 本地优先的自主 AI Desktop Agent。

当前产品能力基础：

Agent Core 已就绪
112 个 Tool 可调用
支持本地模型与外部模型
支持任务执行
支持文件与工作区
支持权限控制
支持模型管理
支持系统工具调用
后续支持 Vision、Browser、Shell、SSH、Voice、Memory、GUI Automation 等能力

UI 的目标不是展示复杂技术架构，而是让用户能够自然地完成：

对话 → 提出目标 → 项目负责人规划 → 调用工具 → 请求必要权限 → 执行 → 验证 → 返回结果。

2. 设计目标

产品视觉采用：

Apple-inspired Desktop Application

关键词：

极简
安静
大量留白
清晰
高级
克制
低视觉噪音
层级明确
强交互反馈
状态可感知
动画自然
支持 Light / Dark Mode

禁止：

后台管理系统风格
IDE 式信息堆叠
大量边框
大量彩色卡片
满屏 Dashboard
霓虹科技风
复杂装饰
大面积渐变
112 个工具直接展示成 112 个按钮

“极简”指减少视觉噪音，而不是减少产品能力。

3. 整体信息架构

一级功能分为：

项目负责人
任务
工作区
工具
记忆
活动

设置

对应职责：

项目负责人
→ 对话、Agent、即时任务

任务
→ 所有执行任务与自动化

工作区
→ 项目、文件、Git、环境

工具
→ 112 Tool 与各种高级能力

记忆
→ 长期记忆与用户资料

活动
→ 操作记录、审计、错误

设置
→ 整个应用配置

4. App Shell

桌面应用采用稳定三层结构：

┌────────────────────────────────────────────────────────────┐
│ Top Bar                                                    │
├──────┬───────────────────────────────────┬─────────────────┤
│      │                                   │                 │
│ NAV  │            Main Area              │ Context Panel   │
│      │                                   │                 │
│      │                                   │                 │
├──────┴───────────────────────────────────┴─────────────────┤
│ Status                                                     │
└────────────────────────────────────────────────────────────┘

四个核心区域

Top Bar

展示全局信息与高频入口。

负责页面导航。

Main Area

当前任务主要操作区域。

Context Panel

只在需要时出现，展示当前任务、上下文、文件、环境信息。

默认使用 64–72px 极简图标栏。

顺序：

✦ 项目负责人
✓ 任务
▣ 工作区
⬡ 工具
◉ 记忆
≡ 活动

⚙ 设置

鼠标 Hover：

显示 Tooltip。

点击顶部折叠按钮可展开为：

✦ 项目负责人
✓ 任务
▣ 工作区
⬡ 工具
◉ 记忆
≡ 活动

⚙ 设置

展开宽度约 210px。

导航栏不得使用大量卡片背景。

当前页面只通过：

图标状态
非常轻的背景
字体权重

表达选中状态。

6. Top Bar

高度约：

48–52px

布局：

项目负责人    Workspace ▾                  ● Local   ⌕   🔔

左侧

Logo / 项目负责人

点击：

返回项目负责人主页面。

Workspace Selector

显示：

通用应用 Project ▾

点击：

最近工作区
全部工作区
打开文件夹
新建工作区
Git Clone

右侧

Runtime Status

例如：

● Local

或：

● Qwen
○ Offline
● OpenAI
⚠ Core

点击展开状态面板：

Agent Core
当前模型
Provider
网络
RAM
当前运行任务数

Search / Command

按钮：

⌕

快捷键：

Ctrl + K

Notifications

按钮：

🔔

展示：

任务完成
任务失败
权限请求
下载
更新
重要异常

7. 项目负责人主页面

这是应用默认主页。

主页面不做 Dashboard。

核心只展示：

Conversation
+
Agent Execution
+
Input

默认界面：

┌──────┬─────────────────────────────────────────────┐
│ NAV  │                                             │
│      │                  对话                       │
│      │                                             │
│      │                                             │
│      │                                             │
│      │  ┌──────────────────────────────────────┐   │
│      │  │ 输入消息或任务……                    │   │
│      │  │ +   Model ▾   Auto ▾   🎤       ↑   │   │
│      │  └──────────────────────────────────────┘   │
└──────┴─────────────────────────────────────────────┘

8. Conversation History

会话历史不永久占据屏幕。

点击：

历史

从左侧滑出 Secondary Sidebar。

顶部：

+ 新对话
搜索

分组：

今天
昨天
过去 7 天
更早

单个会话支持：

打开
重命名
置顶
移动到工作区
导出 Markdown
归档
删除

9. Chat Message

用户消息菜单

复制
引用
编辑并重新发送
创建任务

项目负责人消息菜单

复制
引用
重新生成
创建任务
查看执行详情

涉及 Tool 时展示折叠式执行卡片。

10. 输入框

采用大型浮动 Composer。

最小高度：

64px

自动向上扩展。

结构：

输入消息、问题或任务……

+     Qwen ▾     自动 ▾          🎤        ↑

11. 「+」附件菜单

点击显示：

上传文件
上传图片
选择文件夹
截图
读取剪贴板
添加工作区文件

支持拖放文件进入输入区域。

12. 模型选择

点击模型名称：

Qwen ▾

出现 Popover：

推荐
最近使用

本地模型
云模型

管理模型

模型状态：

Ready
Loading
Unavailable
Downloading
Error

13. Agent Mode

支持：

聊天
思考
执行
自动

聊天

主要负责回答。

思考

允许分析和读取上下文。

执行

明确进入 Agent Tool 执行。

自动

由 Agent 判断是否需要工具。

默认：

自动

14. 语音按钮

状态：

🎤

点击：

开始录音。

录音：

■ 00:12

支持：

暂停
完成
取消

15. Agent Execution Card

当 Agent 执行任务时，在 Chat 中显示：

正在部署项目

✓ 分析项目
✓ 检查依赖
→ 构建项目
○ 上传文件
○ 验证部署

3 / 5

查看详情             停止

状态：

Planning
Waiting
Waiting Permission
Running
Verifying
Completed
Failed
Cancelled
Rolling Back

16. Context Panel

Context Panel 默认隐藏。

在以下情况出现：

多步骤任务
打开 Workspace
使用多个文件
Agent 正在执行
用户主动打开

宽度约：

300–340px

Tab：

任务
上下文
环境

17. Context / 当前任务

显示：

任务目标

当前状态

进度

当前步骤

下一步骤

按钮：

暂停
继续
停止
查看完整任务

18. Context / 上下文

展示：

Files
Images
Web
Memory
References

每个项目：

查看
定位
从上下文移除

注意：

“从上下文移除”不得等同于“删除文件”。

19. Context / Environment

显示：

Workspace
Branch
Model
Provider
Runtime
RAM
Network

点击：

环境详情

20. Task Center

一级页面：

任务

顶部：

任务                           + 新任务

Tabs：

全部
运行中
等待授权
已完成
失败

任务卡：

部署 通用数字产品

运行中
3 / 6

██████░░░░

刚刚

21. Task 状态模型

界面必须能够表示：

QUEUED
PLANNING
WAITING_PERMISSION
RUNNING
PAUSING
PAUSED
VERIFYING
ROLLING_BACK
CANCELLING
CANCELLED
COMPLETED
FAILED
RECOVERING
UNKNOWN

22. Task Detail

页面：

任务名称

Timeline
✓ 分析
✓ 准备
→ 执行
○ 验证

--------------------------------

Execution Log

右侧：

状态
Workspace
Model
创建时间
运行时间
风险

顶部操作：

暂停
继续
停止
重新运行
…

更多菜单：

复制任务
导出
查看 Audit
查看日志
删除记录

23. New Task

弹窗：

新建任务

任务名称

目标

Workspace

Model

模式：
建议
自动执行
只规划

取消                创建

默认：

建议模式

24. Workspace

一级页面：

工作区

展示：

最近

通用应用
D:\Projects\通用应用

通用数字产品
D:\Projects\通用数字产品

+ 打开工作区

顶部：

搜索
新建
打开文件夹

25. New Workspace

支持：

打开本地文件夹
创建空工作区
克隆 Git
远程工作区

26. Workspace Detail

顶部：

通用应用

D:\Projects\通用应用

快捷按钮：

让项目负责人分析
新建任务
终端
资源管理器

内部 Tab：

概览
文件
Git
任务
环境

27. Workspace Overview

显示：

项目类型
项目路径
Git 状态
最近文件
最近任务
当前环境

避免 Dashboard 化。

28. Files

Workspace → Files。

界面：

┌───────────────────┬────────────────────────────┐
│ File Tree         │ Preview / Editor           │
│                   │                            │
│ src               │                            │
│ docs              │                            │
│ README.md         │                            │
└───────────────────┴────────────────────────────┘

按钮：

返回
前进
搜索
新建文件
新建文件夹
刷新
…

在资源管理器打开
在终端打开
复制目录路径
扫描目录

文件右键：

打开
新标签打开
加入上下文
让项目负责人分析
复制路径
重命名
移动
复制
删除

31. File Preview

支持：

TXT
Markdown
Code
PDF
DOCX
XLSX
PPTX
Image

顶部：

编辑
加入 Context
让项目负责人分析
…

32. Git

Workspace → Git。

页面区域：

Changes
Branches
History
Remote

功能：

Stage
Unstage
Commit
Pull
Push
Fetch
Checkout
Create Branch
Diff
History

33. Tools Center

一级：

工具

112 Tool 不直接全部展示。

统一按 Capability 分类。

34. Tool 分类

文件与数据
系统
浏览器
代码
Git
SSH
视觉
语音
网络
自动化
AI
扩展
Utility

35. Tools 首页

顶部：

搜索工具

下面：

常用
Browser
Terminal
Files
Git

AI
Vision
Voice
Image

Development
Code
Git
SSH

Automation
Browser Automation
GUI Control

Extensions
MCP
Plugins

36. Tool Card

统一：

Terminal

Shell / PowerShell 命令执行

● 可用

Risk L2

打开

支持：

Available
Unavailable
Needs Setup
Disabled
Running
Error

37. Tool Registry 与 UI

所有 Tool UI 数据来自 Tool Registry。

每项 Tool 至少包含：

tool_id
name
category
description
risk_level
availability
permission

Tool 新增后，应自动出现在：

Tools Center
Search
Command Palette

不需要增加一级菜单。

38. Browser

页面：

← → ↻      URL

网页内容

Agent 控制：

只读 / 可交互
截图
提取内容
加入 Context
停止

Agent 处于浏览器自动化状态时必须明确显示：

项目负责人正在控制网页

39. Terminal

页面：

Terminal

PowerShell ▾       + New

支持：

命令
历史
多 Terminal
复制
清空
停止
工作目录

AI 准备执行高风险命令时进入 Permission Gateway。

40. SSH

页面：

SSH

+ 新连接

Profile：

名称
Host
User
Port
Authentication
Last Connected
Status

操作：

连接
测试
编辑
删除

Secret / Private Key 不展示明文。

41. Code

Coding Workspace 支持：

浏览代码
编辑
Diff
Apply Patch
Explain
Review
Run Test
Build

42. Vision

页面：

上传图片
截图
读取屏幕

功能：

Vision Analysis
OCR
UI Understanding
Object Recognition
Layout

输出操作：

加入聊天
加入 Context
创建任务
复制

43. Voice

页面：

Input Device
Output Device
ASR
TTS
Voice

中央状态：

Listening
Transcribing
Thinking
Speaking

支持：

开始
暂停
结束
Mute

44. GUI Automation

作为高级 Tool。

状态：

禁用
等待权限
Ready
Running
Paused

按钮：

开始
暂停
停止

必须始终提供 Emergency Stop。

45. Memory

一级：

记忆

Tabs：

全部
个人
项目
偏好
工作
临时

46. Memory Card

展示：

记忆正文

来源
更新时间

操作：

编辑
查看来源
忘记

搜索
+ 添加记忆
记忆设置

48. Activity

一级：

活动

Tabs：

活动
审计
错误

49. Activity Timeline

示例：

19:22
读取 README.md

19:23
运行 pytest

19:25
任务完成

50. Audit

展示：

Time
Task
Tool
Arguments Summary
Risk
Permission
Execution
Verification
Rollback
Result

支持筛选：

Files
Shell
SSH
Browser
System
Agent

51. Error Center

错误卡不得只有技术代码。

格式：

模型服务无法连接

可能原因
Ollama 未运行

当前影响
本地模型不可用

自动修复
打开设置
查看详情

52. Permission Interaction

普通权限状态可以在界面内提示。

高风险操作必须使用 Native Dialog。

示例：

高风险操作

项目负责人准备删除：

D:\Projects\...\build

原因：
清理构建目录

已创建恢复点

拒绝              允许一次

不允许使用网页 Modal 替代系统级高风险授权。

53. Notification Center

显示：

等待授权
任务完成
任务失败
模型下载完成
更新可用
重要系统事件

支持：

全部已读
清除

54. Settings

二级菜单：

常规
外观
模型
AI
工具
权限
记忆
语音
资源
网络
数据
更新
关于
高级

55. General

启动页面

恢复上次状态

开机启动

后台运行

关闭窗口行为

语言

56. Appearance

Theme
System
Light
Dark

界面密度：

Compact
Standard
Comfortable

Sidebar：

Auto
Collapsed
Expanded

57. Model Management

页面：

当前模型

已安装模型

可用 Provider

模型卡：

Qwen

Text / Tool Calling

5.2 GB

RAM 约 8GB

使用

菜单：

详情
参数
模型目录
删除

58. Model Parameters

标准模式：

Temperature
Context Length
Max Output

高级模式：

Top P
Top K
Repeat Penalty
Seed

59. AI Behavior

默认模式
聊天 / 思考 / 执行 / 自动

回答长度

任务执行方式

失败恢复

自动重试

60. Tool Settings

112 Tool 通过分类进行管理。

每项：

Enabled
Risk
Dependencies
Permission
Status

61. Permission Settings

显示：

L0 READ
自动允许

L1 LOW
自动允许

L2 MEDIUM
允许 + Audit

L3 HIGH
每次确认

L4 BLOCKED
禁止

62. Resource Manager

页面：

RAM
GPU
Disk

Loaded Models
Runtime

操作：

释放闲置模型
卸载模型

模式：

自动
性能
节能
自定义

默认：

自动

63. Network

Core Status
Internet
Proxy
LAN
Remote

普通模式隐藏复杂 Port / Binding。

高级模式显示。

64. Data

数据目录

打开目录

备份
恢复
导出
导入
清理缓存
删除全部数据

删除全部数据进入独立危险区域。

65. Update

Current Version

Check Update

Automatic Update

Release Notes

66. About

显示：

通用应用

Version
Build
Git Commit
Core Version
DB Schema
Runtime

按钮：

复制诊断信息
打开日志目录
许可证
第三方组件

67. Advanced Mode

高级模式允许查看：

IPC
Runtime
Ports
PID
Raw Tool Result
Model Debug
Tool Trace
MCP
Plugin
Audit Hash
Performance
Developer Options

默认关闭。

68. Command Palette

快捷键：

Ctrl + K

搜索范围：

功能
Tool
文件
Workspace
任务
会话
记忆
设置
Command

例如：

> SSH

结果：

连接 SSH
新建 SSH Profile
打开 SSH
SSH 设置

69. Global Keyboard Shortcuts

Ctrl + N
新对话

Ctrl + K
Command Palette

Ctrl + O
打开工作区

Ctrl + ,
设置

Ctrl + L
聚焦聊天输入

Ctrl + Shift + P
新任务

Esc
关闭当前浮层 / 取消操作

70. Status Bar

底部保持极简。

正常时：

● Core   ● Qwen   ● Local

异常时：

⚠ Core Restarting

或：

○ Offline

71. Offline 状态

断网时应用不能整体失效。

点击 Offline 状态显示：

本地聊天          ✓
本地文件          ✓
本地工具          ✓
本地模型          ✓

Web Search         ×
云模型             ×
在线服务           ×

72. Core Crash

显示：

项目负责人核心服务已停止

正在尝试恢复……

重新启动
查看日志

成功：

Core 已恢复

73. Crash Recovery

如果发现未完成任务：

发现未完成任务

上次状态：
正在上传文件

系统无法确认该步骤最终结果。

检查状态
继续
结束任务

禁止自动标记成功。

74. Loading / Error / Empty State

每个模块必须实现：

Loading
Empty
Error
Offline
Disabled
Permission Required
Unavailable

75. Apple-inspired Design System

视觉原则：

大面积留白
低饱和度
浅层级背景
轻边框
细腻阴影
克制毛玻璃
高质量 Typography
内容优先
控件尺寸统一
动画柔和

76. Spacing

采用：

4px Grid

主要间距：

77. Radius

统一：

Small       6px
Medium      10px
Large       14px
Panel       16px
Dialog      18px

78. Buttons

四类：

Primary
Secondary
Ghost
Danger

一个页面原则上只设置一个主要 Primary Action。

79. Button States

必须包括：

Default
Hover
Pressed
Focus
Loading
Disabled

用于：

模型选择
菜单
筛选
快速配置

Sheet

用于：

History
Context
Detail

Dialog

用于：

创建
编辑
确认

Native Dialog

用于：

L3 高风险授权

81. Glass Material

只建议用于：

Top Bar
Popover
Command Palette
Floating Composer
Dialog

主体内容区域使用正常 Surface。

不要整个应用全毛玻璃。

82. Motion

83. Light Mode

默认背景：

柔和白 / 极浅灰

内容层通过非常细微的 Surface 区分。

不要大量使用深色分割线。

84. Dark Mode

必须独立调整：

Typography
Border
Surface
Glass
Shadow
Code
Terminal
Danger
Warning

不能简单颜色反转。

85. Responsive Desktop Layout

大窗口

NAV
MAIN
CONTEXT

中窗口

NAV
MAIN

Context 使用 Overlay

小窗口

Collapsed NAV
MAIN

86. 默认 14 英寸布局

优先级：

Main > Context > Secondary Sidebar

普通聊天时：

只显示：

NAV + Chat

确保聊天区域最大。

87. First Launch

首次启动最多四步：

Step 1

欢迎使用项目负责人

开始

Step 2

检测设备

CPU
RAM
GPU
Disk

Step 3

推荐配置

Text Model
Vision
Voice

预计磁盘空间

Step 4

准备完成

进入项目负责人

88. System Tray

菜单：

打开项目负责人
新对话
查看任务
暂停全部任务
系统状态
设置
退出

89. Tool 可发现性

112 个工具必须满足至少一种入口：

Feature Page
Tools Center
Command Palette
Context Action

不允许存在：

Tool 已经可用
但用户完全找不到

90. 核心交互规则

Rule 1

用户永远知道：

项目负责人现在在做什么。

Rule 2

用户永远知道：

任务做到哪一步。

Rule 3

系统永远区分：

读取 / 修改 / 删除。

Rule 4

高风险操作必须明确确认。

Rule 5

失败必须告诉用户下一步如何处理。

Rule 6

高级信息不得干扰普通用户。

Rule 7

所有 Tool 调用必须有运行状态反馈。

Rule 8

所有异步操作必须支持 Loading / Error / Cancel。

Rule 9

页面之间共享统一 Design System。

Rule 10

任何功能不得通过单独创造一套 UI 规则实现。

91. 最终产品结构

通用桌面应用
│
├── 项目负责人
│   ├── Chat
│   ├── Agent
│   ├── History
│   └── Context
│
├── Tasks
│   ├── Current
│   ├── History
│   └── Automation
│
├── Workspace
│   ├── Overview
│   ├── Files
│   ├── Git
│   ├── Tasks
│   └── Environment
│
├── Tools
│   ├── Browser
│   ├── Terminal
│   ├── Code
│   ├── Git
│   ├── SSH
│   ├── Vision
│   ├── Voice
│   ├── GUI Automation
│   ├── Network
│   ├── MCP
│   ├── Plugins
│   └── Utility
│
├── Memory
│
├── Activity
│   ├── Timeline
│   ├── Audit
│   └── Errors
│
└── Settings
    ├── General
    ├── Appearance
    ├── Models
    ├── AI
    ├── Tools
    ├── Permission
    ├── Memory
    ├── Voice
    ├── Resource
    ├── Network
    ├── Data
    ├── Update
    ├── About
    └── Advanced

92. 最终设计目标

通用桌面应用不应表现为：

一个拥有很多按钮的 AI 工具箱。

也不应表现为：

ChatGPT + IDE + 服务器后台三个产品硬拼在一起。

最终体验应该是：

一个拥有完整系统操作能力的个人 AI Workspace。

用户主要面对的永远只有三件事：

我想做什么
↓
项目负责人正在做什么
↓
结果是什么

而 Agent Core、112 Tools、模型、权限、文件系统、浏览器、Shell、SSH、Memory、资源管理等复杂能力全部位于这套简单交互结构之下。

视觉保持极简。

能力保持完整。

普通用户容易使用。

高级用户可以深入。

后续新增 Tool、模型和 Agent 能力时，不需要重新设计整个 Desktop Shell。

1. 产品定位

2. 设计目标

3. 整体信息架构

4. App Shell

四个核心区域

Top Bar

Navigation

Main Area

Context Panel

5. 左侧 Navigation

6. Top Bar

左侧

Logo / 项目负责人

Workspace Selector

右侧

Runtime Status

Search / Command

Notifications

7. 项目负责人主页面

8. Conversation History

9. Chat Message

用户消息菜单

项目负责人消息菜单

10. 输入框

11. 「+」附件菜单

12. 模型选择

13. Agent Mode

聊天

思考

执行

自动

14. 语音按钮

15. Agent Execution Card

16. Context Panel

17. Context / 当前任务

18. Context / 上下文

19. Context / Environment

20. Task Center

21. Task 状态模型

22. Task Detail

23. New Task

24. Workspace

25. New Workspace

26. Workspace Detail

27. Workspace Overview

28. Files

29. File Toolbar

30. File Menu

31. File Preview

32. Git

33. Tools Center

34. Tool 分类

35. Tools 首页

36. Tool Card

37. Tool Registry 与 UI

38. Browser

39. Terminal

40. SSH

41. Code

42. Vision

43. Voice

44. GUI Automation

45. Memory

46. Memory Card

47. Memory Toolbar

48. Activity

49. Activity Timeline

50. Audit

51. Error Center

52. Permission Interaction

53. Notification Center

54. Settings

55. General

56. Appearance

57. Model Management

58. Model Parameters

59. AI Behavior

60. Tool Settings

61. Permission Settings

62. Resource Manager