免费在 GitHub 公开中文介绍

flowai-live-dashboard-template

创建包含成员列表、活动记录和角色分布图的团队管理界面，生成单个HTML原型文件，支持标签页切换、明暗主题、面板放大、图表提示和CSV导出。

原文查看原文说明

Team-management dashboard skill in the FlowAI aesthetic — three tabs (Team Members, Team Details, Activity Log), KPI stat row, member table, role distribution bar chart, online presence and activity sparklines, and a top-contributors panel, all in a single self-contained HTML file with light/dark theming, hoverable chart tooltips, click-to-zoom panels, and CSV export. Use when the brief asks for a team / workspace admin dashboard, an interactive admin dashboard with charts, or names FlowAI.

nexu-io/open-design

AI 评分100分/ 100 查看安装方法

适用场景

制作团队管理界面原型
说明角色构成与在线状态
通过标签页查看成员和活动
将当前团队表格导出为CSV

中文介绍

功能

创建FlowAI风格的管理界面，用于查看团队成员信息和活动情况。界面包含成员列表、团队详情、活动记录三个标签页，并展示关键指标、角色分布条形图、在线状态与活动趋势，以及贡献较多的成员。成果为单个HTML文件。

适用场景

适合制作团队或工作区管理界面的原型，检查展示内容与操作体验。标签页切换、图表数值提示、面板放大和明暗主题切换均可操作，便于结合实际交互说明界面方案。当前显示的团队表格还可以导出为CSV。

使用示例

“制作一个FlowAI风格的团队管理界面，包含三个标签页和角色分布图。”
“为成员表格添加状态标记，并实现深色模式和CSV导出。”

注意事项

制作时会读取现有DESIGN.md中的配色、字体、间距等规则，并以附带的assets/template.html为基础。这是面向桌面的原型，使用具体的示例数据。完成的HTML无需构建或外部运行库，断网也能直接打开。

本介绍由 AI（OpenAI Codex）根据公开的 SKILL.md 撰写。准确的规格请查看下方原文。

客观评估

AI 仅根据 SKILL.md 的内容，从 4 个方面进行了评估。星标数和热度不计入评估。

指令清晰度能否看出何时使用、做什么: A良好资料明确说明用于团队管理界面需求，并列出三个标签页和图表的制作内容。
步骤具体性步骤、输入输出和示例是否具体: A良好资料指定了六步流程、必需的交互和单个HTML的输出格式。
安全性发送数据、删除文件、执行命令等是否有说明: A良好CSV导出范围限定为当前表格，且要求HTML无需网络即可打开。
安装难易度所需工具和 API 密钥是否少且有说明: A良好资料说明了DESIGN.md和附带模板的使用步骤，无需构建或外部运行依赖。

总分按每项 A=25 分、B=15 分、C=5 分相加。由 AI（OpenAI Codex）于 2026年10月20日评估。仅供参考，安装前请同时查看原文。

如果您认为评估有误，请申请复核

包含的文件（4）

SKILL.md3.4 KB
assets/template.html16.0 KB
example.html454 B
references/checklist.md1.5 KB

SKILL.md（原文）

安装前可以查看交给 AI 代理的指令内容。

FlowAI Dashboard Skill

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.

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)

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.

Output contract

Emit one short orientation sentence, then the artifact:

<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.

评价

还没有评价。欢迎分享你的使用感受。

无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

同一仓库的技能