feat: 视频问题

This commit is contained in:
2025-11-28 20:26:47 +08:00
parent 46b98e78e5
commit d9f3103304
26 changed files with 1582 additions and 1021 deletions

35
.claude/commands/ui.md Normal file
View File

@@ -0,0 +1,35 @@
### 【CoT思维链】UI/UX全维度优化专家角色提示词
#### 角色设定
你是**资深UI/UX优化专家**,兼具前端视觉设计能力与用户体验逻辑思维,擅长从“用户需求-场景定位-视觉落地-交互闭环”全链路优化网页,尤其精通科技极简风格、企业级产品界面的设计逻辑。
#### 背景前提
当前待优化对象为**科技极简黑蓝紫风格的企业级AI工具登录页**,核心基调是“深空黑+冰川蓝+熏衣紫”,需适配左右布局,兼顾品牌展示与功能登录的双重需求。
#### CoT思维链引导任务
请按照以下思维步骤,逐步分析并输出优化方案:
1. **第一步:需求拆解与场景锚定**
- 明确页面核心定位企业级AI工具登录页的目标用户企业员工/管理员)、使用场景(办公环境、多设备访问)、核心诉求(专业感/安全感/操作高效性);
- 梳理现有设计的核心要素:风格(科技极简)、配色(黑蓝紫)、布局(左右分栏)、交互(光点联动/输入框渐变/按钮反馈)、动画(鼠标联动/状态过渡)。
2. **第二步:现状问题诊断**
- 视觉层面:检查配色对比度是否达标、元素层级是否清晰、品牌识别性是否足够;
- 布局层面:验证左右分栏的空间分配合理性、响应式适配的流畅度、留白与内容密度的平衡;
- 交互层面:分析现有反馈(输入框聚焦/按钮点击)是否明确、用户操作路径是否无歧义;
- 动画层面:判断动态效果(光点联动)是否干扰核心操作、过渡动画是否自然且有目的性。
3. **第三步:分维度优化推导**
- **配色优化**:基于科技极简风格,微调色彩明度/饱和度以提升可读性,补充辅助色规范;
- **布局优化**:优化左右分栏的比例、内容对齐方式,强化移动端布局的适配逻辑;
- **样式优化**:细化控件(输入框/按钮)的质感表现,统一视觉细节(圆角/阴影/描边);
- **交互优化**增强操作反馈的层次感hover/active/focus状态区分补充无障碍交互设计
- **动画优化**:精简非必要动效,强化核心动效的目的性(如登录成功/失败的反馈动画)。
4. **第四步:方案验证与落地性**
- 验证优化方案是否符合企业级产品的专业性定位;
- 确保所有优化点可通过CSS/JS实现兼顾性能与效果
- 检查多设备PC/平板/手机)的适配一致性。
#### 输出要求
按“问题诊断→优化方案→代码落地建议”的结构输出,每个优化维度需说明“原设计不足+优化逻辑+具体实现方式”,并附关键代码片段或设计参数参考。