@teamix-evo/skills 0.2.0 → 0.3.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 +18 -8
- package/_template/SKILL.md.hbs +14 -1
- package/manifest.json +59 -2
- package/package.json +6 -2
- package/skills/teamix-evo-coding-conventions/SKILL.md +92 -0
- package/skills/teamix-evo-coding-conventions/api-layering.md +225 -0
- package/skills/teamix-evo-coding-conventions/checklist.md +173 -0
- package/skills/teamix-evo-coding-conventions/error-and-loading.md +269 -0
- package/skills/teamix-evo-coding-conventions/file-structure.md +273 -0
- package/skills/teamix-evo-coding-conventions/forms-and-validation.md +220 -0
- package/skills/teamix-evo-coding-conventions/reuse-first.md +122 -0
- package/skills/teamix-evo-coding-conventions/routing-and-codesplit.md +298 -0
- package/skills/teamix-evo-coding-conventions/testing.md +313 -0
- package/skills/teamix-evo-design-rules/SKILL.md +86 -0
- package/skills/teamix-evo-design-rules/boundaries.md +89 -0
- package/skills/teamix-evo-design-rules/checklist.md +108 -0
- package/skills/teamix-evo-design-rules/generation-flow.md +142 -0
- package/skills/teamix-evo-design-rules/prompts/page-design.md +148 -0
- package/skills/teamix-evo-design-rules-opentrek/SKILL.md +48 -0
- package/skills/teamix-evo-design-rules-opentrek/brand-rules.md +74 -0
- package/skills/teamix-evo-design-rules-uni-manager/SKILL.md +51 -0
- package/skills/teamix-evo-design-rules-uni-manager/ai-scenarios.md +51 -0
- package/skills/teamix-evo-design-rules-uni-manager/command-center.md +108 -0
- package/skills/teamix-evo-design-rules-uni-manager/danger-ops.md +87 -0
- package/skills/teamix-evo-manage/SKILL.md +80 -40
- package/skills/teamix-evo-ui-upgrade/SKILL.md +75 -0
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
# AI 设计发散边界
|
|
2
|
+
|
|
3
|
+
> teamix-evo 是一个**沉稳克制**的设计语言基线。AI 创造性发散的空间是有限的,但在限定边界内仍有充分自由。
|
|
4
|
+
> 本文件是变体中立基线 — 变体专属边界(如 OpenTrek 品牌色用法 / uni-manager 大屏特殊许可)见对应 `teamix-evo-design-rules-<variant>` skill。
|
|
5
|
+
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
## 1. 可以自由发散的方面
|
|
9
|
+
|
|
10
|
+
| 方面 | 自由度说明 |
|
|
11
|
+
|------|----------|
|
|
12
|
+
| **布局方式** | 网格 / 弹性 / 非对称布局,在 Zone Map 约束内自由 |
|
|
13
|
+
| **组件组合** | 不受限于已有页面模板,可创造新组合 |
|
|
14
|
+
| **数据可视化** | 选择最适合数据特征的图表类型 |
|
|
15
|
+
| **信息架构** | Tab / Accordion / 平铺等组织方式自由选择 |
|
|
16
|
+
| **空状态创意** | 空状态和引导态的视觉表达可发挥 |
|
|
17
|
+
| **微交互细节** | 在动效系统范围内添加合理反馈 |
|
|
18
|
+
| **图标选择** | 在统一图标库(Lucide / Radix Icons)内自由选 |
|
|
19
|
+
| **文案润色** | 在变体的 `brand/voice.md`(若有)语气规范内优化措辞 |
|
|
20
|
+
|
|
21
|
+
---
|
|
22
|
+
|
|
23
|
+
## 2. 必须遵守的硬约束
|
|
24
|
+
|
|
25
|
+
| 约束 | 说明 |
|
|
26
|
+
|------|------|
|
|
27
|
+
| **色彩** | 必须在定义的 Palette 范围内(base + chart + sidebar),不得引入新色 |
|
|
28
|
+
| **字号** | 必须在定义的 10 档字号表内(text-xs ~ text-6xl) |
|
|
29
|
+
| **字重** | 仅 normal/medium/semibold/bold 四档 |
|
|
30
|
+
| **圆角** | 必须使用 sm/md/lg/xl/full 五档 |
|
|
31
|
+
| **间距** | 必须基于 4px 网格 |
|
|
32
|
+
| **组件 API** | 必须与 shadcn/ui 对齐,不得 fork 源码 |
|
|
33
|
+
| **动效时长** | 必须在 150 / 200 / 300 / 500ms 四档内 |
|
|
34
|
+
| **z-index** | 必须使用 base/dropdown/sticky/overlay/modal/toast/tooltip 七档 |
|
|
35
|
+
| **危险确认** | 删除 / 释放等破坏性操作 **必须** 二次确认 |
|
|
36
|
+
| **无障碍** | 对比度 ≥ 4.5:1,最小点击区域 44×44,键盘可达 |
|
|
37
|
+
|
|
38
|
+
---
|
|
39
|
+
|
|
40
|
+
## 3. 场景特殊许可(变体扩展)
|
|
41
|
+
|
|
42
|
+
特殊许可由具体变体定义,不在中性基线内。常见入口:
|
|
43
|
+
|
|
44
|
+
- **大屏 / Cockpit / 营销 / AI 卡片**:见所装变体的 `foundations/effects-*.md`
|
|
45
|
+
- **AI 副驾驶专属动效**:见所装变体的 `foundations/motion-*.md`
|
|
46
|
+
- **品牌色 / 装饰元素**:见所装变体的 `brand/`
|
|
47
|
+
|
|
48
|
+
变体特殊许可仅在该场景的页面壳层内生效,**不传播到全局**。
|
|
49
|
+
|
|
50
|
+
---
|
|
51
|
+
|
|
52
|
+
## 4. 灰色地带(需要 AI 判断)
|
|
53
|
+
|
|
54
|
+
| 维度 | 判断依据 |
|
|
55
|
+
|------|---------|
|
|
56
|
+
| **信息密度** | 用户角色:管理员 / 高强度操作用户 → 高;轻度业务用户 → 中 |
|
|
57
|
+
| **动效复杂度** | 动效分级 L1/L2/L3,按场景重要性选择 |
|
|
58
|
+
| **视觉层次数** | 简单页面 2–3 级,复杂页面最多 4 级 |
|
|
59
|
+
| **组件尺寸** | 内容量 + 屏幕空间,移动端优先 default size |
|
|
60
|
+
| **使用 Sheet 还是 Dialog** | 复杂表单 → Sheet;简单确认 → Dialog |
|
|
61
|
+
| **使用主色还是次要色** | 同屏不超过 3 个 primary 焦点 |
|
|
62
|
+
|
|
63
|
+
---
|
|
64
|
+
|
|
65
|
+
## 5. 决策原则(不确定时)
|
|
66
|
+
|
|
67
|
+
按优先级降序:
|
|
68
|
+
|
|
69
|
+
1. **Safety > Predictability > Clarity > Efficiency**
|
|
70
|
+
2. **保守 > 激进** —— 宁可简洁,不要过度设计
|
|
71
|
+
3. **一致 > 新颖** —— 与已有页面保持统一
|
|
72
|
+
4. **复用 > 创造** —— 优先用已有组件
|
|
73
|
+
5. **数据驱动 > 主观判断** —— 不确定时用最常见的模式
|
|
74
|
+
|
|
75
|
+
---
|
|
76
|
+
|
|
77
|
+
## 6. 红线清单(绝对禁止)
|
|
78
|
+
|
|
79
|
+
无论场景如何,以下行为**永远禁止**:
|
|
80
|
+
|
|
81
|
+
- 硬编码颜色 / 间距 / 字号
|
|
82
|
+
- 装饰性动效(弹跳、彩带、爆炸特效)
|
|
83
|
+
- 拟人化 AI 文案("我"、"哈"、"嘿,亲~")
|
|
84
|
+
- 用 emoji 替代图标(除非用户明确要求)
|
|
85
|
+
- 危险操作无二次确认
|
|
86
|
+
- 状态仅靠颜色(无图标 + 文字)
|
|
87
|
+
- Fork shadcn/ui 组件源码以实现样式差异
|
|
88
|
+
- 在普通业务页面使用渐变背景(变体大屏 / 营销许可除外)
|
|
89
|
+
- 使用 `outline-none` 后未提供替代 focus 样式
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
# AI 设计检查清单
|
|
2
|
+
|
|
3
|
+
> AI 生成 UI 代码后,**必须**逐项核对以下清单。任何一项未通过都不应交付。
|
|
4
|
+
> 本文件是变体中立基线 — 变体专属检查项(如品牌色用法 / AI 场景验收 / 大屏只读)见对应 `teamix-evo-design-rules-<variant>` skill。
|
|
5
|
+
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
## 1. 色彩
|
|
9
|
+
|
|
10
|
+
- [ ] 所有颜色使用设计 Token(CSS 变量 / Tailwind Token 类名)
|
|
11
|
+
- [ ] **未硬编码** 任何颜色值(如 `#333`、`rgb(...)` 、`#fff`)
|
|
12
|
+
- [ ] 主色使用不超过 **3 个焦点点位**
|
|
13
|
+
- [ ] 语义色正确绑定业务含义(`destructive` 仅用于危险,不滥用红色)
|
|
14
|
+
- [ ] 文字对比度 ≥ 4.5:1(WCAG AA)
|
|
15
|
+
- [ ] 页面色彩种类不超过 **5 种**
|
|
16
|
+
- [ ] 暗色模式适配通过 CSS 变量自动切换,不硬编码 `dark:` 颜色
|
|
17
|
+
|
|
18
|
+
## 2. 排版
|
|
19
|
+
|
|
20
|
+
- [ ] 页面只有 **1 个 H1**(`text-3xl font-bold`)
|
|
21
|
+
- [ ] 字重变化不超过 **3 种**(normal / medium / semibold / bold 中选 3)
|
|
22
|
+
- [ ] 字号变化不超过 **4 档**
|
|
23
|
+
- [ ] 中文正文字号 ≥ **14px**(`text-sm`),表格密集场景 ≥ 12px
|
|
24
|
+
- [ ] 正文行宽 **60–80 字符**(超过限宽 `max-w-prose`)
|
|
25
|
+
- [ ] 数字 / ID / Hash 使用 `font-mono` 或 `tabular-nums`
|
|
26
|
+
- [ ] 行高满足要求(正文 ≥ 1.5)
|
|
27
|
+
|
|
28
|
+
## 3. 圆角
|
|
29
|
+
|
|
30
|
+
- [ ] 同层级元素圆角一致
|
|
31
|
+
- [ ] 嵌套元素圆角递减(内层 ≤ 外层)
|
|
32
|
+
- [ ] 圆角使用 `rounded-sm/md/lg/xl/full` 五档之一
|
|
33
|
+
- [ ] **禁用** `rounded-3xl` 及以上"超大圆角"
|
|
34
|
+
- [ ] 同组件实例圆角一致(不可一个 `lg` 一个 `md`)
|
|
35
|
+
|
|
36
|
+
## 4. 间距
|
|
37
|
+
|
|
38
|
+
- [ ] 所有间距值为 **4px 倍数**(来自 Tailwind spacing 刻度)
|
|
39
|
+
- [ ] 未使用 5px / 7px / 15px 等非网格值
|
|
40
|
+
- [ ] 同层级元素间距一致
|
|
41
|
+
- [ ] 嵌套递减(卡片 24px → 内 Section 16px → Field 8px)
|
|
42
|
+
- [ ] 卡片内边距 = **24px** (`p-6`)
|
|
43
|
+
- [ ] Dialog 内边距 = **24px** (`p-6`)
|
|
44
|
+
- [ ] 表单字段间距 = **16px** (`space-y-4`)
|
|
45
|
+
|
|
46
|
+
## 5. 阴影
|
|
47
|
+
|
|
48
|
+
- [ ] 阴影等级与 z-index 层级对应(不可"低层级用大阴影")
|
|
49
|
+
- [ ] hover 升一级阴影,**不可跳级**(sm → md ✓ / sm → lg ✗)
|
|
50
|
+
- [ ] 暗色模式阴影透明度 ≥ 0.3 或改用边框
|
|
51
|
+
- [ ] 阴影方向统一为正下方偏移
|
|
52
|
+
- [ ] 不使用 `inset shadow` 模拟边框
|
|
53
|
+
|
|
54
|
+
## 6. 动效
|
|
55
|
+
|
|
56
|
+
- [ ] 每个动效都有明确目的(引导 / 反馈 / 空间关系)
|
|
57
|
+
- [ ] 时长在 **150 / 200 / 300 / 500ms** 四档内
|
|
58
|
+
- [ ] 仅动画 `transform` 和 `opacity`
|
|
59
|
+
- [ ] **未动画** `width` / `height` / `margin`
|
|
60
|
+
- [ ] 支持 `prefers-reduced-motion`(媒体查询降级)
|
|
61
|
+
- [ ] hover 反馈 ≤ 200ms
|
|
62
|
+
|
|
63
|
+
## 7. 一致性
|
|
64
|
+
|
|
65
|
+
- [ ] 组件样式与 shadcn/ui 标准一致(未私自 fork 源码)
|
|
66
|
+
- [ ] 页面壳层符合 Zone Map 命名约定
|
|
67
|
+
- [ ] 交互模式符合 Web 平台标准(不发明新交互)
|
|
68
|
+
- [ ] 文案术语统一(参照所装变体的 `business/domain.md`,若有)
|
|
69
|
+
- [ ] 危险操作的二次确认 UI 一致(AlertDialog destructive variant)
|
|
70
|
+
- [ ] 同类操作出现在同样的位置(Zone 约束)
|
|
71
|
+
|
|
72
|
+
## 8. 安全
|
|
73
|
+
|
|
74
|
+
- [ ] 删除 / 释放 / 强制重启 → AlertDialog 二次确认
|
|
75
|
+
- [ ] 危险操作的 AlertDialog 列出**资源标识 + 影响范围**
|
|
76
|
+
- [ ] 高危操作(永久删除资源 / 不可恢复操作)需输入资源名校验
|
|
77
|
+
- [ ] 无权限操作隐藏或禁用(不"看得见点不动")
|
|
78
|
+
- [ ] 软删除优于硬删除(可恢复路径)
|
|
79
|
+
|
|
80
|
+
## 9. 可访问性
|
|
81
|
+
|
|
82
|
+
- [ ] 交互元素使用语义标签(`button` / `a` / `input`)
|
|
83
|
+
- [ ] 图片有 `alt` 文本(装饰性图片用 `alt=""`)
|
|
84
|
+
- [ ] 表单字段有 `<label htmlFor>` 关联
|
|
85
|
+
- [ ] **颜色不是传达信息的唯一手段**(状态 = 颜色 + 图标 + 文字)
|
|
86
|
+
- [ ] Focus ring 可见(不 `outline-none` 后忘记替代方案)
|
|
87
|
+
- [ ] 键盘可达所有功能(Tab 顺序合理)
|
|
88
|
+
- [ ] 危险按钮有 `aria-label` 或描述性文字
|
|
89
|
+
|
|
90
|
+
## 10. 响应式
|
|
91
|
+
|
|
92
|
+
- [ ] 不使用固定宽度(除非明确需要)
|
|
93
|
+
- [ ] 使用 flexbox / grid 实现自适应
|
|
94
|
+
- [ ] 关键内容在 768px 宽度下仍可访问
|
|
95
|
+
- [ ] 表格在窄屏降级为列表 / 横向滚动
|
|
96
|
+
- [ ] 毛玻璃效果在低端设备降级为不透明
|
|
97
|
+
|
|
98
|
+
---
|
|
99
|
+
|
|
100
|
+
## 红线(一票否决)
|
|
101
|
+
|
|
102
|
+
任何一条触发即必须重写:
|
|
103
|
+
|
|
104
|
+
1. **硬编码任何视觉值**(颜色 / 间距 / 字号 / 圆角)
|
|
105
|
+
2. **危险操作无二次确认**
|
|
106
|
+
3. **状态仅用颜色表达**(无图标 + 文字)
|
|
107
|
+
4. **使用了 width/height 动画**
|
|
108
|
+
5. **页面有多个 H1**
|
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
# AI 页面生成决策流程
|
|
2
|
+
|
|
3
|
+
> AI 收到 UI 设计需求时,**必须**按本流程的 6 步决策。跳过任何一步都会破坏 teamix-evo 设计体系的一致性。
|
|
4
|
+
> 本文件是变体中立基线 — 变体专属补充(如 OpenTrek 品牌 / uni-manager AI 场景)见对应 `teamix-evo-design-rules-<variant>` skill。
|
|
5
|
+
|
|
6
|
+
```
|
|
7
|
+
收到页面设计需求
|
|
8
|
+
│
|
|
9
|
+
├── Step 1: 识别页面类型
|
|
10
|
+
│ └── 参照 patterns/page-types.md(List / Detail / Form / Dashboard / Dialog)
|
|
11
|
+
│
|
|
12
|
+
├── Step 2: 确定页面壳层
|
|
13
|
+
│ └── 默认壳层:Sidebar (左) + Navbar (顶) + Content (中)
|
|
14
|
+
│
|
|
15
|
+
├── Step 3: 规划信息架构
|
|
16
|
+
│ └── 定义页面区块和信息层级
|
|
17
|
+
│ └── 决定哪些信息首屏展示,哪些折叠
|
|
18
|
+
│
|
|
19
|
+
├── Step 4: 选择组件组合
|
|
20
|
+
│ └── 优先复用已有组件 → shadcn/ui → 必要时通过 Token 覆盖样式
|
|
21
|
+
│
|
|
22
|
+
├── Step 5: 应用视觉规则
|
|
23
|
+
│ ├── 色彩 → foundations/color/
|
|
24
|
+
│ ├── 排版 → foundations/typography.md
|
|
25
|
+
│ ├── 间距 → foundations/spacing.md
|
|
26
|
+
│ ├── 圆角 → foundations/radius.md
|
|
27
|
+
│ ├── 阴影 → foundations/shadow.md
|
|
28
|
+
│ ├── 动效 → foundations/motion.md
|
|
29
|
+
│ └── 特效 → foundations/effects.md
|
|
30
|
+
│
|
|
31
|
+
└── Step 6: 检查一致性
|
|
32
|
+
└── 对照本 skill checklist.md 逐项验证
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
---
|
|
36
|
+
|
|
37
|
+
## Step 1 · 识别页面类型
|
|
38
|
+
|
|
39
|
+
**关键词 → 页面类型映射:**
|
|
40
|
+
|
|
41
|
+
| 关键词 | 类型 | 参考文档 |
|
|
42
|
+
|--------|------|---------|
|
|
43
|
+
| 列表、管理、查询、批量 | **ListPage** | `patterns/page-types.md` |
|
|
44
|
+
| 详情、信息、配置、概览 | **DetailPage** | 同上 |
|
|
45
|
+
| 创建、编辑、新建、配置表单 | **FormPage** | 同上 |
|
|
46
|
+
| 仪表盘、监控、概览、分析 | **Dashboard** | 同上 |
|
|
47
|
+
| 删除、确认、提示 | **Dialog/Sheet** | 同上 |
|
|
48
|
+
| 向导、多步、引导 | **Wizard**(FormPage 的多步形态) | 同上 |
|
|
49
|
+
|
|
50
|
+
**变体扩展**:若所装变体提供了 AI 副驾驶 / 大屏 / 拓扑等场景的关键词映射(如 uni-manager 的对话 / 命令面板 / 告警诊断 / 操作编排 / 成本洞察 / 知识问答 / 拓扑),优先读取 variant skill 的扩展表。
|
|
51
|
+
|
|
52
|
+
**模糊时如何处理:**
|
|
53
|
+
|
|
54
|
+
- 关键词覆盖多个类型 → 默认选择 `ListPage`(CRUD 场景最常见)
|
|
55
|
+
- 完全无法识别 → 用 `AskUserQuestion` 风格反问用户
|
|
56
|
+
|
|
57
|
+
---
|
|
58
|
+
|
|
59
|
+
## Step 2 · 确定页面壳层
|
|
60
|
+
|
|
61
|
+
| 壳层变体 | 适用 |
|
|
62
|
+
|---------|------|
|
|
63
|
+
| **标准壳层** | Sidebar (左) + Navbar (顶) + Content。默认选择。 |
|
|
64
|
+
| **简化壳层** | 仅 Navbar + Content。营销页 / 登录页。 |
|
|
65
|
+
| **嵌入壳层** | 仅 Content,无 chrome。Iframe 嵌入场景。 |
|
|
66
|
+
|
|
67
|
+
**变体扩展**:若变体定义了"大屏 / Cockpit / 全屏"等专属壳层(uni-manager 有),按 variant skill 给出的规则选取。
|
|
68
|
+
|
|
69
|
+
---
|
|
70
|
+
|
|
71
|
+
## Step 3 · 规划信息架构
|
|
72
|
+
|
|
73
|
+
按照 **首屏 → 二级 → 详情** 三级展开:
|
|
74
|
+
|
|
75
|
+
- **首屏**:核心信息 + 主操作(用户 80% 时间停留)
|
|
76
|
+
- **二级**:折叠区 / Tab 内容(按需展开)
|
|
77
|
+
- **详情**:详情页 / 模态弹窗(深入查看)
|
|
78
|
+
|
|
79
|
+
每页**只能有一个 H1**,标识页面主题。
|
|
80
|
+
|
|
81
|
+
---
|
|
82
|
+
|
|
83
|
+
## Step 4 · 选择组件组合
|
|
84
|
+
|
|
85
|
+
**优先级:**
|
|
86
|
+
|
|
87
|
+
1. **复用项目已有组件**(先 grep imports)
|
|
88
|
+
2. **使用 shadcn/ui 标准组件**(不要为了样式 fork)
|
|
89
|
+
3. **组合现有组件构造新组件**(不要从零写)
|
|
90
|
+
4. **必要时通过 Token 覆盖样式**(写在 `tokens.overrides.css`)
|
|
91
|
+
|
|
92
|
+
---
|
|
93
|
+
|
|
94
|
+
## Step 5 · 应用视觉规则
|
|
95
|
+
|
|
96
|
+
按 6 个维度逐项绑定 Token:
|
|
97
|
+
|
|
98
|
+
- **色彩** —— 全部来自 `foundations/color/`,不硬编码
|
|
99
|
+
- **排版** —— 字号、字重、行高、字体族遵守 `typography.md`
|
|
100
|
+
- **间距** —— 4px 倍数;卡片 `p-6`、字段 `space-y-4`
|
|
101
|
+
- **圆角** —— `rounded-sm/md/lg/xl/full` 五档
|
|
102
|
+
- **阴影** —— 与 z-index 等级对应
|
|
103
|
+
- **动效** —— `150 / 200 / 300 / 500ms` 四档;只动画 `transform` 和 `opacity`
|
|
104
|
+
- **特效** —— 默认无渐变 / 发光;变体特殊许可见 variant skill
|
|
105
|
+
|
|
106
|
+
---
|
|
107
|
+
|
|
108
|
+
## Step 6 · 检查一致性
|
|
109
|
+
|
|
110
|
+
详见本 skill 的 `checklist.md`,逐项核对:
|
|
111
|
+
|
|
112
|
+
- [ ] 色彩 / 排版 / 圆角 / 间距 / 阴影 / 动效 / 一致性 / 安全 / 可访问性 / 响应式
|
|
113
|
+
|
|
114
|
+
**未通过任何一项不应交付**。
|
|
115
|
+
|
|
116
|
+
---
|
|
117
|
+
|
|
118
|
+
## 完整决策树
|
|
119
|
+
|
|
120
|
+
```
|
|
121
|
+
需求输入
|
|
122
|
+
│
|
|
123
|
+
├─ 是否明确了页面类型?
|
|
124
|
+
│ ├─ 是 → 直接使用对应模板
|
|
125
|
+
│ └─ 否 → 关键词推断 → 默认 ListPage / 反问用户
|
|
126
|
+
│
|
|
127
|
+
├─ 是否有已有组件可复用?
|
|
128
|
+
│ ├─ 是 → 优先复用
|
|
129
|
+
│ └─ 否 → 用 shadcn/ui 组合
|
|
130
|
+
│
|
|
131
|
+
├─ 是否涉及危险操作?
|
|
132
|
+
│ ├─ 是 → 必须 AlertDialog destructive variant + 影响范围
|
|
133
|
+
│ └─ 否 → 行内操作即可
|
|
134
|
+
│
|
|
135
|
+
├─ 是否需要批量?
|
|
136
|
+
│ ├─ 是 → DataTable + Checkbox + BulkActionBar
|
|
137
|
+
│ └─ 否 → 单选行内操作
|
|
138
|
+
│
|
|
139
|
+
└─ 是否有变体专属场景需求?
|
|
140
|
+
├─ 是 → 读取 teamix-evo-design-rules-<variant> skill 应用变体规则
|
|
141
|
+
└─ 否 → 标准 CRUD
|
|
142
|
+
```
|
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
# 页面设计 System Prompt(变体中立基线)
|
|
2
|
+
|
|
3
|
+
> 此文件可被 IDE AI 直接作为 **system prompt** 使用。模型加载后即按 teamix-evo 设计语言基线执行。
|
|
4
|
+
> 变体专属补充(如 OpenTrek 品牌色用法 / uni-manager 大屏 / AI 副驾驶)见对应 `teamix-evo-design-rules-<variant>` skill。
|
|
5
|
+
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
## Role
|
|
9
|
+
|
|
10
|
+
你是一个精通 **teamix-evo** 设计体系的资深前端工程师,目标是为企业级 B 端后台 / 内部工作台 / 运营管理产品生成 **沉稳、克制、可预期** 的 UI 代码。
|
|
11
|
+
|
|
12
|
+
你**不**追求视觉上的"惊艳"。你的代码要让一位高强度操作的熟练业务用户在长时间使用中能凭肌肉记忆完成关键操作。
|
|
13
|
+
|
|
14
|
+
变体上下文(品牌、AI 场景、专属壳层)从 `.teamix-evo/design/pack.lock.json` 的 `variant` 字段读取,对应的变体 skill 由 IDE 自动叠加加载。
|
|
15
|
+
|
|
16
|
+
---
|
|
17
|
+
|
|
18
|
+
## Design System Context
|
|
19
|
+
|
|
20
|
+
- **设计基线**:teamix-evo(中性 B 端基线 + 变体覆盖)
|
|
21
|
+
- **基础字号**:`1rem`
|
|
22
|
+
- **间距基准**:`4px`(4 的倍数)
|
|
23
|
+
- **圆角基准**:`--radius: 0.5rem`
|
|
24
|
+
- **基于**:shadcn/ui 默认主题
|
|
25
|
+
- 变体的 token 值(主色 / 字体族 / 圆角覆盖)来自 `.teamix-evo/tokens/`
|
|
26
|
+
|
|
27
|
+
---
|
|
28
|
+
|
|
29
|
+
## 6 步生成流程(严格执行)
|
|
30
|
+
|
|
31
|
+
```
|
|
32
|
+
识别页面类型 → 选择壳层 → 规划架构 → 选择组件 → 应用 Token → 检查清单
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
详见本 skill 的 [`generation-flow.md`](../generation-flow.md)。
|
|
36
|
+
|
|
37
|
+
---
|
|
38
|
+
|
|
39
|
+
## MUST (硬性约束)
|
|
40
|
+
|
|
41
|
+
1. **颜色** —— 必须使用 CSS 变量 (`hsl(var(--primary))`) 或 Tailwind Token (`bg-primary`)。**禁止硬编码** `#fff` / `rgb(...)` / hex 值。
|
|
42
|
+
2. **间距** —— 必须是 4 的倍数(`p-1/2/3/4/6/8`...),禁止 `p-[5px]`。
|
|
43
|
+
3. **字号** —— 必须使用 `text-xs ~ text-6xl` 十档之一。
|
|
44
|
+
4. **字重** —— 仅 `font-normal/medium/semibold/bold` 四档。
|
|
45
|
+
5. **圆角** —— 仅 `rounded-sm/md/lg/xl/full` 五档。
|
|
46
|
+
6. **阴影** —— 仅 `shadow-none/sm/md/lg/xl/2xl` 六档,**等级与 z-index 对应**。
|
|
47
|
+
7. **动效** —— 仅 `duration-150/200/300/500` 四档;只动画 `transform` 与 `opacity`。
|
|
48
|
+
8. **危险操作** —— 删除 / 释放 / 强制重启 必须用 `AlertDialog variant="destructive"`,列出影响范围。
|
|
49
|
+
9. **状态三重表达** —— 颜色 + 图标 + 文字(不可仅靠颜色)。
|
|
50
|
+
10. **可访问性** —— 对比度 ≥ 4.5:1;交互元素 ≥ 44×44px;keyboard navigable。
|
|
51
|
+
|
|
52
|
+
---
|
|
53
|
+
|
|
54
|
+
## SHOULD (推荐做法)
|
|
55
|
+
|
|
56
|
+
1. **复用优于创造** —— 先 grep 项目已有组件,再用 shadcn/ui,最后才组合新组件。
|
|
57
|
+
2. **按钮** = `rounded-md` + `shadow-sm` + `font-medium`;**卡片** = `rounded-lg` + `shadow-md` + `p-6`。
|
|
58
|
+
3. **表格** 使用 `<Table>` 组件 + `bg-muted/50` hover;行高 `h-12`。
|
|
59
|
+
4. **表单**:`space-y-4` 为字段间距;分组用 `<Card>`。
|
|
60
|
+
5. **Toast** 默认 5 秒消失,含撤销操作的延长至 10 秒。
|
|
61
|
+
6. **数字 / ID** 使用 `font-mono` 或 `tabular-nums`。
|
|
62
|
+
7. **空状态** = 图标 + 简短解释 + 主操作按钮。
|
|
63
|
+
8. **加载** = Skeleton 占位 → 数据到达后 `fade-in`,不用 spinner 占整页。
|
|
64
|
+
|
|
65
|
+
---
|
|
66
|
+
|
|
67
|
+
## MUST NOT (禁止)
|
|
68
|
+
|
|
69
|
+
1. 硬编码任何视觉值(颜色 / 间距 / 字号 / 圆角 / 阴影)
|
|
70
|
+
2. 装饰性动效(弹跳、彩带、emoji 爆炸)
|
|
71
|
+
3. 拟人化文案("嘿"、"哈"、"亲~"、"恭喜")
|
|
72
|
+
4. 在 Success 场景使用红色 / 在 Error 场景使用绿色
|
|
73
|
+
5. 正文字号小于 12px
|
|
74
|
+
6. 一页多个 H1
|
|
75
|
+
7. 同屏 3 个以上 primary 焦点
|
|
76
|
+
8. 装饰性渐变背景 / 视差滚动 / 动态粒子(变体的大屏 / 营销许可除外)
|
|
77
|
+
9. Fork shadcn/ui 组件源码以实现样式差异
|
|
78
|
+
10. 任何 `width / height / margin` 的过渡动画
|
|
79
|
+
|
|
80
|
+
---
|
|
81
|
+
|
|
82
|
+
## Output Format
|
|
83
|
+
|
|
84
|
+
生成代码时:
|
|
85
|
+
|
|
86
|
+
- 默认使用 **TypeScript + React (TSX)**
|
|
87
|
+
- 优先使用 **Tailwind CSS 类名**,必要时配合 CSS 变量
|
|
88
|
+
- 包含必要的 `import` 语句
|
|
89
|
+
- 函数 / 组件添加 TypeScript 类型定义
|
|
90
|
+
- 为可访问性添加 `aria-*` 属性
|
|
91
|
+
- 涉及客户端行为时使用 `"use client"`(Next.js App Router)
|
|
92
|
+
|
|
93
|
+
---
|
|
94
|
+
|
|
95
|
+
## 提交前自检(强制)
|
|
96
|
+
|
|
97
|
+
按本 skill 的 [`checklist.md`](../checklist.md) 逐项核对:
|
|
98
|
+
|
|
99
|
+
- [ ] 色彩 / 排版 / 圆角 / 间距 / 阴影 / 动效 / 一致性 / 安全 / 可访问性 / 响应式
|
|
100
|
+
|
|
101
|
+
任何一项未通过 **不应交付**。
|
|
102
|
+
|
|
103
|
+
---
|
|
104
|
+
|
|
105
|
+
## Token 速查
|
|
106
|
+
|
|
107
|
+
```css
|
|
108
|
+
/* 主语义色 */
|
|
109
|
+
--background /* 页面背景 */
|
|
110
|
+
--foreground /* 主文字 */
|
|
111
|
+
--card /* 卡片背景 */
|
|
112
|
+
--popover /* 弹层背景 */
|
|
113
|
+
--primary /* 主操作色 */
|
|
114
|
+
--secondary /* 次操作色 */
|
|
115
|
+
--muted /* 静音 / 禁用 */
|
|
116
|
+
--accent /* Hover 高亮 */
|
|
117
|
+
--destructive /* 危险 */
|
|
118
|
+
--border /* 边框 */
|
|
119
|
+
--input /* 输入框边框 */
|
|
120
|
+
--ring /* Focus 环 */
|
|
121
|
+
|
|
122
|
+
/* 图表色 */
|
|
123
|
+
--chart-1 ~ --chart-5
|
|
124
|
+
|
|
125
|
+
/* 侧边栏 */
|
|
126
|
+
--sidebar-background / --sidebar-foreground / ...
|
|
127
|
+
|
|
128
|
+
/* 圆角基准 */
|
|
129
|
+
--radius: 0.5rem;
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
---
|
|
133
|
+
|
|
134
|
+
## 推荐组件映射
|
|
135
|
+
|
|
136
|
+
| 用户描述 | 推荐组件 |
|
|
137
|
+
|---------|---------|
|
|
138
|
+
| "下拉选项" | `<Select>` |
|
|
139
|
+
| "搜索框" | `<Input>` + `<Command>` (Cmd+K 场景) |
|
|
140
|
+
| "确认对话框" | `<AlertDialog>` (危险) / `<Dialog>` (普通) |
|
|
141
|
+
| "侧边抽屉" | `<Sheet>` |
|
|
142
|
+
| "通知" | `<Toast>` (`useToast` hook) |
|
|
143
|
+
| "标签页" | `<Tabs>` |
|
|
144
|
+
| "日期选择" | `<Calendar>` + `<Popover>` |
|
|
145
|
+
| "数据表格" | `<Table>` + 自定义工具栏 |
|
|
146
|
+
| "状态徽章" | `<Badge>` |
|
|
147
|
+
| "提示" | `<Tooltip>` |
|
|
148
|
+
| "导航菜单" | `<NavigationMenu>` (顶部) / 自定义 Sidebar (侧边) |
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: teamix-evo-design-rules-opentrek
|
|
3
|
+
description: |
|
|
4
|
+
Apply OpenTrek brand-specific design rules (tone / voice / brand color usage) on top of the variant-neutral teamix-evo-design-rules baseline.
|
|
5
|
+
TRIGGER when: teamix-evo-design-rules is triggering AND the project's `.teamix-evo/design/pack.lock.json` records `variant: "opentrek"`; tasks where brand voice, copywriting tone, or OpenTrek-specific brand color usage is in scope; phrases like "OpenTrek 风格"、"沉稳 / 克制 的文案"、"按 OpenTrek 调性写空态 / 标题 / 引导".
|
|
6
|
+
SKIP: project does not have OpenTrek variant installed; tasks belonging to other variants (`uni-manager` etc.); single-component edits with no copy / brand concern; pure structural / layout decisions with no brand surface.
|
|
7
|
+
Coordinates with: teamix-evo-design-rules (mandatory — this is an overlay, never standalone).
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
# teamix-evo-design-rules-opentrek
|
|
11
|
+
|
|
12
|
+
This skill is the **OpenTrek-specific overlay** on top of [`teamix-evo-design-rules`](../teamix-evo-design-rules/SKILL.md). It encodes品牌调性、文案语气、品牌色用法 — content that is OpenTrek-only and **does not apply** to other variants.
|
|
13
|
+
|
|
14
|
+
<!-- teamix-evo:managed:start id="core" -->
|
|
15
|
+
|
|
16
|
+
## When to use
|
|
17
|
+
|
|
18
|
+
Always layered with `teamix-evo-design-rules`. Triggers whenever the baseline design-rules skill triggers, **and** the project's `.teamix-evo/design/pack.lock.json` records `variant: "opentrek"`.
|
|
19
|
+
|
|
20
|
+
## What this skill does
|
|
21
|
+
|
|
22
|
+
1. Imposes OpenTrek 品牌调性(沉稳、克制、可预期、安全)on tone / voice / 文案
|
|
23
|
+
2. Specifies how to use the OpenTrek 主色 `hsl(222.2 47.4% 11.2%)`(中性深蓝)— 不滥用作装饰
|
|
24
|
+
3. Points to `.teamix-evo/design/brand/{tone,voice,examples}.md` 作为权威文案规范
|
|
25
|
+
|
|
26
|
+
## Files in this skill
|
|
27
|
+
|
|
28
|
+
| File | Purpose |
|
|
29
|
+
| --- | --- |
|
|
30
|
+
| [`brand-rules.md`](brand-rules.md) | OpenTrek 品牌专属规则:tone / voice / 品牌色用法 |
|
|
31
|
+
|
|
32
|
+
## Order of precedence
|
|
33
|
+
|
|
34
|
+
When generating UI in an OpenTrek project, AI 应按以下顺序加载上下文:
|
|
35
|
+
|
|
36
|
+
1. `teamix-evo-design-rules`(中性基线 — 6 步流程 / 边界 / 检查清单)
|
|
37
|
+
2. **本 skill `teamix-evo-design-rules-opentrek`**(品牌覆盖)
|
|
38
|
+
3. 项目本地的 `.teamix-evo/design/brand/` 与 `DESIGN.md`(最权威)
|
|
39
|
+
|
|
40
|
+
后者覆盖前者;冲突时以更具体的为准。
|
|
41
|
+
|
|
42
|
+
<!-- teamix-evo:managed:end -->
|
|
43
|
+
|
|
44
|
+
## Project notes
|
|
45
|
+
|
|
46
|
+
> Free-form notes the user can add — CLI update will not overwrite below this section.
|
|
47
|
+
|
|
48
|
+
(empty)
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
# OpenTrek 品牌专属规则
|
|
2
|
+
|
|
3
|
+
> 本文件是 OpenTrek 变体的品牌覆盖。在 [`teamix-evo-design-rules`](../teamix-evo-design-rules/SKILL.md) 的中性约束之上,追加 OpenTrek 品牌调性、文案语气、品牌色用法。
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## 1. 品牌调性
|
|
8
|
+
|
|
9
|
+
| 维度 | OpenTrek 倾向 |
|
|
10
|
+
|------|---------------|
|
|
11
|
+
| 整体气质 | 沉稳、克制、可预期 |
|
|
12
|
+
| 视觉强度 | 偏低;信息层级靠排版而非色彩 |
|
|
13
|
+
| 装饰元素 | 几乎无;不引入插画 / 渐变背景 / 装饰图形作为常规手段 |
|
|
14
|
+
| 大屏 / 营销特殊场景 | 仍受 [`foundations/effects.md`](../../../design/variants/opentrek/foundations/) 的 OpenTrek 覆盖约束 |
|
|
15
|
+
|
|
16
|
+
权威来源:`.teamix-evo/design/DESIGN.md` / `.teamix-evo/design/brand/{tone,voice,examples}.md`
|
|
17
|
+
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
## 2. 文案语气(Voice)
|
|
21
|
+
|
|
22
|
+
### 必须
|
|
23
|
+
|
|
24
|
+
- 以陈述句为主:「实例 i-abc123 已停止」而非「实例已成功停止啦~」
|
|
25
|
+
- 错误信息要给出**下一步动作**:「网络连接超时。请检查网络后 [重试]」
|
|
26
|
+
- 高危确认必须**列出影响**:「永久删除该资源?该操作不可恢复,关联的 N 个对象将被解除关联。」
|
|
27
|
+
- 数字 / ID / Hash 用 `font-mono`,避免歧义
|
|
28
|
+
|
|
29
|
+
### 不得
|
|
30
|
+
|
|
31
|
+
- 拟人化第一人称("我帮你"、"我看看")
|
|
32
|
+
- 表情符号 / emoji 作为信息载体(除非用户明确要求)
|
|
33
|
+
- 营销腔("恭喜你!"、"超棒"、"亲~")
|
|
34
|
+
- 长解释代替结构化说明
|
|
35
|
+
|
|
36
|
+
---
|
|
37
|
+
|
|
38
|
+
## 3. 品牌色用法
|
|
39
|
+
|
|
40
|
+
### 主色 `--primary`
|
|
41
|
+
|
|
42
|
+
- HSL:`hsl(222.2 47.4% 11.2%)`(深中性蓝/近黑)
|
|
43
|
+
- 用于:主操作按钮、当前导航高亮、重点链接、主 H1
|
|
44
|
+
- **同屏不超过 3 个 primary 焦点**(防止"哪都是重点 = 都不是重点")
|
|
45
|
+
- 不用于:装饰性背景、大面积色块、状态语义(状态色用 `success/warning/destructive`)
|
|
46
|
+
|
|
47
|
+
### 不得
|
|
48
|
+
|
|
49
|
+
- 用 primary 作为成功/失败的语义色
|
|
50
|
+
- 把 primary 改成更鲜艳的色相以"提亮品牌" — 调性所在
|
|
51
|
+
- 在普通 Card / Section 背景上使用 `bg-primary`(保留给关键操作)
|
|
52
|
+
|
|
53
|
+
---
|
|
54
|
+
|
|
55
|
+
## 4. 与中性基线的差异点
|
|
56
|
+
|
|
57
|
+
| 维度 | 中性基线 | OpenTrek 收紧 |
|
|
58
|
+
|------|---------|--------------|
|
|
59
|
+
| 文案语气 | 尽量克制 | **强制**禁止拟人化 / 营销腔 |
|
|
60
|
+
| 装饰背景 | 普通页面禁渐变 | OpenTrek 全局禁用(含变体覆盖的场景) |
|
|
61
|
+
| 主色焦点数 | ≤ 3 | ≤ 3(与基线一致;强调实践) |
|
|
62
|
+
| Toast 气质 | 5 秒消失 | 不加表情、不带动效尾巴 |
|
|
63
|
+
|
|
64
|
+
---
|
|
65
|
+
|
|
66
|
+
## 5. 引用来源
|
|
67
|
+
|
|
68
|
+
具体的 tone / voice / examples 文档在变体内:
|
|
69
|
+
|
|
70
|
+
- `.teamix-evo/design/brand/tone.md` — 品牌调性
|
|
71
|
+
- `.teamix-evo/design/brand/voice.md` — 文案语气
|
|
72
|
+
- `.teamix-evo/design/brand/examples.md` — 文案正反例
|
|
73
|
+
|
|
74
|
+
AI 在生成或审查 OpenTrek 项目的 UI 文案 / 微文案时,应优先以上述文档为准。
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: teamix-evo-design-rules-uni-manager
|
|
3
|
+
description: |
|
|
4
|
+
Apply cloud-management-specific design rules (AI scenarios A-G, danger ops, command center / topology patterns) on top of the variant-neutral teamix-evo-design-rules baseline.
|
|
5
|
+
TRIGGER when: teamix-evo-design-rules is triggering AND the project's `.teamix-evo/design/pack.lock.json` records `variant: "uni-manager"`; tasks involving 云资源管理 / AI 副驾驶场景 / 高危删除 / 跨区域迁移 / 流量切换 / 指挥官大屏 / 拓扑感知 / 告警诊断; phrases like "做一个云资源列表 / 大屏 / 命令面板 / 危险操作确认"; file paths involving `cockpit / topology / cloud-resources / alarm`.
|
|
6
|
+
SKIP: project does not have uni-manager variant installed; tasks belonging to other variants (`opentrek` etc.); pure non-cloud business pages even within a uni-manager project (defer to baseline rules only); single-component edits with no danger-op or scenario surface.
|
|
7
|
+
Coordinates with: teamix-evo-design-rules (mandatory — this is an overlay, never standalone).
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
# teamix-evo-design-rules-uni-manager
|
|
11
|
+
|
|
12
|
+
This skill is the **uni-manager (cloud management) overlay** on top of [`teamix-evo-design-rules`](../teamix-evo-design-rules/SKILL.md). It encodes 云资源管理领域特有的 AI 副驾驶 7 类场景、高危操作模式、指挥官大屏 / 拓扑布局规则 — content that is uni-manager-only and **does not apply** to other variants.
|
|
13
|
+
|
|
14
|
+
<!-- teamix-evo:managed:start id="core" -->
|
|
15
|
+
|
|
16
|
+
## When to use
|
|
17
|
+
|
|
18
|
+
Always layered with `teamix-evo-design-rules`. Triggers whenever the baseline design-rules skill triggers, **and** the project's `.teamix-evo/design/pack.lock.json` records `variant: "uni-manager"`.
|
|
19
|
+
|
|
20
|
+
## What this skill does
|
|
21
|
+
|
|
22
|
+
1. Extends Step 1 of the baseline 6-step generation flow with **AI 副驾驶场景关键词表**(场景 A-G)
|
|
23
|
+
2. Defines **高危操作模式**(永久删除资源 / 流量切换 / 跨区域迁移 → AlertDialog destructive + 影响范围 + 二次确认 + 资源名校验)
|
|
24
|
+
3. Specifies **指挥官大屏 / 拓扑感知** 专属布局与只读约束
|
|
25
|
+
4. Points to `.teamix-evo/design/scenarios/` 与 `.teamix-evo/design/foundations/{effects-cloud-cockpit,motion-scenarios}.md`
|
|
26
|
+
|
|
27
|
+
## Files in this skill
|
|
28
|
+
|
|
29
|
+
| File | Purpose |
|
|
30
|
+
| --- | --- |
|
|
31
|
+
| [`ai-scenarios.md`](ai-scenarios.md) | AI 副驾驶 7 类场景(A-G)关键词表与映射 |
|
|
32
|
+
| [`danger-ops.md`](danger-ops.md) | 高危操作模式(永久删除 / 流量切换 / 不可恢复) |
|
|
33
|
+
| [`command-center.md`](command-center.md) | 指挥官大屏 / 拓扑 / 告警诊断 布局规则 |
|
|
34
|
+
|
|
35
|
+
## Order of precedence
|
|
36
|
+
|
|
37
|
+
When generating UI in a uni-manager project, AI 应按以下顺序加载上下文:
|
|
38
|
+
|
|
39
|
+
1. `teamix-evo-design-rules`(中性基线 — 6 步流程 / 边界 / 检查清单)
|
|
40
|
+
2. **本 skill `teamix-evo-design-rules-uni-manager`**(云资源管理覆盖)
|
|
41
|
+
3. 项目本地的 `.teamix-evo/design/scenarios/` 与 `patterns/cloud-*.md`(最权威)
|
|
42
|
+
|
|
43
|
+
后者覆盖前者;冲突时以更具体的为准。
|
|
44
|
+
|
|
45
|
+
<!-- teamix-evo:managed:end -->
|
|
46
|
+
|
|
47
|
+
## Project notes
|
|
48
|
+
|
|
49
|
+
> Free-form notes the user can add — CLI update will not overwrite below this section.
|
|
50
|
+
|
|
51
|
+
(empty)
|