dashboard-builder-free

仪表盘构建工具（免费版）

概述

本工具提供一套从数据源到可视化看板的本地构建方案。用户描述数据源与展示需求，Agent 生成静态 HTML 仪表盘页面与配套数据抓取脚本，用户通过 cron 或手动运行脚本更新数据。所有凭据通过环境变量注入，仪表盘默认绑定 127.0.0.1，确保数据安全. 免费版聚焦单数据源、基础 KPI 卡片与图表展示，适合个人开发者与小团队快速搭建数据看板.

核心能力

核心功能执行

用input_params参数进行配置.

处理: 解析核心功能执行的输入参数,完成核心逻辑,返回结构化响应. 输出: 返回核心功能执行的响应数据,包含状态码、结果和日志.

• 执行此能力时使用input_params参数,支持创建/查询/导出操作

参数配置与调用

用config_options参数进行配置.

处理: 解析参数配置与调用的输入参数,完成核心逻辑,返回结构化响应. 输出: 返回参数配置与调用的响应数据,包含状态码、结果和日志.

• 执行此能力时使用config_options参数,支持修改/重置/导入操作

结果处理与输出

用output_format参数进行配置.

处理: 解析结果处理与输出的输入参数,完成核心逻辑,返回结构化响应. 输出: 返回结果处理与输出的响应数据,包含状态码、结果和日志.

• 执行此能力时使用output_format参数,支持导出/保存/转换操作 能力覆盖范围：本skill的核心能力覆盖以下场景关键词：从任意数据源生成、本地静态仪表盘、支持基础数据抓取、与可视化、仪表盘构建工具免、费版是一款面向个、人开发者的本地仪、表盘生成方案、支持从用户指定的、数据源生成交互式、配套数据抓取脚本、与基础可视化、所有数据与凭据均、在本地管理、根据用户描述生成、仪表盘页面、自动生成数据抓取、REST、API、与文件源、本地存储仪表盘配、置与数据、目录结构清晰、对比度、凭据通过环境变量等。这些关键词对应description中声明的使用场景,均已在上述能力点中提供对应的操作支持.

使用场景

场景一：Stripe 收入看板（个人开发者）

用户希望监控 Stripe 每日收入。Agent 生成抓取脚本与看板页面，用户配置 API Key 后通过 cron 定时刷新：

用户："帮我做一个 Stripe 收入看板"
Agent："我将生成抓取脚本。请在环境变量中设置 STRIPE_API_KEY，然后运行脚本。"
输出：./dashboard/stripe/fetch.sh
用户添加 cron：*/15 * * * * ./dashboard/stripe/fetch.sh

场景二：服务器资源监控（运维）

用户希望监控本地服务器 CPU、内存、磁盘使用率。Agent 生成基于系统命令的抓取脚本与资源看板：

# 示例
#!/bin/bash
{
  echo '"cpu":'$(top -bn1 | grep "Cpu(s)" | awk '{print $2}')
  echo '"mem":'$(free | grep Mem | awk '{print $3/$2*100}')
} | jq '.' > ./dashboard/server/data.json

场景三：API 健康检查面板（开发者）

用户需监控多个 API 端点的响应状态与延迟。Agent 生成多端点探测脚本与状态看板.

不适用场景

以下场景仪表盘构建(免费版)不适合处理：

• 实时流数据处理
• 小规模数据手动分析
• 非结构化文本情感分析

触发条件

需要数据分析、报表生成、统计洞察、数据可视化时使用。不适用于非本工具能力范围的需求.

快速开始

前置条件

• 已安装 curl 与 jq
• 浏览器可用于本地预览
• 数据源 API 的凭据（如 STRIPE_API_KEY）

120 秒上手

领先步，创建存储目录：

mkdir -p ./dashboard

第二步，向 Agent 描述需求：

帮我做一个 Stripe 收入看板，展示今日收入、本月收入、最近 7 天趋势

第三步，Agent 生成文件后配置凭据并运行：

export STRIPE_API_KEY=sk_demo
./dashboard/stripe/fetch.sh

第四步，浏览器打开看板：

# 本地托管
cd ./dashboard/stripe && python -m http.server 8080
# 访问 https://example.com/8080

配置示例

目录结构

./dashboard/
├── registry.json           # 仪表盘索引
├── stripe/
│   ├── config.json         # 布局与组件配置
│   ├── data.json           # 当前数据快照
│   ├── fetch.sh            # 数据抓取脚本
│   └── index.html          # 仪表盘页面
└── server/
    ├── config.json
    ├── data.json
    ├── fetch.sh
    └── index.html

