A
返回 工具
工具2026/05/097 分鐘閱讀

Open Design GitHub Dashboard 技能指南

GitHub 倉庫數據分析儀表板 — Stars、Forks、Contributors、Issues、PRs、近期活動同頂級貢獻者,採用 Soft Paper Workspace 視覺風格。

技能概述

GitHub Dashboard 係一個單屏幕倉庫分析儀表板技能,採用 FlowAI / Soft Paper Workspace 視覺風格:暖色 off-white 畫布、白色圓角面板、固定左側邊欄、緊湊 KPI 卡片、pastel 標籤、密集表格同低對比髮絲線。

支援單一 GitHub 倉庫嘅全方位數據展示:Stars / Forks / Watchers / Open Issues 計數、貢獻者排行、Issues 同 PRs 統計、近期活動流、增長趨勢圖表。可以生成靜態 HTML artifact 或 live artifact(template.html + data.json + artifact.json + provenance.json)。

觸發關鍵字

  • github dashboard、repo dashboard、repository dashboard、github analytics、open source dashboard、github growth
  • 倉庫看板、GitHub 看板

什麼時候用

  • 需要展示某個開源倉庫嘅健康狀況
  • 維護者 / 貢獻者日常數據看板
  • GitHub Stars / Forks / Contributors 增長報告
  • Issue 同 Pull Request 活動分析頁面

使用方法

自然語言觸發

Build a GitHub dashboard for nexu-io/open-design
做一個倉庫增長看板
GitHub analytics dashboard for my repo

工作流程

  1. 解析倉庫範圍 — 從簡報提取 owner/repo,v1 技能限單一倉庫
  2. 收集公開數據 — 透過 GitHub CLI/API 獲取 stars/forks/watchers/issues、contributors(分頁獲取 top N)、issues/PRs(用 Search API)、近期活動
  3. 標準化為儀表板數據 — repository 元信息、metrics、top 5-8 貢獻者、recent activity rows
  4. 套用視覺系統 — 優先用 DESIGN.md tokens,無則用 Soft Paper 默認值(#F2F2F0 畫布、白色卡片、#ECECEA 邊框)
  5. 頁面布局 — 256px 側邊欄 + 主面板、頂部 repo context、KPI strip、2fr/1fr 主網格
  6. 寫入 artifact — 靜態用單文件 index.html,live artifact 用四件套

輸出格式

靜態 artifact(單文件 HTML):

  • 256px 固定側邊欄(桌面端),窄屏堆疊
  • 頂部 Topbar:repo 名稱 + 描述 + 操作按鈕
  • KPI strip:5 個指標卡片(Stars、Forks、Contributors、Issues、PRs)
  • 主網格:2fr/1fr 分佈,左側增長圖表/活動表,右側貢獻者/健康卡片
  • 底部 provenance / last-updated 註記

Live artifact(四件套):

  • template.html — 模板
  • data.json — 標準化數據
  • artifact.json — live artifact 創建輸入
  • provenance.json — 數據來源註記

設計要點

元素 規格
畫布背景 #F2F2F0(Soft Paper 默認)
卡片 白色,16px 圓角,hairline border
側邊欄 256px 固定寬度
KPI 卡片 4-5 個,第一行橫排
表格 13px 正文、11px 大寫列標籤、1px 行分隔線
頭像 圓形,28-32px

視覺規則

  • 只用淺色模式
  • 顏色克制 — 綠色表示健康、琥珀色警示、藍色功能/PR 標籤、紅色僅用於缺陷
  • 數字用等寬lining numerals — 所有計數清晰可讀
  • pastel pills — 狀態標籤用柔和色,唔好用飽和 badge
  • 唔好模仿 GitHub UI — 呢個係自定義運營儀表板,唔係 GitHub 克隆

Self-check 清單

  • 每個指標都有數據來源或 provenance 註記
  • 無保存私有數據或憑證
  • 數據標籤針對具體倉庫,唔係 placeholder
  • 50% 縮放下仍然清晰可讀
  • 每個區域最多一個實心黑色主要操作
  • 狀態標籤同 issue/PR chips 係 pastel pills

實際例子

用戶:「Build a GitHub dashboard for nexu-io/open-design — stars, forks, contributors, issues, PRs, recent activity, and top contributors.」

生成儀表板:

  • 頂部:Open Design 倉庫名稱、描述、語言、license
  • KPI:Stars 1,234 · Forks 89 · Contributors 42 · Issues 23 · PRs 8
  • 主網格:左側 Stars 增長折線圖 + 近期活動列表,右側 Top Contributors 頭像列表

相關技能