Communitygithub.com

cloud-1104/intent-ui

為後台管理系統編排設計工作流程,並制定或審查業務與元件互動規範。按理解、定義、方案、驗證組織交付物與 AI 自檢,參考 Cloudscape 判斷功能取捨,綜合 WAI-ARIA APG、Carbon、Ant Design、Radix 與 React Aria 規定元件行為,並提供設計評估、WCAG 2.2 AA 驗收與設計系統令牌規範。

intent-ui 是什麼?

此技能專為後台管理系統的設計與開發團隊打造,提供一套從業務目標到互動規範的完整方法論。它能引導 AI 或設計師遵循「理解、定義、方案、驗證」的流程,系統化地產出功能矩陣、互動契約與驗收場景。技能支援多種工作模式,包括制定通用規範、設計具體模組、審查現有後台或提煉參考風格(如 NextLabs、LarkAgentX)。其核心在於將用戶任務置於頁面與元件之前,並透過 Cloudscape、WAI-ARIA APG 等業界標準來判斷功能取捨與元件行為。針對 AI 生成介面,它內建了生成前自校準與失敗模式防護機制,確保輸出的設計具備狀態完備性與可驗證性。此外,技能也涵蓋設計評估方法、無障礙驗收(WCAG 2.2 AA)以及設計系統令牌規範的制定,為團隊提供從規劃到交付的完整支援,特別適用於流程規劃、功能查漏、元件行為設計及互動評審等場景。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/cloud-1104/intent-ui/tree/HEAD/skills/intent-ui

在你喜歡的 AI 中提問

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

說明文件

知行互動規範 Intent UI

把業務目標轉換為有依據的功能取捨、操作規則和可觀察的驗收條件。流程層決定「工作怎樣推進、產出哪些交付物」,方法層約束「AI 怎樣思考與自檢」,業務層決定「需要哪些能力」,元件層決定「這些能力怎樣被理解和操作」。預設用中文,面向產品、設計、前端和測試協作;不綁定框架或要求安裝任何參考專案的元件庫。

核心約束

  • 先確定用戶任務,再決定頁面和元件。資料庫存在某張表,不代表用戶需要該表的增刪改查介面。
  • 區分「所有相關頁面都必須滿足的互動底線」和「滿足業務條件後才必須提供的能力」。條件未知時標記待確認,不擅自歸為可省略。
  • 操作取決於業務物件、當前狀態、使用者權限、關聯依賴和影響範圍。不能只寫一套靜態按鈕清單。
  • 區分業務停用、控制項禁用、唯讀、刪除、歸檔、撤銷和回滾;名稱、結果和恢復方式保持一致。
  • 既說明提供什麼,也說明為何省略、什麼變化會觸發重新評估。使用者要求精簡時仍保留已適用的錯誤恢復與狀態回饋。
  • 參考 Cloudscape 的模式和選擇依據;業務能力矩陣、審批、任務恢復等屬於本 Skill 的後台擴展規則,不冒充 Cloudscape 官方要求。
  • 元件層以原生語義及對應 APG 模式核對鍵盤與焦點,用 Carbon、Ant Design 的場景原則和 Radix、React Aria 的實現經驗補足互動。不把庫的預設值當成所有元件的規範,不宣稱這些專案共享一份統一標準。
  • 不把某產品的按鈕排序、欄位數量、彈窗尺寸或時間閾值變成通用硬指標。尊重已有產品規範;發生衝突時說明取捨及使用者影響。
  • 不因編寫或評審規範而執行真實刪除、停用、審批、匯出或權限變更。僅在使用者要求實現時修改相應程式碼,遵循其授權範圍。

按請求選擇工作方式

使用者意圖做什麼交付規模
制定通用規範建立條件規則和場景範例,不虛構具體業務規範、能力矩陣、驗收範本
設計具體模組從已知流程和資料狀態推導必要能力模組決策表、頁面互動契約、驗收場景
設計或審查後台元件行為明確元件語義、狀態、輸入方式和組合邊界元件選擇理由、行為契約、必要的互動驗收
審查現有後台對照可見頁面、需求或原始碼識別缺口有證據的問題、影響、最小修正及驗收
提煉或應用後台參考風格對照頁面與原始碼,按任務選擇構圖、令牌角色和互動模式可執行的風格約定、適配邊界、驗收點
實現或修復互動在已有架構中實現已確定的範圍程式碼變更、相應驗證、剩餘依賴

規範請求不自動擴展成程式碼改造;評審請求不自動重構整個後台。簡單頁面只輸出必要的決策與規則。

任何設計任務開始時,按 設計工作流程 確定流程深度、階段推進門檻與交付物鏈;由 AI 起草介面、驅動生成工具或多 agent 協作時,先執行 AI 設計思路 的生成前自校準與失敗模式防護。

建立業務上下文

