@chantezy/mcp-product-design 0.1.0 → 0.1.1

package/skills/interaction-design-eval/references/scoring_criteria.md

@@ -0,0 +1,210 @@
+# 维度详细评分判据
+
+本文件供评估时按需查阅,每个维度给出:核心检查点、典型扣分项、典型加分项。
+评分时不必逐条机械对照,但要确保给出的问题和分数能落在这些判据框架内,而不是凌空打分。
+
+---
+
+## 1. 业务目标匹配度
+
+**核心问题**:是否贴合产品核心业务指标、商业诉求，能助力转化
+
+检查点:
+- 是否清晰绑定当前产品核心业务目标（留存、转化、效率、营收、降本等），而非脱离业务只谈体验
+- 能否说明该交互方案对业务指标的正向作用，有可预期的提升逻辑，无空泛描述
+- 是否权衡设计成本与业务收益，不存在投入大、业务回报极低的冗余设计
+- 是否兼顾短期业务诉求与产品长期战略，不会为单次转化损害长期用户价值
+- 方案是否规避业务风险（如合规、营收损失、运营成本上涨等负面影响）
+
+典型扣分项:
+- 完全未关联任何业务指标，仅描述交互体验，无法体现业务价值
+- 设计方案与当前产品核心业务方向冲突，会拉低转化、增加运营成本
+- 收益逻辑空洞，无推导链路，仅主观宣称 “能提升业务效果”
+- 过度追求体验创新，大幅抬高开发、运营成本，但无对等业务收益支撑
+
+典型加分项:
+- 明确绑定量化业务指标，可预估方案落地后的数据提升幅度
+- 完整推导链路：业务目标→业务痛点→设计解决思路→预期业务收益，逻辑可追溯
+- 兼顾短期转化与产品长期生态发展，无透支用户价值的短视设计
+- 同时兼顾业务收益、运营成本、合规风险三重维度，方案具备落地商业可行性
+
+---
+## 2. 用户理解能力
+
+**核心问题**:是否准确把握用户核心需求、使用动机和使用场景?
+
+检查点:
+- 文档是否明确定义了目标用户(画像、角色、使用情境),而非笼统说"用户"
+- 是否区分了不同用户群体/不同场景下需求的差异,还是用一套方案套所有人
+- 需求描述是源于真实痛点(有数据/调研/案例支撑),还是设计者主观假设
+- 是否存在"为了做功能而编需求"的痕迹(需求和方案功能强行对应,缺乏因果链)
+
+典型扣分项:
+- 用户画像缺失或过于模糊("年轻用户""高频用户"无具体特征)
+- 核心使用场景遗漏(例如只考虑了新手场景,完全没考虑老用户/异常场景)
+- 需求来源不明,无法判断是真实痛点还是设计者自我想象
+
+典型加分项:
+- 明确的用户分层 + 对应的差异化方案
+- 需求推导链路清晰:现象→痛点→设计目标→方案,逐层可追溯
+
+---
+
+## 3. 创新性与价值表达
+
+**核心问题**:是否在关键点有创新思路?是否解决了传统痛点?
+
+检查点:
+- 方案是否只是常规交互模式的堆砌,还是在关键节点有差异化设计
+- "创新"是否服务于实际痛点解决,而非为了创新而创新(炫技式交互)
+- 是否明确对比了"传统做法 vs 本方案"的差异及收益
+
+典型扣分项:
+- 全文是行业通用方案的复述,无任何针对性创新点说明
+- 创新点描述空洞(只说"提升体验",不说具体怎么提升、提升什么)
+- 创新点和实际用户痛点脱节,看起来酷但不解决真实问题
+
+典型加分项:
+- 有1-2个针对具体痛点的差异化设计,且说明了为什么传统方案做不到
+- 创新点有明确的价值闭环(用户价值/业务价值)
+
+---
+
+## 4. 任务流程设计
+
+**核心问题**:是否能够帮助用户高效完成目标任务?
+
+检查点:
+- 核心任务的操作步骤数是否合理,有无明显可省略的冗余步骤
+- 流程是否有清晰的起点、关键决策点、终点
+- 是否考虑了任务中断、回退、错误恢复路径
+- 多任务/多角色协作场景下,流程是否清晰分工
+
+典型扣分项:
+- 核心任务步骤过多,且文档未说明为何不能精简
+- 流程图/步骤描述存在断点(比如从A步骤跳到C步骤,中间逻辑缺失)
+- 完全没有异常路径/回退路径设计
+
+典型加分项:
+- 核心任务路径短且每步都有明确目的
+- 给出了关键决策点的分支处理逻辑
+
+---
+
+## 5. 可实现性评估
+
+**核心问题**:是否考虑技术落地可行性?是否存在冗余或复杂?
+
+检查点:
+- 方案是否提及技术依赖、数据依赖、第三方依赖,以及对应的可行性
+- 是否存在"理想化"设计——交互效果很好但当前技术栈/数据基础难以支撑
+- 方案复杂度与收益是否匹配(高复杂度低收益的设计是否被合理化)
+
+典型扣分项:
+- 涉及AI/算法/实时计算等能力,但未说明数据来源、准确率预期、降级方案
+- 方案要求的交互精度/响应速度超出常规技术实现水平,文档未给出技术验证说明
+- 同一目标存在更简单的实现路径,但方案选择了明显更复杂的路径且无理由说明
+
+典型加分项:
+- 对关键技术依赖有明确说明,并给出了降级/兜底方案
+- 复杂度增加有清晰的收益对应,不是炫技
+
+---
+
+## 6. 交互逻辑完整性
+
+**核心问题**:是否能够覆盖用户在使用过程中的各种场景和需求?
+
+检查点:
+- 主流程之外的边界场景(网络异常、权限不足、数据为空、并发冲突等)是否覆盖
+- 多端(移动/桌面)、多状态(登录/未登录、首次/多次使用)下交互逻辑是否一致或有合理差异说明
+- 是否存在逻辑矛盾(同一动作在不同章节描述不一致)
+
+典型扣分项:
+- 只描述了"正常路径",异常/空状态/极限场景完全缺失
+- 不同章节对同一交互的描述前后矛盾
+- 状态切换(如加载中、失败、成功)缺乏明确定义
+
+典型加分项:
+- 系统性列出了主流程+异常流程+边界场景,形成完整的状态机式覆盖
+- 不同场景间的交互逻辑保持一致的设计语言
+
+---
+
+## 7. 信息架构与内容组织
+
+**核心问题**:是否能够帮助用户快速找到所需的信息和功能?
+
+检查点:
+- 信息分组/分类是否符合用户心智模型,而非按系统内部逻辑组织
+- 导航层级深度是否合理,关键功能是否易达
+- 信息优先级/视觉层级是否和用户实际使用频率匹配
+
+典型扣分项:
+- 功能分类标准混乱(部分按业务模块分,部分按使用频率分,标准不统一)
+- 高频功能被埋得很深,低频功能却放在显著位置
+- 文档中信息架构图/导航说明本身存在层级矛盾
+
+典型加分项:
+- 分类标准统一且贴合用户实际心智模型
+- 有数据或场景支撑的优先级排序逻辑
+
+---
+
+## 8. 交互细节表达
+
+**核心问题**:是否能够增强用户的沉浸感和参与?
+
+检查点:
+- 关键交互节点(反馈、动效、提示文案)是否有具体设计说明,而非一笔带过
+- 细节设计是否服务于用户理解/操作效率,还是纯装饰性
+- 微交互(点击反馈、状态过渡、空状态文案)是否被认真对待
+
+典型扣分项:
+- 关键操作缺乏即时反馈设计(用户点击后不知道发生了什么)
+- 文案/提示语笼统(如"操作成功"不说明成功了什么、下一步能做什么)
+- 细节设计描述用形容词堆砌("流畅""自然")而无具体规格
+
+典型加分项:
+- 关键节点有明确的反馈机制设计(视觉/文案/动效三者配合)
+- 空状态、加载态、错误态都有具体设计而非默认处理
+
+---
+
+## 9. 可用性与可访问性
+
+**核心问题**:是否提供了简单易用的操作界面和交互方式?
+
+检查点:
+- 核心操作的学习成本是否合理,是否需要额外说明才能理解
+- 是否考虑了不同能力用户(视障、色弱、操作不熟练用户等)的可访问性
+- 容错设计(防误触、二次确认、撤销机制)是否到位
+
+典型扣分项:
+- 关键操作需要用户"猜"交互方式,文档未给出明确的可发现性设计
+- 完全未提及无障碍/可访问性考虑(尤其在公共服务、政务、医疗等场景下应有此考虑)
+- 高风险操作(删除、支付、不可逆操作)缺乏二次确认或撤销设计
+
+典型加分项:
+- 核心操作符合用户已有心智模型,学习成本低
+- 高风险操作有明确的容错/确认机制
+
+---
+
+## 10. 设计规范适配性
+
+**核心问题**:是否符合相关的设计规范和标准?
+
+检查点:
+- 是否遵循所属平台的设计规范(如iOS/Android人机交互指南、企业内部DS)
+- 组件使用是否一致(同类操作是否用了同一套交互模式)
+- 是否有规范引用或说明依据的标准
+
+典型扣分项:
+- 同一文档内,同类型操作在不同模块用了不同的交互模式,无统一规范
+- 完全未提及遵循何种设计规范/标准,无法判断是否符合行业基线
+- 明显违反目标平台的基础人机交互原则
+
+典型加分项:
+- 明确说明遵循的设计规范来源,并在方案中保持一致执行
+- 对于规范没有覆盖到的新场景,给出了合理的扩展逻辑而非随意发挥

