前言¶

做数据看板时，常见做法是各自写 CSS、随手选图表，最后页面风格不统一，移动端也容易挤成一团。若希望 Agent 在生成 HTML 看板、可视化报表或运营驾驶舱时，默认遵循同一套冰蓝毛玻璃设计语言，而不是每次从零描述样式，可以把设计规范固化成 Skill。下面介绍 SkillHub 上的「冰蓝毛玻璃风数据看板」（@user_133d6951/dashboard-design，当前版本 1.0.2）。

这是什么¶

这是一份面向 Agent 的设计规范型 Skill（社区来源，分类 design-media），由 SkillHub 用户 user_133d6951（页面标注作者「鹅厂小王」）发布。它不替代后端或 BI 引擎，而是在你让模型「画看板、出报表页、做数据长图或驾驶舱原型」时，注入统一的视觉与布局规则：冰蓝毛玻璃、CSS 设计令牌、背景光晕动画、材质层级、栅格比例、图表选型与尺寸、交互组件形态等。Skill 元数据标明 requires_api_key=false，不依赖外部 API Key。

核心功能¶

以下内容均来自该 Skill 的 SKILL.md 与 SkillHub 页面简介，可按模块理解 Agent 被引导遵守的能力边界。

视觉与材质¶

• 氛围层：多层径向渐变 + 固定附着背景，以及 body::before/after 浮动光球与 22s/26s 呼吸动画。
• 设计令牌：:root 内卡片、边框、三级文字色、主辅色、圆角与阴影等 CSS 变量，要求原样使用。
• 毛玻璃系统：卡片、顶栏、控件、弹出面板分别规定 backdrop-filter: saturate(180%) blur(...) 与不透明度档位。

布局与组件¶

• 页面骨架：sticky 顶栏（logo、视图切换、筛选、导出）、按业务分 section、内容区 max-width: 1280px、页脚标注数据截止时间。
• 栅格：并列双图 1fr 1fr、图+表 3fr 2fr 等比例，断点 1024px / 640px 单列降级。
• 数据展示：指标卡（数值居左、禁止居中）、列表分页（每页 5 行）、图片网格、时间选择器、视图切换器、带搜索的单选对象选择器等交互说明。

图表规范¶

• 技术栈约定：Chart.js 4.x（折线/柱状/环图）、ECharts 5.x（中国地图、热力图），纯 CSS Grid/Flex，单 HTML 自包含。
• 选型表：按数据性质映射到折线、面积、条形、环图、地图、热力格子、漏斗、指标卡、表格等；并列出红线（如禁用 3D、默认不用雷达/词云，类别 ≥6 不用环图等）。
• 尺寸与响应式：折线类 aspect-ratio: 2/1、min-height: 180px；地图 360–400px；Chart.js 需 maintainAspectRatio: false；新增卡片时要检查 gap、响应式 class、指标 class 是否与看板类型一致。

触发方式¶

Skill 描述中声明：在创建数据看板、可视化报表、数据长图、运营驾驶舱等任务时应启用；关键词包括「数据看板」「dashboard」「可视化」「报表」「大屏」「数据页面」「看板原型」「运营驾驶舱」「data visualization」等。

安装与启用¶

安装前确认本机已有 SkillHub CLI（官方安装文档见 skillhub.cn/install/skillhub.md）：

command -v skillhub && skillhub --version

未安装时可按官方脚本安装（完整包或仅 CLI）：

curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash

安装 Skill 时必须用 --dir 指向当前 Agent 的 skills 目录，否则默认落在 ./skills/ 可能不会被识别。坐标与搜索名如下：

skillhub search dashboard-design
skillhub install @user_133d6951/dashboard-design --dir <你的 skills 目录>

或使用命名空间简写（与 skillhub search 输出一致）：

skillhub install dashboard-design --namespace user_133d6951 --dir <你的 skills 目录>

常见客户端 skills 路径（摘自 SkillHub 安装文档）：

也可将自然语言交给 Agent，让其按 skillhub.cn/install/skillhub.md 安装 @user_133d6951/dashboard-design。安装完成后，相关对话中 Agent 读取 SKILL.md 即可按规范生成页面；具体是否自动加载取决于各客户端的 Skill 发现机制。

典型用法¶

Skill 不提供独立 CLI 业务命令，典型用法是在对话中描述看板需求，由 Agent 套用规范输出单页 HTML（内联 CSS/JS）。SkillHub 页面给出的安装提示词为：

请根据 https://skillhub.cn/install/skillhub.md，安装 `@user_133d6951/dashboard-design`。

安装完成后，可按业务直接提需求，例如：

用冰蓝毛玻璃风格做一个运营驾驶舱单页 HTML：顶部 sticky 导航、核心指标卡、近 30 日 UV 折线图、来源占比环图，遵循 dashboard-design Skill 的图表选型与栅格规范。

Agent 应引用 Skill 中的背景 CSS、:root 令牌、.card 毛玻璃样式，并按选型表选用折线图与环图（cutout 70%），而不是随意堆 3D 或雷达图。若你已有 ECharts/Chart.js 数据接口，仍可由 Agent 只生成前端壳层与图表配置骨架，但数据绑定需你在对话中说明字段结构。

适用场景与注意¶

适合谁

• 需要快速产出风格统一的数据看板、可视化报表、数据长图或驾驶舱原型，且接受「单 HTML + Chart.js/ECharts」技术栈的团队或个人。
• 希望把「冰蓝毛玻璃 + 图表红线」写进 Agent 记忆，减少每次重复写设计说明的场景。

限制与注意

• 这是设计规范 Skill，不包含真实数据管道、权限系统或后端 API；对象选择器中的白名单等需在需求里自行说明。
• 规范要求冰蓝渐变背景与半透明卡片，若目标环境禁止 backdrop-filter 或需严格无障碍对比度，需人工裁剪或改写部分样式。
• SkillHub 页面统计（截至资料抓取）：评分 100000，下载 1564，安装 4；版本 1.0.2。安装量与下载量差异可能来自不同统计口径，以 SkillHub 页面为准。
• 规范强调视觉禁忌（如指标禁止居中、地图 hover 不变色等），与常见后台模板习惯可能冲突，生成后建议按「迭代红线」一节做 gap、响应式 class 自查。

结尾¶

「冰蓝毛玻璃风数据看板」把看板从背景光晕、设计令牌到图表选型写进一份可复用的 Agent Skill，适合在 Cursor、Claude Code 等支持 Skill 的环境里，统一数据类页面的产出风格。官方入口：SkillHub 技能页，API 坐标页：https://api.skillhub.cn/user_133d6951/dashboard-design。