version: "1.0.0" name: h-design-progressive-ui description: 对话驱动 UI 演进(Progressive UI)方案设计技能。当需要为海豚社区(H)项目设计以对话框为起点的渐进式 UI 交互逻辑时使用。
H-design-progressive-ui
Overview
此技能定义了海豚社区(H) AI Web3 App 的核心交互逻辑:“对话驱动 UI 演进(Progressive UI)”。旨在通过极简入口隐藏 Web3 的复杂性。
Core Concept: Progressive UI
用户体验从单一对话框开始,随着触发的行为越多,App 的内容动态演进并渐进式展示必要的 UI 模块。
Key States
- 初始状态 (Initial State)
- 极简的单一对话框入口(如深邃背景+悬浮输入框)。
- 提供智能提示(如“买入 100 U 的 ETH”),消除新手认知门槛。
- 意图触发状态 (Processing State)
- AI 解析意图时,通过流光动效(如霓虹紫/青色交织)和图标脉动,告知用户“AI 正在思考”。
- 增加智能交互的仪式感。
- 演进状态 (Evolved State - e.g., Trade Confirmation)
- 根据解析的意图,动态加载特定的 UI 模块(如“交易确认卡片”)。
- 包含关键要素:安全标签(Security Check: Safe)、智能路由展示(如通过 OKX DEX 执行)、明确的确认机制(如滑动确认按钮防误触)。
Design Principles
- 降低门槛:将复杂的链上交互隐藏在简单的自然语言背后。
- 爆炸感官:通过动效和渐进式 UI 带来智能感和现代感。