@mison/ag-kit-cn 2.0.1

package/.agent/skills/frontend-design/animation-guide.md

@@ -0,0 +1,331 @@
+# 动画指南参考
+
+> 动画原则与时间心理学——学会判断，而不是照抄。
+> **不背固定时长——理解影响时间的因素。**
+
+---
+
+## 1. 时长原则
+
+### 影响时长的因素
+
+```
+决定动画速度的因素：
+├── 距离：位移越远，时长越长
+├── 尺寸：元素越大，动画越慢
+├── 复杂度：越复杂越慢（处理时间更长）
+├── 重要性：关键动作需要清晰反馈
+└── 场景：紧急要快，奢华要慢
+```
+
+### 按目的划分的时长区间
+
+| 目的 | 时长范围 | 原因 |
+|------|---------|------|
+| 即时反馈 | 50-100ms | 低于感知阈值 |
+| 微交互 | 100-200ms | 快但可感知 |
+| 标准过渡 | 200-300ms | 舒适节奏 |
+| 复杂动画 | 300-500ms | 有时间跟随 |
+| 页面过渡 | 400-600ms | 平滑交接 |
+| **Wow（高级感）效果** | 800ms+ | 戏剧性、自然弹性、分层 |
+
+### 如何选择时长
+
+自问：
+1. 元素移动了多远？
+2. 这个变化需要被注意到吗？
+3. 用户在等待，还是这只是背景动效？
+
+---
+
+## 2. 缓动原则
+
+### 缓动的作用
+
+```
+缓动 = 速度随时间的变化方式
+├── Linear（线性）：匀速（机械、机器人感）
+├── Ease-out（缓出）：快进慢出（自然进入）
+├── Ease-in（缓入）：慢进快出（自然离开）
+└── Ease-in-out（缓入缓出）：两端都慢（平滑、克制）
+```
+
+### 各自适用场景
+
+| 缓动 | 适用场景 | 感觉 |
+|------|----------|------|
+| **Ease-out（缓出）** | 元素进入 | 到达、落位 |
+| **Ease-in（缓入）** | 元素离开 | 离场、退出 |
+| **Ease-in-out（缓入缓出）** | 强调、循环 | 从容、平滑 |
+| **Linear（线性）** | 连续运动 | 机械、恒定 |
+| **Bounce/Elastic（弹跳/弹性）** | 活泼 UI | 有趣、充满能量 |
+
+### 使用模式
+
+```css
+/* 进入视图 = ease-out（减速） */
+.enter {
+  animation-timing-function: ease-out;
+}
+
+/* 离开视图 = ease-in（加速） */
+.exit {
+  animation-timing-function: ease-in;
+}
+
+/* 连续运动 = ease-in-out */
+.continuous {
+  animation-timing-function: ease-in-out;
+}
+```
+
+---
+
+## 3. 微交互原则
+
+### 好的微交互做什么
+
+```
+微交互的目的：
+├── 反馈：确认动作发生
+├── 引导：提示可操作项
+├── 状态：告知当前状态
+└── 愉悦：小而精致的快乐
+```
+
+### 按钮状态
+
+```
+Hover（悬停） → 轻微视觉变化（抬升、颜色、缩放）
+Active（按压） → 按压感（缩小、阴影变化）
+Focus（聚焦） → 清晰指示（描边、光环）
+Loading（加载） → 进度提示（spinner（加载圈）、skeleton（骨架屏））
+Success（成功） → 成功确认（对勾、颜色）
+```
+
+### 原则
+
+1. **立即响应**（100ms 以内）
+2. **与动作匹配**（按压 = `scale(0.95)`，悬停 = `translateY(-4px) + glow（发光）`）
+3. **大胆但平滑**（像大师手感）
+4. **保持一致**（同类动作 = 同类反馈）
+
+---
+
+## 4. 加载态原则
+
+### 按场景分类
+
+| 场景 | 做法 |
+|------|------|
+| 快速加载（<1s） | 不需要指示 |
+| 中等（1-3s） | Spinner（加载圈）或简单动画 |
+| 较慢（3s+） | 进度条或骨架屏 |
+| 时长未知 | 不确定性指示器 |
+
+### 骨架屏
+
+```
+目的：降低感知等待时间
+├── 立即显示布局轮廓
+├── 细微动画（shimmer、pulse）
+├── 内容就绪后替换
+└── 体感比 spinner（加载圈）更快
+```
+
+### 进度指示
+
+```
+何时显示进度：
+├── 用户主动发起的动作
+├── 文件上传/下载
+├── 多步骤流程
+└── 长耗时操作
+
+不需要进度的场景：
+├── 非常快的操作
+├── 后台任务
+└── 初始页面加载（骨架屏更好）
+```
+
+---
+
+## 5. 页面过渡原则
+
+### 过渡策略
+
+```
+简单规则：离开快，进入慢
+├── 退出内容快速淡出
+├── 进入内容再动入
+└── 避免“全部同时动”
+```
+
+### 常见模式
+
+| 模式 | 何时使用 |
+|------|----------|
+| **Fade（淡入淡出）** | 安全默认，通用 |
+| **Slide（滑动）** | 顺序导航（上一页/下一页） |
+| **Scale（缩放）** | 打开/关闭模态 |
+| **Shared element（共享元素）** | 维持视觉连续性 |
+
+### 方向匹配
+
+```
+导航方向 = 动画方向
+├── 前进 → 从右滑入
+├── 后退 → 从左滑入
+├── 更深入 → 中心放大
+├── 返回上层 → 缩小返回
+```
+
+---
+
+## 6. 滚动动画原则
+
+### 渐进式呈现
+
+```
+内容随滚动出现：
+├── 降低初始认知负担
+├── 激励探索
+├── 不应拖沓
+└── 提供可关闭选项（无障碍）
+```
+
+### 触发位置
+
+| 触发时机 | 效果 |
+|---------|------|
+| 刚进入视口 | 标准出现 |
+| 居中视口 | 强调 |
+| 部分可见 | 提前出现 |
+| 完全可见 | 延后触发 |
+
+### 动画属性
+
+- 淡入（opacity）
+- 上移（transform）
+- 缩放（transform）
+- 以上组合
+
+### 性能
+
+- 使用 Intersection Observer（交叉观察器）
+- 只动画 transform/opacity
+- 移动端必要时降低动效
+
+---
+
+## 7. 悬停效果原则
+
+### 效果与意图匹配
+
+| 元素 | 效果 | 意图 |
+|------|------|------|
+| **可点击卡片** | 抬升 + 阴影 | “可交互” |
+| **按钮** | 颜色/亮度变化 | “按我” |
+| **图片** | 放大/缩放 | “查看细节” |
+| **链接** | 下划线/颜色 | “跳转这里” |
+
+### 原则
+
+1. **提示可交互** - 悬停应明确可点击
+2. **适度** - 细微变化足够
+3. **匹配重要性** - 越重要变化越明显
+4. **触控替代** - 移动端无悬停
+
+---
+
+## 8. 反馈动画原则
+
+### 成功态
+
+```
+适度庆祝：
+├── 小动作 → 轻微对勾/颜色
+├── 大动作 → 更明显的动画
+├── 完成 → 令人满意的收尾
+└── 与品牌气质匹配
+```
+
+### 错误态
+
+```
+引起注意但不制造恐慌：
+├── 颜色变化（语义红）
+├── 抖动动画（短促）
+├── 聚焦错误字段
+└── 清晰的提示
+```
+
+### 时机
+
+- 成功：稍长（享受片刻）
+- 错误：快速（不拖延）
+- 加载：持续直到完成
+
+---
+
+## 9. 性能原则
+
+### 哪些动画成本低
+
+```
+GPU 加速（快）：
+├── transform: translate, scale, rotate
+└── opacity: 0 to 1
+
+CPU 高开销（慢）：
+├── width, height
+├── top, left, right, bottom
+├── margin, padding
+├── border-radius 变化
+└── box-shadow 变化
+```
+
+### 优化策略
+
+1. **尽可能只动画 transform/opacity**
+2. **避免触发布局**（尺寸/位置变化）
+3. **谨慎使用 will-change**（给浏览器提示）
+4. **低端设备也要测试**（不要只看开发机）
+
+### 尊重用户偏好
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  /* 尊重该偏好 */
+  /* 仅保留必要动画 */
+  /* 减少或移除装饰性动效 */
+}
+```
+
+---
+
+## 10. 动画决策检查清单
+
+添加动画前：
+
+- [ ] **有明确目的？**（反馈/引导/愉悦）
+- [ ] **时长合适？**（不太快/不太慢）
+- [ ] **缓动选择正确？**（进入/离开/强调）
+- [ ] **性能可接受？**（只动画 transform/opacity）
+- [ ] **已考虑 reduced-motion（减少动效）？**（无障碍）
+- [ ] **与其他动画一致？**（同类节奏）
+- [ ] **不是你的默认模板？**（多样性检查）
+- [ ] **不明确时已问用户风格？**
+
+### 反模式
+
+- ❌ 每个项目都用同一套时长
+- ❌ 为动画而动画
+- ❌ 忽略 reduced-motion（减少动效）偏好
+- ❌ 动画高成本属性
+- ❌ 太多元素同时动画
+- ❌ 让用户等待过久
+
+---
+
+> **记住：** 动画是沟通。每一次运动都应有意义，服务于用户体验。

package/.agent/skills/frontend-design/color-system.md

@@ -0,0 +1,307 @@
+# 配色系统参考
+
+> 色彩理论、选择流程与决策指南。
+> **不背固定十六进制值——学会思考颜色。**
+
+---
+
+## 1. 色彩理论基础
+
+### 色相环
+
+```
+                    黄色
+                      │
+           黄绿       │       黄橙
+              ╲       │       ╱
+               ╲      │      ╱
+    绿色 ─────────── ● ─────────── 橙色
+               ╱      │      ╲
+              ╱       │       ╲
+           蓝绿       │       红橙
+                      │
+                     红色
+                      │
+                     紫色
+                  ╱       ╲
+             蓝紫         红紫
+                  ╲       ╱
+                    蓝色
+```
+
+### 色彩关系
+
+| 方案 | 如何创建 | 何时使用 |
+|------|---------|---------|
+| **单色（Monochromatic）** | 选择一个色相，仅变化明度/饱和度 | 极简、专业、一致 |
+| **相邻色（Analogous）** | 选择色轮相邻的 2-3 个色相 | 和谐、平静、自然感 |
+| **互补色（Complementary）** | 选择色轮相对的色相 | 高对比、醒目、吸引注意 |
+| **分裂互补（Split-Complementary）** | 主色 + 互补色相邻两色 | 动态但平衡 |
+| **三分色（Triadic）** | 色轮等距三色 | 活泼、创造力强 |
+
+### 如何选择方案：
+1. **项目气质是什么？** 冷静 → 相邻色；大胆 → 互补色。
+2. **需要多少颜色？** 极简 → 单色；复杂 → 三分色。
+3. **受众是谁？** 保守 → 单色；年轻 → 三分色。
+
+---
+
+## 2. 60-30-10 规则
+
+### 分布原则
+```
+┌─────────────────────────────────────────────────┐
+│                                                 │
+│     60% 主色（背景、大面积区域）                │
+│     → 应偏中性或平静                            │
+│     → 决定整体基调                              │
+│                                                 │
+├────────────────────────────────────┬────────────┤
+│                                    │            │
+│   30% 次级色                       │ 10% 点缀色 │
+│   （卡片、区块、标题）             │ （CTA（行动号召）、    │
+│   → 支撑而不抢戏                   │ 高亮）    │
+│                                    │ → 吸引注意 │
+└────────────────────────────────────┴────────────┘
+```
+
+### 实现方式
+```css
+:root {
+  /* 60% - 依据浅/深色模式与情绪选择 */
+  --color-bg: /* 中性色：白、米白或深灰 */
+  --color-surface: /* 比背景略有差异 */
+
+  /* 30% - 依据品牌或场景选择 */
+  --color-secondary: /* 主色的柔和版本或中性色 */
+
+  /* 10% - 依据动作/情绪选择 */
+  --color-accent: /* 鲜明、吸引注意 */
+}
+```
+
+---
+
+## 3. 色彩心理 - 含义与选择
+
+### 按场景选择
+
+| 项目类型 | 参考色系 | 原因 |
+|---------|---------|------|
+| **金融、科技、医疗** | 蓝、青 | 信任、稳定、平静 |
+| **环保、健康、自然** | 绿、土色 | 成长、健康、有机 |
+| **食品、能量、年轻** | 橙、黄、暖色 | 食欲、兴奋、温暖 |
+| **奢华、美妆、创意** | 深青、金、黑 | 高级、精致 |
+| **紧迫、促销、警报** | 红、橙 | 行动、注意、热度 |
+
+### 情绪联想（用于决策）
+
+| 色系 | 正向联想 | 注意事项 |
+|------|---------|---------|
+| **蓝** | 信任、平静、专业 | 可能显得冷、过度企业化 |
+| **绿** | 成长、自然、成功 | 过度使用会显得无聊 |
+| **红** | 热情、紧迫、能量 | 刺激强，谨慎使用 |
+| **橙** | 温暖、友好、创意 | 过饱和会显得廉价 |
+| **紫** | ⚠️ **禁用** - AI 过度使用！ | 改用深青/酒红/祖母绿 |
+| **黄** | 乐观、注意、快乐 | 可读性差，建议作点缀 |
+| **黑** | 优雅、力量、现代 | 可能显得沉重 |
+| **白** | 干净、极简、开放 | 可能显得冷淡 |
+
+### 选择流程：
+1. **行业是什么？** → 缩小到 2-3 个色系
+2. **情绪是什么？** → 选择主色
+3. **对比如何？** → 决定浅/深色模式
+4. **询问用户** → 未明确前先确认
+
+---
+
+## 4. 调色板生成原则
+
+### 从单色出发（HSL 方法）
+
+不要背十六进制，学会**操作 HSL**：
+
+```
+HSL = Hue（色相）, Saturation（饱和度）, Lightness（明度）
+
+Hue（0-360）：色相
+  0/360 = 红
+  60 = 黄
+  120 = 绿
+  180 = 青
+  240 = 蓝
+  300 = 紫
+
+Saturation（0-100%）：饱和度
+  低 = 柔和、克制
+  高 = 鲜明、活力
+
+Lightness（0-100%）：明度
+  0% = 黑
+  50% = 纯色
+  100% = 白
+```
+
+### 生成完整色阶
+
+给定任意基色，生成等级：
+
+```
+Lightness Scale:
+  50  （最浅） → L: 97%
+  100           → L: 94%
+  200           → L: 86%
+  300           → L: 74%
+  400           → L: 66%
+  500（基色）   → L: 50-60%
+  600           → L: 48%
+  700           → L: 38%
+  800           → L: 30%
+  900（最深）   → L: 20%
+```
+
+### 饱和度调整
+
+| 场景 | 饱和度水平 |
+|------|-----------|
+| **专业/企业** | 较低（40-60%） |
+| **活泼/年轻** | 较高（70-90%） |
+| **深色模式** | 降低 10-20% |
+| **无障碍** | 保证对比度，必要时调整 |
+
+---
+
+## 5. 基于上下文的选择指南
+
+### 不要直接抄配色，按流程选择：
+
+**步骤 1：识别上下文**
+```
+项目类型？
+├── 电商 → 需要信任 + 紧迫的平衡
+├── SaaS（软件即服务）/仪表盘 → 低疲劳、数据导向
+├── 健康/医疗 → 平静、自然
+├── 奢华/高端 → 克制优雅
+├── 创意/作品集 → 具个性、易记忆
+└── 其他 → 询问用户
+```
+
+**步骤 2：选择主色系**
+```
+基于上下文，选一个：
+- 蓝色系（信任）
+- 绿色系（成长）
+- 暖色系（能量）
+- 中性色系（优雅）
+- 或直接询问用户偏好
+```
+
+**步骤 3：确定浅色/深色模式**
+```
+考虑：
+- 用户偏好？
+- 行业习惯？
+- 内容类型？（文字多 → 浅色优先）
+- 使用时间？（夜间应用 → 深色优先）
+```
+
+**步骤 4：按原则生成色板**
+- 使用 HSL 调整
+- 遵循 60-30-10 规则
+- 检查对比度（WCAG，无障碍标准）
+- 用真实内容测试
+
+---
+
+## 6. 深色模式原则
+
+### 关键规则（不背固定值）
+
+1. **不要纯黑** → 使用略带色相的深灰
+2. **不要纯白文字** → 使用 87-92% 明度
+3. **降低饱和度** → 深色模式中色彩更刺眼
+4. **层级 = 亮度** → 更高层级略亮
+
+### 深色模式对比
+
+```
+背景层级（从暗到亮）：
+Layer 0（基底）    → 最暗
+Layer 1（卡片）    → 稍亮
+Layer 2（弹窗）    → 更亮
+Layer 3（浮层）    → 最亮的深色
+```
+
+### 深色模式色彩调整
+
+| 浅色模式 | 深色模式调整 |
+|----------|---------------|
+| 高饱和点缀 | 降低饱和度 10-20% |
+| 纯白背景 | 略带品牌色的深灰 |
+| 黑色文字 | 浅灰（非纯白） |
+| 彩色背景 | 降饱和、更深版本 |
+
+---
+
+## 7. 无障碍指南
+
+### 对比度要求（WCAG，无障碍标准）
+
+| 等级 | 正文 | 大文字 |
+|------|------|--------|
+| AA（最低） | 4.5:1 | 3:1 |
+| AAA（增强） | 7:1 | 4.5:1 |
+
+### 如何检查对比度
+
+1. **计算亮度**
+2. **计算比值**： (亮色 + 0.05) / (暗色 + 0.05)
+3. **调整直至达标**
+
+### 安全模式
+
+| 用例 | 指南 |
+|------|------|
+| **浅色背景文字** | 明度 ≤ 35% |
+| **深色背景文字** | 明度 ≥ 85% |
+| **白底主色** | 确保足够深 |
+| **按钮** | 背景与文字高对比 |
+
+---
+
+## 8. 配色选择检查清单
+
+最终确定前，请检查：
+
+- [ ] **是否询问用户偏好？**（未指定必须问）
+- [ ] **是否符合项目上下文？**（行业、受众）
+- [ ] **是否遵循 60-30-10？**（比例分布）
+- [ ] **是否符合 WCAG？**（对比度）
+- [ ] **是否适配浅/深色模式？**（如需要）
+- [ ] **是否不是你的默认/偏好？**（多样性检查）
+- [ ] **是否与上次项目不同？**（避免重复）
+
+---
+
+## 9. 反模式（避免）
+
+### ❌ 不要：
+- 每个项目都用同一套色值
+- 默认紫色/紫罗兰（AI 倾向）
+- 默认深色 + 霓虹（AI 倾向）
+- 纯黑（#000000）背景
+- 深色背景上用纯白文字（#FFFFFF）
+- 忽略行业上下文
+- 不询问用户偏好
+
+### ✅ 要做：
+- 每个项目生成新的色板
+- 询问用户配色偏好
+- 考虑行业与受众
+- 用 HSL 灵活调整
+- 测试对比度与无障碍
+- 提供浅色与深色方案
+
+---
+
+> **记住：** 颜色是决策，不是默认值。每个项目都应基于其独特上下文做有意识的选择。