@microi.net/cli 4.6.2 → 4.6.4
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/dist/mcp-server.js +9 -7
- package/dist/microi-cli.js +44 -44
- package/dist/microi-skills.meta.json +120 -120
- package/dist/microi.skills/.microi-skills-version.json +2 -2
- package/dist/microi.skills/app-store/SKILL.md +5 -0
- package/dist/microi.skills/message-notification/agents/openai.yaml +0 -1
- package/dist/microi.skills/microi-client-frontend/SKILL.md +9 -2
- package/dist/microi.skills/microi-db-schema/SKILL.md +1 -0
- package/dist/microi.skills/microi-form-engine/SKILL.md +6 -0
- package/dist/microi.skills/microi-system-delivery/SKILL.md +4 -2
- package/dist/microi.skills/microi-ui/SKILL.md +9 -0
- package/dist/microi.skills/ui-design/SKILL.md +21 -0
- package/dist/microi.skills/ui-design/assets/templates/MCI-DESIGN.md +163 -62
- package/dist/microi.skills/ui-design/references/design-pattern-library.md +13 -0
- package/dist/microi.skills/ui-design/references/mci-design-contract.md +150 -71
- package/dist/microi.skills/workspace-conventions/SKILL.md +7 -0
- package/package.json +1 -1
|
@@ -1,77 +1,158 @@
|
|
|
1
1
|
# MCI-DESIGN
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
> 本文件同时保存精确 token 与设计理由。实现前先读完整文件;修改视觉结构时同步更新本文件、源码和验收截图。
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
```yaml
|
|
6
|
+
contract:
|
|
7
|
+
version: 1
|
|
8
|
+
project:
|
|
9
|
+
mode: data-workspace
|
|
10
|
+
intent:
|
|
11
|
+
|
|
12
|
+
tokens:
|
|
13
|
+
color:
|
|
14
|
+
canvas: var(--mci-bg-base)
|
|
15
|
+
surface: var(--mci-bg-card)
|
|
16
|
+
surfaceElevated: var(--mci-bg-elevated)
|
|
17
|
+
textPrimary: var(--mci-text-primary)
|
|
18
|
+
textSecondary: var(--mci-text-secondary)
|
|
19
|
+
primary: var(--mci-color-primary)
|
|
20
|
+
success: var(--mci-color-success)
|
|
21
|
+
warning: var(--mci-color-warning)
|
|
22
|
+
danger: var(--mci-color-danger)
|
|
23
|
+
typography:
|
|
24
|
+
display: { size: 48px, lineHeight: 1.1, weight: 800 }
|
|
25
|
+
h1: { size: 32px, lineHeight: 1.2, weight: 750 }
|
|
26
|
+
h2: { size: 24px, lineHeight: 1.3, weight: 700 }
|
|
27
|
+
body: { size: 16px, lineHeight: 1.7, weight: 400 }
|
|
28
|
+
meta: { size: 13px, lineHeight: 1.5, weight: 500 }
|
|
29
|
+
spacing:
|
|
30
|
+
micro: 4px
|
|
31
|
+
compact: 8px
|
|
32
|
+
control: 12px
|
|
33
|
+
card: 16px
|
|
34
|
+
section: 24px
|
|
35
|
+
page: 32px
|
|
36
|
+
shape:
|
|
37
|
+
input: var(--mci-shape-input)
|
|
38
|
+
panel: var(--mci-shape-panel)
|
|
39
|
+
card: var(--mci-shape-card)
|
|
40
|
+
button: var(--mci-shape-button)
|
|
41
|
+
elevation:
|
|
42
|
+
card: var(--mci-shadow-card)
|
|
43
|
+
cardHover: var(--mci-shadow-card-hover)
|
|
44
|
+
float: var(--mci-shadow-float)
|
|
45
|
+
|
|
46
|
+
components:
|
|
47
|
+
primaryButton:
|
|
48
|
+
height: 44px
|
|
49
|
+
states:
|
|
50
|
+
default: { background: "{tokens.color.primary}" }
|
|
51
|
+
hover: { lift: -1px }
|
|
52
|
+
focus: { outline: "{tokens.color.primary}" }
|
|
53
|
+
pressed: { scale: 0.98 }
|
|
54
|
+
loading: { preserveWidth: true }
|
|
55
|
+
disabled: { opacity: 0.56 }
|
|
56
|
+
dataCard:
|
|
57
|
+
background: "{tokens.color.surface}"
|
|
58
|
+
radius: "{tokens.shape.card}"
|
|
59
|
+
padding: "{tokens.spacing.card}"
|
|
60
|
+
states:
|
|
61
|
+
default: { elevation: "{tokens.elevation.card}" }
|
|
62
|
+
hover: { elevation: "{tokens.elevation.cardHover}", lift: -2px }
|
|
63
|
+
focus: { outline: "{tokens.color.primary}" }
|
|
64
|
+
selected: { border: "{tokens.color.primary}" }
|
|
65
|
+
|
|
66
|
+
omissions: []
|
|
67
|
+
```
|
|
9
68
|
|
|
10
|
-
##
|
|
69
|
+
## 1. 产品概览与目标用户
|
|
11
70
|
|
|
12
|
-
-
|
|
13
|
-
-
|
|
14
|
-
-
|
|
71
|
+
- 首要用户:
|
|
72
|
+
- 首要任务:
|
|
73
|
+
- 用户进入后第一眼必须理解:
|
|
74
|
+
- 成功结果与衡量方式:
|
|
75
|
+
- 关键设备与使用环境:
|
|
15
76
|
|
|
16
|
-
##
|
|
77
|
+
## 2. 视觉性格与情绪目标
|
|
17
78
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
79
|
+
- 主情绪(只选一个):
|
|
80
|
+
- 具体视觉隐喻:
|
|
81
|
+
- 辅助气质(最多两项):
|
|
82
|
+
- 选择理由:
|
|
83
|
+
- 明确不采用的视觉语言:
|
|
23
84
|
|
|
24
|
-
##
|
|
85
|
+
## 3. 颜色
|
|
25
86
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
87
|
+
- 页面底色与表面关系:
|
|
88
|
+
- 主色只用于:
|
|
89
|
+
- 成功 / 警告 / 危险 / 信息色语义:
|
|
90
|
+
- 明亮与暗黑主题的对比策略:
|
|
91
|
+
- 透明表面的叠加底色:
|
|
92
|
+
|
|
93
|
+
## 4. 字体
|
|
94
|
+
|
|
95
|
+
| 角色 | 字号 / 行高 / 字重 | 用途 | 禁止 |
|
|
96
|
+
| --- | --- | --- | --- |
|
|
97
|
+
| Display | | | |
|
|
98
|
+
| H1 | | | |
|
|
99
|
+
| H2 | | | |
|
|
100
|
+
| Body | | | |
|
|
101
|
+
| Meta | | | |
|
|
102
|
+
|
|
103
|
+
## 5. 布局与间距
|
|
104
|
+
|
|
105
|
+
- Desktop:12 列,最大宽度:
|
|
106
|
+
- Tablet:8 列,重排规则:
|
|
107
|
+
- Mobile:4 列,左右安全间距:
|
|
108
|
+
- 内部紧凑间距:
|
|
109
|
+
- 区域与页面留白:
|
|
110
|
+
|
|
111
|
+
## 6. 层级、材质与形状
|
|
112
|
+
|
|
113
|
+
- 深度来自:色调层 / 细边框 / 环境阴影 / 透明材质 / 实体投影
|
|
114
|
+
- 圆角或切角表达的性格:
|
|
115
|
+
- 页面 / 卡片 / 浮层的层级关系:
|
|
116
|
+
- 低性能与不支持透明效果时的降级:
|
|
46
117
|
|
|
47
|
-
##
|
|
118
|
+
## 7. 组件与状态
|
|
48
119
|
|
|
49
|
-
|
|
|
50
|
-
| --- |
|
|
51
|
-
|
|
|
52
|
-
|
|
|
53
|
-
|
|
|
54
|
-
|
|
|
55
|
-
|
|
|
120
|
+
| 组件 | Default | Hover / Focus / Pressed | Loading | Empty / Error | Disabled | Selected / Success |
|
|
121
|
+
| --- | --- | --- | --- | --- | --- | --- |
|
|
122
|
+
| 主按钮 | | | | - | | |
|
|
123
|
+
| 搜索 / 筛选 | | | | | | |
|
|
124
|
+
| 列表 / 数据卡片 | | | | | - | |
|
|
125
|
+
| 表单 | | | | | | |
|
|
126
|
+
| 弹层 | | | | | | |
|
|
56
127
|
|
|
57
|
-
|
|
128
|
+
### 数据卡片
|
|
58
129
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
| 列表 / 卡片 | | | | | | - | |
|
|
64
|
-
| 表单 | | | | - | | | |
|
|
130
|
+
- 信息顺序:身份 → 标题/状态 → 关键字段 → 时间/辅助标签 → 操作。
|
|
131
|
+
- 缺图:40—44px 紧凑标记,不渲染大面积装饰占位图。
|
|
132
|
+
- 默认列数:桌面 4,平板 2—3,移动 1;显式业务配置优先。
|
|
133
|
+
- 操作:一个主动作、一至两个次动作,其余进入“更多”;危险动作降权。
|
|
65
134
|
|
|
66
|
-
##
|
|
135
|
+
## 8. 页面模式与信息架构
|
|
136
|
+
|
|
137
|
+
1. 首屏:
|
|
138
|
+
2. 核心任务:
|
|
139
|
+
3. 证据或数据:
|
|
140
|
+
4. 辅助内容:
|
|
141
|
+
5. 最终行动:
|
|
142
|
+
|
|
143
|
+
- 主模式:品牌叙事 / 真实产品流程 / 趋势构图 / 沉浸互动 / 动态首屏 / 数据工作台
|
|
144
|
+
- 辅助能力(最多两项):
|
|
145
|
+
|
|
146
|
+
## 9. 动效与媒体
|
|
67
147
|
|
|
68
148
|
- 0—120ms:
|
|
69
149
|
- 120—360ms:
|
|
70
150
|
- 360—800ms:
|
|
71
|
-
-
|
|
72
|
-
- `
|
|
151
|
+
- 循环动效存在理由:
|
|
152
|
+
- 图片比例与 `object-fit`:
|
|
153
|
+
- `prefers-reduced-motion` 与静态降级:
|
|
73
154
|
|
|
74
|
-
##
|
|
155
|
+
## 10. 响应式与安全区
|
|
75
156
|
|
|
76
157
|
| 宽度 | 栅格 | 导航 | 主操作 | 内容重排 |
|
|
77
158
|
| --- | --- | --- | --- | --- |
|
|
@@ -79,20 +160,40 @@ shadow:
|
|
|
79
160
|
| 768 | 8 列 | | | |
|
|
80
161
|
| 1440 | 12 列 | | | |
|
|
81
162
|
|
|
82
|
-
##
|
|
163
|
+
## 11. 可访问性、性能与降级
|
|
83
164
|
|
|
84
|
-
-
|
|
85
|
-
-
|
|
86
|
-
-
|
|
165
|
+
- 键盘顺序与可见焦点:
|
|
166
|
+
- 正文、状态与交互对比度:
|
|
167
|
+
- 触控目标:移动端不小于 44px
|
|
87
168
|
- 首屏资源预算:
|
|
88
|
-
-
|
|
169
|
+
- 网络失败、媒体失败与离线策略:
|
|
170
|
+
- 骨架屏、空态、错误态与恢复路径:
|
|
171
|
+
|
|
172
|
+
## 12. 应当与禁止
|
|
173
|
+
|
|
174
|
+
### 应当
|
|
175
|
+
|
|
176
|
+
-
|
|
177
|
+
|
|
178
|
+
### 禁止
|
|
179
|
+
|
|
180
|
+
-
|
|
181
|
+
|
|
182
|
+
## 有意省略
|
|
183
|
+
|
|
184
|
+
| 规则 | 省略理由 | 替代方案 |
|
|
185
|
+
| --- | --- | --- |
|
|
186
|
+
| | | |
|
|
89
187
|
|
|
90
|
-
##
|
|
188
|
+
## 验收清单
|
|
91
189
|
|
|
190
|
+
- [ ] 机器块能解析,核心章节顺序正确,无重复或近似拼写章节。
|
|
191
|
+
- [ ] 所有 `{路径}` 引用存在且无循环;无未说明的孤立 token。
|
|
92
192
|
- [ ] 首屏在 3 秒内说清产品、对象和主操作。
|
|
93
193
|
- [ ] 默认、加载、空、错误、禁用、权限、成功状态可验证。
|
|
94
194
|
- [ ] 390 / 768 / 1440 无横向滚动、遮挡和错位。
|
|
95
195
|
- [ ] 明亮、暗黑主题均有足够对比度。
|
|
96
|
-
- [ ] 所有可点击元素有 hover
|
|
196
|
+
- [ ] 所有可点击元素有 hover、focus、pressed 和真实结果。
|
|
97
197
|
- [ ] 动效尊重 `prefers-reduced-motion`。
|
|
198
|
+
- [ ] 契约差异与实现差异同时评审,没有意外删除或语义漂移。
|
|
98
199
|
- [ ] 所有图片、字体、模型和代码资产来源合法且可离线构建。
|
|
@@ -28,6 +28,19 @@
|
|
|
28
28
|
|
|
29
29
|
选择后填写:页面目标、用户角色、主模式、辅助能力、视觉锚点、主动作、最大宽度、栅格、字体层级、主题、状态矩阵、动效预算、移动端重排和验收截图。
|
|
30
30
|
|
|
31
|
+
### 用具体隐喻定义气质
|
|
32
|
+
|
|
33
|
+
宽泛形容词不能直接指导实现。把“高级、现代、极简、科技”收敛成一个可以推导规则的具体隐喻,并同时写出它排除什么:
|
|
34
|
+
|
|
35
|
+
| 具体隐喻 | 可推导规则 | 明确排除 |
|
|
36
|
+
| --- | --- | --- |
|
|
37
|
+
| 安静的专业工作台 | 中性色表面、细边框、四列可读卡片、紧凑内部间距、宽松区块留白 | 大面积字母占位、彩虹渐变、所有按钮同权 |
|
|
38
|
+
| 温暖的手工纸张 | 暖底、自然低饱和色、柔和圆角、轻触感阴影 | 冷硬霓虹、尖锐切角、持续发光 |
|
|
39
|
+
| 夜间发光仪表舱 | 深色分层、少量青蓝紫状态光、清晰数字层级、短促状态动效 | 大面积炫光、随机彩色图表、低对比正文 |
|
|
40
|
+
| 雾感通透界面 | 灰白低彩、细线、轻透明表面、大留白、慢速淡入 | 厚重投影、不透明色块堆叠、过度模糊 |
|
|
41
|
+
|
|
42
|
+
先写“用户任务、主情绪、具体隐喻、三条应当、三条禁止”,再选择 token 与组件。完整双层契约见 [mci-design-contract.md](mci-design-contract.md)。
|
|
43
|
+
|
|
31
44
|
## 品牌叙事
|
|
32
45
|
|
|
33
46
|
### 首屏结构
|
|
@@ -1,84 +1,163 @@
|
|
|
1
1
|
# MCI-DESIGN 设计契约
|
|
2
2
|
|
|
3
|
-
大型项目在根目录维护 `MCI-DESIGN.md
|
|
3
|
+
大型项目在根目录维护 `MCI-DESIGN.md`,让界面意图、精确取值和组件状态可以版本管理、自动检查,并由人和 AI 共同延续。它是 `Microi.UI/src/theme/tokens.css` 的项目级语义说明,不替代真实源码 token,也不替代线框、原型和视觉验收。
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## 双层单源模型
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
设计契约必须同时包含两层,缺少任一层都不完整:
|
|
8
|
+
|
|
9
|
+
1. **机器可读层**:颜色、字体、间距、圆角、阴影、组件状态和引用关系。它回答“准确使用什么值”,用于检查、差异比较和生成运行时变量。
|
|
10
|
+
2. **人类可读层**:产品对象、受众、情绪目标、视觉隐喻、信息层级、选择理由和明确禁区。它回答“为什么这样设计”,帮助接手者在契约没有覆盖的新场景中作出一致判断。
|
|
11
|
+
|
|
12
|
+
精确值会随项目变化,设计理由决定取舍方向。若两层暂时冲突,先核对用户最新要求和合法源码,再同时修订契约与实现,禁止只改其中一边。
|
|
13
|
+
|
|
14
|
+
## 意图优先级
|
|
15
|
+
|
|
16
|
+
设计前按以下顺序收敛,不从颜色选择器开始:
|
|
17
|
+
|
|
18
|
+
1. 用户进入页面后的首要任务与成功结果。
|
|
19
|
+
2. 页面希望产生的一个主情绪,例如可信、安静、敏捷、温暖或专注。
|
|
20
|
+
3. 一个具体视觉隐喻,例如“安静的专业工作台”“柔和的手工纸张”“夜间发光仪表舱”。具体隐喻比堆叠“高级、现代、极简”等形容词更能约束色彩、材质、密度和动效。
|
|
21
|
+
4. 一组明确的“应当 / 禁止”,把隐含边界写出来。
|
|
22
|
+
5. 最后才是 token、组件和页面实现。
|
|
23
|
+
|
|
24
|
+
一个页面只保留一个主隐喻,辅助气质最多两项。不要把温暖圆润、深色霓虹、通透玻璃和高密度数据等多套语言同时堆在一个界面。
|
|
25
|
+
|
|
26
|
+
## 固定章节顺序
|
|
27
|
+
|
|
28
|
+
核心章节按以下顺序书写,便于稳定解析和审查:
|
|
29
|
+
|
|
30
|
+
1. 产品概览与目标用户
|
|
31
|
+
2. 视觉性格与情绪目标
|
|
9
32
|
3. 颜色
|
|
10
33
|
4. 字体
|
|
11
34
|
5. 布局与间距
|
|
12
|
-
6.
|
|
13
|
-
7.
|
|
14
|
-
8.
|
|
35
|
+
6. 层级、材质与形状
|
|
36
|
+
7. 组件与状态
|
|
37
|
+
8. 页面模式与信息架构
|
|
15
38
|
9. 动效与媒体
|
|
16
39
|
10. 响应式与安全区
|
|
17
|
-
11.
|
|
18
|
-
12.
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
-
|
|
53
|
-
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
-
|
|
73
|
-
|
|
74
|
-
## 禁止事项
|
|
75
|
-
- 禁止全局泛化 CSS、纯文字底部导航、假按钮、无降级远程资源
|
|
40
|
+
11. 可访问性、性能与降级
|
|
41
|
+
12. 应当与禁止
|
|
42
|
+
|
|
43
|
+
允许在末尾增加项目专属章节,但必须保留未知扩展内容,不能重复核心章节,也不能用近似拼写制造第二套同义章节。确实不适用的项目可以省略某一规则,但要在“有意省略”中说明理由。
|
|
44
|
+
|
|
45
|
+
## 机器可读层
|
|
46
|
+
|
|
47
|
+
机器块应使用语义命名,避免 `blue500`、`bigRadius`、`shadow2` 这类只描述外观、不说明用途的名字。组件可通过 `{路径}` 引用共享 token;引用必须存在,不能形成循环。
|
|
48
|
+
|
|
49
|
+
```yaml
|
|
50
|
+
contract:
|
|
51
|
+
version: 1
|
|
52
|
+
project: 示例项目
|
|
53
|
+
mode: data-workspace
|
|
54
|
+
intent: 安静、清晰、可快速扫描的专业工作台
|
|
55
|
+
|
|
56
|
+
tokens:
|
|
57
|
+
color:
|
|
58
|
+
canvas: var(--mci-bg-base)
|
|
59
|
+
surface: var(--mci-bg-card)
|
|
60
|
+
surfaceElevated: var(--mci-bg-elevated)
|
|
61
|
+
textPrimary: var(--mci-text-primary)
|
|
62
|
+
textSecondary: var(--mci-text-secondary)
|
|
63
|
+
primary: var(--mci-color-primary)
|
|
64
|
+
danger: var(--mci-color-danger)
|
|
65
|
+
typography:
|
|
66
|
+
title: { size: 16px, lineHeight: 1.45, weight: 700 }
|
|
67
|
+
body: { size: 14px, lineHeight: 1.65, weight: 400 }
|
|
68
|
+
meta: { size: 12px, lineHeight: 1.5, weight: 500 }
|
|
69
|
+
spacing:
|
|
70
|
+
compact: 8px
|
|
71
|
+
control: 12px
|
|
72
|
+
card: 16px
|
|
73
|
+
section: 24px
|
|
74
|
+
shape:
|
|
75
|
+
control: var(--mci-shape-input)
|
|
76
|
+
card: var(--mci-shape-card)
|
|
77
|
+
pill: var(--mci-radius-full)
|
|
78
|
+
elevation:
|
|
79
|
+
card: var(--mci-shadow-card)
|
|
80
|
+
cardHover: var(--mci-shadow-card-hover)
|
|
81
|
+
|
|
82
|
+
components:
|
|
83
|
+
dataCard:
|
|
84
|
+
background: "{tokens.color.surface}"
|
|
85
|
+
radius: "{tokens.shape.card}"
|
|
86
|
+
padding: "{tokens.spacing.card}"
|
|
87
|
+
states:
|
|
88
|
+
default: { elevation: "{tokens.elevation.card}" }
|
|
89
|
+
hover: { elevation: "{tokens.elevation.cardHover}", lift: -2px }
|
|
90
|
+
focus: { outline: "{tokens.color.primary}" }
|
|
91
|
+
selected: { border: "{tokens.color.primary}" }
|
|
92
|
+
disabled: { opacity: 0.56 }
|
|
93
|
+
|
|
94
|
+
omissions:
|
|
95
|
+
- rule: backgroundVideo
|
|
96
|
+
reason: 高频数据页不需要持续媒体,减少干扰与资源开销
|
|
76
97
|
```
|
|
77
98
|
|
|
99
|
+
机器块至少满足:
|
|
100
|
+
|
|
101
|
+
- 有主色、页面底色、表面色、主/次文字色和危险色。
|
|
102
|
+
- 字体角色包含字号、行高、字重;间距、圆角和层级都有明确单位或 `--mci-*` 引用。
|
|
103
|
+
- 组件状态覆盖适用的 default、hover、focus、pressed、loading、empty、error、disabled、selected、success。
|
|
104
|
+
- 同一语义只定义一次;组件优先引用共享 token,而不是重新复制值。
|
|
105
|
+
- Alpha、混色和玻璃表面必须说明叠加在哪种底色上;只给透明度不算完整颜色定义。
|
|
106
|
+
|
|
107
|
+
## 人类可读层
|
|
108
|
+
|
|
109
|
+
每个核心选择都要写一行理由,尤其是:
|
|
110
|
+
|
|
111
|
+
- 为什么这种气质适合目标用户与任务。
|
|
112
|
+
- 颜色如何区分主动作、状态、表面和内容层级。
|
|
113
|
+
- 字体如何形成阅读节奏,中文和数字如何共存。
|
|
114
|
+
- 内部紧凑与外部宽松分别使用哪些间距。
|
|
115
|
+
- 深度来自色调层、细边框、环境阴影、透明材质还是实体投影。
|
|
116
|
+
- 圆角、切角、胶囊或有机形状表达什么性格。
|
|
117
|
+
- 卡片、按钮、输入、导航、弹层在所有状态下如何变化。
|
|
118
|
+
- 哪些装饰会破坏任务,应明确禁止。
|
|
119
|
+
|
|
120
|
+
## 可迁移的视觉气质
|
|
121
|
+
|
|
122
|
+
以下不是成品主题,而是把意图翻译为系统规则的示例:
|
|
123
|
+
|
|
124
|
+
| 气质 | 色彩与材质 | 形状与间距 | 动效 | 禁止 |
|
|
125
|
+
| --- | --- | --- | --- | --- |
|
|
126
|
+
| 温暖友好 | 暖白或浅沙底、自然低饱和强调色、轻触感层次 | 圆润或轻微有机形,外部留白宽松 | 柔和上浮与按压 | 冷硬高对比、密集霓虹、尖锐切角 |
|
|
127
|
+
| 深色发光 | 深色表面、少量青蓝紫发光语义、清晰高对比文字 | 边界精确、圆角克制、层级紧凑 | 短促聚焦与状态脉冲 | 大面积炫光、彩虹状态色、持续漂移 |
|
|
128
|
+
| 雾感通透 | 灰白低彩底、细线边框、轻透明表面 | 大留白、轻圆角、细腻分层 | 慢速淡入与透明度变化 | 厚重投影、不透明色块堆叠、过度模糊 |
|
|
129
|
+
|
|
130
|
+
## 后台数据卡片契约
|
|
131
|
+
|
|
132
|
+
后台数据卡片是高频操作容器,不是营销海报:
|
|
133
|
+
|
|
134
|
+
- 固定信息顺序:真实图片或紧凑身份标记 → 标题与状态 → 2—4 个关键字段 → 时间/辅助标签 → 操作区。
|
|
135
|
+
- 配置了图片但当前行无图时,使用 40—44px 的首字/图标标记;禁止生成占据卡片三分之一以上的装饰占位图。
|
|
136
|
+
- 默认桌面四列,显式列数配置优先;中等宽度自动降为三列或两列,移动端单列。卡片最小可读宽度优先于“同屏塞更多”。
|
|
137
|
+
- 标题最多两行,主次文字、金额、状态与时间有固定层级;标签只表达状态或分类,不把每个字段都做成胶囊。
|
|
138
|
+
- 操作区优先一个主动作、一至两个次动作,其余收进“更多”;危险动作不得与主动作同权。移动端触控目标不小于 44px。
|
|
139
|
+
- 骨架屏必须复刻最终标题、字段和操作区的几何结构;空态解释原因并提供下一步。
|
|
140
|
+
- 整卡可进入详情时必须提供键盘焦点、Enter/Space 触发和可见 focus;内部按钮阻止事件冒泡。
|
|
141
|
+
|
|
142
|
+
## 契约检查、差异与输出
|
|
143
|
+
|
|
144
|
+
每次修改契约或 UI 时,按顺序检查:
|
|
145
|
+
|
|
146
|
+
1. **结构**:核心章节存在且顺序正确,无重复章节、疑似拼写错误或无法识别的 token 组。
|
|
147
|
+
2. **类型**:颜色、长度、数字、布尔值和状态对象类型正确,token 式文本没有被误放在普通说明里而漏解析。
|
|
148
|
+
3. **引用**:所有 `{路径}` 可解析,无循环引用;未被组件、页面或输出消费的孤立 token 要删除或说明用途。
|
|
149
|
+
4. **语义**:主色、表面、文字层级、组件状态和有意省略完整;命名能解释用途。
|
|
150
|
+
5. **可访问性**:正文和交互态对比度满足项目标准,焦点可见,键盘路径连续,低动效降级完整。
|
|
151
|
+
6. **差异门禁**:评审设计契约的语义变更和实现变更是否同时出现;意外删除、重命名或大范围 token 漂移应阻止合入。
|
|
152
|
+
7. **输出**:需要生成运行时变量或其它主题格式时,只由已校验的机器块派生,禁止维护第二份手工 token。
|
|
153
|
+
|
|
154
|
+
契约格式若仍在演进,项目必须锁定 `contract.version`,升级时先查看差异并一次性迁移。跨平台脚本要提供不依赖文件扩展名的稳定入口,避免不同终端执行出不同结果。
|
|
155
|
+
|
|
78
156
|
## AI 使用规则
|
|
79
157
|
|
|
80
|
-
-
|
|
81
|
-
-
|
|
82
|
-
-
|
|
83
|
-
-
|
|
84
|
-
-
|
|
158
|
+
- 开始实现前完整读取契约和 `ui-design` skill;先复述页面任务、主气质和三条禁止事项,再写页面。
|
|
159
|
+
- 契约缺少的精确值优先继承 Microi.UI token;不能用“看起来差不多”的硬编码补洞。
|
|
160
|
+
- 先稳定颜色、字体、间距、层级和形状,再定义组件状态;不要在基础 token 尚未收敛时过早堆复杂组件结构。
|
|
161
|
+
- 新模式在两个以上页面重复时,先更新契约,再抽成 `Mci*` 或项目级 `mci-*` 组件。
|
|
162
|
+
- 修改契约后至少截图一张受影响页面的桌面和移动版本,并覆盖亮/暗主题及相关业务状态。
|
|
163
|
+
- 契约、源码、浏览器截图三者冲突时不得宣称完成;修复后重新执行结构检查、定向测试和视觉验收。
|
|
@@ -477,3 +477,10 @@ AI 只要修改了 `Microi.Server/**` 下会影响 `Microi.net.Api` 运行结果
|
|
|
477
477
|
- 根因:发布脚本把三个 registry 都视为同一个全局硬门禁,并把最容易受账号、scope 和 2FA 影响的 npm 放在扩展市场之前,没有区分必选目标、可选目标和严格发布模式。
|
|
478
478
|
- 通用规则:默认发布按目标隔离;先完成并回读必选目标,再独立尝试可选目标。可选目标失败应保留同版本不可变产物并输出补发入口;只有显式严格模式才要求所有目标预检通过后继续。
|
|
479
479
|
- 自动化检查:模拟 npm 未登录、scope 404 和 npm publish 非零退出,断言两个扩展市场的发布调用与回读仍会执行;另测严格模式在版本递增前停止,补发命令不递增版本且复用同版本产物。
|
|
480
|
+
|
|
481
|
+
### 复盘:npm 已接收新版本但公共回读短暂 404
|
|
482
|
+
|
|
483
|
+
- 触发场景:`npm publish` 已成功返回,npmjs.com 包页面也已出现新包或新版本,但紧随其后的 `npm view <package>@<version> version` 在数十秒内连续返回 E404,联合发布脚本因此把成功发布误报为失败。
|
|
484
|
+
- 根因:新 scope/新版本在 npm 网站、写入节点和公共 registry 读取节点之间存在短暂传播窗口;固定少量、短间隔轮询不足以区分“尚未发布”和“已经接收但尚未公开传播”。
|
|
485
|
+
- 通用规则:发布命令成功和公共回读确认必须作为两个阶段记录。npm 新版本回读使用 `--prefer-online` 和分钟级有限重试;重试结束仍为 E404 时标记 `pending-propagation`,禁止自动重发同一不可变版本,并提供独立只读验证命令稍后确认。只有发布命令本身失败且公共 registry 也始终不存在时,才进入补发流程。
|
|
486
|
+
- 自动化检查:模拟 `npm publish` 成功后前几次 `npm view` 返回 E404、随后返回期望版本,断言不会重复发布;再模拟重试窗口结束仍为 E404,断言输出待传播状态和只读验证命令,而不是提示重新上传同一版本。
|