Communitygithub.com

ist-h-i/ui-ux-設計

在使用者介面的設計、實施與審查中,聚焦於使用者有證據支持的目標、視覺層級與完成度、任務可用性、互動語意、後果意識與可復原狀態,作為所選交付流程的輔助補充。

ui-ux-設計 是什麼?

此技能(UI/UX Design Harness)旨在作為一個嚴謹的執行輔助工具,而非取代完整的設計生命週期或視覺設計系統。它專注於將 UI 設計、實施與審查錨定在使用者證據上,避免發明不存在的人物誌或業務優先級。技能要求開發者僅在任務涉及使用者可見介面(如螢幕、表單、導航流程)及互動狀態(焦點、錯誤、載入等)時啟用。 其流程包含九個步驟,從錨定證據、選擇適用原則,到具體化組成、指定行為、區分後果類別、界定失敗邊界,最後與所選工作流程(如 requirement-grill, test-first-verification)整合。輸出格式為結構化的 UX 補充 YAML,包含使用者情境、任務模型、資訊模型、互動模型、韌性與後果等字段,並要求明確標註不相關的決策及其原因。 此技能支援所有開發平台(如 Claude Code, Cursor, Codex),但強調僅在 UI 相關任務中使用,並保持與現有工作流程的責任分工。它不授權單獨的實施或審批,而是作為交付決策記錄中的有界補充。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ist-h-i/agent-spectrum-kernel/tree/HEAD/skills/ui-ux-design

在你喜歡的 AI 中提問

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

說明文件

UI/UX 設計框架

目標

將 UI 設計、實施與審查限制在使用者證據支持的目標、視覺層級與完成度、任務可用性、互動語意、後果意識以及可復原狀態。這是一個執行輔助工具,並非生命週期替代品,也非視覺設計系統。

僅使用最小適用的子集。請勿發明任務未提供證據的人物誌、業務優先級、裝置假設、復原保證或互動行為。

使用時機

僅在選定通用交付工作流程後,且任務變更或審查具有以下一個或多個信號的使用者可見介面時,使用此技能:

  • 螢幕、表單、導航流程、選項或主要動作;
  • 焦點、選取、禁用、載入、成功、錯誤、完成或其他互動狀態;
  • 重大或可逆的使用者動作;
  • 部分資料/渲染失敗、過期或遺失資料、重試或復原行為;
  • 用語影響任務完成或錯誤復原的 UI 語言。

請勿將其用於非 UI 工作、純機器消費的輸出,或作為載入所有 UX 問題的理由。專案特定的品牌、使用者、術語、關鍵流程與業務規則仍屬專案上下文。

