Communitygithub.com

abworks-dev/ui-without-noise

防止並移除多餘的 UI 複製內容與解釋性元件。在建立或檢視畫面、表單、空狀態、副標題、輔助文字、橫幅、徽章或卡片時使用。保留必要的標籤、約束條件、風險、權限及未知狀態。非一般視覺重新設計。

ui-without-noise 是什麼?

此技能旨在協助開發者與 AI 代理建立更具可用性、無多餘雜訊的介面。核心原則是讓介面元件本身承擔解釋角色,而非依賴非必要的輔助文字或裝飾性 UI 元素。它特別強調在建立新畫面或檢視既有畫面時,應先移除自動產生的副標題、說明段落、幫助卡片等「解釋性家具」,除非能證明其對使用者理解、決策或風險評估有具體貢獻。此技能支援 Claude Code、Cursor 等 AI 代理,以 SKILL.md 檔案形式提供明確的生成與審查指引,涵蓋從產生程式碼到交付前審查的完整流程。運作方式包括八條生成準則與一個篩選結果框架(保留、改寫、合併、刪除、移動),並提供具體的範例對照表,幫助使用者判斷每個 UI 字串的去留,同時強調保留必要的存取性資訊與安全狀態。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/abworks-dev/ui-without-noise/tree/HEAD/skills/ui-without-noise

在你喜歡的 AI 中提問

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

說明文件

UI without noise

建立一個人們可使用的介面,而不是介面的旁白。 預設使用控制項、其名稱、相關物件與必要狀態。僅在支援性文字能改變使用者的理解、決策、下一步行動或風險評估時,才加入該文字。

生成時

  1. 不要從解釋性家具開始。 不要自動為每個區塊添加副標題、介紹段落、幫助卡片、橫幅、眉題、徽章或圖示。僅在滿足具體使用者需求時才添加,而不是為了填補空間或讓頁面看起來完整。
  2. 讓介面自行解釋。 優先使用具體的標籤、熟悉的動作動詞、分組與位置安排。「建立工作區」不需要「點擊下方以建立工作區」。如果標籤不清楚,先修正標籤,而不是添加段落說明。
  3. 不要敘述實作細節。 架構、元件選擇、通用信任免責聲明及開發者進度報告,並非預設的產品文案。僅在技術事實影響隱私、範圍、復原或使用者下一個決策時,才保留此類資訊。
  4. 每個事實只在其有用的位置出現一次。 一個標題、徽章、句子與橫幅不應在相同範圍內重複相同的事實。保留有目的的重复,例如與欄位關聯的錯誤摘要,或緊鄰重要的後果動作旁的警告。不要跨物件、跨請求或跨工作區合併狀態。
  5. 同時移除空的包裝容器。 當刪除冗餘的複製內容時,一併移除其已無用處的卡片、警告、圖示、分隔線或預留空間。不要用裝飾性徽章或一排圖示取代一個段落。不要將不必要的複製內容隱藏在工具提示、摺疊區塊、極小字型或低對比度中。
  6. 保留安全操作所需的資訊。 保留相關且通常可見的欄位標籤;實際的格式/長度/必填約束;可操作的錯誤訊息;有意義的載入中、未儲存、不可用、權限及未知狀態;以及危險動作的範圍與後果。「未知」不是「空」、「成功」或「失敗」。絕不暗示某個不可用的功能可正常運作。
  7. 讓必要資訊可讀。 重要的狀態與停用動作的原因,必須在其範圍附近可見,而非僅供螢幕閱讀器或僅在懸停時顯示。保留無障礙名稱、描述、即時區域的緊急程度、鍵盤操作及窄螢幕的可讀性。簡潔永遠不能凌駕於無障礙之上。
  8. 不要意外地減少產品功能。 保留功能、資料、動作、確認、授權及請求/重試行為。不要刪除不明確的業務或安全需求:請將具體的模糊之處標記給負責人處理。

交付修改後的畫面之前

儘可能檢視實際渲染的畫面,而不只是單獨的字串。 針對每個支援性字串及其容器,選擇以下一個結果:

  • 保留: 它增加了必要的事實、區別、約束、後果或下一步。
  • 改寫: 事實是必要的,但措辭模糊、重複或不必要地冗長。
  • 合併: 它在相同範圍內重複了相同的事實;保留有用的位置與關聯性。
  • 刪除: 介面已傳達該資訊,且未失去任何必要意義;移除空的容器。
  • 移動: 只有真正低頻率的幫助內容才應放在明確、可存取的幫助入口後面。不要埋沒常見動作或重要的狀態。

在適用的情況下,檢查修改後範圍的正常、空、錯誤、不可用及未知狀態。如果影響到破壞性操作,請包含確認對話框、鍵盤導航及窄視口檢視。不要聲稱進行了實際未執行的瀏覽器或無障礙驗證。 以 before → after — reason 的格式簡要報告重大變更;並包含一個刻意保留的必要事實。不要向產品中撰寫新的解釋性文章,或發明一個評分系統來證明其簡潔。

範例

修改前修改後 / 決定
工作區 · 在這裡管理和組織你的工作區工作區 — 刪除重複的描述。
點擊下方按鈕建立一個新專案 / 建立專案建立專案 — 保留實際動作。
專案名稱 / 請在此輸入你的專案名稱專案名稱 — 保留標籤;移除顯而易見的指示。
檔案 / 僅支援 CSV,最大 20 MB兩者皆保留 — 第二行是真實的約束條件。
已儲存 + 儲存成功 + 你的變更已儲存一個適當範圍的確認(如果需要);不堆疊同義詞。
儲存結果未知。請先查詢本次結果,不要重複儲存。保留 — 不確定性與安全的下一個步驟很重要。
將永久刪除「旅行計劃」及其中 12 條筆記,無法復原。保留物件、範圍、數量與後果。

邊界

此技能為模型指引,並非 Linter、自動鉤子或合規證明。請遵循專案現有的術語、產品與安全合約。請勿引入競爭性的規格、安裝依賴項、聯絡外部服務或變更全域設定來使用此技能。 範例具有語言敏感性:請保持一致的事有名詞;不要強制使用英文字數、文學性的同義詞變化、通用的字型計數或每一行都有一個圖示。

相關技能