渐变流体语音对话页

# 渐变流体语音对话页 — design.md

内容版本：sha256:1e02efbc790094bebaec769b94ffbc07ebef84ec6b3d8e59fa05301f9eff2575

本文件由当前元数据、实现摘要和实际文件列表确定性生成。元数据记录是资料声明；未提供的数值不作推断。实现建议须在后续开发中选择和验收。

## 元数据记录

- 资产：pages/ai-fluid-gradient-voice-chat-page；语义类型：page-case。
- 分类：整页效果。
- 标签：AI助手、语音交互、流体球体、低饱和渐变、移动端、原图参考。
- 场景：AI 助手语音对话首页、语言练习中的实时交流、语音交互概念提案、浅色主题聊天产品展示。
- 平台：未提供。
- 风格：未提供。

### 亮点声明

- 视觉焦点：四组双屏案例以渐变球体、绿色光晕或抽象头像作为 AI 对话的视觉焦点。
- 输入与反馈：图片包含文字输入、麦克风按钮、推荐问题与波形等不同对话入口和反馈形式。
- 多套视觉方向：保留紫色、绿色与浅色界面的完整案例，便于比较布局与视觉气质。

### 实际文件与参考资源

- `demo.html`（sha256:2833f1854f9cf9557af0621faa04832b68462fc12700a840e7b36855dfd8fe97）
- `meta.yml`
- `refs/01.png`（sha256:b5cf920374aa829664d7d55b894f97b2e5b261123b7ddd8c20214cf38959d5ca）
- `refs/02.png`（sha256:5212cf9c079dd9818916bee928636570a1cd4b1575c33c64a568261ccf3cafea）
- `refs/03.png`（sha256:4be80c559c6e01576e1623678dc45a5a84bc0d79f070e106c9786c91beba4cb8）
- `refs/04.png`（sha256:b87112a7a7ba9204b44e84eb9c637e8a43efa14aa9ced706dd6c6c64421e7416）
- 参考图：`refs/01.png`；渐变球体语音界面与推荐入口。
- 参考图：`refs/02.png`；紫色球体语音页与功能首页。
- 参考图：`refs/03.png`；绿色光晕 AI 助手与语音输入。
- 参考图：`refs/04.png`；绿色头像、建议问题与语音波形。
- 实现摘要：sha256:2833f1854f9cf9557af0621faa04832b68462fc12700a840e7b36855dfd8fe97。

## 未提供

- 未结构化记录的完整页面流程、路由、业务数据、信息层级参数及跨页面组件规范不作推断；亮点描述属于元数据声明，截图或静态 demo 不能证明业务流程可用。

## 实现建议

- 梳理信息层级、核心任务、导航与内容区，再把重复区域提炼成可复用组件。
- 定义首屏、加载、空数据、错误与完成状态，确认主要行动按钮对应的真实业务行为。
- 在桌面与窄屏验证阅读顺序、表单反馈和导航，逐条验收核心用户路径。