前言¶
做數據看板時，常見做法是各自寫 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 安裝文檔）：
| 環境 | 目錄 |
|---|---|
| Cursor | ~/.cursor/skills/ |
| Claude Code | ~/.claude/skills/ |
| Codex | ~/.codex/skills/ 或項目下 .agents/skills/ |
| Windsurf | ~/.codeium/windsurf/skills/ 或 .windsurf/skills/ |
也可將自然語言交給 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。