優先讀取使用者提供的需求、流程、截圖、現有頁面和相關原始碼。只檢查與任務有關的材料。區分已觀察到的行為、文件要求和假設;單憑截圖不能斷言後端權限或非同步恢復已經實現。

提取影響決策的最少資訊:

  • 誰在什麼範圍內完成什麼任務;主要入口和完成標誌是什麼。
  • 資料來自使用者維護、外部同步還是系統生成;哪些欄位或記錄可變。
  • 資料經歷哪些業務狀態,哪些狀態轉換有效,誰可以觸發。
  • 操作影響誰、是否可逆、有何關聯依賴,是否存在長任務或多人同時修改。
  • 資料規模、使用頻率、工作設備和已有規範對互動有何約束。

缺少背景時,先給「通用 Web 後台」的可裁剪方案並寫明假設。僅就會改變關鍵決策的缺口提問,繼續處理不受影響的部分;沒有證據時不預設提供永久刪除、越權操作或完整任務中心。

選擇能力

制定或評審功能範圍時讀取 能力判斷。為範圍內的模組建立能力矩陣,每項標為:

  • 基礎必需:該類互動存在,就必須有的底線,例如載入資料時有可辨認的載入和錯誤狀態。
  • 條件必需:明確業務條件成立時必須提供;寫出條件及證據。
  • 可選增強:有收益但不妨礙核心任務,可以排期或省略。
  • 不適用:與當前業務無關或不允許,說明原因。
  • 待確認:證據不足;這是決策狀態,不是假裝已經可以省略。

實現成本高不等於不適用;缺少介面不等於不需要該能力。分別記錄業務必要性和實現前提。

選擇具體規則

按涉及範圍讀取,不預設載入全部參考檔案:

涉及內容讀取
設計階段編排、發散收斂、交付物鏈、設計規格與交接設計工作流程
AI 生成介面、設計上下文降級、失敗模式防護、多 agent 分工AI 設計思路
導覽、工作台、列表、搜尋、篩選、詳情、圖表導覽與資料瀏覽
新增、編輯、校驗、停用啟用、刪除歸檔、批次、匯入匯出操作與表單
載入異常、權限、多租戶、並發、非同步任務、審批發布、通知、無障礙狀態與業務流程
元件選型、狀態語言、鍵盤、焦點、浮層及元件組合元件互動設計語言
啟發式評估、認知走查、無障礙驗收、體驗度量、設計 QA設計評估方法
設計系統治理、design token、元件文件範本、一致性稽核設計系統與令牌規範
提煉或應用 NextLabs、LarkAgentX 等參考風格,高頻工作台、營運控制台及配套展示面工具型介面風格
輸出規範、評審報告、驗收、場景演練交付與檢查
引用 Cloudscape 業務模式Cloudscape 來源與適配邊界
引用 APG、Carbon、Ant Design、Radix 或 React Aria 的元件規則元件來源與差異處理
引用流程模型、評估方法或設計系統來源流程、評估與設計系統來源
引用 NextLabs、LarkAgentX 的案例證據與核驗邊界工具型介面風格來源

每個實際提供的操作寫清:入口和作用物件 → 適用狀態與權限 → 輸入或確認 → 執行中 → 成功結果 → 失敗或結果未知 → 返回位置和恢復途徑。不適用環節可以省略並說明;不為瀏覽詳情強加確認框。

對於有生命週期的物件,給出「狀態 × 操作 × 角色」規則;對於跨步驟任務,說明儲存、離開、恢復、部分完成。流程有分支或狀態較多時用緊湊表格或 Mermaid,單步操作不強行畫圖。

當請求明確涉及具體元件的設計、評審或實現時,讀取元件互動設計語言的相關部分;只做業務功能取捨時不展開整套元件清單。元件外形相似不等於行為相同,特別檢查選單與選擇器、開關與核取方塊、提示與互動浮層、普通表格與資料網格。

交付前檢查

  1. 功能取捨能否追溯到任務或業務規則,是否出現無依據的全套 CRUD、儀表板或批次操作?
  2. 同一操作在列表、詳情、快捷入口和批次入口是否遵循一致條件?
  3. 是否區分空資料、無匹配、載入失敗、權限不足和資料過期?
  4. 是否把請求已受理誤寫為完成,或把逾時誤寫為確定失敗並允許重複提交?
  5. 刪除、停用、發布等操作是否明確影響範圍;提供的恢復能力是否真實存在?
  6. 主流程、失敗、權限或狀態變化、部分成功以及適用的鍵盤流程能否驗收?
  7. 元件語義、焦點、選中和執行中狀態是否一致;巢狀浮層、自訂包裝和不同輸入方式是否破壞既定行為?
  8. 輸出是否宣告所走流程路徑與跳過階段的理由;AI 生成的介面是否附狀態完備性核對結果?

輸出引用時連結到具體模式頁,並區分官方模式與自己的業務建議。無法線上核驗時使用內建摘要,說明參考日期和無法核驗的部分,不聲稱是最新版本。

相關技能