抓取脚本模板

#!/bin/bash
# Stripe 余额抓取
# 安全数据传输示例:" \
  https://api.stripe.com/v1/balance \
  | jq '.' > ./dashboard/stripe/data.json

设计默认值

cron 定时刷新

# 每 15 分钟刷新 Stripe 数据
*/15 * * * * ./dashboard/stripe/fetch.sh
# ...
# 每分钟刷新服务器资源
* * * * * ./dashboard/server/fetch.sh

优秀实践

1. 凭据安全领先

所有 API 凭据通过环境变量注入，禁止写入脚本或配置文件。在 cron 中使用环境变量文件：

# /etc/environment 或 ./.env
STRIPE_API_KEY=sk_demo
# ...
# cron 中加载
*/15 * * * * source ./.env && ./dashboard/stripe/fetch.sh

2. 本地绑定 127.0.0.1

仪表盘默认仅本地访问，避免暴露到公网。若需团队访问，建议通过反向代理添加认证层：

# 仅本地访问
python -m http.server 8080 --bind 127.0.0.1

3. 数据脱敏

展示数据中不包含个人隐私信息（PII）。抓取脚本中可使用 jq 过滤敏感字段：

curl -s ... | jq 'del(.customer.email, .customer.phone)' > data.json

4. 可视化 QA 流程

交付前必须进行可视化 QA：

1. 浏览器打开仪表盘并截图
2. 检查：无元素重叠、字体可读（≥14px）、对比度达标
3. 发现问题 → 修复 → 重新截图
4. 仅在 QA 通过后交付

常见问题

Q1：抓取脚本运行报错 401？

401 表示 API 凭据无效或未设置。检查环境变量是否正确加载：echo $STRIPE_API_KEY。cron 环境变量需通过 source ./.env 显式加载.

Q2：仪表盘打开是空白？

排查步骤：

1. 检查 data.json 是否存在且格式正确：jq . data.json
2. 浏览器开发者工具查看 Console 错误
3. 确认 index.html 与 data.json 在同一目录

Q3：如何切换深色/浅色模式？

在 config.json 中设置 theme 字段为 dark 或 light，重新打开页面即生效.

Q4：数据不更新？

检查 cron 是否正常运行：grep CRON /var/log/syslog。确认抓取脚本有执行权限：chmod +x fetch.sh.

Q5：如何添加新的数据源？

向 Agent 描述新需求，Agent 会在 ./dashboard/ 下创建新的子目录，包含独立的配置、抓取脚本与页面.

依赖说明

运行环境

• Agent 平台：支持 SKILL.md 的任意 AI Agent（Claude Code / Cursor / Codex / Gemini CLI 等）
• 操作系统：Windows / macOS / Linux
• 浏览器：任意现代浏览器（用于预览）

依赖详情

API Key 配置

• 数据源 API Key 通过环境变量注入（如 STRIPE_API_KEY）
• 环境变量存储于 ./.env 或系统环境配置
• 仪表盘默认绑定 127.0.0.1，无需额外认证
• 禁止在脚本或配置文件中硬编码 API Key

可用性分类

• 分类：MD+EXEC（纯 Markdown 指令，核心功能需 exec 命令行执行能力）
• 说明：基于 Markdown 的 AI Skill，通过自然语言指令驱动 Agent 生成仪表盘与抓取脚本

已知限制

本免费体验版限制以下高级功能：

• 不支持多数据源聚合看板（仅支持单数据源）
• 不支持高级图表类型（仅支持基础 KPI 卡片与简单趋势图）
• 不支持自动化可视化 QA（仅支持手动截图检查）
• 不支持看板模板库与一键应用
• 不支持看板分享与团队协作
• 不支持告警规则与阈值通知
• 不提供优先技术支持与 SLA 保障

解锁全部功能请使用专业版：dashboard-builder-pro

• 当前为免费版本,如需完整功能请升级到付费版获取全部能力

错误处理

示例

基本用法

输出：返回执行结果,包含操作状态和输出数据

用户: 执行核心功能
Skill: 正在执行核心功能...
Skill: 执行完成,结果如下: 操作成功
```bash
# 在此执行相关操作
echo "操作完成"
```json
{
  "success": true,
  "data": {
    "result": "仪表盘构建(免费版)处理结果",
    "execution_time": "0.5s",
    "metadata": {
      "version": "1.0",
      "processor": "dashboard builder"
    }
  },
  "execution_log": ["解析输入参数", "执行核心处理", "格式化输出结果"],
  "error": null
}