package/skills/interaction-spec/README.md

@@ -0,0 +1,55 @@
+# interaction-spec
+
+
+将 UI 设计稿、原型图、功能模块转化为清晰的交互设计说明文档，结构化为可被机器和研发理解的逻辑表达。
+
+---
+
+## 功能
+
+- 根据页面截图或描述，生成规范的交互说明文档
+- 覆盖组件状态、操作行为、异常处理、权限差异、多端适配
+- 输出格式统一，可直接交付给研发使用
+
+## 文件结构
+
+```
+interaction-spec/
+├── SKILL.md                          # Skill 主文件（触发入口 + 撰写规范）
+├── README.md                         # 本文件
+└── references/
+    ├── complete-examples.md          # 完整案例（按钮、表单、列表、弹窗等）
+    └── interactive-checklist.md      # 交互说明自查清单（12大维度 + TOP15高频遗漏）
+```
+
+## 安装方式
+
+1. 下载本仓库（或 Clone）
+2. 打开IDE→ 设置 → Skills
+3. 上传 `interaction-spec` 文件夹
+4. 上传完成后，在对话中描述你的页面或功能，Claude 会自动触发此 Skill
+
+## 触发关键词
+
+在对话中提到以下内容时会自动触发：
+
+- 交互说明 / 交互文档
+- 标注说明 / PRD 交互部分
+- 组件行为描述 / 状态说明
+- 动效规范 / 操作反馈
+- "帮我写下这个页面的说明"
+
+## 输出示例
+
+```markdown
+**登录按钮**
+- 显示规则：默认置灰不可点击；手机号和验证码均填写后高亮显示
+- 点击操作：按钮显示 loading，禁止重复点击
+  - 成功：Toast「登录成功」，跳转至首页
+  - 失败：Toast 显示错误信息，停留当前页，按钮恢复可点击
+```
+
+## 参考文档
+
+- `references/complete-examples.md` — 按钮、输入框、列表、弹窗等组件模板
+- `references/interactive-checklist.md` — 交互说明自查规范（12大维度）

