Neteon · Operational Intelligence · External Review Kit

幫你的 BI 版面,請一組 外部設計專家

為 Neteon 這套「人+AI Agent 共用」的 B2B 商業智慧後台,精選 GitHub 上最適合做設計審查(design review / audit)的 Agent Skills, 再附上一段可直接貼進 Claude Code 的 Prompt:找出可優化處,並提出值得新增的設計與功能。

Prepared forNeteon Technologies
ScopeBI Dashboard · Design Audit
Date2026-06-26
Run inClaude Code

01 — 任務定義 / The brief

用「外部專家」的眼睛,看一個雙讀者的 BI 後台

這套後台有兩種讀者:Neteon 的(經營層、業務、營運)與會讀取/查詢/操作同一份資料的 AI Agent。 好的審查要同時照顧兩者——人這邊看資訊階層、圖表正確性、可掃讀性與無障礙;Agent 這邊看結構化資料、語意標記、指標定義是否唯一、操作是否可被定址。

下面把工作拆成三步:先挑出 GitHub 上最適合做 BI 版面審查的 Agent Skills(列表+分工), 再給一條分層審查的流程,最後是一段可直接使用的 Claude Code Master Prompt, 產出一份你可以打開檢視的 HTML 報告。

為什麼用 Skills 而不只是丟一句話

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-reviewdesign-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-auditwcag-accessibility-auditux-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 各跑一趟,再合成一份報告

每一層處理不同問題,順序刻意安排:先建立脈絡與基準,再逐層深入,最後收斂成可執行的清單。

  1. 建立脈絡與設計系統 讀入 BI 程式碼與既有設計系統記憶(interface-design 的 system.md、PRODUCT.md / tokens)。把它當成一致性檢查的「真相來源」。
  2. 工藝與資訊階層 interface-design design-review/impeccable critique(Product register)。看最該被看見的指標是否真的贏得視線。
  3. 量化審查(取得基準分數) Design Auditor → 產出 /100 與 19 類子分數。這個數字就是你之後逐版本回歸的基準。
  4. 可用性與無障礙 mastepanoski 的 Nielsen 啟發式 + WCAG 2.2 AA 稽核;含圖表鍵盤操作與螢幕報讀。
  5. 資料視覺化正確性 data-visualization 逐張檢查 KPI 與圖表:圖型是否選對、座標軸是否誠實、是否只靠顏色、密度與去蕪。
  6. 合成為一份報告 把以上彙整成單一 HTML:依嚴重度分組的問題、優化待辦(Impact × Effort),以及值得新增的設計與功能。

04 — 安裝 / Install

把核心 skill 裝進 Claude Code

在 BI 專案根目錄執行。多數 skill 走 npx skills 或 plugin marketplace;確切的 skill 名稱可用 --list 確認。

install.sh — 核心五件
# 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。

master-prompt.md
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 個新功能點子。

quick-pass.md
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 步)

  1. 依第 4 節安裝建議的 skill,並在專案內跑一次 /impeccable init
  2. 在 BI 專案根目錄開啟 Claude Code,貼上 Master Prompt,替換 [指向你的 BI 程式碼路徑或網址]
  3. 讓它依序跑完五個 skill,產出 HTML 審查報告(含問題、優化待辦、新功能建議)。
  4. 把 Auditor 的 /100 分數記下來,作為下一版的回歸基準;想快速複查就用 Quick Pass。

06 — 注意事項 / Notes

兩個別忽略的點

① Agent 讀者要當一級需求。因為這套後台同時被 AI Agent 使用,審查時別只看人眼版面—— 要一併檢查資料是否有結構化/語意化出口、每個指標是否只有一個權威定義、操作是否可被代理定址。 Master Prompt 已把這一塊獨立列出。

② Skill 生態有資安風險。第三方 skill 可能夾帶可執行 script。安裝前先讀過內容、優先選官方/高星且活躍維護者, 並限制其存取範圍。把 Impeccable 的 npx impeccable detect 接進 CI,也能在合併前先擋掉明顯的設計劣化。