aurora-ember-bio-lab/splatstudio

FlowAI 仪表板技能

生成一个受 FlowAI 美学启发的单屏幕、多标签页团队管理仪表板。输出是一个独立的 HTML 文件（无需外部运行时依赖），内置交互功能：标签页切换、带动画的条形图、图表悬停工具提示、点击缩放面板、暗色模式切换以及可见团队表格的 CSV 导出。

资源地图

flowai-live-dashboard-template/
├── SKILL.md
├── assets/
│   └── template.html          # 作为起始结构使用的参考种子
├── references/
│   └── checklist.md           # P0/P1/P2 质量门禁
└── example.html               # 完整手工构建的示例（画廊预览）

工作流程

1. 阅读活动的 DESIGN.md（已注入）。将颜色、字体、间距和组件样式令牌映射到 assets/template.html 使用的 CSS 变量。不要发明新的令牌。
2. 从 assets/template.html 开始；绝不从头生成外壳。
3. 保持三个标签页：团队成员、团队详情、活动日志。标签页必须实际切换，一次只能看到一个视图。
4. 生成具体、合理的示例数据（看起来真实的姓名、ID、角色、部门、日期、百分比）。不要使用 成员 A / 指标 B 这样的占位符。
5. 必需的交互：
   • 标签页切换带有哈希同步（#members | #details | #activity）
   • 角色条形图在详情标签页首次显示时以缓动动画呈现
   • 图表悬停工具提示，包含精确标签和数值
   • 点击任意面板/卡片可放大；再次点击或按 Esc 键恢复
   • 暗色模式切换，从 CSS 变量重新推导图表颜色
   • “导出 CSV”按钮，导出团队表格中当前所有行，包括 工作流 列
6. 在最终输出前运行 references/checklist.md。

输出契约

输出一句简短的引导语，然后是制品：

<artifact identifier="flowai-team-dashboard" type="text/html" title="FlowAI Team Dashboard">
<!doctype html>
<html>...</html>
</artifact>

该制品必须在从磁盘直接打开时正确渲染，无需构建步骤且无需网络访问。