Community影像github.com

julien-bloch/ux-review

獨立批判性審查、稽核與測試現有網站、應用程式、畫面、螢幕截圖、HTML 模型、原型或前端實作,用於 UI 或 UX 審查、可用性問題、互動錯誤、視覺層次與佈局稽核、無障礙與響應式檢查、優先化建議及設計版本比較。

ux-review 是什麼?

此技能(julien-bloch/ux-review)專為 AI 代理設計,旨在對現有網站、應用程式、螢幕截圖或 HTML 模型進行獨立且基於證據的 UX/UI 審查。它幫助開發者系統性地找出阻礙使用者達成目標的關鍵障礙,而非僅止於風格偏好上的差異。技能支援多種審查模式,包括靜態設計、原始碼檢查、實際應用測試與版本比較,並會根據模式嚴格區分「可見證據」、「瀏覽器驗證行為」、「推測風險」與「未知事項」,避免產生虛假的使用者研究結果。審查工作流程從建立任務場景開始,逐步收集可驗證的證據、評估使用者體驗的各個面向(如任務清晰度、導覽、可掃描性、無障礙性等),最後以明確的優先級與具體的修復建議完成報告。此技能可在 Cursor、Claude Code 等支援 AI 代理的工具中使用,特別適合在 UI 建置工作流程前進行獨立稽核,或作為開發迭代中的品質把關環節。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/julien-bloch/simple-agent-skills/tree/HEAD/skills/ux-review

Installed? Explore more 影像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

UX 審查

目標

找出使用者與其預期結果之間的重大障礙,而非僅是偏離風格偏好的問題。提供基於證據、優先排序且可實作的變更。保留專案的優勢,承認取捨,並避免編造使用者研究或互動測試的結果。

審查模式

  • 螢幕截圖 / 靜態設計: 僅檢查可見的內容。將可能的互動風險標記為假設;不要聲稱已點擊過控制項、檢查過鍵盤存取或看過隱藏狀態。
  • HTML / 原始碼: 若可用,審查渲染後的 UI,並檢查相關的語意、樣式與事件處理。僅憑原始碼檢查無法證明瀏覽器中的實際行為。
  • 實際運作中的應用程式: 若瀏覽器自動化或電腦使用工具可用,執行代表性的任務並擷取特定視口的證據。不要假設工具一定存在。
  • 比較 / 回歸測試: 針對前後版本使用相同的任務、視口與證據標準。識別真正的改進與新的回歸問題。
  • 要求修正: 在提交報告後,若編輯工具可用,則執行範圍限縮的修復並重新驗證。若使用者僅要求評論,則不要修改任何檔案。

工作流程

  1. 建立情境。 識別目標使用者、任務、畫面角色(概覽/聚焦/執行/操作)、平台、限制條件以及任何已知的成功指標。若未知,則說明任務假設,而非編造產品研究。
  2. 收集可驗證的證據。 檢查提供的圖像、模型、應用程式或程式碼。若可行且與請求相稱,測試主要流程、開啟選單、操作鍵盤控制項,並檢查狹窄/行動裝置與寬版視口。請參閱 browser-review.md。
  3. 在使用者體驗成果之前先進行審查。 檢查:任務清晰度;導覽與路徑指引;可掃描性與層級;資料收集與揭露模式;行動反饋與復原;內容清晰度與信任度;響應式行為;無障礙性;視覺一致性。使用 review-heuristics.md。不要假設同一模式適用於所有任務。
  4. 區分證據與推測。 標記發現:V 可在提供的工件中可見,T 在實際 UI 中親自測試過,C 在程式碼中驗證過但未執行,H 合理的假設,U 未知/需要測量。如實報告觀察到的內容。切勿將模型模擬稱為使用者研究。
  5. 優先排序。 標記為重大(阻礙完成、嚴重損害、造成損失)、高(常見/重要任務中的主要摩擦)、中(有意義但不阻礙的損耗)或低(次要的細節調整)。考慮任務影響、可能的暴露範圍、可回復性以及證據信心程度;不要製造虛假的數值確定性。
  6. 建議可實作的修復。 對於每個重要發現,應包含:位置、證據、重要性說明、具體修改方式以及驗證步驟。優先提供 3-7 個高價值發現;只有在必要時才提供更多。明確保留良好的選擇,並在存在真正的取捨時提供替代方案。
  7. 完成循環。 若要求編輯,執行針對性的變更,重新執行受影響的檢查,並報告剩餘限制。若需要研究,提出一個小型但真實的使用者任務或實驗,而非猜測偏好。請參閱 reporting-and-evaluation.md。

防護措施

  • 不要將評論轉變為未經請求的品牌重塑或重建;除非造成具體問題,否則保留應用程式的身份與現有功能。
  • 不要不加區別地獎勵稀疏的畫面。根據掃描、比較與決策需求來評估資訊密度。
  • 不要將視覺品味歸類為可用性缺陷。將主觀偏好單獨標記。
  • 不要僅僅根據靜態螢幕截圖就聲稱選單已損壞;區分外觀不美觀與經過測試的內容被截斷或無法存取。
  • 不要使用如「改善間距」等通用發現,而應附上位置、後果與建議的變更。
  • 未經實測,不要斷言某設計會提高轉換率或滿意度。
  • 不要混淆啟發式審查、自動化檢查與實際觀察真人:這三者提供不同類型的證據。
  • 當來源資料、螢幕截圖或程式碼不足時,應說明限制並提供下一項具體的測試。

預設報告

  1. 裁決: 一段文字,說明設計對所述任務的適用程度;包括哪些方面運作良好。
  2. 優先發現: 按嚴重程度與使用者影響排序;每個發現遵循 位置 -> 證據標籤 -> 後果 -> 修復 -> 驗證 的格式。
  3. 保留事項: 重要的優勢,以免意外造成回歸。
  4. 未知事項 / 測試: 將不確定的產品決策與視覺上可證明的問題分開。
  5. 若進行了變更: 變更的工件、實際執行的檢查以及未經驗證的狀態。

對於簡單的螢幕截圖評論,請使用簡短形式。不要讓正式的範本掩蓋了有用的答案。

參考資料載入

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

相關技能