dashboard-builder-free

仪表盘构建工具免费版是一款面向个人开发者的本地仪表盘产出方案，兼容从用户指定的数据源产出交互式静态 HTML 仪表盘，配套数据抓取脚本与基础可视化. 适用于需要dashboard builder相关能力的开发场景,包含结构化的工作流程和可复用的模板,帮助用户快速完成任务并保持代码质量. 适用于需要dashboard builder相关能力的开发场景,包含结构化的工作流程和配置指引.

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

概述

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

核心能力

能力项	说明	输出物
仪表盘生成	根据描述生成 HTML 页面	index.html
抓取脚本	生成数据获取脚本	fetch.sh
配置管理	存储布局与组件配置	config.json
数据存储	保存当前数据快照	data.json
仪表盘索引	管理多个仪表盘	registry.json
基础可视化 QA	截图检查布局质量	截图报告
技术实现要点：核心能力基于input_params参数与output_format配置实现,支持创建/查询/修改/删除等操作模式,通过config_options进行运行时配置.

核心功能执行

用input_params参数进行配置.

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

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

参数配置与调用

用config_options参数进行配置.

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

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

结果处理与输出

用output_format参数进行配置.

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

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

使用场景

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

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

text

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

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

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

bash

# 示例
#!/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 秒上手

领先步，创建存储目录：

bash

mkdir -p ./dashboard

第二步，向 Agent 描述需求：

text

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

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

bash

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

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

bash

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

配置示例

目录结构

text

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

抓取脚本模板

bash

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

设计默认值

元素	深色模式	浅色模式
背景	#0f172a	#f8fafc
文字	#e2e8f0	#1e293b
间距	16px / 24px / 32px	同左
圆角	8px	8px
KPI 数字	48-72px	48-72px
KPI 标签	14px	14px

cron 定时刷新

bash

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

优秀实践

1. 凭据安全领先

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

bash

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

2. 本地绑定 127.0.0.1

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

bash

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

3. 数据脱敏

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

bash

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
• 浏览器：任意现代浏览器（用于预览）

依赖详情

依赖项	类型	是否必需	获取方式
curl	命令行工具	必需	系统自带
jq	JSON 处理	必需	apt install jq 或 brew install jq
Python	本地服务器	推荐	用于 python -m http.server
LLM API	API	必需	由 Agent 平台内置 LLM 提供

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

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

错误处理

错误场景	原因	处理方式
配置错误	参数缺失或格式错误	检查依赖说明中的配置要求
运行时错误	运行环境不满足	确认运行环境符合依赖说明
网络错误	连接超时或不可达	执行ping命令测试网络连通性,检查防火墙和代理设置连接后执行ping命令测试网络连通性,检查防火墙和代理设置连接后重新执行命令，参考国内替代方案

示例

基本用法

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

text

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