distill

概覽

什麼是 distill？

distill 是一項專注於將使用者介面簡化至核心元素的 UI 設計技能。透過移除不必要的複雜度、視覺雜訊和冗餘功能，distill 協助打造乾淨、有力且以使用者為中心的設計。當你需要簡化、清理、降低干擾或讓介面更直覺且視覺吸引時，這項技能特別有用。

誰適合使用 distill？

• 追求極簡且有效介面的 UI/UX 設計師
• 希望提升可用性與清晰度的開發者
• 想要減少功能膨脹並聚焦核心價值的產品團隊

解決的問題

• 過於複雜的版面配置
• 過度裝飾造成的視覺雜訊
• 資訊過載
• 混亂的階層與導覽

使用方法

安裝步驟

1. 使用 Agent Skills CLI 安裝 distill：

   npx skills add https://github.com/pbakaus/impeccable --skill distill
   

2. 首先查看 SKILL.md 檔案，了解工作流程與指引。
3. 若有需要，也可參考 README.md、AGENTS.md 和 metadata.json 以取得完整背景資訊。

工作流程概述

• 必要準備：
  • 呼叫 /frontend-design 以收集設計原則與背景資訊。
  • 若無設計背景，請先執行 /teach-impeccable。
• 評估現況：
  • 找出複雜來源：元素過多、變化過度、資訊過載、視覺雜訊、階層混亂、功能膨脹。
  • 明確主要使用者目標，判斷何者為必要。
• 規劃簡化：
  • 決定要移除、隱藏或合併的部分。
  • 聚焦於帶來 80% 價值的 20% 功能。
• 應用 distill：
  • 移除不必要的 UI 元素與樣式。
  • 確保階層清晰，設計聚焦。

檔案結構

• 從 SKILL.md 開始，依步驟指引操作。
• 探索其他支援檔案與資料夾，取得更多背景與資源。

常見問題

distill 適用於所有 UI 專案嗎？

distill 最適合用於目標為簡化與清晰化介面的專案。對於功能極為豐富且複雜度必須存在的應用，可能不太適合。

安裝後應該先查看什麼？

建議先閱讀 SKILL.md，其中包含主要工作流程與準備步驟。也可利用檔案標籤瀏覽其他參考資料與腳本。

distill 如何處理缺乏設計背景的情況？

若缺少設計背景，distill 會要求先執行 /teach-impeccable 或使用 AskUserQuestion 工具，釐清使用者目標後再繼續。

distill 可以針對不同的程式庫自訂嗎？

可以，請依照你的工具、程式庫結構與運作限制調整 distill 工作流程。此技能提供彈性框架以簡化 UI。