⚠️
重要前提
安装AI Skills的关键前提是：必须科学上网，且开启TUN模式，这一点至关重要，直接决定安装能否顺利完成，在此郑重提醒三遍：科学上网，科学上网，科学上网。查看完整安装教程 →
交互式HTML仪表板创建器 - 快速生成KPI卡片和SVG图表的数据可视化工具
dashboard-creator by mhattingpete/claude-skills-marketplace
安装命令
npx skills add https://github.com/mhattingpete/claude-skills-marketplace --skill dashboard-creator🇨🇳中文介绍
仪表板创建器
创建包含 KPI 卡片和图表的交互式 HTML 仪表板。
使用场景
- “为 [指标] 创建仪表板”
- “显示 KPI 可视化”
- “生成性能仪表板”
- “制作带图表的分析仪表板”
组件
- KPI 卡片 : 指标名称、数值、变化百分比、趋势图标
- 图表 : 使用 SVG 或 CSS 的条形图/饼图/折线图
- 进度条 : 完成度指示器
- 数据表格 : 表格数据展示
HTML 结构
<!DOCTYPE html>
<html>
<head>
<title>[Project] Dashboard</title>
<style>
body { font-family: system-ui; background: #f7fafc; }
.kpi-card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.kpi-value { font-size: 36px; font-weight: bold; }
.trend-up { color: #48bb78; }
.trend-down { color: #e53e3e; }
</style>
</head>
<body>
<h1>[Dashboard Name]</h1>
<div class="grid">
<!-- KPI cards -->
<!-- Charts -->
<!-- Progress bars -->
</div>
</body>
</html>
KPI 卡片模式
<div class="kpi-card">
<div class="kpi-label">Revenue</div>
<div class="kpi-value">$124K</div>
<div class="trend-up">↑ 12.5%</div>
</div>
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者，精准高效
