交互式数据仪表板构建技能：一句话描述需求，直接交付一个可交互的 HTML 仪表板
核心结论速览：
- 它是什么：
data-build-dashboard（交互式数据仪表板构建技能，技能ID 13817）是一个把「一句话需求」变成「成品仪表板」的 AI 技能，输出物是单个自包含的 HTML 文件。 - 最大特点：图表、过滤器、KPI 卡片、可排序表格全部内置，数据以 JSON 直接嵌入文件，双击即可在浏览器打开，不需要服务器、不需要安装依赖、可完全离线运行。
- 怎么用：用一句自然语言描述即可，例如「构建销售仪表板」「创建支持票证仪表板」，还可以附加数据源（已连接的数据仓库、粘贴数据、CSV 文件，或让技能自动生成样本数据）。
- 适合谁：需要快速出报表的运营、销售、客服、管理者，以及不想为一个临时看板去搭 BI 系统或写前端代码的开发者。
- 要注意：它生成的是「某一时点的快照」，不是实时看板；需要持续实时刷新时，仍应接入专业 BI 工具。
1. 该技能叫什么？如何一键安装 AI 技能提升开发效率？
技能基本信息
| 项目 | 内容 |
|---|---|
| 中文名 | 交互式数据仪表板构建技能（Skill） |
| 英文名 | data-build-dashboard |
| 技能ID | 13817 |
| 输入 | 仪表板描述（必填）+ 数据源（可选） |
| 输出 | 单个自包含的交互式 HTML 仪表板文件 |
它解决什么问题？
做一个「能看、能筛、能排序」的数据看板，传统路径有三条，各有各的麻烦：
- 用电子表格手工做图：拖拽图表快，但过滤器联动、表格排序、多图同步刷新几乎做不了，样式也很难做得专业；
- 搭一套 BI 系统：能力足够强，但需要部署、配置数据源、做权限，为了一次汇报或一次复盘，成本明显过高；
- 自己写前端代码：Chart.js + 布局 + 过滤器联动 + 表格排序，一个像样的看板往往要写几百行代码。
data-build-dashboard 的思路是把这条链路压缩成一句话：你描述清楚目的、指标和维度，它负责生成结构完整的 HTML + CSS + JavaScript + 内嵌数据，交付一个可直接打开的文件。
「一键安装」的思路与步骤
AI 技能的价值在于「装一次，之后随叫随用」。安装步骤如下（具体入口与命令以官方说明为准）：
- 确认安装前提：你需要一个支持技能（Skill）机制、并且能够生成并保存文件（HTML）的 AI 客户端或工作环境。如果环境中已有数据仓库等集成，仪表板可以直接用真实数据；如果没有，也能用样本数据先出原型。
- 找到技能：在技能市场/技能商店或技能管理入口中，用技能英文名 data-build-dashboard 搜索，或用技能ID 13817 定位。具体搜索入口、安装命令以官方说明为准。
- 一键添加/启用：点击安装或启用，将技能加入到当前会话可用的技能列表中。若你的客户端支持通过「提及技能」来调用，安装后即可在对话中直接唤起它。
- 验证是否生效：新建一个会话，输入一句最简单的请求，例如「构建一个销售仪表板」，观察是否返回一个包含 KPI 卡片、图表和表格的 HTML 文件。如果能正常产出并在浏览器中打开，说明安装成功。
- 遇到不确定的地方怎么办：技能说明本身建议——如果你看到不熟悉的占位符，或不确定哪些工具（数据源）已经连接，直接向 AI 询问可用的集成，再决定用真实数据还是样本数据。
这套流程的关键点在于：安装动作是一次性的，之后每次做看板你只需要描述需求，不用再重复搭建环境。
2. 该技能的主要功能和特点
能做什么：
- 生成完整仪表板页面：一次性产出包含标题区、KPI 卡片区、图表区、详情表格区的完整页面结构，而不是给你一堆需要自己拼的代码片段。
- 内置交互能力：过滤器（下拉菜单、日期选择器、切换按钮）会同时驱动 KPI、图表和表格刷新；表格列可点击排序并显示排序方向指示；图表悬停显示详细数值提示。
- 覆盖常见图表类型：折线图（时间序列趋势）、柱状图（类别比较）、环形图（组成，类别少于 6 个时适用）、堆叠柱状图（随时间的组成变化）、混合图（柱状 + 折线，用于量级与比率叠加）。
- 专业视觉与格式化：干净的白色/灰色底 + 强调色的配色方案、卡片式布局带轻微阴影、系统字体保证快速加载、数字按逗号/货币/百分比格式化、响应式适配不同屏幕，并提供打印友好样式。
- 多数据源接入方式：已连接数据仓库时先查询再以 JSON 嵌入；也可解析粘贴或上传的数据；完全没有数据时，会按描述生成一份符合业务模式的真实样本数据集，并在仪表板中明确标注是样本数据，同时给出替换说明。
和普通工具比强在哪：
- 对比电子表格：多了真正意义上的联动过滤与表格排序，并且成品是一个可以发给任何人的网页文件。
- 对比 BI 平台：零部署、零配置、零权限体系，几分钟出结果，适合「一次性、临时性、对外分享」的看板需求。
- 对比直接让 AI 写代码：技能内置了固定的工作流程（理解需求 → 收集数据 → 设计布局 → 构建 → 选图表 → 加交互 → 保存打开），产出结构统一、可维护，不会每次生成都长得不一样。
- 交付形态极简：所有数据以 JavaScript 变量直接嵌入 HTML，不需要任何外部数据请求，文件自包含、可离线运行、可通过发送文件的方式分享给任何人。
3. 如何使用该技能？
第 1 步：用一句话提出需求
在会话中直接说明目的，例如：
- 「构建销售仪表板」
- 「创建支持票证仪表板」
第 2 步：补充必要上下文（强烈建议）
技能会围绕五个问题理解需求，你在描述里顺手写清楚，效果会好很多：目的（高管概览 / 运营监控 / 深入分析 / 团队报告）、受众、关键指标、希望用哪些维度过滤或切片、数据来源。
一个更完整的输入示例：
构建一个销售仪表板，受众是销售总监，用于季度复盘。关键指标：销售额、订单数、客单价、完成率。维度：按大区、按产品线、按月份筛选。数据用我贴过来的这份 CSV。
第 3 步：明确数据来源
三种情况对应三种处理方式：
- 已连接数据仓库：技能会查询必要数据，并把结果以 JSON 嵌入 HTML；
- 数据已粘贴或上传：技能会解析并清理数据后嵌入；
- 没有数据：技能会生成一份符合描述模式的样本数据，在仪表板中标注，并给出替换真实数据的说明。
第 4 步：确认布局与图表选型
默认采用标准布局：顶部 2–4 个 KPI 卡片，中部 1–3 个图表（主图占最大区域、次图辅助），底部可选详情表格，过滤器放在标题区或侧边栏。你可以在需求里指定调整，例如「顶部三个 KPI，中间一个趋势折线 + 一个产品线环形图，不要表格」。
第 5 步：拿到 HTML 文件并打开
技能会将仪表板保存为有描述性名称的 HTML 文件（例如 sales_dashboard.html），在你的默认浏览器中打开，确认渲染正确，并提供更新数据或自定义的说明。
第 6 步：按需追加定制指令
技能支持的常见追加请求包括：
- 「改成黑暗模式」或「做一个演示模式」——获得不同视觉风格；
- 「用我们品牌的配色方案」——匹配企业视觉；
- 调整图表类型、筛选维度、指标口径等。
输出结构说明：生成的文件遵循固定骨架——<head> 中通过 CDN 引入 Chart.js 4.x 并内联样式；<body> 中包含 .dashboard 容器，内部依次是 header（标题与过滤器）、section.kpis（KPI 卡片）、section.charts（图表容器）、section.details（数据表格）；末尾用 const DATA = [...] 嵌入 JSON 数据并执行初始化与交互逻辑。
4. 同类型竞品对比分析
| 方案名称 | 定位 | 核心功能 | 安装/使用门槛 | 适用场景 | 优势与不足 |
|---|---|---|---|---|---|
| data-build-dashboard（本技能） | 一句话生成自包含 HTML 仪表板 | KPI 卡片、多类型图表、联动过滤器、可排序表格、内嵌 JSON 数据、离线运行 | 低：在技能市场按英文名或技能ID添加后，用自然语言描述即可（入口以官方说明为准） | 临时报表、汇报快照、快速原型、对外分享单文件看板 | 优势：零部署、零依赖、单文件交付、可离线；不足：生成的是某一时点快照，不具备实时刷新与权限管理能力 |
| 电子表格（如 Excel / 在线表格） | 通用数据处理与图表 | 手工建图、透视表、基础筛选 | 极低：几乎人人会用 | 小数据量的个人分析、内部表格流转 | 优势：熟悉、灵活、可编辑；不足：过滤器跨图表联动和表格排序体验有限，样式不专业，分享即暴露整份数据 |
| 专业 BI 平台（通用 BI 工具） | 企业级数据可视化与报表平台 | 实时数据源接入、看板发布、权限、订阅告警 | 高：需要部署、配置数据源、建模与权限 | 长期运营的实时监控、多人协作的指标体系 | 优势：实时、稳定、可治理；不足：搭建周期长、成本高，做一次性看板不划算 |
| 手写前端代码（Chart.js 等图表库） | 完全自定义的数据可视化开发 | 任意图表、任意交互与样式 | 高：需要前端开发能力，逐个实现过滤器联动、表格排序 | 高度定制化的产品级看板 | 优势：可控性最强；不足：开发成本高、迭代慢，临时需求性价比低 |
| 通用 AI 对话直接生成前端代码 | 让大模型临场写代码 | 输出零散代码片段，结果高度依赖提示词 | 中：需要自己描述、调试、拼装 | 有开发能力者的辅助编码 | 优势：灵活；不足：产出结构不稳定，容易缺交互或样式，需反复返工 |
5. 该技能的典型应用场景与实际体验情况
场景一：销售团队季度复盘
- 角色与痛点：销售总监需要在复盘会上展示各大区完成率，但数据散在表格里，临时做图来不及，做出来的图也无法按大区、产品线切换查看。
- 使用方式：提交「销售仪表板」需求，附上大区、产品线、月份三个筛选维度与四个核心指标，粘贴当期数据。
- 实际体验：这类需求最匹配技能的默认布局——KPI 卡片放关键数字、堆叠柱状图看产品线组成、混合图看「量」与「完成率」。上手难度很低，只要需求描述清楚，第一版通常可直接拿去汇报。注意：它是快照，复盘会之后数据变了需要重新生成一次。
场景二：客服/支持团队工单分析
- 角色与痛点：客服主管想看清工单量趋势、问题类型分布和积压情况，但缺少数据分析支持。
- 使用方式：输入「创建支持票证仪表板」，说明按时间、按问题类型、按优先级筛选，并用环形图展示类型构成（类别少于 6 个时环形图最清晰）。
- 实际体验：底部可排序的详情表格在这里特别有用——既能看总体趋势，又能点名具体工单。注意事项是字段命名要事先说清楚，否则生成的列名可能不符合团队习惯，需要追加一句修改。
场景三：运营周报与指标监控
- 角色与痛点：运营人员每周重复做同一套图表，机械且耗时。
- 使用方式：把固定模板沉淀成一段固定描述，每周替换数据重新生成，文件按「运营周报_第N周」命名。
- 实际体验：重复性工作被压缩成一句话，且可通过「演示模式」「品牌配色」等指令快速对齐汇报风格。注意：如果需求是「每天自动更新的监控看板」，应改为接入 BI 工具，本技能定位是时点快照。
场景四：无数据时先出原型
- 角色与痛点：需求方还没拿到真实数据，但需要先确认「看板长什么样」。
- 使用方式：只给描述不给数据，技能会生成符合业务模式的样本数据集，并在仪表板中标注。
- 实际体验：这是沟通效率最高的一种用法——先用样本数据把版式、指标、维度定下来，再替换成真实数据（技能会提供替换说明）。注意：对外分享时务必确认样本标识已替换，避免被误读为真实数据。
6. 该技能能为用户带来的价值
- 把「做看板」的时间从小时级压到分钟级：不需要部署环境、不需要写前端、不需要配置数据源，一句描述直接产出成品文件，临时报表和汇报场景的边际成本几乎为零。
- 显著降低技术门槛：理解需求、设计布局、选图表类型、写联动逻辑这些原本需要前端或数据分析能力的环节，被固化进技能的工作流程里，非技术角色也能独立完成。
- 交付物天然易于分发：单文件、自包含、可离线打开、可直接发送文件分享，免去了「对方没装软件/没有账号权限」的沟通成本。
- 产出结构统一、可预期：固定的 HTML 骨架 + 固定的交互模式，意味着下次修改、他人接手、批量生成都不会失控。
- 可量化收益参考：一个中等复杂度的仪表板（4 个 KPI + 2 张图 + 1 张可排序表格 + 3 个联动过滤器），手写前端通常需要数小时，本技能通常在一次需求描述 + 一到两轮微调内完成；若每周重复一次，长期节省的时间相当可观。
- 长期价值：把「描述需求 → 生成 → 微调 → 分享」沉淀为团队的标准动作，报表从「求人做」变成「自己随时做」。
7. 常见问题 FAQ
Q1：这个技能怎么安装？装完怎么确认能用？
在支持技能机制的客户端里，通过技能市场或技能管理入口搜索英文名 data-build-dashboard（或技能ID 13817）添加并启用即可，具体入口、命令与权限要求以官方说明为准。验证方法很简单：新建会话输入「构建一个销售仪表板」，如果能返回一个含 KPI、图表和表格的 HTML 文件，并在浏览器中正常渲染，就说明已生效。
Q2：生成的仪表板需要服务器或安装依赖吗？
不需要。成品是一个完全自包含的 HTML 文件，数据以 JSON 直接嵌入文件内，图表库通过 CDN 引入，因此双击即可在浏览器打开，也可以离线使用。也正因如此，你可以直接把这个文件发给任何人，对方不需要安装任何东西。
Q3：它收费吗？
技能本身的定价、可用额度与是否需要订阅，取决于你使用的平台与技能商店政策，本文不做推测，请以官方说明为准。
Q4：它和专业 BI 工具怎么选？
看需求性质：如果是一次性或周期性的报表、汇报快照、需要发给外部或没有系统账号的人，本技能更快更轻；如果是需要实时刷新、多人协作、权限控制、订阅告警的长期指标体系，应当选择 BI 工具——技能说明里也明确提示，这类仪表板是「某一时点的快照」，实时看板仍建议连接 BI 工具。
Q5：没有真实数据能用吗？数据安全要注意什么？
可以。没有数据时技能会生成符合描述模式的样本数据集，并在仪表板中标注，同时给出替换真实数据的说明，适合先确认版式再填数据。安全方面要注意：因为所有数据都被嵌入到这个 HTML 文件里，分享文件等于分享数据本身，涉及敏感指标时应控制分发范围，并在对外版本中做脱敏处理。