package/skills/interaction-spec/SKILL.md

@@ -0,0 +1,253 @@
+---
+name: interaction-spec
+description: 生成产品交互说明文档，适用于 UI 设计稿、原型图、功能模块的交互逻辑描述。当用户提到"交互说明"、"交互文档"、"标注说明"、"PRD 交互部分"、"组件行为描述"、"状态说明"、"动效规范"、"操作反馈"时，必须使用本 Skill。即使用户只是说"帮我写下这个页面的说明"或"描述一下这个功能怎么用"，只要涉及界面操作与系统响应的关系，都应触发本 Skill。
+---
+
+# 交互说明生成（Interaction Spec）
+
+将具体的页面及流程转化为清晰的交互设计说明，结构化为可被机器理解的逻辑表达。定义用户流程、状态逻辑及异常场景处理，确保设计一致性、可用性以及设计与研发之间的高效协同。
+
+## 功能特性
+
+- **界面元素说明** — 识别并描述页面组件
+- **规则说明** — 业务逻辑与交互规则
+- **显示条件** — 元素显示/隐藏的触发条件
+- **规则排序** — 多规则的优先级与执行顺序
+- **操作反馈** — 用户操作后的系统响应
+
+---
+
+## 一、触发前的信息收集
+
+在开始撰写之前，先确认以下信息（可从用户提供的上下文中提取，缺失时再询问）：
+
+> 说明的对象是整页、单个功能组件、还是某个流程？
+>
+> 如果用户已提供足够上下文，直接进入撰写阶段，不必反复提问。
+
+---
+
+## 二、交互说明文档结构
+
+标准的交互说明文档包含以下模块，根据实际场景按需取舍：
+
+```
+交互说明文档
+├── 1. 页面结构与布局说明
+├── 2. 组件交互说明
+│   ├── 2.1 界面元素说明
+│   ├── 2.2 默认/初始状态
+│   ├── 2.3 操作行为（触发方式 → 系统响应）
+│   ├── 2.4 数据与内容规则
+│   ├── 2.5 异常与极限情况
+│   ├── 2.6 用户权限差异
+│   ├── 2.7 多端适配
+│   └── 2.8 动效与过渡
+```
+
+---
+
+## 三、各模块撰写规范
+
+### 1. 页面结构与布局说明
+
+描述页面的区域划分，推荐用层级结构：
+
+```
+页面
+├── 顶部导航栏
+│   ├── 返回按钮
+│   └── 页面标题
+├── 内容区（可滚动）
+│   ├── xx模块
+│   └── xx模块
+└── 底部操作栏（固定）
+    ├── 取消按钮
+    └── 确定按钮
+```
+
+说明各区域是否固定/滚动、层叠关系、z-index 优先级（如有浮层）。
+
+**示例：**
+全局显示侧边栏
+- 显示规则：固定显示页面左侧
+- 点击操作：选中，切换右侧页面
+
+---
+
+### 2. 组件交互说明（核心章节）
+
+每个组件/模块按以下结构描述，格式统一：
+
+#### 2.1 界面元素说明
+
+描述元素信息，便于进行页面的对照识别。
+
+**模板结构：**
+元素名称-状态-详细描述（只有一种状态时或者默认状态时不显示）
+
+**示例一：**
+提交按钮-禁用
+- 表单验证通过后启用，点击后显示loading状态
+
+**示例二：**
+输入框
+- 最大50字符，必填，支持中英文及数字
+
+
+#### 2.2 默认 / 初始状态
+
+定义元素显示、隐藏的触发条件和规则。进入页面时，该组件呈现的初始样式和数据状态。
+
+- 数据从哪里来（接口 / 本地缓存 / 默认值）
+- 加载中如何展示（骨架屏 / loading / 占位符）
+- 无数据时展示什么（空状态）
+
+**示例：**
+管理按钮
+- 显示条件：仅管理员可见
+
+
+#### 2.3 操作行为描述
+
+定义用户操作后的系统响应，包括成功、失败、加载中等状态。
+
+**推荐格式：触发（Trigger）+ 规则（Rule）+ 反馈（Feedback）三段式**
+
+| 触发 | 规则 | 反馈 |
+|---|---|---|
+| 单击、双击、长按、滑动、拖拽、悬停（Hover-仅Web） | 组件状态、输入规则 | Toast提示、二次弹窗、行内提示、加载状态、页面跳转 |
+
+**示例：**
+保存按钮
+- hover：高亮显示，可点击
+- 点击操作：按钮显示loading加载，禁用点击
+  - 成功：Toast显示"保存成功"，跳转至列表页
+  - 失败：Toast显示错误信息，停留在当前页，按钮状态恢复
+
+
+#### 2.4 数据与内容规则（按需写入组件说明中）
+
+当存在多个规则时，需要明确执行顺序和优先级。
+
+**字段规则示例：**
+
+| 字段 | 最大长度 | 为空时 | 超长时 | 格式要求 |
+|---|---|---|---|---|
+| 商品名称 | 30字 | 不展示该行 | 末尾截断+省略号 | 纯文本 |
+| 价格 | — | 显示「—」 | — | ¥#,##0.00 |
+| 用户昵称 | 20字 | 显示「用户+手机尾号」 | 截断不省略 | 过滤特殊字符 |
+
+**数字与金额格式：**
+- 金额统一保留两位小数，使用千分位分隔符
+- 数量超过 999 显示「999+」
+- 时间格式：当天显示「HH:mm」，当年显示「MM-DD HH:mm」，跨年显示「YYYY-MM-DD」
+
+**排序规则：**
+- 根据时间顺序，从上往下排列，从左往右排列，越近排越上
+- 用户主动触发规则优于自动触发规则
+
+
+#### 2.5 异常与极限情况（按需写入组件说明中）
+
+| 异常场景 | 触发条件 | 处理方式 | 用户提示文案示意 |
+|---|---|---|---|
+| 网络请求失败 | 接口报错 / 超时 | Toast 提示 + 保持当前状态 | 「网络异常，请稍后重试」|
+| 数据加载失败 | 列表接口报错 | 展示错误占位图 + 重试按钮 | 「加载失败，点击重试」|
+| 操作频繁 | 1秒内重复点击 | 忽略后续点击 | 无提示（按钮 loading 即反馈）|
+| 会话过期 | 401 状态码 | 跳转登录页 | 「登录已过期，请重新登录」|
+| 库存不足 | 提交时服务端校验失败 | 标记对应商品 + 禁止提交 | 「以下商品库存不足，请修改数量」|
+| 数据异常（空状态）| 无数据、搜索无结果、数据被删除或下线 | 显示为空页面 | - |
+| 中断恢复 | 跳出页面、切换后台、App闪退 | 数据保留或直接丢失 | - |
+| 权限拒绝 | 用户拒绝、账号无权限 | 显示内容 | 「暂无权限，请联系xxx」|
+
+**边界数据场景：**
+- 列表只有 1 条数据时
+- 列表超过 N 条时（分页 / 虚拟滚动触发点）
+- 文本内容超长：换行或者截断内容，结尾加"..."
+- 图片占位：加载失败时显示，多图时显示
+
+
+#### 2.6 用户权限差异（按需写入组件说明中）
+
+**示例：**
+更多入口
+- 显示规则：
+  - 管理员：显示管理、删除、退出
+  - 成员：显示退出
+
+
+#### 2.7 多端适配（按需写入组件说明中）
+
+| 规则项 | iOS | Android | Web（PC）| Web（H5）|
+|---|---|---|---|---|
+| 返回手势 | 右滑返回 | 物理返回键 | 浏览器返回 | 浏览器返回 |
+| 键盘弹起 | 页面上移 | 页面压缩 | 无影响 | 同 iOS |
+| 底部安全区 | 需适配 | 部分机型 | 无需 | 需适配刘海屏 |
+| hover | 无需 | 无需 | 鼠标覆盖 | 无需 |
+| 点击 | 手势点击 | 手势点击 | 鼠标点击 | 手势点击 |
+
+
+#### 2.8 动效与过渡
+
+| 场景 | 动效类型 | 时长 | 备注 |
+|---|---|---|---|
+| 弹窗出现 | 从底部滑入 | 300ms | 遮罩同步淡入 |
+| 页面切换 | 向左推入 | 250ms | 系统级转场 |
+| 删除列表项 | 向左滑出 + 高度收缩 | 200ms | 其余项目上移 |
+
+**示例：**
+侧边抽屉
+- 从右往左弹出
+
+---
+
+## 四、质量检查
+
+在交付前，逐项自查是否有遗漏内容。
+
+详细走查表见：`references/interactive-checklist.md`
+
+---
+
+## 五、输出格式规范
+
+- **单个组件**：根据具体情况包含上面的选项，如果没有可以不写
+- **整个页面**：先列出所有功能，然后根据每个组件单独写
+- 数据与内容规则、异常与极限情况、用户权限差异、多端适配这些按需写入到组件说明中，不需要单独列出来
+- 输出内容要按照案例格式和展示方式，不能给表格的样式
+- 用简洁的语言让AI也可以看懂
+
+**组件说明模板：**
+```markdown
+**[按钮名称]**
+- 默认态：[颜色/文字]
+- 悬停态（Web）：[变化描述]
+- 按压态：[变化描述]
+- Loading 态：显示 loading 图标，禁止点击，防止重复提交
+- 禁用态：[触发条件] + 置灰不可点击
+- 点击行为：[触发条件] → [系统响应] → [反馈方式]
+```
+
+具体案例见：`references/complete-examples.md`
+
+---
+
+## 六、内容设计原则
+
+- **简洁明了**：文字说明要精准，避免冗长
+- **结构化**：模块化、分级标题，便于快速查找
+- **可视化**：关键流程、状态和动画用图示呈现
+- **可复用**：规则和示例可以直接调用
+- **可扩展**：后续可增加新功能或新交互模块
+
+**✅ 最佳实践：**
+- 规则描述具体、可执行
+- 条件表达式使用标准格式
+- 优先级明确，避免冲突
+- 反馈文案与UI设计稿一致
+
+**❌ 避免：**
+- 模糊描述（如"适当提示"）
+- 遗漏异常场景的处理
+- 规则之间相互矛盾

