@chantezy/mcp-product-design 0.1.0 → 0.1.2

package/skills/requirements-content-analysis/references/Multi-Platform Design Principles.md

@@ -0,0 +1,340 @@
+# 多端设备体验差异设计注意事项
+
+> 本文档系统梳理移动端与 PC 端在交互设计中的核心差异，帮助设计团队在多端适配时做出正确决策。
+
+---
+
+## 文档索引（快速定位）
+
+在编辑器或预览中可用搜索（Ctrl/Cmd+F）跳转到对应 **章节或小节标题**。
+
+| 模块             | 小节                        | 速查                             |
+| -------------- | ------------------------- | ------------------------------ |
+| **一、屏幕与布局**    | 屏幕尺寸与视口                   | 移动单列低密度，PC 多列高密度；内容区宽度建议       |
+|                | 响应式断点参考                   | 断点 = 布局重组，非简单缩放；覆盖中间断点         |
+| **二、输入方式**     | 触控 vs 鼠标键盘                | 热区 44+/48+、无 hover 依赖、手势与快捷键差异 |
+|                | 表单设计差异                    | 控件选型不同；移动少打字、防键盘遮挡             |
+| **三、导航与信息架构**  | 导航模式                      | 底 Tab vs 顶栏 / 侧栏；返回 vs 面包屑     |
+|                | 信息密度                      | 卡片精简 vs 表格丰富；Master-Detail     |
+| **四、手势与交互模式**  | 移动端专属手势                   | 勿与系统手势冲突；关键操作需按钮兜底             |
+|                | PC 端专属交互                  | Hover、右键、拖拽、快捷键、多窗口            |
+| **五、性能与加载体验**  | 网络与环境差异                   | 弱网、流量、电量；移动降级与缓存               |
+|                | 加载体验设计                    | 骨架屏、无限滚动 vs 分页、乐观更新            |
+| **六、视觉与排版**    | 字体与阅读                     | 字号行宽行高；长文 max-width            |
+|                | 间距与节奏                     | 页边距与模块间距；4pt / 8px 网格          |
+|                | 图标与图形                     | 尺寸与风格按端调整                      |
+| **七、功能适配策略**   | 功能裁剪 vs 功能对等              | 核心流程两端可完成；可互补勿强行一致             |
+|                | 典型场景适配                    | 看板、列表、编辑、上传、搜索等策略对照            |
+| **八、平台规范遵循**   | iOS vs Android vs Desktop | 导航、弹窗、刷新、删除等模式差异               |
+| **九、设计评审检查清单** | 移动 / PC / 跨端专项检查          | 触控、层级、表格、快捷键、一致性等              |
+| **无障碍**        | 可感知 / 可操作 / 可理解 / 健壮      | WCAG 四原则要点速览                   |
+
+---
+
+## 一、屏幕与布局
+
+### 1.1 屏幕尺寸与视口
+
+| 维度 | 移动端 | PC 端 |
+|------|--------|-------|
+| 屏幕宽度 | 320–428pt（主流） | 1280–1920px（主流） |
+| 视口方向 | 竖屏为主，横屏为辅 | 横屏为主 |
+| 信息密度 | 低密度，逐屏聚焦 | 高密度，一屏多模块 |
+| 设计策略 | 单列纵向流式布局 | 多列网格布局 |
+
+**设计注意**：
+- 移动端避免多列并排，信息流以单列为主
+- PC 端可利用宽屏优势展示更多并行信息（如列表+详情侧栏）
+- 移动端内容区宽度建议 ≤ 640px，PC 端内容区建议 960–1200px
+
+### 1.2 响应式断点参考
+
+```
+移动端：< 768px
+平板端：768px – 1024px
+PC 端：> 1024px
+大屏：> 1440px
+```
+
+**设计注意**：
+- 断点不是简单的"缩放"，而是布局结构的重组
+- 平板端需同时考虑横竖屏切换
+- 避免只做两个极端断点，中间断点同样需要验证
+
+---
+
+## 二、输入方式
+
+### 2.1 触控 vs 鼠标键盘
+
+| 维度 | 移动端（触控） | PC 端（鼠标键盘） |
+|------|---------------|------------------|
+| 精确度 | 低（手指遮挡） | 高（像素级精确） |
+| 悬停状态 | 不支持 hover | 支持 hover 态 |
+| 操作手势 | 点击、滑动、捏合、长按 | 点击、双击、右键、滚轮 |
+| 文本输入 | 虚拟键盘，效率低 | 实体键盘，效率高 |
+| 快捷操作 | 手势快捷 | 键盘快捷键（Ctrl/Cmd） |
+
+**设计注意**：
+- **触控目标尺寸**：移动端可点击元素最小 44×44pt（iOS）/ 48×48dp（Android），间距 ≥ 8pt
+- **悬停态降级**：移动端无 hover，关键信息不能仅依赖 hover 展示（如 tooltip 需改为点击触发）
+- **右键菜单替代**：移动端用长按或"更多"按钮替代右键菜单
+- **减少移动端文本输入**：用选择器、扫码、语音替代手动输入
+
+### 2.2 表单设计差异
+
+| 场景 | 移动端 | PC 端 |
+|------|--------|-------|
+| 日期选择 | 滚轮选择器 | 日历面板 |
+| 地区选择 | 级联选择器 / 定位 | 下拉选择 / 搜索 |
+| 数量输入 | +/- 步进器 | 直接输入数字 |
+| 长文本 | 底部弹起输入区 | 内联文本框 |
+| 搜索 | 顶部搜索栏，自动聚焦 | 搜索框 + 高级筛选面板 |
+
+**设计注意**：
+- 移动端表单应尽量拆分为单字段单屏，减少视觉干扰
+- PC 端可利用多列表单布局提高填写效率
+- 移动端键盘弹出会遮挡页面下半部分，需预留滚动空间
+
+---
+
+## 三、导航与信息架构
+
+### 3.1 导航模式
+
+| 导航类型 | 移动端 | PC 端 |
+|----------|--------|-------|
+| 全局导航 | 底部 Tab Bar（3–5 个） | 顶部导航栏 / 侧边栏 |
+| 层级导航 | 返回按钮 + 标题栏 | 面包屑导航 |
+| 功能入口 | 汉堡菜单 / 更多面板 | 直接展示在导航栏 |
+| 内容切换 | 左右滑动切换 Tab | Tab 栏点击切换 |
+
+**设计注意**：
+- 移动端底部导航项建议 3–5 个，超过则收纳到"更多"
+- PC 端侧边栏适合层级较深的系统（后台管理、文档类）
+- 移动端避免超过 3 层的页面层级，否则用户容易"迷路"
+- PC 端可使用面包屑 + 侧边栏树形结构处理深层级
+
+### 3.2 信息密度
+
+| 维度 | 移动端 | PC 端 |
+|------|--------|-------|
+| 列表展示 | 卡片式，信息精简 | 表格式，信息丰富 |
+| 数据表格 | 简化列，横向滚动或转为卡片 | 完整多列，支持排序筛选 |
+| 详情页 | 纵向堆叠，渐进披露 | 左右分栏（列表+详情） |
+| 空间利用 | 屏幕寸土寸金，严格筛选优先级 | 空间充裕，可展示辅助信息 |
+
+**设计注意**：
+- 移动端数据表格建议转为卡片列表，或仅展示核心列
+- PC 端可使用 Master-Detail（主从面板）模式提升效率
+- 移动端善用"折叠/展开"控制信息密度
+
+---
+
+## 四、手势与交互模式
+
+### 4.1 移动端专属手势
+
+| 手势 | 用途 | 设计注意 |
+|------|------|----------|
+| 点击（Tap） | 主要操作触发 | 热区足够大 |
+| 长按（Long Press） | 上下文菜单 / 多选 | 需提供视觉提示（如图标暗示） |
+| 滑动（Swipe） | 返回、删除、切换 | 需提供滑动引导或提示 |
+| 下拉（Pull Down） | 刷新 | 遵循平台惯例 |
+| 捏合（Pinch） | 缩放 | 仅在地图/图片场景使用 |
+| 双指拖动 | 平移画布 | 仅在画布/编辑器场景使用 |
+
+**设计注意**：
+- **不要自定义系统级手势**（如左滑返回），避免与系统冲突
+- 自定义手势必须有首次引导提示
+- 关键操作不要仅依赖手势，应提供按钮替代方案
+
+### 4.2 PC 端专属交互
+
+| 交互 | 用途 | 设计注意 |
+|------|------|----------|
+| 悬停（Hover） | 预览信息、展示菜单 | 关键信息不能仅依赖 hover |
+| 右键（Context Menu） | 上下文操作 | 移动端需提供替代方案 |
+| 拖拽（Drag & Drop） | 排序、移动、上传 | 需有明确的拖拽手柄提示 |
+| 键盘快捷键 | 加速操作 | 提供快捷键列表/帮助 |
+| 滚轮 | 页面滚动、缩放 | 注意横向滚动与纵向滚动的区分 |
+| 多窗口 | 并行操作 | 状态需跨窗口同步 |
+
+---
+
+## 五、性能与加载体验
+
+### 5.1 网络与环境差异
+
+| 维度 | 移动端 | PC 端 |
+|------|--------|-------|
+| 网络稳定性 | 弱网常见（地铁、电梯） | 相对稳定 |
+| 网络带宽 | 4G/5G，流量敏感 | Wi-Fi/有线，带宽充裕 |
+| 设备性能 | CPU/GPU 相对有限 | 性能较强 |
+| 电量 | 需考虑功耗 | 通常有电源 |
+| 存储空间 | 有限 | 充裕 |
+
+**设计注意**：
+- 移动端图片/资源需压缩，避免不必要的大图加载
+- 移动端需设计离线/弱网降级方案（骨架屏、缓存数据展示）
+- PC 端可加载更丰富的视觉资源（高清图、动画、3D）
+- 移动端避免频繁的网络请求，合理使用缓存策略
+
+### 5.2 加载体验设计
+
+| 策略 | 移动端 | PC 端 |
+|------|--------|-------|
+| 首屏加载 | 骨架屏 + 渐进式加载 | Loading 动画或骨架屏 |
+| 分页加载 | 无限滚动（上拉加载更多） | 分页 / 无限滚动均可 |
+| 预加载 | 预加载下一屏内容 | 预加载关联模块 |
+| 乐观更新 | 先展示结果，后台同步 | 先展示结果，后台同步 |
+| 空状态 | 引导性插图 + 操作按钮 | 引导性插图 + 操作按钮 |
+
+**设计注意**：
+- 移动端无限滚动需注意性能（虚拟列表），并提供"回到顶部"
+- PC 端数据量大时，分页比无限滚动更易管理
+- 移动端"下拉刷新"已成为用户习惯，可保留
+
+---
+
+## 六、视觉与排版
+
+### 6.1 字体与阅读
+
+| 维度 | 移动端 | PC 端 |
+|------|--------|-------|
+| 正文字号 | 14–16pt | 14–16px |
+| 最小字号 | 11pt（辅助信息） | 12px（辅助信息） |
+| 行高 | 1.4–1.6 倍 | 1.5–1.8 倍 |
+| 阅读宽度 | 适配屏幕宽度 | 最佳 45–75 字符/行 |
+| 阅读距离 | 约 30cm | 约 50–70cm |
+
+**设计注意**：
+- 移动端正文不要小于 14pt，否则影响可读性
+- PC 端长文本区域应限制最大宽度（max-width: 680px），避免阅读疲劳
+- 移动端段落间距适当增大，提升扫读效率
+
+### 6.2 间距与节奏
+
+| 维度 | 移动端 | PC 端 |
+|------|--------|-------|
+| 页面边距 | 16–20pt | 24–48px |
+| 模块间距 | 16–24pt | 24–32px |
+| 元素内间距 | 12–16pt | 12–24px |
+| 网格系统 | 4pt 基准网格 | 8px 基准网格 |
+
+**设计注意**：
+- 移动端空间紧张，间距需精打细算但不能过于拥挤
+- PC 端可利用更大间距营造呼吸感和层次感
+
+### 6.3 图标与图形
+
+| 维度 | 移动端 | PC 端 |
+|------|--------|-------|
+| 图标尺寸 | 24×24pt（导航）/ 20×20pt（行内） | 16×16px（行内）/ 24×24px（导航） |
+| 图标风格 | 线性或面性，统一风格 | 线性或面性，统一风格 |
+| 插图 | 简洁、色彩鲜明 | 可更精细复杂 |
+
+---
+
+## 七、功能适配策略
+
+### 7.1 功能裁剪 vs 功能对等
+
+| 策略 | 适用场景 | 示例 |
+|------|----------|------|
+| **功能对等** | 核心业务流程两端必须一致 | 支付、审批、核心编辑 |
+| **功能裁剪** | 复杂功能在移动端简化 | 数据看板简化为关键指标 |
+| **功能互补** | 利用端特性提供差异化体验 | PC 端批量操作，移动端快速处理 |
+
+**设计注意**：
+- 核心流程两端必须可完成，不能出现"移动端无法操作，必须去 PC"的情况
+- 低频复杂功能可在移动端隐藏但不应缺失
+- 明确告知用户两端的功能差异（如有）
+
+### 7.2 典型场景适配
+
+| 场景 | 移动端策略 | PC 端策略 |
+|------|-----------|-----------|
+| 数据看板 | 关键指标卡片 + 简化图表 | 完整仪表盘 + 多维筛选 |
+| 列表管理 | 卡片列表 + 左滑操作 | 表格 + 批量操作 + 右键菜单 |
+| 内容编辑 | 简化编辑器 + 底部工具栏 | 富文本编辑器 + 侧边属性面板 |
+| 文件上传 | 拍照 / 相册选择 | 拖拽上传 / 批量上传 |
+| 消息通知 | 推送通知 + 角标 | 系统通知 + 站内信 |
+| 搜索 | 顶部搜索栏 + 热门推荐 | 搜索框 + 高级筛选 + 快捷筛选标签 |
+
+---
+
+## 八、平台规范遵循
+
+### 8.1 iOS vs Android vs Desktop
+
+| 维度 | iOS | Android | Desktop (Web) |
+|------|-----|---------|---------------|
+| 导航返回 | 左滑返回 + 返回按钮 | 系统返回键 + 返回按钮 | 面包屑 / 返回按钮 |
+| 顶部栏 | 导航栏（标题居中） | 顶部应用栏（标题左对齐） | 顶部导航栏 |
+| 操作按钮 | 右上角 | 右上角 / FAB | 工具栏 / 右上角 |
+| 弹窗 | 从底部滑出（Sheet） | 从底部滑出（Bottom Sheet） | 居中弹窗（Modal） |
+| 刷新 | 下拉刷新 | 下拉刷新 | 刷新按钮 / 自动刷新 |
+| 删除确认 | 底部 Sheet | 对话框 / Snackbar | 对话框 |
+
+**设计注意**：
+- 移动端必须同时遵循 iOS HIG 和 Material Design（根据平台）
+- 跨平台框架（如 Flutter、React Native）也建议尊重平台原生体验
+- PC Web 端参考 Material Design 或 Ant Design 等成熟体系
+
+---
+
+## 九、设计评审检查清单
+
+### 移动端专项检查
+
+- [ ] 触控目标 ≥ 44×44pt，间距 ≥ 8pt
+- [ ] 无 hover 依赖，关键信息直接可见
+- [ ] 底部导航 3–5 项，核心功能一触即达
+- [ ] 页面层级 ≤ 3 层
+- [ ] 表单输入最小化，善用选择器
+- [ ] 键盘弹出不会遮挡输入框
+- [ ] 弱网/离线有降级方案
+- [ ] 图片资源已压缩优化
+- [ ] 横竖屏切换布局正常
+- [ ] 手势操作有引导提示
+
+### PC 端专项检查
+
+- [ ] 响应式布局在 1280–1920px 下表现正常
+- [ ] 长文本区域有 max-width 限制
+- [ ] 表格支持排序、筛选、分页
+- [ ] 键盘快捷键可用且有说明
+- [ ] 拖拽操作有明确视觉提示
+- [ ] 右键菜单功能完整
+- [ ] 多窗口/多标签状态同步
+- [ ] 面包屑导航层级清晰
+
+### 跨端一致性检查
+
+- [ ] 核心流程两端均可完整完成
+- [ ] 品牌视觉元素（色彩、字体、图标风格）统一
+- [ ] 术语和文案一致
+- [ ] 状态反馈（成功/失败/加载）风格统一
+- [ ] 信息架构逻辑一致，非简单照搬
+
+
+---
+
+## 无障碍设计原则
+### 1. 可感知性（Perceivable）
+信息可被多种感官接收。
+- **要点**：文字对比度 ≥ 4.5:1、图片提供 alt 文本、不依赖单一颜色传达信息
+
+### 2. 可操作性（Operable）
+界面可通过多种方式操作。
+- **要点**：支持键盘导航、触控目标足够大、提供足够操作时间
+
+### 3. 可理解性（Understandable）
+内容和操作方式易于理解。
+- **要点**：语言简洁明确、操作可预测、输入错误时提供帮助
+
+### 4. 健壮性（Robust）
+内容可被各种辅助技术（读屏器等）正确解析。
+- **要点**：语义化 HTML、ARIA 标签

package/skills/test-skill/SKILL.md

@@ -1,23 +0,0 @@
----
-name: test-skill
-description: 一个测试技能，用于验证 MCP 服务是否正常工作
----
-
-# 测试技能
-
-这是用于测试 MCP 服务端到端功能的示例技能。
-
-## 工作流程
-
-1. 接收测试输入
-2. 验证处理逻辑
-3. 输出测试结果
-
-## 输出格式
-
-```markdown
-## 测试结果
-
-- 状态: ✅ 通过
-- 时间: {{timestamp}}
-```

package/skills/test-skill/references/test-ref.md

@@ -1,3 +0,0 @@
-# 测试参考资料
-
-这是一个测试参考资料，用于验证 `get_reference` 工具是否正常工作。