@teamix-evo/skills 0.12.0 → 0.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/manifest.json +11 -28
- package/package.json +2 -2
- package/src/teamix-evo-code-opentrek/SKILL.md +13 -13
- package/src/teamix-evo-code-opentrek/api-layering.md +53 -44
- package/src/teamix-evo-code-opentrek/checklist.md +24 -24
- package/src/teamix-evo-code-opentrek/file-structure.md +55 -36
- package/src/teamix-evo-code-opentrek/forms-and-validation.md +17 -16
- package/src/teamix-evo-code-opentrek/reuse-first.md +6 -9
- package/src/teamix-evo-code-opentrek/testing.md +14 -14
- package/src/teamix-evo-code-uni-manager/SKILL.md +15 -15
- package/src/teamix-evo-code-uni-manager/api-layering.md +74 -58
- package/src/teamix-evo-code-uni-manager/checklist.md +28 -28
- package/src/teamix-evo-code-uni-manager/error-and-loading.md +2 -2
- package/src/teamix-evo-code-uni-manager/file-structure.md +77 -62
- package/src/teamix-evo-code-uni-manager/forms-and-validation.md +17 -15
- package/src/teamix-evo-code-uni-manager/reuse-first.md +7 -10
- package/src/teamix-evo-code-uni-manager/routing-and-codesplit.md +1 -1
- package/src/teamix-evo-code-uni-manager/testing.md +37 -37
- package/src/teamix-evo-design-opentrek/SKILL.md +41 -20
- package/src/teamix-evo-design-opentrek/boundaries.md +1 -1
- package/src/teamix-evo-design-opentrek/checklist.md +5 -5
- package/src/teamix-evo-design-opentrek/components.md +19 -19
- package/src/teamix-evo-design-opentrek/examples/standard-card-list.html +1 -1
- package/src/teamix-evo-design-opentrek/examples/standard-table-list.html +1 -1
- package/src/teamix-evo-design-opentrek/foundations.md +17 -17
- package/src/teamix-evo-design-opentrek/pages/dashboard-page/SKILL.md +18 -19
- package/src/teamix-evo-design-opentrek/pages/dashboard-page/patterns/dashboard-opentrek.md +6 -6
- package/src/teamix-evo-design-opentrek/pages/detail-page/SKILL.md +24 -25
- package/src/teamix-evo-design-opentrek/pages/detail-page/patterns/api-doc-detail.md +3 -7
- package/src/teamix-evo-design-opentrek/pages/detail-page/patterns/comparison-detail.md +3 -7
- package/src/teamix-evo-design-opentrek/pages/detail-page/patterns/monitor-detail.md +3 -7
- package/src/teamix-evo-design-opentrek/pages/detail-page/patterns/resource-detail.md +10 -10
- package/src/teamix-evo-design-opentrek/pages/form-page/SKILL.md +26 -27
- package/src/teamix-evo-design-opentrek/pages/list-page/SKILL.md +35 -36
- package/src/teamix-evo-design-opentrek/pages/list-page/_shared/item-card-spec.md +41 -32
- package/src/teamix-evo-design-opentrek/pages/list-page/patterns/card-list-opentrek.md +10 -10
- package/src/teamix-evo-design-opentrek/pages/list-page/patterns/card-list.md +23 -23
- package/src/teamix-evo-design-opentrek/pages/list-page/patterns/standard-list-opentrek.md +8 -8
- package/src/teamix-evo-design-opentrek/pages/list-page/patterns/standard-list.md +8 -8
- package/src/teamix-evo-design-opentrek/patterns/color-mapping.md +2 -2
- package/src/teamix-evo-design-opentrek/patterns/dashboard.md +1 -1
- package/src/teamix-evo-design-opentrek/patterns/detail-page.md +9 -9
- package/src/teamix-evo-design-opentrek/patterns/form-page.md +6 -6
- package/src/teamix-evo-design-opentrek/patterns/list-page.md +9 -9
- package/src/teamix-evo-design-opentrek/patterns/page-types.md +3 -3
- package/src/teamix-evo-design-opentrek/principles.md +541 -0
- package/src/teamix-evo-design-opentrek/rules/common-components.json +206 -76
- package/src/teamix-evo-design-opentrek/rules/component-specs.json +2 -2
- package/src/teamix-evo-design-opentrek/rules/design-tokens.css +223 -218
- package/src/teamix-evo-design-opentrek/rules/design-tokens.json +10 -32
- package/src/teamix-evo-design-opentrek/rules/page-frame.json +197 -193
- package/src/teamix-evo-design-opentrek/{generation-flow.md → workflow.md} +141 -22
- package/src/teamix-evo-design-uni-manager/SKILL.md +30 -6
- package/src/teamix-evo-design-uni-manager/boundaries.md +2 -2
- package/src/teamix-evo-design-uni-manager/brand.md +1 -1
- package/src/teamix-evo-design-uni-manager/checklist.md +2 -2
- package/src/teamix-evo-design-uni-manager/components.md +11 -11
- package/src/teamix-evo-design-uni-manager/foundations.md +7 -7
- package/src/teamix-evo-design-uni-manager/generation-flow.md +3 -3
- package/src/teamix-evo-manage/SKILL.md +111 -709
- package/src/teamix-evo-manage/init.md +98 -0
- package/src/teamix-evo-manage/migrate.md +100 -0
- package/src/teamix-evo-manage/rearchitect-capture-guide.md +174 -0
- package/src/teamix-evo-manage/rearchitect.md +373 -0
- package/src/teamix-evo-manage/update-component-staging.md +188 -0
- package/src/teamix-evo-manage/update-token-rename.md +126 -0
- package/src/teamix-evo-manage/update-token-treatment.md +116 -0
- package/src/teamix-evo-manage/update.md +213 -0
- package/src/teamix-evo-design-opentrek/brand.md +0 -154
- package/src/teamix-evo-design-opentrek/pages/list-page/_shared/search-combo-spec.md +0 -194
- package/src/teamix-evo-design-opentrek/philosophy.md +0 -98
- package/src/teamix-evo-design-opentrek/rules/README.md +0 -39
- package/src/teamix-evo-design-opentrek/rules/_assets/OP_AGENT RUNTIME.svg +0 -1
- package/src/teamix-evo-design-opentrek/rules/_assets/OP_AI GATEWAY.svg +0 -1
- package/src/teamix-evo-design-opentrek/rules/_assets/OP_AI STUDIO.svg +0 -1
- package/src/teamix-evo-design-opentrek/rules/_assets/OP_DEV-2.svg +0 -1
- package/src/teamix-evo-design-opentrek/rules/_assets/OP_LOGO.svg +0 -1
- package/src/teamix-evo-design-opentrek/rules/_assets/OP_OPS.svg +0 -1
- package/src/teamix-evo-design-opentrek/rules/layout-rules.json +0 -218
- package/src/teamix-evo-design-opentrek/rules/page-header-spec.md +0 -123
- package/src/teamix-evo-design-opentrek/rules/sidebar-spec.md +0 -217
- package/src/teamix-evo-upgrade/SKILL.md +0 -431
- /package/src/teamix-evo-design-opentrek/{rules/boundaries.rules.json → boundaries.json} +0 -0
|
@@ -0,0 +1,541 @@
|
|
|
1
|
+
# Brand & Philosophy — OpenTrek 企业级 AI 产品设计哲学
|
|
2
|
+
|
|
3
|
+
> ⚠️ **何时读本文件**:`workflow.md` Step 1 强制读取。
|
|
4
|
+
> 本文件定义 OpenTrek 的品牌调性、文案语气与设计哲学,是视觉、交互、文案、AI 生成策略的上层裁判依据。
|
|
5
|
+
> 结构化规则见 `rules/*.json`;约束边界见 `boundaries.md`;视觉 token 见 `foundations.md` / `design-tokens.json`。
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## 0. 定位
|
|
10
|
+
|
|
11
|
+
OpenTrek 是面向**阿里云 AI 类产品 / 企业级 AI 控制台 / 大模型工程化平台**的设计语言,服务对象是大型企业中的:
|
|
12
|
+
|
|
13
|
+
- AI 平台管理员
|
|
14
|
+
- 算法工程师 / AI 工程师
|
|
15
|
+
- 研发负责人 / 架构师
|
|
16
|
+
- 运维与 SRE
|
|
17
|
+
- 安全、合规、审计、成本管理角色
|
|
18
|
+
- 业务侧的模型应用负责人
|
|
19
|
+
|
|
20
|
+
这些用户的核心诉求不是“被 AI 惊艳”,而是:
|
|
21
|
+
|
|
22
|
+
1. **可信**:知道结果从哪里来、是否可靠、是否可复核。
|
|
23
|
+
2. **可控**:知道系统会做什么、不会做什么,关键动作可审批、可回滚、可追责。
|
|
24
|
+
3. **安全**:数据、权限、模型调用、企业资产边界明确。
|
|
25
|
+
4. **高效**:复杂任务可以被快速配置、批量执行、持续观测。
|
|
26
|
+
5. **可规模化**:适合多团队、多环境、多模型、多租户、多业务线长期使用。
|
|
27
|
+
6. **成本可见**:token、算力、存储、调用量、资源配额都能被看见和治理。
|
|
28
|
+
|
|
29
|
+
**核心主张**:让企业安全、可控、高效地使用 AI,而不是把 AI 做成不可解释的黑箱。
|
|
30
|
+
|
|
31
|
+
---
|
|
32
|
+
|
|
33
|
+
# Part A · 品牌调性
|
|
34
|
+
|
|
35
|
+
---
|
|
36
|
+
|
|
37
|
+
## A1. 视觉风格五维
|
|
38
|
+
|
|
39
|
+
| 维度 | 定位 | 具体表现 | 对立面(禁止) |
|
|
40
|
+
|---|---|---|---|
|
|
41
|
+
| **色彩情绪** | 稳定、可信、技术感 | 品牌主色 `#0055EE` / 阿里云蓝系;状态色严格语义化;高对比信息层级 | 花哨多彩、渐变堆叠、装饰性大色块 |
|
|
42
|
+
| **信息密度** | 企业级高密度 | 单屏承载核心监控、配置、审批、操作;表格、筛选、批量操作优先 | 大面积无效留白、卡片堆叠、营销页式排版 |
|
|
43
|
+
| **视觉层次** | 克制有序 | 通过间距、字重、色阶、分组建立 3 级层级 | 多重强调、全部高亮、组件互相抢焦点 |
|
|
44
|
+
| **交互反馈** | 即时、确定、可追踪 | 操作后 ≤ 200ms 给出状态反馈;长任务展示进度、阶段、日志、结果 | 静默执行、模糊状态、只给“处理中” |
|
|
45
|
+
| **圆角风格** | 中圆角、工具感 | `rounded-md` 8px / `rounded-lg` 12px;重要容器圆角与阴影同档对应 | 全直角、胶囊化、超大圆角、卡通感 |
|
|
46
|
+
| **AI 表达** | 证据优先 | AI 结果必须展示依据、置信度、限制、下一步动作 | “魔法感”、拟人化、无来源结论 |
|
|
47
|
+
|
|
48
|
+
---
|
|
49
|
+
|
|
50
|
+
## A2. 情感矩阵
|
|
51
|
+
|
|
52
|
+
```text
|
|
53
|
+
可信赖 ████████████████████ 98% ← 不可让步
|
|
54
|
+
安全感 ███████████████████░ 95% ← 不可让步
|
|
55
|
+
可控感 ███████████████████░ 95% ← 不可让步
|
|
56
|
+
高效率 ██████████████████░░ 90%
|
|
57
|
+
专业感 ██████████████████░░ 88%
|
|
58
|
+
现代感 ████████████████░░░░ 75%
|
|
59
|
+
亲和力 ██████████░░░░░░░░░░ 50% ← 次要
|
|
60
|
+
趣味性 ███░░░░░░░░░░░░░░░░░ 15% ← 极度克制
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
> 对企业级 AI 产品而言,“可信赖、安全感、可控感”优先于“聪明感”和“惊艳感”。AI 能力越强,界面越需要提供边界、依据、确认和回滚机制。
|
|
64
|
+
|
|
65
|
+
---
|
|
66
|
+
|
|
67
|
+
## A3. 品牌个性
|
|
68
|
+
|
|
69
|
+
| 特征 | 描述 | 设计映射 |
|
|
70
|
+
|---|---|---|
|
|
71
|
+
| **可信** | 企业用户需要确认 AI 结果是否有依据 | 来源引用、证据链、置信度、生成时间、模型版本、审计记录 |
|
|
72
|
+
| **安全** | 企业数据、权限、模型调用、外部工具都存在风险边界 | RBAC、审批流、敏感操作确认、数据脱敏、越权提示 |
|
|
73
|
+
| **可控** | 用户必须知道 AI 将要执行什么、影响什么资源 | 执行计划、影响范围、Dry-run、人工确认、回滚入口 |
|
|
74
|
+
| **透明** | AI 黑箱会降低大型企业采纳意愿 | Trace、工具调用日志、参数、上下文、失败原因、成本拆解 |
|
|
75
|
+
| **高效** | 企业用户面对大量任务、数据和资源 | 批量操作、筛选持久化、模板化、自动化工作流、快捷入口 |
|
|
76
|
+
| **稳定** | 企业级平台不能频繁改变操作模型 | 一致的页面骨架、固定操作区、统一状态语义、可预期跳转 |
|
|
77
|
+
|
|
78
|
+
---
|
|
79
|
+
|
|
80
|
+
## A4. 文案语气总体风格
|
|
81
|
+
|
|
82
|
+
> **准确 > 亲切。可执行 > 有温度。证据 > 修辞。边界 > 承诺。**
|
|
83
|
+
|
|
84
|
+
文案目标不是“让用户觉得 AI 很聪明”,而是帮助用户快速判断:
|
|
85
|
+
|
|
86
|
+
1. 当前发生了什么。
|
|
87
|
+
2. 为什么发生。
|
|
88
|
+
3. 影响范围是什么。
|
|
89
|
+
4. 用户下一步该做什么。
|
|
90
|
+
5. 结果是否可信、是否可复核、是否可回滚。
|
|
91
|
+
|
|
92
|
+
### A4.1 语气矩阵
|
|
93
|
+
|
|
94
|
+
| 场景 | 语气 | ✅ 正例 | ❌ 反例 |
|
|
95
|
+
|---|---|---|---|
|
|
96
|
+
| 标题 / 导航 | 名词、定语短句 | “模型服务” / “知识库配置” / “调用审计” | “你的 AI 小助手” |
|
|
97
|
+
| 引导说明 | 简洁、可执行 | “上传文档后,可创建企业知识库并配置召回策略。” | “快来让 AI 学习你的资料吧~” |
|
|
98
|
+
| 主操作按钮 | 动宾结构、≤ 6 字 | “创建应用” / “发布模型” / “运行评测” | “立即开启智能之旅” |
|
|
99
|
+
| 危险按钮 | 明确动作 + 对象 | “删除知识库” / “下线模型” / “撤销授权” | “确认” / “OK” |
|
|
100
|
+
| 错误提示 | 对象 + 原因 + 建议 | “知识库同步失败:3 个文件解析超时。建议稍后重试或减少单批文件数量。” | “任务失败,请重试” |
|
|
101
|
+
| 成功反馈 | 已完成事实 | “已发布模型服务 v3。” | “发布成功!太棒了!” |
|
|
102
|
+
| 空状态 | 当前状态 + 下一步 | “暂无评测任务。创建任务以比较模型效果。” | “这里空空如也~” |
|
|
103
|
+
| 加载提示 | 阶段化进行时 | “正在解析文档,已完成 18/42。” | “AI 正在努力思考中” |
|
|
104
|
+
| AI 结论 | 结论 + 依据 + 限制 | “建议选择 qwen-plus。依据:延迟低 18%,成本低 12%。限制:长文本场景未覆盖。” | “这是最佳选择” |
|
|
105
|
+
|
|
106
|
+
### A4.2 写作规范
|
|
107
|
+
|
|
108
|
+
1. **动作明确**:按钮使用动宾结构,如“创建应用”“运行评测”“撤销授权”。
|
|
109
|
+
2. **对象明确**:错误、警告、成功反馈必须指出对象,如“模型服务 v3 发布失败”。
|
|
110
|
+
3. **原因明确**:避免仅写“失败”。必须补充原因或排查路径。
|
|
111
|
+
4. **影响明确**:涉及资源、权限、成本、数据的操作,必须说明影响范围。
|
|
112
|
+
5. **数值明确**:使用具体数值,不写“很多”“较大”“明显”。
|
|
113
|
+
6. **边界明确**:不确定时必须说明不确定来源,而不是模糊承诺。
|
|
114
|
+
7. **避免拟人化**:不使用“我正在思考”“我帮你搞定”。使用“系统正在生成”“AI 建议”。
|
|
115
|
+
8. **避免营销化**:不使用“颠覆式”“革命性”“一键搞定所有问题”等不可验证表达。
|
|
116
|
+
|
|
117
|
+
### A4.3 标点与排版
|
|
118
|
+
|
|
119
|
+
- 按钮文字、表头标签:不加句号。
|
|
120
|
+
- 描述、提示、说明:使用完整句子,建议加句号。
|
|
121
|
+
- 列表项格式统一:全加句号或全不加。
|
|
122
|
+
- 中英文 / 中数字之间加 1 个空格:`已选 3 项 / 共 128 项`。
|
|
123
|
+
- 模型名、实例 ID、任务 ID 使用等宽样式:`qwen-plus`、`job-xxx`。
|
|
124
|
+
- 时间格式统一:`2026-05-14 10:23:45`。
|
|
125
|
+
- 百分比、token、费用、延迟保留必要精度:`12.4%`、`18,240 tokens`、`¥36.20`、`230 ms`。
|
|
126
|
+
|
|
127
|
+
---
|
|
128
|
+
|
|
129
|
+
## A5. AI 场景文案规则
|
|
130
|
+
|
|
131
|
+
AI 相关文案必须遵守以下原则:
|
|
132
|
+
|
|
133
|
+
| 规则 | 要求 | 示例 |
|
|
134
|
+
|---|---|---|
|
|
135
|
+
| **不拟人化** | 不用第一人称,不把 AI 塑造成同事或人格 | ✅ “AI 已生成建议方案。” ❌ “我已经想好了。” |
|
|
136
|
+
| **不夸大能力** | 不使用绝对化承诺 | ✅ “可提升排查效率。” ❌ “彻底解决所有问题。” |
|
|
137
|
+
| **说明依据** | 关键建议必须说明依据 | “依据最近 7 天调用数据,峰值延迟主要出现在 20:00~22:00。” |
|
|
138
|
+
| **说明限制** | 数据不足、覆盖不全、推断性结论必须标注 | “该结论未覆盖离线批处理任务。” |
|
|
139
|
+
| **说明下一步** | AI 结论必须可行动 | “建议先扩容推理副本数至 4,并观察 30 分钟。” |
|
|
140
|
+
| **高风险需确认** | 影响生产、权限、成本、数据的动作必须人工确认 | “该操作将下线生产模型服务,请确认后继续。” |
|
|
141
|
+
|
|
142
|
+
### A5.1 AI 结果展示结构
|
|
143
|
+
|
|
144
|
+
AI 生成的建议、诊断、总结、执行计划,默认使用以下结构:
|
|
145
|
+
|
|
146
|
+
```text
|
|
147
|
+
结论:一句话给出判断。
|
|
148
|
+
依据:列出关键证据、数据来源、时间范围。
|
|
149
|
+
影响:说明影响的资源、用户、成本、权限或数据。
|
|
150
|
+
风险:说明不确定性、缺失信息、潜在副作用。
|
|
151
|
+
建议动作:给出下一步可执行动作。
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
复杂任务可扩展为:
|
|
155
|
+
|
|
156
|
+
```text
|
|
157
|
+
目标 → 当前状态 → 约束 → 方案对比 → 推荐方案 → 执行计划 → 风险与回滚 → 审批确认
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
---
|
|
161
|
+
|
|
162
|
+
## A6. 危险操作与企业治理文案(硬约束)
|
|
163
|
+
|
|
164
|
+
以下操作必须使用强确认模式:
|
|
165
|
+
|
|
166
|
+
- 删除、释放、下线、禁用、撤销授权。
|
|
167
|
+
- 修改生产环境配置。
|
|
168
|
+
- 变更模型服务路由、流量比例、API Key、权限策略。
|
|
169
|
+
- 执行可能产生明显费用的任务。
|
|
170
|
+
- 导出、删除、脱敏、同步企业数据。
|
|
171
|
+
- 调用外部工具、写入外部系统、触发自动化工作流。
|
|
172
|
+
|
|
173
|
+
| 元素 | 规则 | 示例 |
|
|
174
|
+
|---|---|---|
|
|
175
|
+
| **标题** | 陈述句,包含动作和对象 | ✅ “下线模型服务 `prod-chat-v3`” ❌ “确定要下线吗?” |
|
|
176
|
+
| **正文** | 列出具体后果、影响范围、是否可恢复 | “下线后,生产流量将停止转发到该服务。当前关联 3 个应用,预计影响 12 个调用方。” |
|
|
177
|
+
| **确认按钮** | 重复危险动作 | ✅ “下线服务” ❌ “确认” |
|
|
178
|
+
| **取消按钮** | 使用“取消” | ❌ “再想想” |
|
|
179
|
+
| **二次校验** | 高风险操作要求输入对象名或审批 | “请输入 `prod-chat-v3` 以确认下线。” |
|
|
180
|
+
| **审计记录** | 成功后展示审计入口 | “已提交下线申请。查看审批与审计记录。” |
|
|
181
|
+
|
|
182
|
+
---
|
|
183
|
+
|
|
184
|
+
## A7. 视觉正反例对照
|
|
185
|
+
|
|
186
|
+
### A7.1 布局
|
|
187
|
+
|
|
188
|
+
| ✅ 正例 | ❌ 反例 |
|
|
189
|
+
|---|---|
|
|
190
|
+
| 控制台页面保留稳定的 Header、Sidebar、Content、Action Zone | 同一产品多种导航结构混用 |
|
|
191
|
+
| 列表页筛选固定顶部,表格自适应高度,分页固定底部 | 筛选、批量操作、分页位置随机 |
|
|
192
|
+
| 详情页按“概览 → 配置 → 监控 → 日志 → 审计”组织 | 按技术字段字母顺序排列 |
|
|
193
|
+
| AI 执行任务展示阶段、日志、工具调用和结果 | 只展示一个“正在处理”Loader |
|
|
194
|
+
| 成本、延迟、错误率、调用量在同一分析区域展示 | 指标分散在多个页面,无法对比 |
|
|
195
|
+
|
|
196
|
+
### A7.2 色彩
|
|
197
|
+
|
|
198
|
+
| ✅ 正确 | ❌ 错误 |
|
|
199
|
+
|---|---|
|
|
200
|
+
| 主色用于主行动点、当前选中态、关键路径 | 用主色表示错误或警告 |
|
|
201
|
+
| 状态色只表达状态语义:成功、警告、错误、处理中、未知 | 每个模块自定义一套状态色 |
|
|
202
|
+
| 图表使用 `chart-*` token,并保证可读性 | 用高饱和色填满大面积背景 |
|
|
203
|
+
| AI 结果中的置信度、风险、来源使用中性色 + 状态标识 | 用强主色包装所有 AI 输出 |
|
|
204
|
+
|
|
205
|
+
### A7.3 动效
|
|
206
|
+
|
|
207
|
+
| ✅ 正确 | ❌ 错误 |
|
|
208
|
+
|---|---|
|
|
209
|
+
| Hover 使用 `transition-colors duration-150 ease-out` | 给 width / height / margin 加过渡,造成布局抖动 |
|
|
210
|
+
| 弹窗入场使用轻量 opacity / transform | 大面积弹跳、旋转、粒子动效 |
|
|
211
|
+
| 长任务用进度、阶段、日志、Skeleton | 用复杂 Loader 替代真实进度 |
|
|
212
|
+
| AI 生成过程展示结构化阶段 | 用“打字机效果”替代状态反馈 |
|
|
213
|
+
|
|
214
|
+
### A7.4 AI 结果卡片
|
|
215
|
+
|
|
216
|
+
| ✅ 正确 | ❌ 错误 |
|
|
217
|
+
|---|---|
|
|
218
|
+
| 展示结论、依据、影响、风险、下一步 | 只输出长段自然语言 |
|
|
219
|
+
| 可展开查看证据、上下文、工具调用 | 隐藏推理来源和执行日志 |
|
|
220
|
+
| 高风险动作必须进入确认流程 | AI 直接执行生产变更 |
|
|
221
|
+
| 结果可以复制、导出、追踪版本 | AI 回复不可复核、不可审计 |
|
|
222
|
+
|
|
223
|
+
---
|
|
224
|
+
|
|
225
|
+
## A8. 品牌自检
|
|
226
|
+
|
|
227
|
+
- [ ] 页面是否让用户明确知道“当前是什么、下一步做什么”。
|
|
228
|
+
- [ ] AI 结果是否包含依据、限制和下一步动作。
|
|
229
|
+
- [ ] 高风险操作是否有确认、影响范围、回滚或审批入口。
|
|
230
|
+
- [ ] 是否避免拟人化、营销化、不可验证的 AI 表述。
|
|
231
|
+
- [ ] 错误提示是否包含对象、原因、建议。
|
|
232
|
+
- [ ] 成本、token、延迟、失败率等关键指标是否可见。
|
|
233
|
+
- [ ] 主色是否只用于 CTA、当前选中态和关键路径。
|
|
234
|
+
- [ ] 状态语义是否通过颜色 + 图标 + 文案共同表达。
|
|
235
|
+
- [ ] 动效是否只用于状态变化和焦点引导,而非装饰。
|
|
236
|
+
- [ ] 文案是否符合企业级语气:准确、克制、可执行。
|
|
237
|
+
|
|
238
|
+
---
|
|
239
|
+
|
|
240
|
+
# Part B · 设计哲学
|
|
241
|
+
|
|
242
|
+
---
|
|
243
|
+
|
|
244
|
+
## B1. 我们是谁
|
|
245
|
+
|
|
246
|
+
OpenTrek 是面向**大型企业 AI 使用、治理、交付和运维**的设计语言。它覆盖模型服务、知识库、Agent、工作流、评测、观测、审计、权限、成本等场景。
|
|
247
|
+
|
|
248
|
+
企业级 AI 产品的关键矛盾是:
|
|
249
|
+
|
|
250
|
+
> AI 提升了系统能力,但也引入了不确定性、不可解释性、数据风险、成本波动和责任边界问题。
|
|
251
|
+
|
|
252
|
+
因此,OpenTrek 的设计目标不是让 AI 看起来“更聪明”,而是让企业用户在复杂 AI 系统中保持:
|
|
253
|
+
|
|
254
|
+
- 对结果的判断权。
|
|
255
|
+
- 对动作的控制权。
|
|
256
|
+
- 对风险的知情权。
|
|
257
|
+
- 对成本的治理权。
|
|
258
|
+
- 对过程的审计权。
|
|
259
|
+
|
|
260
|
+
**核心主张**:复杂能力必须被界面转译成清晰、可控、可验证的工作系统。
|
|
261
|
+
|
|
262
|
+
---
|
|
263
|
+
|
|
264
|
+
## B2. 六条底层信念
|
|
265
|
+
|
|
266
|
+
1. **信任来自证据,不来自语气。**
|
|
267
|
+
企业用户不会因为 AI 表达自信而信任它,只会因为依据、来源、限制、历史表现和可复核路径而信任它。
|
|
268
|
+
|
|
269
|
+
2. **AI 越自动化,界面越要可控。**
|
|
270
|
+
自动执行必须伴随权限、确认、影响分析、审批、回滚和审计。
|
|
271
|
+
|
|
272
|
+
3. **安全与治理不是附加功能,而是产品骨架。**
|
|
273
|
+
RBAC、数据边界、模型调用边界、审计链路必须进入基础交互模型。
|
|
274
|
+
|
|
275
|
+
4. **一致性优先于创造性。**
|
|
276
|
+
企业控制台中,“惊喜”通常意味着学习成本和误操作风险。
|
|
277
|
+
|
|
278
|
+
5. **信息密度服务于决策,不服务于堆砌。**
|
|
279
|
+
高密度不是把信息塞满,而是让用户在一个视图内完成判断。
|
|
280
|
+
|
|
281
|
+
6. **成本是 AI 体验的一部分。**
|
|
282
|
+
token、算力、存储、调用量、上下文长度、评测任务都必须被可视化和治理。
|
|
283
|
+
|
|
284
|
+
---
|
|
285
|
+
|
|
286
|
+
## B3. 设计原则(按优先级降序)
|
|
287
|
+
|
|
288
|
+
冲突时裁决顺序:
|
|
289
|
+
|
|
290
|
+
```text
|
|
291
|
+
Governance & Safety
|
|
292
|
+
> Trust & Evidence
|
|
293
|
+
> Reliability & Predictability
|
|
294
|
+
> Clarity
|
|
295
|
+
> Efficiency at Scale
|
|
296
|
+
> Cost Awareness
|
|
297
|
+
```
|
|
298
|
+
|
|
299
|
+
---
|
|
300
|
+
|
|
301
|
+
### P1 · Governance & Safety — 治理与安全
|
|
302
|
+
|
|
303
|
+
> 企业级 AI 的第一原则是风险可控。
|
|
304
|
+
|
|
305
|
+
**必须做到:**
|
|
306
|
+
|
|
307
|
+
- 权限、数据、模型、工具调用必须有清晰边界。
|
|
308
|
+
- 生产变更必须有确认、审批或回滚路径。
|
|
309
|
+
- 高风险操作必须展示影响范围。
|
|
310
|
+
- 敏感数据必须标识、脱敏或权限隔离。
|
|
311
|
+
- 外部工具调用必须展示工具名、参数、目标系统和结果。
|
|
312
|
+
|
|
313
|
+
**评判问题:**
|
|
314
|
+
|
|
315
|
+
- 用户是否知道该操作影响哪些资源、数据、权限或业务?
|
|
316
|
+
- 操作失败或误操作后,是否有恢复路径?
|
|
317
|
+
- 审计人员是否能追踪谁在什么时候做了什么?
|
|
318
|
+
|
|
319
|
+
---
|
|
320
|
+
|
|
321
|
+
### P2 · Trust & Evidence — 信任与证据
|
|
322
|
+
|
|
323
|
+
> AI 结果必须可以被追问、复核、质疑。
|
|
324
|
+
|
|
325
|
+
**必须做到:**
|
|
326
|
+
|
|
327
|
+
- 关键结论展示来源、数据时间范围、模型版本或工具调用记录。
|
|
328
|
+
- AI 建议展示置信度或不确定性说明。
|
|
329
|
+
- 重要判断提供“查看依据”入口。
|
|
330
|
+
- 不确定时不假装确定。
|
|
331
|
+
- 不把生成内容伪装成事实。
|
|
332
|
+
|
|
333
|
+
**评判问题:**
|
|
334
|
+
|
|
335
|
+
- 用户能否判断 AI 结果是否可信?
|
|
336
|
+
- 用户能否追溯结论来自哪些数据、文档、日志或工具?
|
|
337
|
+
- 如果结果错误,是否能定位错误来源?
|
|
338
|
+
|
|
339
|
+
---
|
|
340
|
+
|
|
341
|
+
### P3 · Reliability & Predictability — 可靠与可预期
|
|
342
|
+
|
|
343
|
+
> 企业用户不应该猜测页面、任务或 AI 会如何响应。
|
|
344
|
+
|
|
345
|
+
**必须做到:**
|
|
346
|
+
|
|
347
|
+
- 同类页面使用同样的信息架构和操作位置。
|
|
348
|
+
- 同类任务使用同样的状态模型:待运行、运行中、部分成功、失败、已取消、已完成。
|
|
349
|
+
- 长任务展示阶段、进度、耗时、失败点和重试入口。
|
|
350
|
+
- AI 执行计划先展示,再执行。
|
|
351
|
+
- 页面跳转关系可预测:面包屑、返回、URL 语义稳定。
|
|
352
|
+
|
|
353
|
+
**评判问题:**
|
|
354
|
+
|
|
355
|
+
- 用户在 A 页面学会的操作,能否迁移到 B 页面?
|
|
356
|
+
- 用户能否在任务执行前预测影响范围?
|
|
357
|
+
- 系统失败后,用户是否知道下一步如何处理?
|
|
358
|
+
|
|
359
|
+
---
|
|
360
|
+
|
|
361
|
+
### P4 · Clarity — 清晰优先
|
|
362
|
+
|
|
363
|
+
> 复杂系统必须通过界面降低认知负荷。
|
|
364
|
+
|
|
365
|
+
**必须做到:**
|
|
366
|
+
|
|
367
|
+
- 页面只突出一个主任务。
|
|
368
|
+
- 关键信息优先:状态、风险、影响、成本、下一步。
|
|
369
|
+
- 状态语义使用颜色 + 图标 + 文案三重表达。
|
|
370
|
+
- 文字对比度满足可访问性要求。
|
|
371
|
+
- 表格、表单、详情页遵循固定信息层级。
|
|
372
|
+
|
|
373
|
+
**评判问题:**
|
|
374
|
+
|
|
375
|
+
- 新用户是否能在 3 秒内理解页面目的?
|
|
376
|
+
- 用户是否能一眼看出异常、风险、待处理项?
|
|
377
|
+
- 是否存在多个视觉焦点互相竞争?
|
|
378
|
+
|
|
379
|
+
---
|
|
380
|
+
|
|
381
|
+
### P5 · Efficiency at Scale — 规模化效率
|
|
382
|
+
|
|
383
|
+
> 大型企业的效率来自批量、模板、复用和自动化,而不是单点快捷。
|
|
384
|
+
|
|
385
|
+
**必须做到:**
|
|
386
|
+
|
|
387
|
+
- 高频任务 ≤ 2 次点击可达。
|
|
388
|
+
- 支持批量操作、批量配置、批量重试。
|
|
389
|
+
- 筛选条件、视图配置、列配置可持久化。
|
|
390
|
+
- 支持模板、预设、策略复用。
|
|
391
|
+
- 支持跨环境、跨团队、跨业务线的统一治理视图。
|
|
392
|
+
|
|
393
|
+
**评判问题:**
|
|
394
|
+
|
|
395
|
+
- 当资源数量从 10 个变成 10,000 个时,界面是否仍然可用?
|
|
396
|
+
- 用户是否能复用配置,而不是重复填写?
|
|
397
|
+
- 是否支持团队级协作和交接?
|
|
398
|
+
|
|
399
|
+
---
|
|
400
|
+
|
|
401
|
+
### P6 · Cost Awareness — 成本可感知
|
|
402
|
+
|
|
403
|
+
> AI 成本不可见,就无法被企业治理。
|
|
404
|
+
|
|
405
|
+
**必须做到:**
|
|
406
|
+
|
|
407
|
+
- 展示 token、调用量、延迟、失败率、费用估算。
|
|
408
|
+
- 长任务执行前给出成本预估。
|
|
409
|
+
- 任务执行后给出成本归因。
|
|
410
|
+
- 成本异常提供解释和优化建议。
|
|
411
|
+
- 模型、上下文、检索、工具调用的成本差异可比较。
|
|
412
|
+
|
|
413
|
+
**评判问题:**
|
|
414
|
+
|
|
415
|
+
- 用户能否在执行前知道大致成本?
|
|
416
|
+
- 用户能否定位成本上涨来自模型、token、知识库、工具调用还是重试?
|
|
417
|
+
- 用户能否基于成本和效果做取舍?
|
|
418
|
+
|
|
419
|
+
---
|
|
420
|
+
|
|
421
|
+
## B4. 原则冲突示例
|
|
422
|
+
|
|
423
|
+
| 场景 | 候选 | 选择 | 理由 |
|
|
424
|
+
|---|---|---|---|
|
|
425
|
+
| AI 是否可以直接下线生产模型? | A. 直接执行,提高效率<br>B. 展示影响范围并要求确认 | B | Governance & Safety > Efficiency |
|
|
426
|
+
| 诊断结果是否只显示结论? | A. 只显示“根因是 X”<br>B. 显示结论、证据、日志、限制 | B | Trust & Evidence > Clarity 的表面简洁 |
|
|
427
|
+
| 表格是否为了美观减少列? | A. 减少列,界面更清爽<br>B. 保留关键治理字段,可配置隐藏 | B | Clarity + Governance > 视觉轻量 |
|
|
428
|
+
| 低风险建议是否需要审批? | A. 所有建议都审批<br>B. 按风险等级分级确认 | B | Efficiency at Scale 与 Safety 平衡 |
|
|
429
|
+
| 模型评测是否默认跑全量? | A. 全量评测,结果完整<br>B. 先抽样预估成本,再允许全量 | B | Cost Awareness > 结果完整性 |
|
|
430
|
+
| AI 回复是否可以更“亲切”? | A. 拟人化表达<br>B. 使用准确、克制、可执行表达 | B | Trust & Evidence > 亲和力 |
|
|
431
|
+
|
|
432
|
+
---
|
|
433
|
+
|
|
434
|
+
## B5. 决策框架
|
|
435
|
+
|
|
436
|
+
当无法判断一个设计是否正确时,按以下顺序裁决:
|
|
437
|
+
|
|
438
|
+
1. **是否安全可控?** 影响生产、权限、数据、成本的动作是否有防护栏?
|
|
439
|
+
2. **是否有证据?** 结论、建议、诊断是否有来源、限制和追溯路径?
|
|
440
|
+
3. **是否可预期?** 用户是否能预测点击、提交、执行后的结果?
|
|
441
|
+
4. **是否清晰?** 用户是否能快速理解当前状态、风险和下一步动作?
|
|
442
|
+
5. **是否高效?** 高频任务是否足够短路径,批量场景是否可规模化?
|
|
443
|
+
6. **是否成本可见?** 执行前后是否能看到 token、调用、资源和费用影响?
|
|
444
|
+
7. **是否一致?** 是否复用既有页面类型、组件、文案和状态模型?
|
|
445
|
+
8. **是否可访问?** 对比度、键盘操作、状态传达是否满足可访问性要求?
|
|
446
|
+
9. **是否克制?** 是否存在装饰性元素、过度动效或营销式表达?
|
|
447
|
+
|
|
448
|
+
---
|
|
449
|
+
|
|
450
|
+
## B6. 页面与组件设计推导
|
|
451
|
+
|
|
452
|
+
### B6.1 AI 任务页面
|
|
453
|
+
|
|
454
|
+
必须包含:
|
|
455
|
+
|
|
456
|
+
- 任务目标。
|
|
457
|
+
- 输入数据 / 约束条件。
|
|
458
|
+
- 执行计划。
|
|
459
|
+
- 运行阶段。
|
|
460
|
+
- 工具调用。
|
|
461
|
+
- 结果摘要。
|
|
462
|
+
- 证据与日志。
|
|
463
|
+
- 风险与限制。
|
|
464
|
+
- 成本与耗时。
|
|
465
|
+
- 下一步动作。
|
|
466
|
+
|
|
467
|
+
### B6.2 模型 / Agent / 工作流详情页
|
|
468
|
+
|
|
469
|
+
默认信息架构:
|
|
470
|
+
|
|
471
|
+
```text
|
|
472
|
+
概览 → 配置 → 评测 → 监控 → 日志 → 权限 → 审计 → 成本
|
|
473
|
+
```
|
|
474
|
+
|
|
475
|
+
### B6.3 列表页
|
|
476
|
+
|
|
477
|
+
必须支持:
|
|
478
|
+
|
|
479
|
+
- 搜索。
|
|
480
|
+
- 筛选。
|
|
481
|
+
- 状态筛选。
|
|
482
|
+
- 环境筛选。
|
|
483
|
+
- 负责人 / 团队筛选。
|
|
484
|
+
- 批量操作。
|
|
485
|
+
- 列配置。
|
|
486
|
+
- 排序。
|
|
487
|
+
- 导出或审计入口。
|
|
488
|
+
|
|
489
|
+
### B6.4 AI 结果卡片
|
|
490
|
+
|
|
491
|
+
默认结构:
|
|
492
|
+
|
|
493
|
+
```text
|
|
494
|
+
标题
|
|
495
|
+
状态 / 置信度 / 时间范围
|
|
496
|
+
结论
|
|
497
|
+
依据
|
|
498
|
+
影响
|
|
499
|
+
风险
|
|
500
|
+
建议动作
|
|
501
|
+
查看详情 / 查看日志 / 复制 / 导出
|
|
502
|
+
```
|
|
503
|
+
|
|
504
|
+
---
|
|
505
|
+
|
|
506
|
+
## B7. 文件分工
|
|
507
|
+
|
|
508
|
+
- `principles.md`:为什么这样设计;定义品牌调性、文案语气、设计哲学。
|
|
509
|
+
- `boundaries.md`:不能做什么;定义禁止项、风险边界、强约束。
|
|
510
|
+
- `foundations.md`:用什么 token;定义颜色、字体、间距、圆角、阴影、状态语义。
|
|
511
|
+
- `rules/*.json`:机器可消费的结构化规则;AI 生成和校验的事实源。
|
|
512
|
+
- `patterns/`:具体页面、组件、流程的组合范式。
|
|
513
|
+
- `examples/`:可复用样例,不作为规则源头。
|
|
514
|
+
|
|
515
|
+
冲突时优先级:
|
|
516
|
+
|
|
517
|
+
```text
|
|
518
|
+
boundaries.md
|
|
519
|
+
> rules/*.json
|
|
520
|
+
> foundations.md / design-tokens.json
|
|
521
|
+
> principles.md
|
|
522
|
+
> patterns/
|
|
523
|
+
> examples/
|
|
524
|
+
```
|
|
525
|
+
|
|
526
|
+
---
|
|
527
|
+
|
|
528
|
+
## B8. 最终验收标准
|
|
529
|
+
|
|
530
|
+
一个符合 OpenTrek 的企业级 AI 产品界面,应该满足:
|
|
531
|
+
|
|
532
|
+
- [ ] 用户知道当前页面的核心任务。
|
|
533
|
+
- [ ] 用户知道 AI 结果的依据、限制和下一步动作。
|
|
534
|
+
- [ ] 用户知道关键操作的影响范围、风险和回滚路径。
|
|
535
|
+
- [ ] 用户可以追踪模型、工具、数据、权限、成本的变化。
|
|
536
|
+
- [ ] 用户可以用统一方式管理多模型、多 Agent、多环境、多团队。
|
|
537
|
+
- [ ] 页面在高密度信息下仍保持清晰层级。
|
|
538
|
+
- [ ] 文案准确、克制、可执行,无拟人化和营销化表达。
|
|
539
|
+
- [ ] 所有状态都有颜色、图标、文案或结构化补充,不只依赖颜色。
|
|
540
|
+
- [ ] 关键流程可被审计、复核、导出或交接。
|
|
541
|
+
- [ ] 视觉风格服务于可信、可控和效率,而不是装饰。
|