流程

  1. 錨定於證據。識別已知的使用者目標、使用情境、首要注意的資訊、動作優先級、完成/下一步動作以及限制條件。為此目的選擇密度與組成:比較工作空間與產品介紹需要不同的處理方式。現有合約是輸入,而非品質上限;在範圍內重新審視觀察到的弱點。僅暫停依賴於重大遺失事實的決策,而不發明人物誌或工作流程。
  2. 選擇適用的原則與模式。僅閱讀 references/principles.md、references/decision-patterns.md 和 references/anti-patterns.md 的相關章節。記錄它們適用的原因。將範例視為證據提示,而非全域禁令。
  3. 使組成具體化。將分組、順序、文字層級與換行、對齊錨點、間距、圖像和控制項關係連接到任務。在添加說明之前,優先採用清晰的結構/狀態;保留所需的意義與可存取的標籤。對於日文,根據其顯示位置和狀態來判斷標籤、目標/結果用語與回饋,而非僅憑文法;在下列發現規則下使用可用的 japanese-expression 能力。
  4. 指定行為。定義適用的預設用途/指示符、狀態語意、即時回饋、過渡、焦點/當前狀態、連續性以及等效的互動路徑。明確標記不相關的問題;請勿憑空製造懸停、拖曳、手勢或動態行為。
  5. 區分後果類別。區分承諾前的取消、可逆變更完成後的復原,以及承諾變更後的補償動作。對於不可逆或重大後果的動作,在承諾前顯示目標、範圍、後果與復原限制。請勿對低風險的可逆動作添加籠統確認。
  6. 界定失敗邊界。當獨立區域失敗時,保持健康、授權、語意有效的區域和使用者輸入的可用性。保持未解決的失敗在受影響區域中可見,使重試範圍化,並驗證重試結果。區分載入、合理為空、遺失、過期、部分和完成狀態。請勿零填充遺失資料,或暴露其前提條件為假的衍生動作。僅在授權、安全性、一致性或依賴語意要求時擴大封鎖範圍。
  7. 優化與驗證實際渲染。在實施期間,在優化控制項之前檢查代表性的全螢幕,然後優化相關元件細節,在獨立審查之前縮小佈局和狀態。分別判斷視覺完成度、任務可用性和功能行為;可運作的點擊、相等的 CSS 值和無溢出並不代表完成度。演練適用的過渡、鍵盤/焦點、實際復原、承諾前取消、保留的輸入和範圍化重試。螢幕截圖支持靜態外觀,但不支持復原或狀態恢復。使用 references/ui-capability-contract.md 中的觀察與交接規則。
  8. 連接可用的 UI 能力。遵循 references/ui-capability-contract.md 以進行僅合約、基於現有合約建置或直接 UI 請求。在此保持原則所有權,從活動環境中解析外部能力擁有者,並保留合約到實施到證據的連結。能力或執行階段缺口僅會停止受影響的相依工作,且絕不視為已完成的審查。
  9. 將限制交回所選工作流程。requirement-grill、grill-design、controlled-implementation、test-first-verification、審查關卡和最終合併關卡保留其責任。此補充僅限縮 UI 決策;它本身不授權實施或審批。

輸出

在當前任務的決策記錄中發出一個有界補充。對於局部調整,僅記錄變更的決策和受影響的證據;無需新的 JSON 合約或填寫範本。省略不相關的欄位或使用 not_applicable: <原因>;切勿投機地填寫它們。

UX 補充:
  user_context:
    user_goal:
    usage_context:
    known_constraints:
    capability_or_environment_considerations:
  task_model:
    page_or_flow_goal:
    primary_action:
    completion_state:
    next_action:
  information_model:
    required_information:
    secondary_information:
    omit:
    language_required_for_clarity:
  interaction_model:
    affordances_and_signifiers:
    state_semantics:
    action_feedback:
    transition_behavior:
    consistency_expectations:
    direct_manipulation:
    equivalent_interaction_paths:
  inclusion_constraints:
    single_cue_dependencies_to_avoid:
    error_prevention:
    recovery_paths:
    input_and_effort_constraints:
  resilience_and_consequences:
    action_reversibility_and_limits:
    pre_commit_consequences:
    failure_boundaries_and_dependencies:
    safe_remaining_content_and_actions:
    partial_failure_and_freshness_feedback:
    scoped_retry_and_recovery_refs:
    blocking_conditions:
  applicable_patterns:
  anti_patterns:
  implementation_constraints:
  verification_scenarios:
  stop_conditions:

每個驗證情境命名所檢查的狀態和可觀察的關係。對於互動,添加動作/輸入、預期的可見和底層狀態,以及適用的復原/連續結果。將設計決策保留在現有的資訊模型和實施限制中,而不是建立另一個架構。

退出條件

  • 此補充僅因當前證據包含 UI 信號而連接。
  • 使用者、產品、品牌和業務假設已被溯源或標記為未知。
  • 主要任務和下一步動作在不移除必要語意的情況下更加清晰。
  • 對於已渲染的 UI 判斷,組合和元件完成度具有與功能檢查不同的渲染證據;僅合約的工作指定觀察標準,而不聲稱實際螢幕核准。通過合約並不能排除觀察到的粗糙點。
  • 動態聲明具有互動/狀態證據要求,而非僅螢幕截圖證明。
  • 在適用時區分可逆、不可逆、部分失敗和基礎封鎖行為。
  • 在獨立失敗和重試過程中,保持健康狀態和使用者輸入。
  • 通用工作流程和最終審查權限保持不變。

相關技能