flowai-live-dashboard-template

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

FlowAI Dashboard Skill

FlowAI 仪表盘技能

Produce a single-screen, multi-tab team management dashboard inspired by the FlowAI aesthetic. The output is a self-contained HTML file (no external runtime dependencies) with built-in interactions: tab switching, an animated bar chart, hover tooltips on charts, click-to-zoom panels, dark mode toggle, and CSV export of the visible team table.

制作一个受FlowAI风格启发的单屏多标签页团队管理仪表盘。输出为一个独立的HTML文件（无外部运行时依赖），内置交互功能：标签页切换、动画柱状图、图表悬停提示框、点击缩放面板、暗黑模式切换，以及导出可见团队表格为CSV文件的功能。

Resource map

资源地图

flowai-live-dashboard-template/
├── SKILL.md
├── assets/
│   └── template.html          # reference seed used as the starting structure
├── references/
│   └── checklist.md           # P0/P1/P2 quality gates
└── example.html               # complete hand-built sample (gallery preview)

flowai-live-dashboard-template/
├── SKILL.md
├── assets/
│   └── template.html          # 用作起始结构的参考模板
├── references/
│   └── checklist.md           # P0/P1/P2 质量检查清单
└── example.html               # 完整的手工制作示例（画廊预览）

Workflow

工作流程

Read the active DESIGN.md (injected above). Map color, typography, spacing, and component styling tokens to the CSS variables used by
```
assets/template.html
```
. Do not invent new tokens.
Start from
```
assets/template.html
```
; never generate the shell from blank.
Keep three tabs:
```
Team Members
```
,
```
Team Details
```
,
```
Activity Log
```
. Tabs must actually switch and only one view is visible at a time.
Generate plausible, specific sample data (real-looking names, IDs, roles, departments, dates, percentages). No
```
Member A / Metric B
```
placeholders.
Required interactions:
- tab switching with hash sync (
```
#members | #details | #activity
```
  )
- role bar chart animates with easing on first reveal of the details tab
- chart hover tooltips with precise label + value
- click any panel/card to zoom; click again or press Esc to restore
- dark mode toggle that re-derives chart colors from CSS variables
- "Export CSV" button that exports every row currently in the team table, including the
```
Workflow
```
  column
Run through
```
references/checklist.md
```
before final output.

读取当前的DESIGN.md（已注入上方）。将颜色、排版、间距和组件样式标记映射到
```
assets/template.html
```
中使用的CSS变量。请勿创建新的标记。
以
```
assets/template.html
```
为起点；切勿从零开始生成框架。
保留三个标签页：
```
Team Members
```
、
```
Team Details
```
、
```
Activity Log
```
。标签页必须可实际切换，且同一时间仅显示一个视图。
生成合理且具体的示例数据（真实感名称、ID、角色、部门、日期、百分比）。禁止使用
```
Member A / Metric B
```
这类占位符。
必备交互功能：
- 标签页切换并同步哈希值（
```
#members | #details | #activity
```
  ）
- 角色柱状图在首次显示详情标签页时带缓动效果动画
- 图表悬停提示框显示精确的标签+数值
- 点击任意面板/卡片可缩放；再次点击或按Esc键恢复原状
- 暗黑模式切换，从CSS变量重新推导图表颜色
- “导出CSV”按钮，导出当前团队表格中的所有行，包括
```
Workflow
```
  列
最终输出前需对照
```
references/checklist.md
```
检查。

Output contract

输出约定

Emit one short orientation sentence, then the artifact:

xml

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

The artifact must render correctly when opened directly from disk with no build step and no network access.

先输出一句简短的说明语句，然后输出工件：

xml

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

该工件必须能直接从磁盘打开并正确渲染，无需构建步骤和网络访问。