Communitygithub.com

felipebasurto/unslop-ui

移除介面與圖表中的 AI 贅詞:眉題標籤、01/02/03 編號、冗餘副標題、解釋顯而易見內容的說明文字、外洩的設計筆記、裝飾性徽章、狀態點、圖表雜亂以及可直接用標籤取代的圖例。套用 /pstack:unslop 規則到所有保留的文字。

unslop-ui 是什麼?

Unslop UI 是一個專為 AI 代理工具(如 Claude Code)設計的技能,旨在清理網頁、應用程式畫面、圖表或儀表板中常見的 AI 生成痕跡。這些痕跡包括眉題標籤、裝飾性編號、過度解釋的副標題、贅述型說明文字、外洩的設計筆記、狀態字串、以及不必要的圖表元素。技能透過套用 /pstack:unslop 規則集中的嚴謹寫作準則,對每段保留的文字進行編輯,同時也包含針對介面文案與裝飾的具體 UI 規則(U1 至 U16)。其執行程序包含使用 Python 腳本進行問題計數、手動閱讀編輯、以及最終報告。此技能特別強調只修改可見文字與裝飾元素,不影響邏輯、數據、色彩或佈局結構,並確保無障礙屬性(如 aria-label)不受影響。它支援 Claude Code 等代理,並透過技能目錄中的腳本自動載入規則。

相容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/felipebasurto/unslop-ui/tree/main/skills/unslop-ui

在你喜歡的 AI 中提問

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

說明文件

Unslop UI

編輯網頁、應用程式畫面、圖表或儀表板的可見文字與裝飾性元素,使其不再帶有 AI 生成的痕跡。好的介面是供人使用的,而非閱讀:只保留使用者操作所需的文字,刪除其餘部分。

目標:$ARGUMENTS(若為空,則使用本對話中修改的檔案,或詢問使用者)。

來自 /pstack:unslop 的寫作規則

將這些規則套用至你保留的每個字串。引用其編號來標註。

!python3 ${CLAUDE_SKILL_DIR}/scripts/load_unslop.py

如果上述行仍顯示為指令而非規則(針對 Claude Code 以外的代理),請從此技能資料夾執行 python3 scripts/load_unslop.py,並套用其輸出。

UI 規則

規則 ID 是穩定的。在報告中請以 U1 至 U16 引用它們。

介面文案

  • U1. 眉題標籤。 標題上方的小型大寫或字距較寬的文字(例如「PASSPORT」、「FEATURES」、「HOW IT WORKS」)。請刪除它。標題本身已清楚說明了該區段的內容。
  • U2. 裝飾性編號。 「01 02 03」、「01 // 功能」、「§」、「//」前綴。請刪除,除非順序是真實的且使用者會遵循(例如結帳步驟、編號安裝指南)。
  • U3. 副標題反射。 每個標題下方都有的副標題,或是 H1 上方的文字行。僅在副標題陳述了標題未提及的事實時才保留一個。例如「分析 / 更深入地了解您的數據」應刪除第二行。
  • U4. 機器人解釋。 那些敘述元素顯而易見功能的說明文字、輔助文字與描述(例如「點擊下方按鈕開始」、「此圖表顯示隨時間變化的收入」)。請刪除。標題與說明文字保持在 5 個詞彙以內。例外:空狀態、錯誤訊息,以及破壞性操作的確認,這些情況可使用完整句子。
  • U5. 外洩的設計筆記。 關於畫面運作方式或設計理由的文字、過長的括號內容、「(即時更新)」、「(由 AI 驅動)」。請刪除,或如果使用者確實會尋找此資訊,則移至工具提示。
  • U6. 狀態字串。 用「·」或「|」串聯的事實(例如「12 個項目·2 分鐘前更新·已同步·v2.1」)。只保留使用者會據以行動的那一個事實。將其他事實放在需要的地方,或直接刪除。
  • U7. 過度標記。 重複了佔位符、圖示、按鈕文字或區段標題的標籤。選擇一種線索即可。例如,帶有放大鏡圖示的搜尋欄位,不需要再有一個「搜尋」標籤或「搜尋...」佔位符(兩者擇一即可)。
  • U8. 斷續與空洞的口號。 「一個。偉大的。事物。」、「與眾不同。」、「更快出貨。少思考。」請改寫成一個能說出名稱與功能的句子,或直接刪除。

