AI 工作台空状态与导航交互演示

是什么

这是一段用 Claude Code 构建的 AI Workforce 工作台交互演示，重点展示无数据状态与侧边导航，而不是后端架构说明。画面从聚焦的招聘 Agent 卡片、两侧弱化卡片，过渡到带应用外壳的收起导航，再展开为带文字标签的完整导航。

核心设计

空状态没有只放“暂无数据”，而是用“Build your AI Workforce”解释产品价值，并用“+ Add Agent”给出唯一主路径；招聘 Agent 的职责、活跃时间和电话/设置动作，则把抽象的 AI 智能体变成可理解的对象。导航采用图标 rail 与文字侧栏两种密度，收起时保留内容空间，展开时补足认知线索；中心卡片保持视觉焦点，周边内容降低对比度，形成清晰的注意力顺序。

关键洞察

对 Agent 产品而言，空状态本身就是 onboarding：先回答“这里是什么”，再引导“下一步做什么”。收展导航也不只是节省宽度，而是把熟练用户的效率与新用户的可发现性放进同一结构。动效若补足状态变化和空间关系，会比单纯淡入更有解释力。

边界与风险

演示证明了视觉叙事和交互意图，不能证明实现质量、真实数据加载、键盘可达性、屏幕阅读器语义或响应式行为。实际落地应保证 Tooltip 不替代 aria-label，空状态 CTA 有明确焦点样式，并验证骨架与卡片过渡在低动效偏好下仍可理解。