distill

概覽

什麼是 distill 技能？

distill 是一款專注於簡化與精簡使用者介面的 UI 設計技能。它協助設計師與前端團隊剔除多餘的複雜性、視覺雜訊與冗餘元素，打造更乾淨、聚焦且易用的設計。如果您的目標是透過減少干擾，使 UI 更直覺且視覺吸引，distill 是理想的工具。

誰適合使用 distill？

• 尋求優化與明確介面的 UI/UX 設計師
• 希望實作更乾淨設計的前端開發者
• 想提升可用性與聚焦度的產品團隊
• 任何負責簡化、精簡或降低數位產品雜訊的人員

distill 解決的問題

• 過於複雜或雜亂的介面
• 混亂的視覺層級結構
• 功能膨脹與資訊過載
• 不一致的設計元素與不必要的裝飾

使用說明

安裝步驟

1. 將 distill 技能加入您的專案：
   在終端機執行以下指令：

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

2. 從文件開始了解：

   • 開啟 SKILL.md 檔案，獲取詳細工作流程與實務指引。
   • 如有，檢視 README.md、AGENTS.md 與 metadata.json 等輔助文件。
   • 探索任何 rules/、resources/、references/ 或 scripts/ 資料夾以取得更多背景資訊。

3. 遵循推薦工作流程：

   • 必備準備： 執行 /frontend-design 指令以收集上下文並檢視設計原則與反模式。若無設計上下文，請先執行 /teach-impeccable。
   • 評估現況： 辨識複雜來源，如元素過多、變化過度或層級不清。
   • 規劃簡化： 確定主要使用者目標，區分必要與可有可無的部分，決定可刪除或合併的項目。
   • 簡化設計： 運用文件中說明的原則，打造更乾淨且聚焦的 UI。

最佳實踐

• 移除元素前，務必釐清主要使用者目標。
• 使用上下文收集協議，確保理解設計目的。
• 根據團隊工具與流程調整工作流程，避免照抄。

常見問題

什麼時候應該使用 distill 技能？

當您需要簡化 UI、減少視覺雜亂，或將使用者體驗聚焦於關鍵內容時，皆適合使用 distill。特別適用於設計審查、重構階段，或用戶要求更清晰介面時。

我應該先查看哪些文件？

建議先從 SKILL.md 開始，了解核心工作流程。其他相關背景可參考 README.md、AGENTS.md 及相關資料夾。

distill 會自動做設計決策嗎？

不會，distill 提供結構化流程與引導問題，協助您做出明智的簡化決策，並非自動化設計工具。

distill 適用於所有專案類型嗎？

distill 最適合追求清晰度、可用性與聚焦的專案。如果您的設計刻意追求複雜或極繁風格，可能不適用。

我在哪裡可以找到更多資源？

請至專案的 Files 標籤頁，查閱支援腳本、參考資料與其他文件。