@mison/ag-kit-cn 2.0.1

package/.agent/skills/frontend-design/SKILL.md

@@ -0,0 +1,418 @@
+---
+name: frontend-design
+description: Web UI（网页界面）的设计思维与决策。用于设计组件、布局、配色、字体或打造美观界面。教授原则而非固定值。
+allowed-tools: Read, Write, Edit, Glob, Grep, Bash
+---
+
+# 前端设计系统
+
+> **理念：** 每一个像素都有目的。克制就是奢侈。用户心理驱动决策。
+> **核心原则：** THINK（思考），不要死记硬背。ASK（提问），不要自作主张。
+
+---
+
+## 🎯 选择性阅读规则（强制）
+
+**必须阅读必读文件，可选文件仅在需要时阅读：**
+
+| 文件 | 状态 | 何时阅读 |
+|------|------|----------|
+| [ux-psychology.md](ux-psychology.md) | 🔴 **必读** | 必须先读！ |
+| [color-system.md](color-system.md) | ⚪ 可选 | 需要做配色/色盘决策时 |
+| [typography-system.md](typography-system.md) | ⚪ 可选 | 需要选择/搭配字体时 |
+| [visual-effects.md](visual-effects.md) | ⚪ 可选 | 玻璃拟态、阴影、渐变相关 |
+| [animation-guide.md](animation-guide.md) | ⚪ 可选 | 需要动画时 |
+| [motion-graphics.md](motion-graphics.md) | ⚪ 可选 | Lottie、GSAP、3D |
+| [decision-trees.md](decision-trees.md) | ⚪ 可选 | 场景化模板 |
+
+> 🔴 **ux-psychology.md = 必读。其他 = 仅在相关时阅读。**
+
+---
+
+## 🔧 运行时脚本
+
+**执行这些脚本用于审计（不要阅读，只需运行）：**
+
+| 脚本 | 用途 | 用法 |
+|------|------|------|
+| `scripts/ux_audit.py` | UX 心理与无障碍审计 | `python scripts/ux_audit.py <项目路径>` |
+
+---
+
+## ⚠️ 关键要求：先问再设（强制）
+
+> **停！如果用户需求是开放式的，不要默认你的偏好。**
+
+### 当用户表述模糊时，必须提问：
+
+**未指定颜色？** 问：
+> "你偏好哪类配色？（蓝/绿/橙/中性/其他？）"
+
+**未指定风格？** 问：
+> "你希望整体风格是什么？（极简/大胆/复古/未来感/有机？）"
+
+**未指定布局？** 问：
+> "你对布局有偏好吗？（单列/网格/非对称/全宽？）"
+
+### ⛔ 需要避免的默认倾向（反“安全港”）
+
+| AI 默认倾向 | 为什么不好 | 换个思路 |
+|------------|-----------|---------|
+| **Bento Grids（盒状网格，现代陈词滥调）** | 用得太多 | 为什么这个内容一定要用网格？ |
+| **Hero Split（左右分栏）** | 可预测且乏味 | 能否用超大字或垂直叙事？ |
+| **Mesh/Aurora Gradients（网格/极光渐变）** | “新式懒背景” | 能否做更大胆的色彩组合？ |
+| **Glassmorphism（玻璃拟态）** | AI 眼中的“高级感” | 试试高对比纯色平面？ |
+| **Deep Cyan / Fintech Blue（深青/金融蓝）** | 规避紫色禁令的安全色 | 为什么不用红、黑或霓虹绿？ |
+| **"Orchestrate / Empower"** | AI 味文案 | 人类会怎么说？ |
+| 深色背景 + 霓虹发光 | 过度使用的“AI 风” | 这个品牌真正需要什么？ |
+| **Rounded everything（全圆角）** | 通用且安全 | 哪里可以使用锋利、粗粝的边？ |
+
+> 🔴 **“每一次选择安全结构，都会让你更接近一个模板化设计。敢于冒险。”**
+
+---
+
+## 1. 约束分析（必须先做）
+
+在任何设计工作之前，先回答或询问：
+
+| 约束 | 问题 | 为什么重要 |
+|------|------|-----------|
+| **时间线** | 时间有多紧？ | 决定复杂度 |
+| **内容** | 内容已准备好还是占位？ | 影响布局弹性 |
+| **品牌** | 是否有既定规范？ | 可能限定颜色/字体 |
+| **技术** | 技术栈是什么？ | 影响实现能力 |
+| **受众** | 具体是谁？ | 决定视觉方向 |
+
+### 受众 → 设计方向
+
+| 受众 | 设计要点 |
+|------|---------|
+| **Gen Z（Z 世代）** | 大胆、快速、移动优先、真实 |
+| **Millennials（千禧一代）** | 干净、极简、价值导向 |
+| **Gen X（X 世代）** | 熟悉、可信、清晰 |
+| **Boomers（婴儿潮一代）** | 易读、高对比、简单 |
+| **B2B（企业服务）** | 专业、数据导向、信任感 |
+| **Luxury（奢华）** | 克制优雅、留白充足 |
+
+---
+
+## 2. UX 心理原则
+
+### 核心定律（务必内化）
+
+| 定律 | 原则 | 应用 |
+|------|------|------|
+| **Hick's Law（希克定律）** | 选择越多 = 决策越慢 | 限制选项，渐进披露 |
+| **Fitts' Law（菲茨定律）** | 更大更近 = 更易点击 | 合理设置 CTA（行动号召）尺寸 |
+| **Miller's Law（米勒定律）** | 工作记忆约 7 项 | 内容分组组织 |
+| **Von Restorff（冯·雷斯托夫效应）** | 差异 = 更易记忆 | CTA（行动号召）视觉突出 |
+| **Serial Position（首因-近因效应）** | 首尾最易记住 | 关键信息放首尾 |
+
+### 情感设计层级
+
+```
+VISCERAL（直觉）  → 第一印象：颜色、图像、整体感受
+BEHAVIORAL（行为）→ 使用过程：速度、反馈、效率
+REFLECTIVE（反思）→ 使用后：“我喜欢它传达的价值”
+```
+
+### 信任建立
+
+- 关键操作加安全提示
+- 适当的社会证明
+- 清晰的联系/支持入口
+- 一致且专业的视觉
+- 透明的政策说明
+
+---
+
+## 3. 布局原则
+
+### 黄金比例（φ = 1.618）
+
+```
+用于比例和谐：
+├── 内容 : 侧栏 ≈ 62% : 38%
+├── 标题字号 = 上一级 × 1.618（营造戏剧感）
+├── 间距可按：sm → md → lg（每次 × 1.618）
+```
+
+### 8 点网格概念
+
+```
+所有间距与尺寸以 8 为倍数：
+├── Tight: 4px（微调半步）
+├── Small: 8px
+├── Medium: 16px
+├── Large: 24px, 32px
+├── XL: 48px, 64px, 80px
+└── 依据内容密度调整
+```
+
+### 关键尺寸原则
+
+| 元素 | 考量 |
+|------|------|
+| **触达目标** | 点击/触控的舒适最小尺寸 |
+| **按钮** | 高度由重要性层级决定 |
+| **输入框** | 与按钮高度对齐 |
+| **卡片** | 内边距一致、留白充足 |
+| **阅读宽度** | 45-75 字符最佳 |
+
+---
+
+## 4. 配色原则
+
+### 60-30-10 规则
+
+```
+60% → 主色/背景（稳定、中性基底）
+30% → 次级色（支撑区域）
+10% → 点缀色（CTA（行动号召）、高亮、注意力）
+```
+
+### 色彩心理（用于决策）
+
+| 需求 | 参考色系 | 避免 |
+|------|---------|------|
+| 信任、平静 | 蓝色系 | 侵略性红色 |
+| 成长、自然 | 绿色系 | 工业感灰色 |
+| 能量、紧迫 | 橙/红 | 被动蓝色 |
+| 奢华、创意 | 深青、金色、祖母绿 | 便宜感亮色 |
+| 干净、极简 | 中性色 | 过度色彩 |
+
+### 选择流程
+
+1. **行业是什么？**（缩小范围）
+2. **情绪是什么？**（确定主色）
+3. **浅色还是深色？**（确定基底）
+4. **未指定就提问**
+
+详细色彩理论见：[color-system.md](color-system.md)
+
+---
+
+## 5. 字体原则
+
+### 比例选择
+
+| 内容类型 | 比例 | 质感 |
+|---------|------|------|
+| 密集型 UI | 1.125-1.2 | 紧凑、高效 |
+| 通用 Web | 1.25 | 平衡（最常见） |
+| 编辑排版 | 1.333 | 易读、宽松 |
+| Hero（首屏展示）/展示 | 1.5-1.618 | 强烈冲击 |
+
+### 搭配概念
+
+```
+对比 + 协调：
+├── 足够不同以形成层级
+├── 足够相似以保持一致
+└── 常见：展示字体 + 中性字体，或衬线 + 无衬线
+```
+
+### 可读性规则
+
+- **行长**：45-75 字符最佳
+- **行高**：正文 1.4-1.6
+- **对比**：检查 WCAG（无障碍标准）要求
+- **字号**：Web 正文字号 16px+
+
+详细字体见：[typography-system.md](typography-system.md)
+
+---
+
+## 6. 视觉效果原则
+
+### 玻璃拟态（Glassmorphism，适用时）
+
+```
+关键属性：
+├── 半透明背景
+├── 背景模糊
+├── 轻微边框以界定层级
+└── ⚠️ **警告：** 标准蓝/白玻璃拟态已成现代陈词滥调。要么做得激进，要么别用。
+```
+
+### 阴影层级
+
+```
+高度概念：
+├── 越高的元素 = 更大的阴影
+├── Y 轴偏移 > X 轴偏移（光从上方）
+├── 多层叠加 = 更真实
+└── 深色模式：可能需要改为发光
+```
+
+### 渐变使用
+
+```
+和谐渐变：
+├── 色轮相邻色（analogous）
+├── 或同色相不同明度
+├── 避免强烈互补色
+├── 🚫 **禁止 Mesh/Aurora 渐变**（漂浮块）
+└── 不同项目要有明显差异
+```
+
+完整效果指南见：[visual-effects.md](visual-effects.md)
+
+---
+
+## 7. 动画原则
+
+### 时长概念
+
+```
+时长依据：
+├── 距离（更远更久）
+├── 尺寸（更大更慢）
+├── 重要性（关键动作要清晰）
+└── 场景（紧急更快，奢华更慢）
+```
+
+### 缓动选择
+
+| 动作 | 缓动 | 原因 |
+|------|------|------|
+| 进入 | Ease-out（缓出） | 减速并稳定 |
+| 离开 | Ease-in（缓入） | 加速离场 |
+| 强调 | Ease-in-out（缓入缓出） | 平滑、克制 |
+| 活泼 | Bounce（弹跳） | 有趣、活力 |
+
+### 性能
+
+- 只动画 transform 和 opacity
+- 尊重 reduced-motion（减少动画）偏好
+- 在低端设备上测试
+
+动画模式见：[animation-guide.md](animation-guide.md)，进阶见：[motion-graphics.md](motion-graphics.md)
+
+---
+
+## 8. “Wow Factor（惊艳度）”检查清单
+
+### 高级感指标
+
+- [ ] 充足留白（奢华 = 呼吸空间）
+- [ ] 细微的层次与维度
+- [ ] 顺滑、目的明确的动画
+- [ ] 细节到位（对齐、一致性）
+- [ ] 统一的视觉节奏
+- [ ] 自定义元素（不是全默认）
+
+### 信任构建
+
+- [ ] 适当位置的安全提示
+- [ ] 社会证明 / 用户评价
+- [ ] 清晰的价值主张
+- [ ] 专业图像
+- [ ] 设计语言一致
+
+### 情绪触发
+
+- [ ] 能传递目标情绪的首屏
+- [ ] 人的元素（面孔、故事）
+- [ ] 进度/成就指标
+- [ ] 令人愉悦的瞬间
+
+---
+
+## 9. 反模式（不要这样做）
+
+### ❌ 懒惰设计信号
+
+- 默认系统字体且不加思考
+- 与内容不匹配的图库素材
+- 间距不一致
+- 颜色过多相互争抢
+- 大段无层级文本
+- 对比不足
+
+### ❌ AI 倾向模式（避免）
+
+- **每个项目都用同一套颜色**
+- **深色 + 霓虹默认化**
+- **紫色/紫罗兰泛滥（PURPLE BAN ✅，禁紫提醒）**
+- **简单落地页硬套 Bento 网格**
+- **Mesh 渐变与发光效果**
+- **同样的布局结构 / Vercel 仿制**
+- **不询问用户偏好**
+
+### ❌ 黑暗模式（不道德）
+
+- 隐藏成本
+- 虚假紧迫感
+- 强迫操作
+- 欺骗性 UI
+- Confirmshaming（确认羞辱）
+
+---
+
+## 10. 决策流程总结
+
+```
+对每一次设计任务：
+
+1. 约束
+   └── 时间线、品牌、技术、受众？
+   └── 不明确就提问
+
+2. 内容
+   └── 有哪些内容？
+   └── 层级如何？
+
+3. 风格方向
+   └── 适合当前上下文吗？
+   └── 不明确就提问（不要默认）
+
+4. 执行
+   └── 应用上述原则
+   └── 对照反模式自检
+
+5. 复审
+   └── “是否服务用户？”
+   └── “是否不同于我的默认模板？”
+   └── “我会为这个设计感到自豪吗？”
+```
+
+---
+
+## 参考文件
+
+更深层的指导：
+
+- [color-system.md](color-system.md) - 色彩理论与选择流程
+- [typography-system.md](typography-system.md) - 字体搭配与比例
+- [visual-effects.md](visual-effects.md) - 效果原则与技巧
+- [animation-guide.md](animation-guide.md) - 动效设计原则
+- [motion-graphics.md](motion-graphics.md) - 进阶：Lottie、GSAP、SVG、3D、粒子
+- [decision-trees.md](decision-trees.md) - 场景化模板
+- [ux-psychology.md](ux-psychology.md) - 用户心理深度解析
+
+---
+
+## 相关技能
+
+| 技能 | 适用时机 |
+|------|----------|
+| **frontend-design**（本技能） | 编码前 - 学习设计原则（配色、字体、UX 心理） |
+| **[web-design-guidelines](../web-design-guidelines/SKILL.md)** | 编码后 - 审计无障碍、性能与最佳实践 |
+
+## 设计后流程
+
+实现设计后，运行审计：
+
+```
+1. DESIGN（设计） → 阅读 frontend-design 原则 ← 你在这里
+2. CODE（编码）   → 实现设计
+3. AUDIT（审计）  → 运行 web-design-guidelines 复审
+4. FIX（修复）    → 修复审计发现
+```
+
+> **下一步：** 编码后使用 `web-design-guidelines` 技能审计无障碍、焦点状态、动画与性能问题。
+
+---
+
+> **记住：** 设计是思考，不是抄写。每个项目都应基于其独特的上下文与用户重新做决定。**远离现代 SaaS（软件即服务）的安全港！**