package/skills/interaction-spec/references/complete-examples.md

@@ -0,0 +1,97 @@
+# 交互说明案例（Complete Examples）
+
+本文档提供完整的交互说明写作案例，供撰写时参照格式使用。
+
+---
+
+## 一、组件交互说明模板
+
+### 模板A：按钮
+
+```markdown
+**[按钮名称]**
+- 默认态：[颜色/文字]
+- 悬停态（Web）：[变化描述]
+- 按压态：[变化描述]
+- Loading 态：显示 loading 图标，禁止点击，防止重复提交
+- 禁用态：[触发条件] + 置灰不可点击
+- 点击行为：[触发条件] → [系统响应] → [反馈方式]
+```
+
+### 模板B：表单输入项
+
+```markdown
+**[字段名]**
+- 类型：单行文本 / 多行文本 / 数字 / 选择器
+- 占位提示：「请输入xxx」
+- 最大长度：XX 字符（超出时截断输入 / 不允许继续输入）
+- 校验规则：[实时校验 / 失焦校验 / 提交时校验]
+- 错误提示：显示在输入框下方，文字「xxx」，输入框变红色边框
+- 清空按钮：有内容时右侧显示 ✕，点击清空内容并聚焦
+```
+
+### 模板C：列表
+
+```markdown
+**[列表名称]**
+- 加载中：展示骨架屏，共 N 行占位
+- 有数据：[每行布局描述]，支持[上拉加载更多 / 分页]
+- 空状态：展示[插画 + 文案「暂无xxx」]，[是否展示引导按钮]
+- 下拉刷新：[支持 / 不支持]，刷新动画[描述]
+- 列表项点击：[跳转 / 展开 / 弹窗]
+- 列表项长按：[无反应 / 出现操作菜单]
+```
+
+### 模板D：弹窗 / 抽屉
+
+```markdown
+**[弹窗名称]**
+- 触发方式：[操作描述]
+- 出现动效：[从中间缩放出现 / 从底部滑入]，时长 [N]ms
+- 遮罩：[有 / 无]，点击遮罩[关闭 / 不关闭]
+- 关闭方式：[点击关闭按钮 / 点击遮罩 / 滑动关闭 / 仅按钮操作]
+- 关闭动效：与出现动效方向相反，时长 [N]ms
+- 内容滚动：弹窗内容超出时[内部滚动 / 撑开弹窗高度至最大值 N]
+```
+
+---
+
+## 二、完整页面交互说明案例
+
+### 案例：用户登录页面
+
+```markdown
+# 用户登录页面交互说明
+
+**手机号输入框**
+- 必填选项
+- 输入规则：
+  - 仅允许输入数字，限制最大 11 位
+  - 超出 11 位时截断输入，不允许继续输入
+  - 占位提示文字：「请输入手机号」
+- 校验规则：输入框失焦校验，是否符合手机号格式
+  - 不符合：toast提示"请输入正确手机号"
+
+**获取验证码按钮**
+- 显示规则：手机号格式正确时高亮显示
+- 点击操作：文字变为「发送中...」，按钮禁用
+  - 发送成功：Toast「验证码已发送」；按钮进入 60s 倒计时
+  - 发送失败：Toast 显示具体失败原因（如「今日获取次数已上限」）
+
+**验证码输入框**
+- 必填选项
+- 输入规则：
+  - 仅允许输入数字，限制最大 6 位
+  - 占位提示文字：「请输入验证码」
+- 校验规则：登录按钮点击时，是否已填写且为 6 位数字
+  - 不符合：toast提示"请输入正确的验证码"
+
+**登录按钮**
+- 显示规则：默认置灰不可点击；全部符合后高亮显示
+- 点击操作：进行校验内容
+  - 成功：Toast「登录成功」，跳转至首页
+  - 失败：显示具体错误信息（如「验证码错误或已过期」）
+- 校验规则：
+  - 手机号格式
+  - 验证码已填写
+```