01 — 任務定義 / The brief
用「外部專家」的眼睛,看一個雙讀者的 BI 後台
這套後台有兩種讀者:Neteon 的人(經營層、業務、營運)與會讀取/查詢/操作同一份資料的 AI Agent。 好的審查要同時照顧兩者——人這邊看資訊階層、圖表正確性、可掃讀性與無障礙;Agent 這邊看結構化資料、語意標記、指標定義是否唯一、操作是否可被定址。
下面把工作拆成三步:先挑出 GitHub 上最適合做 BI 版面審查的 Agent Skills(列表+分工), 再給一條分層審查的流程,最後是一段可直接使用的 Claude Code Master Prompt, 產出一份你可以打開檢視的 HTML 報告。
Agent Skill 是把「外部專家的判準」打包成可重複呼叫的 SKILL.md。對 BI 版面而言,這代表每次審查都用同一套設計準則(Nielsen 啟發式、WCAG、Tufte 圖表原則、設計 token 一致性),結果可比較、可追蹤、可逐版本回歸——而不是每次都靠臨場發揮。
02 — 最適合的 Agent Skills / Best fit on GitHub
審查工具包:核心 5 件+支援 3 件
依「對 BI/dashboard 審查的契合度」排序。核心五件組成一條完整的審查鏈;支援三件在修正與查詢階段補位。 星數為查詢當下的概略值,會隨時間變動。
CORE REVIEW STACK · 核心審查鏈
| # | Skill / Repo | 成熟度 | 它做什麼 · 為何適合你的 BI 審查 | 在審查中的角色 |
|---|---|---|---|---|
| 1 | Impeccable pbakaus/impeccable Apache-2.0 | ★~40k | 23 個設計指令(/critique、/audit、/polish)。 內建 “Product” register,專為 app UI/admin/dashboard/工具 調校,以 Linear/Stripe/Notion 為標竿。 44 條確定性偵測規則+ LLM 批判,並可接 CI。 | 外部專家「品味與資訊架構」批判+反 AI-slop;最普及、最受過實戰檢驗,且原生理解 dashboard 語境。 |
| 2 | interface-design Dammyjay93/interface-design MIT | ★~5k | 專為 dashboard/admin/工具 而生(明確排除行銷頁)。提供 design-review 與 design-deslop 審查; 把設計決策存進 .interface-design/system.md,讓跨 session 不再走樣。 | Dashboard 原生的「工藝+階層」審查,並把一致性當成可強制執行的規則。 |
| 3 | Design Auditor Ashutos1997/claude-design-auditor-skill MIT | 專用審查 | 對 UI 評分 /100,涵蓋 19 類規則:字體、WCAG 對比、8pt 間距、層級陰影、圖示、導覽、design token、Nielsen 啟發式、 狀態(載入/空/錯誤/成功)、microcopy、動效。輸入可為 live URL/截圖/程式碼/Figma,且強制輸出評分報告。 | 可量化、可重複的「分數基準」——逐版本追蹤設計健康度的那個數字。 |
| 4 | UX/UI Evaluation suite mastepanoski/claude-skills MIT | 啟發式 | nielsen-heuristics-audit、wcag-accessibility-audit、 ux-audit-rethink(Don Norman 原則)。官方範例即為「評估這個 dashboard 的整體 UX 並提出改善」。 | 可用性與無障礙的「專業評審」視角,補足純美感審查看不到的面向。 |
| 5 | data-visualization NTCoding/claude-skillz MIT | 圖表正確性 | 感知優先序(position > length > angle > area > colour)、選對圖型、座標軸完整性、不可只靠顏色、 依規模選 SVG/Canvas/WebGL、圖表 ARIA 摘要。觸發於 charts/dashboards。 | BI 的核心一層:KPI 與每一張圖的「編碼正確性」審查。 |
↔ 表格可左右滑動
SUPPORTING REFERENCES · 修正與查詢期補位
| # | Skill / Repo | 成熟度 | 它做什麼 · 為何適合 | 在審查中的角色 |
|---|---|---|---|---|
| 6 | Web Interface Guidelines vercel-labs/agent-skills MIT · 官方 Vercel | ★~20k | 把現有 UI 程式碼對照 100+ 條 Web Interface Guidelines 審查,橫跨無障礙、效能與 UX 正確性。重「正確」而非「風格」。 | 業界標準合規 pass,與品味審查互補。 |
| 7 | UI/UX Pro Max nextlevelbuilder/ui-ux-pro-max-skill MIT | 設計知識庫 | 99 條 UX 準則、161 色票、57 組字體配對、25 種圖型,內含 dashboard 專案型與 review 動作,跨 10 種技術棧(React/Vue/Tailwind/shadcn…)。 | 修正期的圖型/色彩/字體「即查即用」參考庫。 |
| 8 | KPI Dashboard Design (emerging) data-visualization-dashboard-design 早期 · 低採用 | 須先評估 | 套用 Edward Tufte 與 Cole Nussbaumer Knaflic 原則,提供標準化 KPI 版面與 wireframe 範式,含 Tableau/Power BI/web 指引。星數低、成熟度待驗證。 | BI 專屬的 KPI 版面與「資料敘事」參考;採用前請先讀過 SKILL.md。 |
↔ 表格可左右滑動
03 — 分層審查 / Recommended layered review
讓五件核心 skill 各跑一趟,再合成一份報告
每一層處理不同問題,順序刻意安排:先建立脈絡與基準,再逐層深入,最後收斂成可執行的清單。
- 建立脈絡與設計系統 讀入 BI 程式碼與既有設計系統記憶(interface-design 的 system.md、PRODUCT.md / tokens)。把它當成一致性檢查的「真相來源」。
- 工藝與資訊階層 interface-design design-review + /impeccable critique(Product register)。看最該被看見的指標是否真的贏得視線。
- 量化審查(取得基準分數) Design Auditor → 產出 /100 與 19 類子分數。這個數字就是你之後逐版本回歸的基準。
- 可用性與無障礙 mastepanoski 的 Nielsen 啟發式 + WCAG 2.2 AA 稽核;含圖表鍵盤操作與螢幕報讀。
- 資料視覺化正確性 data-visualization 逐張檢查 KPI 與圖表:圖型是否選對、座標軸是否誠實、是否只靠顏色、密度與去蕪。
- 合成為一份報告 把以上彙整成單一 HTML:依嚴重度分組的問題、優化待辦(Impact × Effort),以及值得新增的設計與功能。
04 — 安裝 / Install
把核心 skill 裝進 Claude Code
在 BI 專案根目錄執行。多數 skill 走 npx skills 或 plugin marketplace;確切的 skill 名稱可用 --list 確認。
# 1 · Impeccable(含偵測 CLI 與 hooks)
npx impeccable install
# 之後在 Claude Code 內執行: /impeccable init
# 2 · interface-design(dashboard 原生審查+系統記憶)
npx skills add https://github.com/dammyjay93/interface-design --skill interface-design --agent claude-code -g
# 3 · Design Auditor(/100 評分)
npx skills add Ashutos1997/claude-design-auditor-skill
# 4 · UX/UI 評估(先列出再挑要裝的)
npx skills add mastepanoski/claude-skills --list
npx skills add mastepanoski/claude-skills --skill ux-audit-rethink
# 5 · data-visualization(圖表正確性)
npx skills add NTCoding/claude-skillz --list
# 支援:Vercel Web Interface Guidelines
/plugin marketplace add vercel-labs/agent-skills
Skill 是會被代理讀取並可能附帶 script 的指令包。第三方來源請先打開 SKILL.md 與 scripts/ 看過再裝——Snyk 的研究指出,受測 skill 中約 13% 含有重大安全瑕疵,部分甚至會嘗試外洩憑證。優先用官方/高星且活躍維護的 repo,並限制其可存取範圍。
05 — 主提示 / The Claude Code prompt
貼上即用的 Master Prompt
把下面整段貼進 Claude Code,並將 [指向你的 BI 程式碼路徑或網址] 換成實際位置。 它會依序呼叫上面的 skill,產出一份含「問題清單 + 優化待辦 + 新功能建議」的 HTML 報告。 Prompt 以英文撰寫,能更穩定觸發各英文 skill。
ROLE
You are an external review panel auditing Neteon's internal B2B business-intelligence
dashboard (the "Operational Intelligence" layer). It serves TWO audiences: (1) Neteon
humans — execs, sales, ops; and (2) AI agents that read, query, and act on the same
surfaces. Bring three lenses: a senior product designer, a data-visualization specialist
(Tufte / Knaflic school), and a usability professional (Nielsen heuristics, WCAG 2.2 AA).
Be an outside expert, not a cheerleader.
LOAD FIRST
- Read the current dashboard implementation: [指向你的 BI 程式碼路徑或網址]
(e.g. ./apps/bi-dashboard or a live URL).
- If a design-system memory exists (.interface-design/system.md, PRODUCT.md / .impeccable.md,
design tokens), read it and treat it as the source of truth for consistency checks.
SKILLS TO USE — invoke explicitly, in this order
1. interface-design design-review → dashboard-native craft + hierarchy pass.
2. /impeccable critique then /impeccable audit → taste, information architecture,
anti-slop, using the Product register (benchmark vs Linear / Stripe / Notion).
3. claude-design-auditor → scored /100 audit across all 19 categories; record every sub-score.
4. mastepanoski ux-audit-rethink + nielsen-heuristics-audit + wcag-accessibility-audit.
5. data-visualization → evaluate every chart/KPI for encoding correctness and accessibility.
WHAT TO EVALUATE (BI-specific)
- Information hierarchy: does the most decision-relevant metric win the eye? Clear scan path?
KPI-card vs chart vs table balance.
- Metric design: are KPIs framed as decisions (target, delta, trend, context) rather than
bare numbers? Missing comparatives (vs target / prior period / benchmark)?
- Chart correctness: right chart for the question (comparison / composition / distribution /
relationship / trend); truncated axes; pie/donut overuse; chart-junk; redundant encodings;
colourblind-safe palettes; "never colour alone".
- Data density and scannability: data-ink ratio, small-multiples opportunities, whitespace.
- Interaction and flow: filtering, drill-down, cross-filtering, time-range, saved views,
export — discoverable and consistent?
- States: loading / empty / error / no-permission / stale-data for EVERY data surface.
- Trust and freshness: last-updated, source attribution, units, confidence indicators.
- Responsive and theme: behaviour at 1440 / 768 / 375; dark-mode contrast independence.
- Accessibility: WCAG 2.2 AA contrast, keyboard nav of charts/tables, screen-reader chart
summaries (title/desc), focus visibility, reduced motion.
- Consistency: tokens, spacing scale, component reuse, microcopy, terminology.
- AGENT-FACING (Neteon-specific): is the same data exposed in a machine-readable / structured
form (semantic markup, stable selectors, an API or data contract, defined metric definitions)?
Are agent-actionable affordances (filters, queries, actions) addressable and documented?
Does each metric have ONE canonical definition shared by humans and agents?
OUTPUT — produce a single self-contained HTML report, saved to disk, that I can open
A) Executive summary — overall design-health score (use the auditor's /100), the top 5 fixes
for this week, and a one-line verdict on maturity vs best-in-class (Linear / Stripe /
Datadog-grade).
B) Findings table — every issue with: ID, area, severity (Blocker / High / Medium / Low),
evidence (component/route + what is wrong), the principle it violates, and a concrete fix.
Group by severity.
C) Per-category scorecard — the 19 sub-scores with one-line rationale each, so we can track
this number release-over-release.
D) Chart-by-chart review — for each chart/KPI: current encoding, is it the right one, and the
recommended change.
E) Optimization backlog — prioritized (Impact × Effort) list of refinements to existing screens.
F) NEW design and feature suggestions — net-new capabilities that would make this dashboard
best-in-class for an agent-collaborative industrial-IoT BI tool (e.g. a metric-definition
layer, drill-to-detail, anomaly/alert surfacing, saved/shared views, narrative "explain this
change" summaries, a command palette, agent-readable data contracts). For each: what it is,
why it matters for Neteon, and a rough build sketch.
G) Quick-win patch set — for the top 3 Blocker/High items, propose the actual code edits
(before / after).
CONSTRAINTS
- Be specific and evidence-based: cite the component / route / line, not vague principles.
- Flag confidence where you cannot directly verify (e.g. you only have static code, no running
instance).
- Do NOT propose a redesign that fights the existing design system — extend it. If the system
itself is the problem, say so explicitly and propose the smallest coherent change.
- Keep Neteon's context in mind: B2B industrial networking / IIoT, technical audience, dense
operational data. "Earned familiarity" (Linear / Stripe-grade) is the bar, not marketing flash.
Quick Pass — 只想快速跑一次
需要一個 5 分鐘版本時用這段:只要分數、前 10 大問題與 5 個新功能點子。
Use the claude-design-auditor and /impeccable critique skills on
[指向你的 BI 程式碼路徑或網址].
Give me: (1) a /100 design-health score with the per-category sub-scores;
(2) the top 10 issues ranked by severity, each with ONE concrete fix;
(3) 5 net-new features that would move this BI dashboard toward Linear / Stripe-grade
for an agent-collaborative industrial-IoT product — note the agent-facing data contract angle.
Output as a single HTML report I can open. Be specific; cite components, not vague advice.
如何使用(4 步)
- 依第 4 節安裝建議的 skill,並在專案內跑一次 /impeccable init。
- 在 BI 專案根目錄開啟 Claude Code,貼上 Master Prompt,替換 [指向你的 BI 程式碼路徑或網址]。
- 讓它依序跑完五個 skill,產出 HTML 審查報告(含問題、優化待辦、新功能建議)。
- 把 Auditor 的 /100 分數記下來,作為下一版的回歸基準;想快速複查就用 Quick Pass。
06 — 注意事項 / Notes
兩個別忽略的點
① Agent 讀者要當一級需求。因為這套後台同時被 AI Agent 使用,審查時別只看人眼版面—— 要一併檢查資料是否有結構化/語意化出口、每個指標是否只有一個權威定義、操作是否可被代理定址。 Master Prompt 已把這一塊獨立列出。
② Skill 生態有資安風險。第三方 skill 可能夾帶可執行 script。安裝前先讀過內容、優先選官方/高星且活躍維護者, 並限制其存取範圍。把 Impeccable 的 npx impeccable detect 接進 CI,也能在合併前先擋掉明顯的設計劣化。