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

1. 初始状态 (Initial State)

• 极简的单一对话框入口（如深邃背景+悬浮输入框）。
• 提供智能提示（如“买入 100 U 的 ETH”），消除新手认知门槛。

1. 意图触发状态 (Processing State)

• AI 解析意图时，通过流光动效（如霓虹紫/青色交织）和图标脉动，告知用户“AI 正在思考”。
• 增加智能交互的仪式感。

1. 演进状态 (Evolved State - e.g., Trade Confirmation)

• 根据解析的意图，动态加载特定的 UI 模块（如“交易确认卡片”）。
• 包含关键要素：安全标签（Security Check: Safe）、智能路由展示（如通过 OKX DEX 执行）、明确的确认机制（如滑动确认按钮防误触）。

Design Principles

• 降低门槛：将复杂的链上交互隐藏在简单的自然语言背后。
• 爆炸感官：通过动效和渐进式 UI 带来智能感和现代感。