裝飾

  • U9. 不反映真實狀態的徽章與膠囊。 為了點綴而添加的「LIVE」、「NEW」、「AI」、「Beta」、「Pro」、「🔥 熱門」。僅在徽章反映應用程式實際追蹤的數據時才保留(例如串流確實正在直播、項目自上次訪問後確實為新的)。
  • U10. 狀態點。 文字旁邊的脈衝或彩色點(animate-pulse,小型 rounded-full 點)。僅在與真實的即時狀態綁定時才保留。
  • U11. 裝飾性表情符號與圖示。 在標題、按鈕、KPI 標籤與列表項目中。請刪除。圖示僅在它是控制項本身(例如帶有 aria-label 的圖示按鈕)或承載了文字未表達的意義時才保留。

圖表與儀表板

  • U12. 命名圖表類型的標題。 「月收入長條圖」應改為「月收入」,或陳述發現:「自三月起收入翻倍」。
  • U13. 閱讀說明。 解釋如何閱讀圖表的副標題或說明文字(例如「每個長條代表一個月」、「懸停查看詳情」)。請刪除。
  • U14. 重複陳述。 每個數量只使用一種編碼方式。長條、長條上的數字、與其等高的網格線以及座標軸刻度都在說同一個值,這就多了三個;一個 KPI 元件同時有箭頭、百分比、「上升」字樣以及下方的句子(「與上月相比,收入增長 12%」)是文字層面的相同錯誤。保留讀者需要的編碼:用座標軸和網格線呈現形狀,用列印數值呈現重要的數字(通常只有最後一個點或最大值)。
  • U15. 與數據競爭的圖表骨架。 繪圖區域周圍的邊框方框、深色或密集的網格線、次要刻度、粗厚的座標軸邊框、3D 效果、標記上的投影與發光、繪圖區域後的背景填充。請刪除它們,或將必須保留的元素(例如少數網格線、一條基準線)設為細的淺灰色線。數據在最上層,標籤在旁邊,骨架最淡化。不要重新設計圖表:保持相同的類型、數據與系列顏色。
  • U16. 可用直接標籤取代的圖例。 需要讀者將顏色與名稱配對的圖例框,而名稱本可以放在線條末端或長條旁邊。請直接標記數據系列,最好附上其最新數值(例如「今年 1,150」),然後移除圖例。當系列超過四個或標記過於擁擠而無法直接標記時,才保留圖例。

對於修改前後的對照,若不確定刪減到何種程度,請參閱 references/examples.md。

防護措施

  • 僅修改可見文字與裝飾元素。不要觸碰邏輯、數據、色彩、間距權杖或佈局結構。唯一的例外是規則 U15 下的圖表骨架,可以將其變細或變淡。
  • 當你刪除一個元素時,也請一併刪除它現在為空的容器,以及僅為它而存在的任何邊距或間距。一個容器若只剩下一個它原本只用來包裹的子元素,也應一併刪除。
  • 永遠不要刪除 aria-label、alt、圖示按鈕上的 title,或是僅供螢幕閱讀器使用的文字。如果刪除的可見文字是唯一的無障礙名稱,請將其移至 aria-label。
  • 來自數據、props、i18n 檔案或 CMS 的文字:請在其來源處(翻譯檔案、測試 fixture)進行編輯或報告,不要在元件中硬編碼替換。
  • 如果被標記的情況有其存在的價值(真實狀態、真實順序、法律文字),請保留它並在報告中說明原因。

程序

複製此檢查清單並追蹤進度:

- [ ] 1. 計數:python3 ${CLAUDE_SKILL_DIR}/scripts/count_tells.py <目標>   (${CLAUDE_SKILL_DIR} 是此檔案所在的資料夾)
- [ ] 2. 閱讀每個可見字串與裝飾元素;用 U1-U16 或 unslop 規則編號標記每個問題
- [ ] 3. 編輯
- [ ] 4. 使用相同指令再次計數
- [ ] 5. 報告

計數器是基於正則表達式的啟發式方法。它會找出候選項目並給出修改前後的數字。它無法偵測到 U3、U4、U5、U7、U8、U12、U13 與 U14,這些需要手動閱讀。對於 U15 與 U16,它僅能查看程式碼形式(陰影、粗厚的座標軸邊框與網格線、開啟的圖例)。它也可能標記到一些合法案例。你在步驟 2 中的閱讀才是真正的檢查。

報告格式:

規則修改前修改後
U1 眉題標籤60
unslop 13 長破折號40

然後逐行列舉你刻意保留的項目,並附上理由。

相關技能